/* ============================================
   HECTIA — Sistema de Diseño Profesional
   Herramienta industrial agrícola de precisión
   Identidad de marca: fondo oscuro #0F1C17, verde-agua #4FBFA8,
   verde oscuro (fondos claros) #0F6E56, blanco hueso #F2F4EF.
   ============================================ */

/* ---- Fuentes locales (offline-first) ---- */
@font-face {
  font-family: 'PlusJakartaSans';
  src: url('../fonts/PlusJakartaSans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PlusJakartaSans';
  src: url('../fonts/PlusJakartaSans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PlusJakartaSans';
  src: url('../fonts/PlusJakartaSans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PlusJakartaSans';
  src: url('../fonts/PlusJakartaSans-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Variables del sistema ---- */
:root {
  /* Paleta de marca HECTIA — fondo oscuro + verde-agua + blanco hueso,
     con acentos funcionales por categoría (Caldo/éxito/error/facturación/
     historial) retocados para convivir con el verde de fondo. */
  --c-bg:          #0F1C17;   /* fondo oscuro (marca) */
  --c-surface-1:   #1A2E23;   /* cards nivel 1 — con salto de luminosidad real vs. el fondo */
  --c-surface-2:   #22392C;   /* cards nivel 2 / inputs */
  --c-surface-3:   #2B4536;   /* hover / selected */
  --c-border:      #24402F;   /* bordes sutiles */
  --c-border-hi:   #34573F;   /* bordes con más contraste */
  --c-amber:       #4FBFA8;   /* verde-agua (color principal de marca) */
  --c-amber-hi:    #6FD0BB;   /* variante más clara para hover */
  --c-amber-glow:  rgba(79, 191, 168, 0.35); /* glow sutil */
  --c-cyan:        #F0BE72;   /* ámbar/naranja — Caldo */
  --c-cyan-dim:    rgba(240, 190, 114, 0.16);
  --c-green:       #6FBF5B;   /* éxito / confirmación — verde hoja */
  --c-green-dim:   rgba(111, 191, 91, 0.14);
  --c-red:         #E2645A;   /* error */
  --c-red-dim:     rgba(226, 100, 90, 0.16);
  --c-text-hi:     #F2F4EF;   /* blanco hueso (marca) */
  --c-text-mid:    #A9BDB3;   /* texto secundario — verde grisáceo */
  --c-text-low:    #7E9389;   /* texto terciario / placeholders */
  --c-rust:        #E29684;   /* acento — facturación (coral) */
  --c-rust-dim:    rgba(226, 150, 132, 0.16);
  --c-stone:       #B8C7BC;   /* acento — historial (verde grisáceo) */
  --c-stone-dim:   rgba(184, 199, 188, 0.16);
  /* Superficie "elevada" — las tarjetas de dato (resumen, últimos trabajos,
     filas de lista) buscan más contraste con el fondo que una tarjeta común
     (ver --c-surface-1): en el tema claro eso es blanco puro; en el tema
     oscuro, blanco puro se vería fuera de lugar, así que se usa un salto de
     luminosidad real en vez de blanco (mismo tono que --c-surface-2). Definir
     esto como variable (en vez de #FFFFFF fijo en cada componente) es lo que
     permite que este mismo lenguaje de tarjetas se use en toda la app sin
     romper el tema oscuro. */
  --c-surface-elevada: #22392C;

  /* Tipografía */
  --font-display: 'PlusJakartaSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'PlusJakartaSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espaciado — radios más cerrados que un template genérico de UI kit:
     buscamos el lenguaje de un instrumento de precisión (John Deere/DJI),
     no el de una app de moda con todo en pastilla redondeada. El corte de
     esquina (--chamfer, ver .chamfer-tr) es la firma que reemplaza al
     redondeo grande en los elementos más destacados de cada pantalla. */
  --r-sm:   4px;
  --r-md:   7px;
  --r-lg:   11px;
  --chamfer: 16px;
  --touch:  52px;

  /* Sombras — sutiles, sin resplandor de color */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.28), 0 1px 1px rgba(0,0,0,0.18);
  /* Sombra "profunda" en dos capas: una ambiente, grande y difusa (simula luz
     rebotada, sin dirección clara) más una de contacto, chica y más oscura
     pegada al borde (simula dónde el elemento realmente toca la superficie
     de abajo) — una sola sombra plana se ve pegada/artificial, dos capas es
     lo que da la sensación de objeto real flotando. */
  --shadow-deep: 0 8px 28px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --glow-amber:  0 0 20px rgba(79,191,168,0.35);

  /* Glow de color de los íconos de acceso rápido del Home (.home-tile__icono,
     ver --tile-glow más abajo en el archivo) — pensado en origen para el
     fondo claro de las tarjetas y confirmado ahí (ver .tema-claro debajo).
     Sobre el fondo oscuro (acá, default) bajar solo la opacidad no alcanzó
     (Jerónimo probándolo en el celular real: se seguía viendo como una
     mancha blancuzca que se mezclaba con la etiqueta de texto debajo del
     ícono). En vez de seguir ajustando el nivel, se saca del todo en tema
     oscuro — el ícono se queda con el brillo interno (inset, ver
     .home-tile__icono) nomás, que sí queda contenido dentro del cuadrado y
     no se derrama sobre el texto. */
  --tile-glow-pulverizacion: transparent;
  --tile-glow-siembra:       transparent;
  --tile-glow-caldo:         transparent;
  --tile-glow-historial:     transparent;

  /* Brillo interno del ícono (inset superior + gloss diagonal ::after, ver
     .home-tile__icono / .home-tile__icono::after). Sacar --tile-glow (arriba)
     NO alcanzó — Jerónimo lo siguió viendo mal en el celular incluso con eso
     ya en transparent, así que el problema real está acá: este brillo blanco
     interno, pensado para leerse como reflejo de luz sobre un ícono de color
     vivo en fondo claro, queda demasiado fuerte y "sucio" sobre el fondo
     oscuro de las tarjetas en tema oscuro. Se baja bastante la intensidad acá
     (no se saca del todo, para no perder la sensación de objeto pulido) en
     vez de en .tema-claro, que mantiene el valor original ya confirmado. */
  --tile-inset-hi: rgba(255,255,255,0.10);
  --tile-gloss:    rgba(255,255,255,0.12);

  /* Elevación — escala numerada, para no seguir inventando sombras sueltas
     cada vez que se agrega un componente nuevo. 0=plano, 1=tarjeta en reposo,
     2=elemento destacado, 3=modal/overlay/bottom nav, float=panel/dropdown
     flotante (mes-selector, buscador). Todas de dos capas (ambiente+contacto). */
  --elev-0: none;
  --elev-1: var(--shadow-card);
  --elev-2: 0 6px 16px rgba(0,0,0,0.32), 0 2px 6px rgba(0,0,0,0.22);
  --elev-3: var(--shadow-deep);
  --elev-float: 0 14px 32px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.22);

  /* Movimiento — duraciones y curvas consistentes en toda la app, para que
     todo lo que se anima "se sienta" de la misma familia en vez de que cada
     pantalla tenga su propio timing improvisado. */
  --dur-rapido:   120ms;  /* feedback inmediato: press de botón/fila */
  --dur-base:     200ms;  /* la mayoría de las transiciones de estado */
  --dur-lento:    340ms;  /* entrada de pantallas/paneles */
  --ease-estandar: cubic-bezier(0.4, 0, 0.2, 1);   /* uso general */
  --ease-salida:   cubic-bezier(0.16, 1, 0.3, 1);  /* elementos que aparecen (deceleran) */
  --ease-rebote:   cubic-bezier(0.34, 1.56, 0.64, 1); /* confirmaciones/toasts, rebote sutil */

  /* Espaciado — escala de 4px. Se usa en componentes compartidos nuevos para
     que el aire entre elementos sea siempre uno de estos valores, no un
     número suelto distinto en cada pantalla. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* Borde de campos de formulario (inputs, selects). En oscuro es el mismo
     --c-border; en claro se redefine más oscuro (ver .tema-claro). */
  --c-input-border: var(--c-border);
}

/* Corte de esquina técnico — firma visual de HECTIA en los elementos más
   destacados (CTA principal del Home, chips de ícono). En vez de redondear
   la esquina como cualquier UI kit genérico, se corta en diagonal: es el
   mismo recurso que usan instrumentos de precisión (paneles DJI, consolas
   John Deere) para que un panel se lea como "pieza fabricada" y no como
   un <div> con border-radius por defecto. */
.chamfer-tr {
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.chamfer-chico {
  --chamfer: 8px;
}

/* Respeta la preferencia de "reducir movimiento" del sistema operativo —
   accesibilidad básica en cualquier sistema de diseño serio. Con esto activado,
   todas las animaciones y transiciones de la app pasan a ser instantáneas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Tema claro (blanco hueso de marca + verde oscuro para fondos claros,
   alto contraste para uso con sol) ---- */
.tema-claro {
  --c-bg:          #F2F4EF;   /* blanco hueso (marca) */
  --c-surface-1:   #E7ECE4;
  --c-surface-2:   #DEE5DA;
  --c-surface-3:   #D3DCCE;
  --c-border:      #DEE5DA;
  --c-border-hi:   #C3D0BD;
  /* --c-border es igual a --c-surface-2 (el fondo de los inputs), así que
     los campos no tenían borde visible (1,0-1,2:1). Este da ≥3:1 contra el
     fondo del input y de la tarjeta, el mínimo para bordes de controles. */
  --c-input-border: #738479;
  --c-amber:       #0F6E56;   /* verde oscuro — versión de marca para fondos claros */
  --c-amber-hi:    #0C5A45;
  --c-amber-glow:  rgba(15,110,86,0.14);
  /* Antes #B4781E: como texto daba 2,9-3,4:1 sobre los fondos claros (bajo
     el mínimo 4,5:1), por ej. "¿Olvidaste tu contraseña?". Este tono da
     4,6-5,9:1 contra --c-bg, --c-surface-1/2 y blanco. */
  --c-cyan:        #8A5A10;
  --c-cyan-dim:    rgba(180,120,30,0.12);
  --c-green:       #3F7A2E;
  --c-green-dim:   rgba(63,122,46,0.12);
  --c-red:         #B23B24;
  --c-red-dim:     rgba(178,59,36,0.12);
  --c-text-hi:     #0F1C17;   /* fondo oscuro de marca, usado como texto sobre blanco hueso */
  --c-text-mid:    #4B5C53;
  /* Antes #7C8B82: daba entre 2.78:1 y 3.23:1 contra los fondos donde se usa
     (pestañas inactivas, badges, títulos de sección) — por debajo del mínimo
     WCAG AA (4.5:1), y particularmente grave bajo sol directo en el campo,
     que es el uso real de esta app. Este tono da >4.5:1 contra los 3 fondos
     de tema claro (--c-bg, --c-surface-1, --c-surface-2). */
  --c-text-low:    #5B6D62;
  --c-rust:        #9C5A38;
  --c-rust-dim:    rgba(156, 90, 56, 0.12);
  --c-stone:       #56655C;
  --c-stone-dim:   rgba(86, 101, 92, 0.10);
  --c-surface-elevada: #FFFFFF;
  --shadow-card:   0 1px 6px rgba(15,28,23,0.08), 0 1px 2px rgba(15,28,23,0.06);
  --shadow-deep:   0 4px 20px rgba(15,28,23,0.12), 0 1px 4px rgba(15,28,23,0.1);
  --glow-amber:    0 0 16px rgba(15,28,23,0.16);
  /* Sin cambios respecto al valor original (confirmado que funciona bien
     sobre el fondo claro de las tarjetas) — se deja explícito acá como
     token en vez de dejarlo fijo en .home-tile__icono--*, mismo criterio
     que el resto de esta sección. */
  --tile-glow-pulverizacion: rgba(240,190,114,0.55);
  --tile-glow-siembra:       rgba(111,191,91,0.55);
  --tile-glow-caldo:         rgba(79,191,168,0.55);
  --tile-glow-historial:     rgba(184,199,188,0.55);
  /* Valores originales del brillo interno — quedan sin cambios acá, el ajuste
     es solo para tema oscuro (ver :root). */
  --tile-inset-hi: rgba(255,255,255,0.3);
  --tile-gloss:    rgba(255,255,255,0.4);
}

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
  /* Mantener presionado (long-press) sobre una tarjeta o cualquier texto de
     la app abría el menú nativo de selección del WebView de Android (el
     mismo que aparece en Chrome: "Copiar/Compartir/Traducir/Buscar en
     Google…") en vez de solo disparar el onclick de la tarjeta — se veía
     como un recuadro negro enorme tapando la pantalla. Esto pasa porque por
     default CUALQUIER texto de una página es seleccionable; acá se
     desactiva en toda la app (long-press ya no selecciona nada, así que no
     tiene sentido abrir un menú de selección) y se vuelve a habilitar
     puntualmente en los campos de texto reales más abajo, donde sí hace
     falta poder seleccionar/copiar/pegar. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Campos de texto reales: acá SÍ hace falta poder seleccionar, copiar y
   pegar como en cualquier input — el reset de arriba los dejaría de otra
   forma sin esa posibilidad. */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

html, body {
  background: var(--c-bg);
  color: var(--c-text-hi);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  min-height: 100vh;
  /* Plus Jakarta Sans junta "fi" en un solo glyph (ligadura tipográfica) que
     recorta el puntito de la "i" — se nota fuerte en palabras como "Perfil".
     Es más lío que prolijidad en una app de gestión, así que se desactivan
     las ligaduras en toda la app. Se pisan las dos formas (font-variant-ligatures
     y font-feature-settings) porque en algunos WebView de Android la primera
     sola no alcanza para apagar la ligadura "liga" del font. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  /* Cada pantalla entra deslizándose 16px desde el costado (pantalla-in). En
     ese instante el contenido quedaba 16px más ancho que la pantalla y el
     WebView de Android "alejaba" la vista para que entrara: el alto de la
     ventana pasaba de 923 a 959 por ~400 ms y la barra inferior fija saltaba
     36px hacia abajo y volvía (se veía como que "se reiniciaba" con cada
     toque). clip recorta ese desborde sin crear un contenedor con scroll. */
  overflow-x: clip;
}

/* En el celular (nativo o navegador angosto) 720px nunca se nota, porque la
   pantalla ya es más angosta que eso. En un navegador de escritorio SÍ se
   nota — la app quedaba como una columna angosta de "celular" flotando en
   medio de una pantalla grande. A partir de una ventana ancha, se le da más
   aire (sin ir a los extremos del navegador, que dejaría líneas de texto
   ilegiblemente largas en formularios y listas pensados para una columna
   angosta). */
@media (min-width: 900px) {
  #app {
    max-width: 1200px;
  }

  /* La marca ya está siempre visible en el sidebar fijo — repetirla en el
     logo chico de cada header de pantalla es ruido en escritorio. El título
     de cada pantalla pasa a leerse como un título de página real. */
  .app-header {
    padding: 22px 28px;
  }
  .app-header__logo {
    display: none;
  }
  .app-header__titulo {
    font-size: 24px;
  }
  /* Ya no hay barra inferior flotante (se oculta en el sidebar fijo) para la
     que reservar espacio abajo de cada pantalla. */
  .app-content {
    padding: 24px 28px 40px;
  }

  /* Listas simples (Clientes, Campos, Lotes, Mis Equipos, Mis Productos,
     Presupuestos) — de una columna larga de filas a una grilla de tarjetas,
     usando el ancho real de una pantalla de escritorio en vez de estirar
     cada fila de punta a punta. */
  .lista-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
  }
  .lista-items .list-item {
    margin-bottom: 0;
  }

  /* "Últimos trabajos" (Home e Historial comparten este componente) — 3
     columnas en vez de 2, con la foto un poco más alta para que la
     proporción de la tarjeta no quede achatada al ensancharse. */
  .trabajos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .trabajo-foto-card__imagen {
    height: 120px;
  }
}

/* ============================================
   HEADER
   ============================================ */
.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  /* Al apuntar a API 36, Android dibuja la app "edge-to-edge" (debajo de la
     barra de estado) sin importar lo que diga el plugin StatusBar — sin
     este padding, este header (sticky, top:0) y por lo tanto TODA la
     pantalla de abajo quedaban corridos hacia arriba, tapados por la hora/
     batería. max() para no agregar espacio de más en dispositivos viejos
     que sí reservaban esa zona ellos mismos. */
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--c-surface-1);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--elev-1);
}
/* Home: el header se funde con la tarjeta hero de abajo, sin barra ni corte.
   Bug corregido: antes esto quedaba fijo en el fondo oscuro de marca
   (#0F1C17) sin importar el tema elegido — como Home fuerza tema claro
   (ver shellHTML claro:true) el header terminaba viéndose oscuro pegado a
   un contenido claro. Pasa a usar las variables de tema, igual que
   .app-header base, para que responda a claro/oscuro como corresponde. */
.app-header--hero {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  box-shadow: none;
}
.app-header--hero .app-header__titulo { color: var(--c-text-hi); }
.app-header--hero .app-header__hamburger span { background: var(--c-text-hi); }
.app-header--hero .app-header__hamburger:active { background: rgba(255,255,255,0.1); }

.app-header__logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.app-header__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.2px;
  color: var(--c-text-hi);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header__back {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--c-text-hi);
  cursor: pointer;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.app-header__back:active { background: var(--c-surface-2); }

/* ============================================
   CONTENIDO PRINCIPAL
   ============================================ */
.app-content {
  flex: 1;
  padding: 16px 14px calc(96px + env(safe-area-inset-bottom));
  overflow-y: auto;
  /* Cada pantalla nueva (y cada vez que una pantalla se vuelve a dibujar
     entera) entra con un fundido + deslizamiento sutil en vez de aparecer de
     golpe. Como setAppContent reemplaza el HTML entero, este elemento es
     siempre un nodo nuevo — la animación se reinicia sola cada vez, sin
     necesidad de tocar el router. */
  animation: pantalla-in var(--dur-lento) var(--ease-estandar);
}
/* Transición por defecto: "avanzar" — la pantalla nueva entra deslizando
   desde la derecha (como en iOS), en vez del fade genérico de antes. Como
   setAppContent reemplaza el HTML entero no hay un panel saliente que animar
   en simultáneo — solo animamos la entrada, igual que ya se hacía.
   Antes usaba --ease-salida (una curva que arranca casi al 100% de
   velocidad y solo frena al final) — se sentía como un corte más que un
   deslizamiento, porque el 90% del movimiento pasaba en el primer tercio
   del tiempo. --ease-estandar acelera y frena de forma más pareja, y la
   distancia se acortó un poco (22px a 16px) para que ese primer instante no
   se sienta como un salto. */
@keyframes pantalla-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}
/* "Volver": misma idea pero en espejo, entra desde la izquierda. La dirección
   la calcula Router (Router._direccionActual) y shellHTML() la vuelca como
   clase — ver navigateAtras()/resolve() en router.js. */
.app-content--atras {
  animation-name: pantalla-in-atras;
}
@keyframes pantalla-in-atras {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}
/* "Detalle": abrir una pantalla con :id dinámico (ver detalle de Historial,
   edición de Lote, etc.) no es un avance lateral sino "abrir algo puntual" —
   se siente mejor con un scale+fade sutil que con un slide. */
.app-content--detalle {
  animation-name: pantalla-in-detalle;
  animation-timing-function: var(--ease-rebote);
}
@keyframes pantalla-in-detalle {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Para re-renders "de mentira" (se actualizó un dato en la misma pantalla,
   no se navegó a ningún lado — ej: elegir otro mes en el resumen del Home)
   se pide saltear esta animación desde JS (ver saltarAnimacionEntrada en
   app.js) para que no se sienta como que la pantalla entera se recarga. */
.app-content--sin-anim,
.app-content--sin-anim * {
  animation: none !important;
}

/* ============================================
   BOTTOM NAV
   ============================================ */
.bottom-nav {
  /* Oculta por defecto: se agrega al <body> apenas carga app.js, antes de
     que el Router resuelva qué pantalla mostrar — sin esto, se veía un
     flash de la barra inferior encima de la pantalla de carga/login al
     abrir la app. La muestra recién updateBottomNav() (router.js) cuando ya
     se sabe que la ruta activa no es splash/auth. */
  display: none;
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 14px;
  right: 14px;
  max-width: 692px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  /* --c-surface-elevada (no --c-surface-1): mismo tono "tarjeta blanca" que
     ya usa el resumen del Home (Home v2) — con el resto del Home más
     brillante, la barra quedaba opaca/de fondo por comparación. */
  background: var(--c-surface-elevada);
  border: 0.5px solid var(--c-border);
  border-radius: 28px;
  padding: 6px;
  z-index: 30;
  box-shadow: var(--elev-3);
}

/* Acompaña el ancho más grande de #app en navegador de escritorio (ver
   media query de #app más arriba) — si no, la barra inferior queda angosta
   y descentrada respecto del contenido de arriba. */
@media (min-width: 900px) {
  .bottom-nav {
    max-width: 1160px;
  }
}

/* Ver app.js (actualizarBottomNavPorTeclado): se agrega mientras el teclado
   está abierto, para que la barra no quede flotando encima del
   teclado tapando lo que aparece pegado al campo activo (ej. el desplegable
   de "Crear cliente"). !important porque updateBottomNav (router.js) pisa
   el display por JS según la ruta — esto tiene que ganarle a eso mientras
   dure el foco, sin importar en qué pantalla estemos. */
.bottom-nav--oculto-teclado {
  display: none !important;
}

.bottom-nav__item {
  /* Ícono arriba + etiqueta fija abajo, siempre visible (antes el texto solo
     aparecía en el botón activo — se sentía "desplegable"). Es el patrón
     estándar de barra inferior (ícono + nombre fijo por sección), así cada
     botón se identifica solo, sin tener que tocarlo primero. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  padding: 6px 2px;
  background: none;
  border: none;
  color: var(--c-text-low);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  border-radius: 16px;
  /* Los 4 botones ocupan siempre el mismo ancho. Antes solo el activo tenía
     flex:1 y le "robaba" espacio a los demás — por eso al cambiar de
     sección los otros íconos se veían aplastarse de golpe. Ahora la barra
     nunca cambia de forma; lo único que cambia es qué celda tiene color
     y etiqueta. */
  flex: 1;
  min-width: 0;
  transition: background var(--dur-base) var(--ease-estandar), color var(--dur-base) var(--ease-estandar);
}
.bottom-nav__item:focus-visible {
  outline: 2px solid var(--c-amber-hi);
  outline-offset: -2px;
}
.bottom-nav__item svg { width: 20px; height: 20px; flex-shrink: 0; }
.bottom-nav__item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1;
}
.bottom-nav__item.activo {
  background: var(--c-amber);
  /* En tema oscuro --c-amber es un verde-agua claro (#4FBFA8): texto blanco
     encima da apenas ~2:1 de contraste (ilegible). En tema claro --c-amber es
     verde oscuro de marca y el texto blanco sí funciona — mismo patrón que
     .btn--exito, invertido. Ver override .tema-claro más abajo. */
  color: #0F1C17;
  /* Mismo glow de marca que ya existe como token (--glow-amber) — para que
     la pestaña activa tenga el mismo "brillo" que los accesos rápidos del
     Home v2, en vez de quedar como una pastilla plana de color sólido. */
  box-shadow: var(--glow-amber);
}
.tema-claro .bottom-nav__item.activo { color: #F2F4EF; }
.bottom-nav__item:active { background: var(--c-surface-2); }
.bottom-nav__item.activo:active { background: var(--c-amber-hi); }

/* ============================================
   HOJA "¿QUÉ QUERÉS CARGAR?" (elegir Pulverización/Siembra)
   Antes se abría desde un botón "+" flotante acá en la barra — ahora la
   abre el botón grande "Nuevo trabajo" del Inicio (home-cta), pero la hoja
   en sí se reutiliza igual.
   ============================================ */
.fab-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-lento) var(--ease-estandar);
}
.fab-sheet-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.fab-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: var(--c-surface-1);
  border-radius: 20px 20px 0 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  /* Antes --dur-base + --ease-salida (200ms, arranca casi a velocidad
     completa) — se sentía como un golpe más que un deslizamiento. Mismo
     dúo duración/curva que el resto de los paneles de la app (drawer,
     cambio de pantalla) para que todo el movimiento de la app se sienta
     de la misma familia. */
  transition: transform var(--dur-lento) var(--ease-estandar);
  box-shadow: var(--elev-float);
}
.fab-sheet.abierta {
  transform: translateY(0);
}
.fab-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-border-hi);
  margin: 4px auto 14px;
}
.fab-sheet__titulo {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-mid);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  text-align: center;
}
/* El catálogo de labores ya no entra siempre en una pantalla sin scroll
   (antes eran solo 2 opciones) — el wrapper limita la altura y deja que el
   resto se vea haciendo scroll adentro de la hoja, en vez de desbordar. */
.fab-sheet__scroll {
  max-height: 62vh;
  overflow-y: auto;
}
.fab-sheet__categoria {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-low);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 14px 2px 8px;
}
.fab-sheet__categoria:first-child { margin-top: 2px; }
.fab-sheet__opcion {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-rapido) var(--ease-estandar);
}
.fab-sheet__opcion:last-child { margin-bottom: 0; }
.fab-sheet__opcion:active { background: var(--c-surface-3); }
.fab-sheet__icono {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fab-sheet__icono svg { width: 22px; height: 22px; }
.fab-sheet__opcion-titulo {
  font-weight: 700;
  font-size: 15px;
  color: var(--c-text-hi);
}
.fab-sheet__opcion-sub {
  font-size: 12px;
  color: var(--c-text-mid);
  margin-top: 2px;
}
.fab-sheet__mas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-amber);
}
.fab-sheet__mas svg { width: 16px; height: 16px; }

/* ============================================
   CARDS — sistema de profundidad
   ============================================ */
.card {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--elev-1);
  transition: box-shadow var(--dur-base) var(--ease-estandar), border-color var(--dur-base) var(--ease-estandar);
  position: relative;
  /* Sin overflow:hidden a propósito: varias tarjetas contienen desplegables
     flotantes o buscadores (.select-flotante / .campo-buscador) cuyo panel
     de opciones se dibuja fuera de la tarjeta (position:absolute) — con
     overflow:hidden ese panel quedaba recortado/tapado por la fila de
     abajo (ej: unidad en Caldo/mezcla de Pulverización). El padding ya
     evita que el contenido normal toque el borde redondeado.
  */
}

/* Línea de acento izquierda en cards de resultado */
.card--resultado {
  text-align: center;
  padding: 16px 14px;
  border-left: 3px solid var(--c-amber);
  background: var(--c-surface-1);
}

.card--resultado-principal {
  text-align: center;
  padding: 20px 14px;
  border: 1px solid rgba(79,191,168,0.45);
  background: var(--c-surface-1);
  box-shadow: var(--shadow-card);
}

.card--verde {
  border-left: 3px solid var(--c-green);
  background: var(--c-green-dim);
  border-color: rgba(111,191,91,0.25);
}

.card--info {
  border-left: 3px solid var(--c-cyan);
  background: var(--c-cyan-dim);
  border-color: rgba(240,190,114,0.25);
}

/* Label y valor en cards de resultado */
.card__label {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-text-mid);
  margin-bottom: 4px;
}

/* Cifras tabulares: todos los montos/cantidades comparten esta regla para que
   los dígitos midan siempre lo mismo (1 y 8 ocupan el mismo ancho) — sin esto
   los números "bailan" al cambiar de valor y las columnas de montos nunca
   quedan alineadas. Plus Jakarta Sans soporta la feature "tnum". */
.stat-card__valor,
.stat-card__valor-multi span,
.card__valor,
.list-item__valor,
.detalle-fila__valor,
.trabajo-card__badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.card__valor {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  color: var(--c-text-hi);
  line-height: 1;
  letter-spacing: -0.5px;
}
.card__valor--principal {
  font-size: 52px;
  /* --c-amber (navy oscuro) es un tono de fondo de botones, no de texto — como
     texto sobre las superficies oscuras de la app queda casi ilegible.
     --c-amber-hi es la variante clara pensada para roles de texto/ícono. */
  color: var(--c-amber-hi);
}
/* Antes varios resultados (Ha/Kg por carga en Caldo/Pulverización/Siembra)
   pisaban .card__valor con un font-size:28px suelto directo en el HTML —
   un cuarto tamaño más, sin relación con los otros tres (38 default, 52
   principal, 24 en .resumen-grid). Un tier con nombre deja mismo look en
   los tres lugares y evita que se siga inventando un número nuevo cada vez. */
.card__valor--mediano { font-size: 28px; }
.card__unidad {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text-mid);
  margin-left: 4px;
}
.card__sub {
  font-size: 12px;
  color: var(--c-text-mid);
  margin-top: 6px;
  letter-spacing: 0.2px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.grid-2:first-child, .grid-3:first-child { margin-top: 0; }

/* Agrupa dos campos lado a lado SOLO en escritorio ancho (ver @media más
   abajo) — en celular queda exactamente igual que hoy, apilado uno debajo
   del otro. Distinto de .grid-2 (siempre 2 columnas, pensado para pares
   de campos cortos tipo Viento/Humedad que entran bien incluso en un
   teléfono) — este es para campos más largos (teléfono, email) que en un
   celular sí necesitan el ancho completo. */
@media (min-width: 900px) {
  .par-desktop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
}
/* Al envolver cada campo en su propio <div> para poder ponerlos lado a lado
   en escritorio, el <label> de cada uno pasa a ser el "primer hijo" de ESE
   div — y label:first-child (arriba) le saca el margen superior asumiendo
   que es el primer campo de toda la tarjeta, cuando en realidad nunca lo es
   (siempre hay un campo antes). Sin esto, en celular (donde .par-desktop se
   ve exactamente igual que antes, apilado) los dos campos quedarían pegados
   sin aire entre ellos. Más específica que label:first-child a propósito,
   para ganarle. */
.par-desktop > div > label:first-child {
  margin-top: 14px;
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-text-hi);
  line-height: 1.2;
  letter-spacing: 0.3px;
}
h1 { font-size: 25px; margin-bottom: 14px; }
h2 { font-size: 19px; margin-bottom: 10px; }
h3 {
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-text-mid);
  /* Antes 20px/10px fijos — se suben a la escala de espaciado (--sp-7 arriba,
     bastante más que el "margin-top:14px" entre dos campos comunes) para que
     un h3 se lea de verdad como "empieza un grupo nuevo" y no como un campo
     más de la lista. Se usa para separar los formularios largos (Pulverización,
     Siembra, Presupuesto, Factura) en bloques con sentido. */
  margin: var(--sp-7) 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
h3:first-child { margin-top: 0; }
h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

p { color: var(--c-text-mid); font-size: 14px; line-height: 1.55; margin-bottom: 8px; }

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--c-text-mid);
  margin-bottom: 6px;
  margin-top: 14px;
}
label:first-child { margin-top: 0; }

/* ============================================
   INPUTS
   ============================================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  min-height: var(--touch);
  padding: 0 14px;
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--c-surface-2);
  border: 1px solid var(--c-input-border);
  border-radius: var(--r-md);
  color: var(--c-text-hi);
  outline: none;
  transition: border-color var(--dur-base) var(--ease-estandar), background var(--dur-base) var(--ease-estandar), box-shadow var(--dur-base) var(--ease-estandar);
  -webkit-appearance: none;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--c-amber);
  background: var(--c-surface-3);
  box-shadow: 0 0 0 3px var(--c-amber-glow);
}

/* Botones, ítems de lista y del drawer solo tenían feedback en :active (al
   soltar el dedo) — sin ningún estilo de foco, quien navega con teclado o
   con un lector de pantalla no puede ver dónde está parado. */
button:focus-visible,
.list-item:focus-visible,
.drawer__item:focus-visible,
.bottom-nav__item:focus-visible,
.acceso-icono:focus-visible,
.filtro-chip:focus-visible {
  outline: 2px solid var(--c-amber-hi);
  outline-offset: 2px;
}

/* input[type=date] tiene un layout interno propio (día/mes/año + ícono nativo del
   calendario) que no respeta -webkit-appearance:none de forma prolija — con esa
   propiedad el ícono termina superpuesto sobre el texto en Android/Chrome.
   Le devolvemos el appearance nativo y le damos su propio espacio para el ícono. */
input[type="date"],
input[type="datetime-local"] {
  -webkit-appearance: auto;
  appearance: auto;
  padding: 0 10px 0 14px;
  color-scheme: dark;
}
.tema-claro input[type="date"],
.tema-claro input[type="datetime-local"] {
  color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.8;
  margin-left: 6px;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A7C67' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
select option { background: var(--c-surface-2); color: var(--c-text-hi); }

input::placeholder, textarea::placeholder { color: var(--c-text-low); }
textarea { min-height: 80px; padding: 12px 14px; resize: vertical; line-height: 1.5; }

.input-con-unidad { display: flex; gap: 8px; }
.input-con-unidad input { flex: 1; }
.input-con-unidad select { flex: 0 0 100px; }
.input-con-unidad .select-flotante { flex: 0 0 110px; margin-bottom: 0; }

/* ============================================
   TARJETAS DE FORMULARIO — agrupar campos relacionados
   ============================================
   Antes los formularios eran una lista larga y plana: título suelto (h3) +
   línea divisoria + campos, todo contra el fondo de la pantalla. Se sentía
   "básico" — sin jerarquía visual entre secciones. Ahora cada sección vive
   dentro de una tarjeta propia (fondo elevado + borde + sombra leve), con su
   título arriba integrado a la tarjeta en vez de flotando aparte. */
.form-card {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--elev-1);
}
.form-card + .form-card { margin-top: 0; }
.form-card__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-text-mid);
  margin: 0 0 14px;
}
.form-card__titulo svg { width: 16px; height: 16px; flex: none; color: var(--c-amber); }
.form-card label:first-child { margin-top: 0; }

/* Ícono a la izquierda dentro del input — mismo alto/paddings que los inputs
   normales, solo se le corre el padding-left para no tapar el ícono. Usa
   el combinador de hijo directo (>), NO descendiente: los buscadores tipo
   .campo-buscador (Cliente en Campo/Lote) combinan esta misma clase
   .input-icon con un <div class="lista-opciones"> anidado adentro, que a su
   vez puede tener sus propios íconos (ej: el "+" del botón "Crear cliente
   'X'"). Con selector descendiente ese ícono, aunque está varios niveles
   más abajo en el DOM, también quedaba agarrado por esta regla y se sacaba
   de flujo con position:absolute, terminando superpuesto arriba del input
   en vez de al lado del texto del botón. */
.input-icon { position: relative; }
.input-icon > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--c-text-mid);
  pointer-events: none;
}
.input-icon input, .input-icon select { padding-left: 40px; }

/* Campo de contraseña con botón de mostrar/ocultar (ojo) a la derecha —
   login, registro y "nueva contraseña". Mismo patrón relative/absolute que
   .input-icon pero del lado derecho, y el botón SÍ es clickeable (al
   revés de los íconos de .input-icon, que son decorativos). */
.campo-password { position: relative; }
.campo-password input { padding-right: 44px; }
.campo-password__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: none;
  color: var(--c-text-mid);
  cursor: pointer;
}
.campo-password__toggle svg { width: 19px; height: 19px; }

/* Selector de hora (Duración del trabajo, Pulverización/Siembra) — 3
   selectFlotanteHTML (hora 1-12, minuto, AM/PM) en vez de input[type=time].
   El reloj nativo varía muchísimo entre teléfonos (rueda 24h según idioma,
   look distinto por marca); con 3 desplegables propios el resultado es
   siempre el mismo y siempre en 12h + AM/PM, sin depender del dispositivo. */
.hora-selector { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.hora-selector .select-flotante { margin-bottom: 0; }
.hora-selector .select-flotante__btn {
  min-height: var(--touch);
  justify-content: center;
  text-align: center;
  font-weight: 700;
  padding: 0 8px;
  gap: 3px;
}
.hora-selector .select-flotante__btn span { flex: none; }
.hora-selector__h, .hora-selector__m { flex: 1.1; }
.hora-selector__h .select-flotante__btn, .hora-selector__m .select-flotante__btn { font-size: 17px; }
.hora-selector__ampm { flex: 1; }
.hora-selector__ampm .select-flotante__btn { font-size: 13px; letter-spacing: 0.3px; }
.hora-selector__separador { flex: 0 0 auto; font-weight: 700; font-size: 17px; color: var(--c-text-mid); }

.input-error { border-color: var(--c-red) !important; }
.mensaje-error {
  color: var(--c-red);
  font-size: 12px;
  font-weight: 600;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin-top: 14px;
}
.checkbox-row:first-child { margin-top: 0; }
.checkbox-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: unset;
  accent-color: var(--c-amber);
  cursor: pointer;
}
.checkbox-row label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-hi);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

/* ============================================
   BOTONES
   ============================================ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch);
  width: 100%;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.1px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  margin-top: 12px;
  transition: transform var(--dur-rapido) var(--ease-estandar), opacity var(--dur-base) var(--ease-estandar), background var(--dur-base) var(--ease-estandar), box-shadow var(--dur-base) var(--ease-estandar);
}
.btn:active { transform: scale(0.97); opacity: 0.9; }
.btn:focus-visible { outline: 2px solid var(--c-amber-hi); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primario {
  background: var(--c-amber);
  /* Mismo motivo que .bottom-nav__item.activo: en tema oscuro --c-amber es
     claro y necesita texto oscuro para contraste; en tema claro es al revés
     (ver override .tema-claro debajo). */
  color: #0F1C17;
  border: 1px solid rgba(255,255,255,0.14); /* borde sutil para que el botón se recorte del fondo */
  /* Brillo superior + sombra de contacto: el botón se lee como una pieza con
     relieve real (control de hardware), no como un rectángulo de color liso. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), var(--elev-1);
}
.tema-claro .btn--primario { color: #F2F4EF; }
/* BUG CRÍTICO encontrado en auditoría final: el override de arriba es un
   selector de ancestro (body.tema-claro), así que pisa el color pensado para
   fondo oscuro en CUALQUIER pantalla marcada .tema-oscuro-forzado (login/
   registro y el paywall) — porque el body real sigue en tema-claro aunque
   esa pantalla puntual se vea oscura. Sin esto, el botón "Crear cuenta" y
   "Empezar prueba gratis" quedan con texto casi blanco sobre el verde-agua
   claro de --c-amber ahí adentro: invisible. Esta regla, más específica,
   devuelve el texto oscuro correcto SOLO dentro de esas pantallas forzadas. */
.tema-claro .tema-oscuro-forzado .btn--primario { color: #0F1C17; }
.btn--primario:active { background: var(--c-amber-hi); }
/* En pantallas con mouse real (PWA de escritorio), un hover con leve
   elevación da la sensación de "responde antes de tocarlo" — en touch puro
   este bloque no aplica nunca, así que no interfiere con el uso normal en celular. */
@media (hover: hover) and (pointer: fine) {
  .btn--primario:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }
  .list-item:hover { border-color: var(--c-border-hi); box-shadow: var(--elev-1); }
  .acceso-icono:hover .acceso-icono__chip { transform: translateY(-2px); }
}

.btn--secundario {
  background: var(--c-surface-2);
  color: var(--c-text-hi);
  border: 1px solid var(--c-border-hi);
}

.btn--exito {
  background: var(--c-green);
  /* En tema claro --c-green es más oscuro (#3F7A2E) — un texto casi negro
     encima queda con poco contraste; en tema oscuro el verde es más claro
     y #0F1C17 sí se lee bien. */
  color: #0F1C17;
}
.tema-claro .btn--exito { color: #F2F4EF; }

.btn--info {
  background: var(--c-surface-2);
  color: var(--c-cyan);
  border: 1px solid rgba(240,190,114,0.3);
}

.btn--peligro {
  background: transparent;
  color: var(--c-red);
  border: 1px solid rgba(226,100,90,0.4);
}

/* Botones de exportar/descargar PDF: chip de ícono a la izquierda (mismo
   lenguaje visual que los accesos rápidos y los ítems de lista) en vez de
   un ícono chico suelto al lado del texto — para que la acción de generar
   un archivo se distinga de un botón de acción común de un vistazo. */
.btn--pdf {
  justify-content: flex-start;
  padding-left: 12px;
  gap: 12px;
}
.btn--pdf__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--c-amber-glow);
  color: var(--c-amber-hi);
}
.btn--pdf__chip svg { width: 18px; height: 18px; }

/* Chip de zona de catálogo ya cargada (Mis Productos) — mismo lenguaje
   visual que .tag--cyan, para distinguirse del botón secundario normal */
.btn--zona-cargada {
  background: var(--c-cyan-dim);
  color: var(--c-cyan);
  border: 1px solid rgba(240,190,114,0.35);
}

.btn--google {
  background: #FFFFFF;
  color: #3C4043;
  border: 1px solid #DADCE0;
}
.btn--google:active { background: #F7F8F8; }
.btn--google svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--chico {
  min-height: 40px;
  font-size: 13px;
  padding: 0 14px;
  margin-top: 0;
}

.btn-fab-row { display: flex; gap: 10px; }
.btn-fab-row .btn { margin-top: 0; }

/* ============================================
   BANNERS DE AVISO
   ============================================ */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  border: 1px solid;
}
.banner--ambar {
  /* Este banner se usa para avisos reales (viento, BPA) que hay que poder leer
     bien al sol — con el fondo translúcido normal (--c-amber-glow) y el texto
     --c-amber-hi el contraste queda muy bajo en tema oscuro. Le damos un
     fondo más opaco y un texto más claro, solo acá. */
  background: rgba(79,191,168,0.28);
  border-color: rgba(79,191,168,0.5);
  color: var(--c-text-hi);
}
.tema-claro .banner--ambar {
  background: var(--c-amber-glow);
  color: var(--c-amber-hi);
}
.banner--info {
  background: var(--c-cyan-dim);
  border-color: rgba(240,190,114,0.25);
  color: var(--c-cyan);
}
.banner--exito {
  background: var(--c-green-dim);
  border-color: rgba(111,191,91,0.25);
  color: var(--c-green);
}
.banner--error {
  background: var(--c-red-dim);
  border-color: rgba(226,100,90,0.25);
  color: var(--c-red);
}
.banner__icono { flex-shrink: 0; line-height: 1.2; }
.banner__icono svg { width: 20px; height: 20px; display: block; }
/* El texto ocupa todo el ancho disponible para que la X quede siempre pegada
   al borde derecho de la barra, sin importar si el mensaje es corto o largo. */
.banner__texto { flex: 1 1 auto; min-width: 0; }
.banner__cerrar {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  padding: 2px;
  margin: -2px -4px -2px 0;
  display: flex;
}
.banner__cerrar:active { opacity: 1; }
.banner__cerrar svg { width: 16px; height: 16px; display: block; }
.banner ul { margin: 4px 0 0; padding-left: 16px; }
.banner li { margin-bottom: 2px; }

/* ============================================
   CARTEL DE ACTUALIZACIÓN (in-app update)
   ============================================ */
/* Flota justo arriba de la barra inferior (que ocupa ~96px de alto, ver el
   padding-bottom de #app más arriba) — a diferencia del toast, este cartel es
   persistente (no se autodestruye), así que no puede taparle la barra de
   navegación a la persona mientras decide cuándo reiniciar. */
.update-banner {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(106px + env(safe-area-inset-bottom));
  max-width: 692px;
  margin: 0 auto;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--r-lg);
  background: var(--c-surface-elevada);
  border: 0.5px solid var(--c-border-hi);
  box-shadow: var(--elev-3);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity var(--dur-base) var(--ease-rebote), transform var(--dur-base) var(--ease-rebote);
  pointer-events: none;
}
.update-banner.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.update-banner__icono {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-amber-glow);
  color: var(--c-amber-hi);
}
.update-banner__icono svg { width: 18px; height: 18px; }
.update-banner__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.update-banner__texto strong {
  font-size: 13px;
  color: var(--c-text-hi);
}
.update-banner__texto span {
  font-size: 11.5px;
  color: var(--c-text-low);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.update-banner__cerrar {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--c-text-low);
  opacity: 0.7;
  cursor: pointer;
  padding: 4px;
  display: flex;
}
.update-banner__cerrar:active { opacity: 1; }
.update-banner__cerrar svg { width: 16px; height: 16px; display: block; }

/* ============================================
   TOASTS
   ============================================ */
.toast-container {
  position: fixed;
  /* env(safe-area-inset-top) suma el alto real de la barra de estado del
     dispositivo (notch, cámara perforada, etc.) — sin esto, al apuntar a
     API 36 Android dibuja el contenido "edge-to-edge" (debajo de la barra
     de estado) y el cartel queda pegado arriba, tapado por la hora/batería. */
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 28px);
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--elev-3);
  animation: toast-in var(--dur-base) var(--ease-rebote);
  pointer-events: auto;
}
/* Salida simétrica a la entrada — antes desaparecía con un simple fundido de
   opacidad puesto por JS con estilos inline; ahora es una clase que se agrega
   antes de sacar el elemento, con la misma curva "familiar" del resto de la app. */
.toast--saliendo {
  animation: toast-out var(--dur-base) var(--ease-estandar) forwards;
}
.toast--exito { background: var(--c-green); color: #0F1C17; }
/* Mismo motivo que .btn--exito: en tema claro --c-green es más oscuro y el
   texto casi negro queda con poco contraste. */
.tema-claro .toast--exito { color: #F2F4EF; }
/* Rojo fijo (no el token --c-red, que en tema oscuro es más claro para
   usarse como texto/borde) — con texto blanco encima necesita un rojo más
   oscuro para tener buen contraste en los dos temas. */
.toast--error { background: #B23B24; color: #fff; }
.toast--info { background: var(--c-surface-3); color: var(--c-text-hi); border: 1px solid var(--c-border-hi); }
/* Variante con botón de acción (ej: "Eliminado — Deshacer") — el texto ocupa
   el espacio disponible y el botón queda pegado a la derecha, sin achicarse. */
.toast--accion { justify-content: space-between; }
.toast__texto { flex: 1; }
.toast__accion {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 0 4px 8px;
  cursor: pointer;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-10px) scale(0.96); }
}

/* ============================================
   SELECTOR DE OPCIÓN CON CHIP
   ============================================ */
.chip-seleccion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-surface-2);
  border: 1px solid var(--c-cyan);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 4px;
  box-shadow: inset 0 0 0 1px rgba(240,190,114,0.1);
}
.chip-seleccion__texto { font-weight: 600; font-size: 15px; color: var(--c-text-hi); }
.chip-seleccion__cambiar {
  background: none;
  border: none;
  color: var(--c-cyan);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
}

/* ============================================
   CHIPS DE CATEGORÍA DE PRODUCTO (Pulverización/Siembra)
   ============================================
   Fila de rubros (Herbicida, Insecticida, Semilla, etc.) que acota el
   catálogo antes de buscar — evita mostrar de entrada un buscador único
   contra cientos de productos mezclados. Tocar un chip activo lo desactiva
   de nuevo (mismo patrón toggle que otros selectores de la app). */
.chips-categoria {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.chip-categoria {
  background: var(--c-surface-2);
  color: var(--c-text-mid);
  border: 1px solid var(--c-border-hi);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip-categoria--activo {
  background: var(--c-cyan-dim);
  border-color: var(--c-cyan);
  color: var(--c-cyan);
}
.chip-categoria:active { filter: brightness(0.95); }

/* ============================================
   BUSCADOR FLOTANTE (ej: Cliente en el alta de Campo)
   ============================================ */
.campo-buscador {
  position: relative;
  margin-bottom: 14px;
}
.campo-buscador input {
  margin-bottom: 0;
}
.lista-opciones {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-hi);
  border-radius: var(--r-md);
  max-height: 240px;
  overflow-y: auto;
  box-shadow: var(--elev-float);
}
.opcion-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-hi);
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 14px;
  cursor: pointer;
}
.opcion-item:last-child { border-bottom: none; }
.opcion-item:hover, .opcion-item:active { background: var(--c-surface-3); }
.opcion-item__sub { font-size: 12px; font-weight: 400; color: var(--c-text-mid); margin-top: 2px; }
.opcion-item--activa { background: var(--c-surface-3); color: var(--c-amber-hi); font-weight: 700; }

/* Opción "Crear X 'nombre'" dentro de un panel de resultados (buscador de
   Cliente en Campo, por ejemplo) — antes tenía el mismo estilo que un
   resultado real, así que a simple vista se mezclaba con la lista y no se
   notaba que era una acción distinta. Color de marca + separador más grueso
   + queda pegada abajo del scroll para que se lea como "otra cosa", no como
   un cliente más. */
.opcion-item--crear {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-amber);
  font-weight: 700;
  background: var(--c-surface-2);
  border-top: 2px solid var(--c-amber);
}
.tema-claro .opcion-item--crear { color: var(--c-amber-hi); border-top-color: var(--c-amber-hi); }
.opcion-item--crear:hover, .opcion-item--crear:active { background: var(--c-amber-glow); }
.opcion-item--crear svg { flex-shrink: 0; }

/* ============================================
   SELECT DESPLEGABLE FLOTANTE (reemplazo del <select> nativo,
   usado en todos los formularios de la app)
   ============================================ */
.select-flotante {
  position: relative;
  margin-bottom: 14px;
}
.select-flotante--disabled { opacity: 0.6; }
.select-flotante__btn {
  width: 100%;
  min-height: var(--touch);
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-input-border);
  border-radius: var(--r-md);
  color: var(--c-text-hi);
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.select-flotante__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-flotante__btn--vacio span { color: var(--c-text-low); }
.select-flotante.abierto .select-flotante__btn {
  border-color: var(--c-amber);
  background: var(--c-surface-3);
  box-shadow: 0 0 0 3px var(--c-amber-glow);
}
.select-flotante__caret {
  font-size: 11px;
  color: var(--c-text-mid);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.select-flotante.abierto .select-flotante__caret { transform: rotate(180deg); }
.select-flotante .lista-opciones { margin-top: 0; }

/* Variante "agregar": botón que reemplaza al selector cuando no hay items
   para elegir (ej: sin drones cargados) — en vez de abrir un panel vacío,
   lleva directo a la pantalla para cargar el primero. */
.select-flotante__btn--agregar {
  margin-bottom: 14px;
  border-style: dashed;
  border-color: var(--c-amber);
  color: var(--c-amber);
  font-weight: 600;
}
.tema-claro .select-flotante__btn--agregar { color: var(--c-amber-hi); border-color: var(--c-amber-hi); }
.select-flotante__btn--agregar:active { background: var(--c-amber-glow); }
.select-flotante__btn--agregar span { display: inline-flex; align-items: center; gap: 8px; }
.select-flotante__btn--agregar svg { flex-shrink: 0; }

/* ============================================
   CALENDARIO FLOTANTE DE MES (resumen del Home)
   ============================================ */
.mes-selector {
  position: relative;
}
.mes-selector__btn {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-mid);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-hi);
  border-radius: 20px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.mes-selector__caret { font-size: 9px; transition: transform var(--dur-rapido) var(--ease-estandar); }
.mes-selector--abierto .mes-selector__caret { transform: rotate(180deg); }
/* El panel siempre está en el DOM (nunca se agrega/saca con JS) — abrir y
   cerrar es pura transición CSS gatillada por la clase --abierto en el
   contenedor. Así, abrir/cerrar el calendario o cambiar de año nunca
   necesita volver a renderizar la pantalla entera. */
.mes-selector__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: 240px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-hi);
  border-radius: var(--r-md);
  padding: 10px;
  box-shadow: var(--elev-float);
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  visibility: hidden;
  pointer-events: none;
  transform-origin: top right;
  transition: opacity var(--dur-rapido) var(--ease-estandar), transform var(--dur-rapido) var(--ease-estandar), visibility 0s linear var(--dur-rapido);
}
.mes-selector--abierto .mes-selector__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-rapido) var(--ease-estandar), transform var(--dur-rapido) var(--ease-estandar);
}
.mes-selector__anio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}
.mes-selector__anio span {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-hi);
}
.mes-selector__anio button {
  background: var(--c-surface-3);
  border: none;
  color: var(--c-text-hi);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.mes-selector__anio button:active { background: var(--c-border-hi); }
.mes-selector__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mes-selector__mes {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  color: var(--c-text-hi);
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 0;
  cursor: pointer;
}
.mes-selector__mes:active { background: var(--c-surface-3); }
.mes-selector__mes--actual { border-color: var(--c-amber); color: var(--c-amber-hi); }
.mes-selector__mes--activo { background: var(--c-amber); border-color: var(--c-amber); color: #0F1C17; }
.tema-claro .mes-selector__mes--activo { color: #F2F4EF; }
.mes-selector__mes--futuro { opacity: 0.45; }

/* ============================================
   LISTA DE ITEMS (historial, CRUD)
   ============================================ */
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--c-surface-elevada);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  margin-bottom: 8px;
  cursor: pointer;
  transition: background var(--dur-rapido) var(--ease-estandar), border-color var(--dur-rapido) var(--ease-estandar);
  /* Entrada escalonada: cada fila usa la variable --i (índice dentro de la
     lista, puesta inline por app.js al armar el HTML) para calcular su propio
     retraso. Si una fila no trae --i (la mayoría de las listas viejas que no
     se tocaron), simplemente vale 0 y entra junto con las demás — no rompe
     nada, solo suma el efecto donde se agregó a propósito. "backwards" evita
     el flash de opacidad completa antes de que empiece el retraso. */
  animation: list-item-in var(--dur-base) var(--ease-salida) backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.list-item:active {
  background: var(--c-surface-2);
  border-color: var(--c-border-hi);
}
@keyframes list-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.list-item__icono {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), inset 0 -4px 8px -4px rgba(0,0,0,0.28);
}
.list-item__icono svg { width: 22px; height: 22px; }
.list-item__icono--pulverizacion { background: var(--c-cyan-dim); color: var(--c-cyan); }
.list-item__icono--siembra { background: var(--c-green-dim); color: var(--c-green); }
.list-item__icono--labranza { background: var(--c-stone-dim); color: var(--c-stone); }
.list-item__icono--cosecha { background: var(--c-rust-dim); color: var(--c-rust); }
.list-item__icono--otro { background: var(--c-stone-dim); color: var(--c-stone); }
.list-item__icono--presupuesto { background: var(--c-amber-glow); color: var(--c-amber-hi); }
/* Antes Mis Drones era el único lugar de la app con un ícono "flotando" sin
   chip de color (razón original: no camuflarse con una foto real) — pero
   la lista de equipos nunca llegó a mostrar fotos, así que en la práctica
   era la única fila sin color de toda la app, justo lo que se busca evitar
   acá. Ahora usa el mismo color por categoría que ya tienen sus labores
   asociadas (ver claseColorEquipoTipo en app.js), en vez de un caso propio. */

.list-item__cuerpo { flex: 1; min-width: 0; }
.list-item__titulo {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item__sub {
  font-size: 12px;
  color: var(--c-text-mid);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item__valor {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--c-amber-hi);
  flex-shrink: 0;
  text-align: right;
}
.list-item__valor small {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--c-text-mid);
  font-weight: 400;
}

/* ============================================
   SKELETON — placeholders de carga (en vez de vacío/spinner seco)
   ============================================ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: skeleton-shimmer 1.4s var(--ease-estandar) infinite;
}
.tema-claro .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(11,26,46,0.05), transparent);
}
@keyframes skeleton-shimmer {
  to { transform: translateX(100%); }
}
.skeleton-linea { height: 12px; margin-bottom: 8px; width: 100%; }
.skeleton-linea--corta { width: 55%; }
.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-bottom: 8px;
}
.skeleton-list-item__icono {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.skeleton-list-item__cuerpo { flex: 1; min-width: 0; }

/* ============================================
   DETALLE — filas de datos
   ============================================ */
.detalle-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
  gap: 12px;
}
.detalle-fila:last-child { border-bottom: none; }
.detalle-fila__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text-mid);
  flex-shrink: 0;
}
.detalle-fila__valor {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-text-hi);
  text-align: right;
}

/* ============================================
   MENÚ "MÁS"
   ============================================ */
.menu-grupo-titulo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--c-text-low);
  margin: 20px 2px 8px;
}
.menu-grupo-titulo:first-child { margin-top: 2px; }
/* Marca cuadrada (no punto, no línea redondeada) antes de cada título de
   sección — la misma firma técnica que el resto del sistema, en vez de la
   típica etiqueta de texto suelta sin ningún acento. */
.menu-grupo-titulo::before {
  content: '';
  width: 3px;
  height: 11px;
  background: var(--c-amber);
  flex-shrink: 0;
}

.menu-lista {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 6px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  min-height: var(--touch);
  background: none;
  border: none;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-hi);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: var(--c-surface-2); }
.menu-item svg { width: 22px; height: 22px; color: var(--c-cyan); flex-shrink: 0; }
.menu-item__chevron { margin-left: auto; color: var(--c-text-low); }

/* Saludo de Home — el avatar vive en el header (accionHeader); la tarjeta hero
   solo continúa el mismo bloque navy con saludo y fecha en una sola línea,
   bien compacta, para no pesar demasiado arriba de la pantalla. */
.home-hero {
  background: #0F1C17;
  border-radius: 0 0 18px 18px;
  padding: 2px 16px 16px;
  margin: -16px -14px 20px;
  position: relative;
  overflow: hidden;
  /* Antes 150px, después 290px para dar lugar a los chips flotantes
     (verificado, último trabajo, sparkline de la semana). Jerónimo probó
     290px en el celular real y pidió achicarlo, se bajó a 256px, después a
     210px, y ahora a 175px — este es prácticamente el piso real: con
     .hero-top-row colgando del top (top:12px, ~27px de alto) y
     .hero-stats-row del bottom (bottom:56px, chips de ~62px de alto), a
     175px queda un margen de apenas ~16px entre ambas filas de chips antes
     de que se empiecen a superponer. Si hace falta más chico todavía, el
     próximo paso ya no puede ser este número solo — hay que achicar los
     chips en sí (padding/fuente) para no arriesgar overlap. */
  min-height: 175px;
  padding-bottom: 18px;
  display: flex;
  align-items: flex-end;
}
/* Video real de referencia (campo desde el aire) en loop constante detrás
   del saludo — reemplaza el fondo plano por algo "vivo". Silencioso y sin
   controles: es puro fondo, no contenido que se mire de frente. Si el
   video no carga (sin conexión la primera vez, formato no soportado) queda
   el poster de respaldo y, debajo de todo, el fondo sólido de siempre. */
.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(1.08) brightness(0.7);
}
/* Motivo de marca: líneas de guiado GPS paralelas (el mismo tipo de trazado
   que muestra cualquier consola de agricultura de precisión al marcar las
   pasadas de un lote) con un punto de referencia en cada inicio de línea —
   es un motivo de "agricultura de precisión" genérico a cualquier tipo de
   equipo (no un dron puntual), y es el elemento gráfico que ninguna
   plantilla genérica tiene. Ahora queda superpuesto al video en vez de
   sobre un rectángulo de color liso. */
.home-hero::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 150px;
  height: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg stroke='%234FBFA8' stroke-width='14' stroke-linecap='round'%3E%3Cline x1='40' y1='420' x2='340' y2='120'/%3E%3Cline x1='110' y1='460' x2='410' y2='160'/%3E%3Cline x1='180' y1='500' x2='480' y2='200'/%3E%3C/g%3E%3Cg fill='%234FBFA8'%3E%3Ccircle cx='40' cy='420' r='13'/%3E%3Ccircle cx='110' cy='460' r='13'/%3E%3Ccircle cx='180' cy='500' r='13'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.16;
  pointer-events: none;
  z-index: 1;
}
/* Degradado para que el saludo se lea bien parado sobre el video, sin
   perder el video de vista arriba. */
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,28,23,0.05) 0%, rgba(15,28,23,0.35) 55%, rgba(15,28,23,0.82) 100%);
  z-index: 1;
  pointer-events: none;
}
.home-hero__linea {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
/* "Contratono": se invierte solo entre temas (texto-alto de fondo, fondo de
   texto) — igual que el resto de la app ya invierte texto/fondo entre
   claro/oscuro. Antes estaba fijo en blanco hueso sobre navy sin importar
   el tema (bug: no respondía a .tema-claro). */
.home-hero__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-text-hi);
  color: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.home-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Chips flotantes del hero (verificado, último trabajo, sparkline) ----
   Fondo semitransparente + blur sobre el video, con texto/bordes fijos en
   blanco hueso a propósito (a diferencia del resto del sistema): están
   pegados al video oscuro con overlay, no al fondo con tema de la pantalla,
   así que "contratono" no aplica acá — es el mismo criterio que ya usa
   .home-hero__linea (text-shadow fijo) unas líneas arriba. */
.hero-top-row {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15,28,23,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(242,244,239,0.22);
  padding: 6px 10px 6px 8px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  color: #F2F4EF;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.hero-chip svg { width: 13px; height: 13px; color: #4FBFA8; flex-shrink: 0; }
.hero-stats-row {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 56px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.hero-stat-chip {
  flex: 1.4;
  background: rgba(15,28,23,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(79,191,168,0.4);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  padding: 9px 11px;
}
.hero-stat-chip__label {
  font-size: 8.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #A9BDB3;
  font-weight: 700;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hero-stat-chip__label svg { width: 11px; height: 11px; color: #4FBFA8; }
.hero-stat-chip__valor { font-size: 14px; font-weight: 800; color: #F2F4EF; line-height: 1.15; }
.hero-stat-chip__sub { font-size: 9.5px; color: #A9BDB3; margin-top: 1px; }
.hero-spark-chip {
  flex: 1;
  background: rgba(15,28,23,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(242,244,239,0.18);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-spark-chip__label {
  font-size: 8.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #A9BDB3;
  font-weight: 700;
  margin-bottom: 6px;
}
.hero-spark-bars { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.hero-spark-bars span { flex: 1; background: #4FBFA8; border-radius: 1px; opacity: 0.55; }
.hero-spark-bars span:last-child { opacity: 1; }

/* Selector de foto de perfil (pantalla Perfil) — círculo grande con la foto
   o la inicial del nombre de fondo, más una insignia de cámara superpuesta
   que indica que se puede tocar para cambiarla. */
.perfil-avatar-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.perfil-avatar {
  position: relative;
  width: 84px;
  height: 84px;
  cursor: pointer;
  flex-shrink: 0;
}
/* El recorte circular (overflow:hidden + border-radius) vive en este círculo
   interno, NO en .perfil-avatar — si estuviera en el contenedor de afuera,
   recortaría también la insignia de cámara que sobresale un poco del borde
   (right/bottom en -2px), dejándola cortada a la mitad. */
.perfil-avatar__circulo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--c-amber);
  color: var(--c-text-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  overflow: hidden;
}
.perfil-avatar__circulo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.perfil-avatar__editar {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-surface-2);
  color: var(--c-text-hi);
  border: 2px solid var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.perfil-avatar__editar svg { width: 14px; height: 14px; }
.perfil-avatar__quitar {
  background: none;
  border: none;
  color: var(--c-text-mid);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
}

/* Selector de logo de reportes (pantalla Perfil, junto al campo "Nombre en
   tus PDF"). A diferencia del avatar de arriba (foto de una persona, con
   recorte circular) un logo de empresa suele ser horizontal/rectangular —
   forzarlo a un círculo lo recortaría feo, así que este picker usa un
   recuadro rectangular con la imagen en "contain" (nunca recortada). */
.perfil-logo-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
/* Antes tenía una altura fija chica (72px) tipo "miniatura" — ahora que el
   logo se recorta a mano (ver editor de recorte más abajo) siempre queda con
   proporción panorámica 2.5:1 exacta, así que el preview usa esa misma
   relación de aspecto vía aspect-ratio: ocupa todo el ancho disponible de la
   tarjeta y se ve grande, en vez de un recuadrito mínimo. */
/* El logo se pinta como background-image (background-size:contain +
   background-position:center) en vez de un <img> con object-fit — algunas
   versiones del WebView de Android (la que usa Capacitor, ligada al
   Android System WebView del equipo, no siempre la más nueva) centran mal
   un <img> con object-fit:contain dentro de un flex container, mientras que
   background-size/position es una propiedad mucho más vieja y sólida en
   todos los motores. Esto es lo que causaba que el logo se viera "corrido"
   en el preview aunque el recorte en sí estuviera perfectamente centrado. */
.perfil-logo-preview {
  width: 100%;
  aspect-ratio: 2.5 / 1;
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px dashed var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  padding: 6px;
}
/* Logo circular (ver selector Recuadro/Círculo del editor de recorte): el
   recuadro panorámico 2.5:1 de arriba está pensado para logos rectangulares
   — un logo circular (1:1) ahí adentro queda chico y con mucho margen vacío
   a los costados, lo que a simple vista puede leerse como "descentrado"
   aunque matemáticamente esté centrado. Achicar el marco a 1:1 y angostarlo
   hace que el círculo lo ocupe entero, sin ambigüedad posible.
   Ancho/alto en px FIJOS (no aspect-ratio + %) a propósito: aspect-ratio
   combinado con un ancho en porcentaje es una cuenta que algunas versiones
   más viejas del WebView de Android resuelven mal, dejando el recuadro
   no-cuadrado por unos pocos px — lo suficiente para que el círculo (que
   sí está perfectamente centrado en el PNG) se vea "corrido" adentro de un
   marco asimétrico. Dos valores fijos en px no necesitan resolver nada,
   funcionan igual en cualquier motor. */
.perfil-logo-preview--circular {
  width: 180px;
  height: 180px;
  margin: 0 auto;
}
.perfil-logo-preview__placeholder {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-text-mid);
  font-size: 12.5px;
  font-weight: 600;
}
.perfil-logo-preview__placeholder svg { width: 16px; height: 16px; }
.perfil-logo-picker__acciones {
  display: flex;
  align-items: center;
  gap: 16px;
}
.perfil-logo-picker__subir {
  background: none;
  border: none;
  color: var(--c-amber);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 0;
}
.perfil-logo-picker__editar {
  background: none;
  border: none;
  color: var(--c-text-mid);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.perfil-logo-picker__editar svg { width: 13px; height: 13px; }
.perfil-logo-picker__ayuda {
  font-size: 12px;
  color: var(--c-text-mid);
  margin: 0;
}

/* Selector de "Foto del trabajo" en Pulverización/Siembra — mismo patrón que
   el logo de reportes de arriba (recuadro con borde punteado, imagen pintada
   como background-image en vez de <img> por el mismo bug de WebView ya
   documentado ahí) pero en proporción 3:2 panorámica, la misma que usan las
   fotos de stock genéricas (ver FOTO_POR_CATEGORIA_TRABAJO en app.js) — así
   la vista previa ya anticipa cómo se va a recortar en la tarjeta de
   Inicio/Historial. */
.foto-trabajo-vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  border: 1px dashed var(--c-border-hi);
  background: var(--c-surface-2);
  color: var(--c-text-mid);
  cursor: pointer;
  text-align: center;
  padding: 12px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.foto-trabajo-vacia__icono {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--c-amber);
  color: var(--c-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.foto-trabajo-vacia__icono svg { width: 18px; height: 18px; }
.foto-trabajo-vacia__titulo { font-size: 14px; font-weight: 700; color: var(--c-text-hi); }
.foto-trabajo-vacia__sub { font-size: 12px; }
.foto-trabajo-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}
/* Fondo oscuro semitransparente fijo (no theme-aware): siempre va encima de
   una foto, nunca del fondo de la app, así que necesita contraste contra
   cualquier imagen sin importar el tema claro/oscuro elegido. */
/* Insignia de "es un video" en el preview chico del formulario (misma idea
   que .trabajo-foto-card__play en las tarjetas de Inicio/Historial) — acá sí
   puede quedar clickeable en el futuro, pero por ahora es solo indicativa:
   la reproducción real vive en la pantalla de detalle, no en el formulario. */
.foto-trabajo-preview__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(15,28,23,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.foto-trabajo-preview__play svg { width: 20px; height: 20px; }
.foto-trabajo-preview__quitar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15,28,23,0.65);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.foto-trabajo-preview__quitar svg { width: 16px; height: 16px; }
.foto-trabajo-preview__cambiar {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(15,28,23,0.65);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  padding: 6px 12px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Foto (o poster de video) del trabajo en la pantalla de Detalle — antes esa
   pantalla no mostraba la foto/video para nada, solo aparecía en las
   tarjetas de Inicio/Historial. Mismo criterio visual que .foto-trabajo-preview,
   pero más alta (es la pieza principal de la pantalla, no un preview chico
   dentro de un formulario). */
/* Miniatura de la foto/video del trabajo en el detalle — chica y al final
   de todos los datos (ver fotoVideoDetalleHTML en app.js), en vez del
   cuadro gigante de antes que tapaba la pantalla completa apenas se entraba
   al detalle. Tocarla abre el visor de pantalla completa (.foto-lightbox). */
.detalle-foto-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
}
.detalle-foto-mini__img {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  border: 1px solid var(--c-border);
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.detalle-foto-mini__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,28,23,0.4);
  color: #fff;
}
.detalle-foto-mini__play svg { width: 20px; height: 20px; }
.detalle-foto-mini__texto {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-mid);
}

/* Visor de pantalla completa (foto o video) que abre la miniatura de
   arriba — se crea/destruye dinámicamente (ver abrirFotoVideoLightboxUI /
   cerrarFotoVideoLightboxUI en app.js), no vive en el HTML de la pantalla. */
.foto-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8,14,11,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 28px 20px;
}
.foto-lightbox img,
.foto-lightbox video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-md);
}
.foto-lightbox__cerrar {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top));
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.home-saludo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: #F2F4EF;
}
.home-fecha {
  font-size: 11px;
  color: #A9BDB3; /* verde grisáceo de marca — antes quedaba un azulado suelto de una paleta vieja */
}

/* Accesos rápidos — cada uno es su propia mini-tarjeta (antes era solo un
   ícono circular flotando sobre el fondo, sin marco). Con tarjeta propia se
   leen más como los tiles de un dashboard (fondo, borde, sombra), en línea
   con el resto de las tarjetas de la app en vez de quedar sueltos. */
.accesos-iconos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 24px;
}
.acceso-icono {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 10px 2px 8px;
  min-height: var(--touch);
  box-shadow: var(--elev-1);
  transition: transform var(--dur-rapido) var(--ease-estandar), border-color var(--dur-rapido) var(--ease-estandar);
  /* Entrada escalonada por posición: como este grid siempre tiene el mismo
     puñado de accesos fijos (no una lista dinámica), el orden en el HTML
     alcanza para calcular el retraso — no hace falta tocar app.js acá. */
  animation: list-item-in var(--dur-base) var(--ease-salida) backwards;
}
.acceso-icono:active { transform: scale(0.96); border-color: var(--c-border-hi); }
.acceso-icono:nth-child(1) { animation-delay: 0ms; }
.acceso-icono:nth-child(2) { animation-delay: 35ms; }
.acceso-icono:nth-child(3) { animation-delay: 70ms; }
.acceso-icono:nth-child(4) { animation-delay: 105ms; }
.acceso-icono:nth-child(5) { animation-delay: 140ms; }
.acceso-icono__chip {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bisel sutil (brillo arriba + sombra interna abajo) — da la sensación de
     un módulo/lente con relieve real en vez de una ficha de color plano,
     que es el tratamiento por defecto de cualquier UI kit genérico. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -5px 9px -5px rgba(0,0,0,0.3);
}
.acceso-icono__chip svg { width: 23px; height: 23px; }
.acceso-icono span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--c-text-mid);
  text-align: center;
  line-height: 1.15;
}
.acceso-icono__chip--amber { background: var(--c-amber-glow); color: var(--c-amber-hi); }
.acceso-icono__chip--green { background: var(--c-green-dim); color: var(--c-green); }
/* Caldo es una calculadora auxiliar, no necesita un color de categoría
   propio compitiendo con el verde-agua/verde de las acciones principales
   (Pulverizar/Siembra) — se resuelve como ficha neutra, igual que Historial. */
.acceso-icono__chip--cyan  { background: var(--c-surface-2); color: var(--c-text-mid); }
.acceso-icono__chip--rust  { background: var(--c-rust-dim); color: var(--c-rust); }
.acceso-icono__chip--stone { background: var(--c-stone-dim); color: var(--c-stone); }

/* Banner con foto real (de stock, licencia libre) — antes todo el Home era
   íconos dibujados y tarjetas de datos, sin una sola imagen real. Este
   banner le da algo de "cuerpo visual" real a la pantalla, y de paso es un
   acceso directo grande a Pulverización. Si la foto no llega a cargar
   (sin internet) se autodestruye con onerror y queda el fondo liso — nunca
   un ícono de imagen rota. */
.foto-banner {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 160px;
  margin-bottom: 16px;
  cursor: pointer;
  background: var(--c-surface-2);
  box-shadow: var(--elev-1);
}
.foto-banner img {
  width: 100%;
  height: 100%;
  /* La foto es panorámica (dron chico sobre un campo ancho) y el banner es
     bajo — un recorte centrado le cortaba el dron por la mitad. Con el ancla
     más arriba se prioriza esa zona en vez del piso del campo. */
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.foto-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,28,23,0) 35%, rgba(15,28,23,0.88) 100%);
}
.foto-banner__texto {
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: #F2F4EF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Botón grande "Nuevo trabajo" del Inicio — reemplaza al botón "+" que antes
   estaba flotando en la barra inferior. El degradado es un valor fijo (no
   var(--c-amber)) a propósito: es la única pieza de la app con esta firma
   visual, no tiene que moverse si cambia el tema — los 3 tonos ya están
   pensados para funcionar con el texto blanco de arriba en cualquier caso. */
.home-cta {
  width: 100%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #15977C 0%, #0F6E56 55%, #0B5544 100%);
  padding: 16px 26px 16px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 16px 30px -14px rgba(11,85,68,0.6);
  margin-bottom: 14px;
  text-align: left;
  transition: transform var(--dur-rapido) var(--ease-estandar);
  /* Redondeado (no chamfer) a propósito: queda pegado justo debajo del banner
     de video del hero, que también es redondeado — un corte técnico acá
     quedaba en conflicto visual con esa curva. */
  border-radius: 16px;
}
.home-cta:active { transform: scale(0.98); }
.home-cta__icono {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-cta__icono svg { width: 21px; height: 21px; color: #fff; }
.home-cta__copy { flex: 1; min-width: 0; }
.home-cta__titulo { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #fff; }
.home-cta__sub { font-size: 11.5px; color: rgba(255,255,255,0.72); margin-top: 2px; line-height: 1.3; }
.home-cta__flecha {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-cta__flecha svg { width: 14px; height: 14px; color: #fff; }

/* Mosaico de accesos rápidos — un cuadrado de color por categoría de trabajo
   (mismo lenguaje visual que las tarjetas de "Últimos trabajos": cada rubro
   tiene su color fijo en toda la app). Reemplaza a la fila de chips chicos
   de antes, que compartían un único color de marca para los 3. */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.home-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform var(--dur-rapido) var(--ease-estandar);
}
.home-tile:active { transform: scale(0.94); }
/* "Brillante": sombra de color propio (--tile-glow, una por variante) +
   brillo diagonal vía ::after, en vez del cuadrado plano de antes — mismo
   tratamiento que el resto de la app usa para leerse como "pieza fabricada"
   (ver --shadow-deep/--elev-*), acá con el color de cada categoría. */
.home-tile__icono {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 var(--tile-inset-hi),
    inset 0 -4px 10px -4px rgba(0,0,0,0.4),
    0 10px 18px -7px var(--tile-glow, rgba(0,0,0,0.4));
}
.home-tile__icono::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--tile-gloss) 0%, rgba(255,255,255,0) 45%);
  pointer-events: none;
}
.home-tile__icono svg { position: relative; z-index: 1; width: 22px; height: 22px; color: #fff; }
.home-tile__icono--pulverizacion { background: var(--c-cyan); --tile-glow: var(--tile-glow-pulverizacion); }
.home-tile__icono--siembra { background: var(--c-green); --tile-glow: var(--tile-glow-siembra); }
.home-tile__icono--caldo { background: var(--c-amber); --tile-glow: var(--tile-glow-caldo); }
.home-tile__icono--historial { background: var(--c-stone); --tile-glow: var(--tile-glow-historial); }
.home-tile__label { font-size: 10.5px; font-weight: 700; color: var(--c-text-mid); text-align: center; line-height: 1.15; }

/* Este mes — antes 4 tarjetas sueltas de igual peso (grid 2x2, cada una con
   su propio borde/sombra). Se unifican en una sola tarjeta con jerarquía:
   arriba la métrica que de verdad importa ('Por cobrar'/'Facturado') bien
   grande, abajo las otras 3 en una fila más chica separadas por líneas
   internas — un solo bloque de datos en vez de 4 cajitas compitiendo por
   atención al mismo nivel. */
/* Tarjeta blanca (en vez del --c-surface-1 de las tarjetas comunes) solo
   para el resumen del Home — es la única sección que busca ese contraste
   "recuadro blanco sobre fondo verdoso" de la referencia de diseño; el
   resto de la app sigue con el tono de tarjeta de siempre. */
.card--blanca { background: var(--c-surface-elevada); }
.resumen-home__hero {
  padding: 2px 0 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 12px;
  animation: list-item-in var(--dur-base) var(--ease-salida) backwards;
}
/* Puntito de color junto a cada etiqueta del resumen — mismo truco visual
   que la referencia (DJI SmartFarm) para diferenciar cada dato de un
   vistazo sin depender solo del texto. */
.stat-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  flex-shrink: 0;
}
.stat-dot--ambar { background: var(--c-amber); }
.stat-dot--verde { background: var(--c-green); }
.stat-dot--naranja { background: var(--c-cyan); }
.stat-dot--stone { background: var(--c-stone); }
.resumen-home__hero .stat-card__label { color: var(--c-amber-hi); }
.resumen-home__hero .stat-card__valor { font-size: 30px; color: var(--c-amber); }
.resumen-home__hero .stat-card__valor-multi span { font-size: 23px; color: var(--c-amber); }
.resumen-home__secundarias {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  animation: list-item-in var(--dur-base) var(--ease-salida) backwards;
  animation-delay: 35ms;
}
.resumen-home__item {
  text-align: center;
  padding: 0 6px;
  cursor: pointer;
}
.resumen-home__item:not(:last-child) { border-right: 1px solid var(--c-border); }
.resumen-home__item .stat-card__label { font-size: 9px; }
.resumen-home__item .stat-card__valor { font-size: 17px; }
.resumen-home__item .stat-card__tendencia { justify-content: center; }

/* Home sin ningún trabajo cargado todavía — reemplaza el resumen (que
   mostraría "Por cobrar $0", "0 ha", "Sin datos" en cada casillero) por una
   invitación a cargar el primer trabajo. Mostrar todo en cero antes de tener
   un solo dato cargado se siente como que algo está roto en vez de "recién
   empezás acá". */
.home-empty {
  text-align: center;
  padding: 28px 20px;
  margin-bottom: 14px;
}
.home-empty__icono {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--c-amber-glow);
  color: var(--c-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.home-empty__icono svg { width: 26px; height: 26px; }
.home-empty__titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--c-text-hi);
  margin-bottom: 6px;
}
.home-empty__texto {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* Gráfico de actividad del Home — barras simples en CSS (sin librería de
   gráficos) mostrando hectáreas trabajadas en cada uno de los últimos 6
   meses. Solo aparece con actividad real en 2+ meses (ver pantallaHome). */
/* Encabezado de la tarjeta, ahora un <button> a todo el ancho (mejor área
   de toque que un ícono chico suelto) que colapsa/expande las barras — el
   estado se guarda en la base, ver toggleGraficoActividadUI en app.js. */
.home-chart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.home-chart__toggle {
  display: flex;
  color: var(--c-text-mid);
  transform: rotate(90deg);
  transition: transform var(--dur-base) var(--ease-estandar);
}
.home-chart__toggle svg { width: 16px; height: 16px; }
.home-chart__toggle--colapsado { transform: rotate(0deg); }
.home-chart__barras {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.home-chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.home-chart__valor {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-text-mid);
  margin-bottom: 4px;
  height: 13px;
}
.home-chart__bar-wrap {
  height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}
.home-chart__bar {
  width: 100%;
  max-width: 26px;
  border-radius: 5px 5px 2px 2px;
  background: var(--c-surface-3);
  transition: height var(--dur-base) var(--ease-estandar);
}
.home-chart__bar--actual { background: var(--c-amber); }
.home-chart__mes {
  font-size: 10.5px;
  color: var(--c-text-mid);
  margin-top: 6px;
  text-transform: capitalize;
}
.home-chart__mes--actual { color: var(--c-amber); font-weight: 700; }
.stat-card__label {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--c-text-mid);
}
.stat-card__valor {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.2px;
  margin-top: 3px;
  color: var(--c-text-hi);
}
.stat-card__valor-multi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 3px;
}
.stat-card__valor-multi span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.stat-card__sub {
  font-size: 10px;
  color: var(--c-text-low);
  margin-top: 4px;
}
.stat-card__tendencia {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
}
.stat-card__tendencia svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Últimos trabajos — antes filas planas separadas por una línea, ahora cada
   trabajo es su propia tarjeta (ícono grande de color según el tipo,
   insignia de estado en vez de texto de color suelto), más parecido a los
   tiles de contenido destacado de la referencia. */
.trabajos-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trabajo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: transform var(--dur-rapido) var(--ease-estandar), border-color var(--dur-rapido) var(--ease-estandar);
  animation: list-item-in var(--dur-base) var(--ease-salida) backwards;
}
.trabajo-card:active { transform: scale(0.98); border-color: var(--c-border-hi); }
.trabajo-card:nth-child(1) { animation-delay: 0ms; }
.trabajo-card:nth-child(2) { animation-delay: 35ms; }
.trabajo-card:nth-child(3) { animation-delay: 70ms; }
.trabajo-card__icono {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), inset 0 -4px 8px -4px rgba(0,0,0,0.28);
}
.trabajo-card__icono svg { width: 22px; height: 22px; }
.trabajo-card__icono--pulverizacion { background: var(--c-cyan-dim); color: var(--c-cyan); }
.trabajo-card__icono--siembra { background: var(--c-green-dim); color: var(--c-green); }
.trabajo-card__icono--labranza { background: var(--c-stone-dim); color: var(--c-stone); }
.trabajo-card__icono--cosecha { background: var(--c-rust-dim); color: var(--c-rust); }
.trabajo-card__icono--otro { background: var(--c-stone-dim); color: var(--c-stone); }
.trabajo-card__cuerpo { flex: 1; min-width: 0; }
.trabajo-card__titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trabajo-card__sub {
  font-size: 11.5px;
  color: var(--c-text-mid);
  margin-top: 2px;
}
.trabajo-card__badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
}
.trabajo-card__badge--pendiente { background: var(--c-surface-2); color: var(--c-text-low); }
.trabajo-card__badge--facturada { background: var(--c-amber-glow); color: var(--c-amber-hi); }
.trabajo-card__badge--cobrada { background: var(--c-green-dim); color: var(--c-green); }

/* Foto real (Pulverización/Siembra) detrás del chip de ícono en "Últimos
   trabajos": el ícono pasa de estar centrado a ser una insignia chica en
   la esquina, apoyado sobre la foto en vez de reemplazarla. Labranza,
   cosecha y "otro" no tienen foto de referencia todavía y siguen con el
   chip de color plano de siempre (ver trabajo-card__icono--foto, que solo
   se agrega cuando hay foto). */
.trabajo-card__icono--foto {
  background-size: cover;
  background-position: center;
  position: relative;
}
.trabajo-card__icono-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--c-surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.trabajo-card__icono-badge svg { width: 11px; height: 11px; }
.trabajo-card__icono-badge--pulverizacion { background: var(--c-cyan); color: #0F1C17; }
.trabajo-card__icono-badge--siembra { background: var(--c-green); color: #0F1C17; }
.tema-claro .trabajo-card__icono-badge--siembra { color: #F2F4EF; }

/* "Últimos trabajos" del Home — tarjetas de foto en grilla de 2 columnas
   (en vez de la lista horizontal anterior), con la insignia de estado
   superpuesta sobre la imagen en vez de al costado. Mismas fotos de
   referencia que ya usábamos (pulverización/siembra); las categorías sin
   foto de stock todavía se resuelven con un fondo de color sólido por
   rubro (mismo color que su tile de acceso rápido de arriba) y el ícono
   de la labor en blanco, centrado. */
.trabajos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.trabajo-foto-card {
  background: var(--c-surface-elevada);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: transform var(--dur-rapido) var(--ease-estandar), border-color var(--dur-rapido) var(--ease-estandar);
  animation: list-item-in var(--dur-base) var(--ease-salida) backwards;
}
.trabajo-foto-card:active { transform: scale(0.97); border-color: var(--c-border-hi); }
.trabajo-foto-card:nth-child(1) { animation-delay: 0ms; }
.trabajo-foto-card:nth-child(2) { animation-delay: 35ms; }
.trabajo-foto-card:nth-child(3) { animation-delay: 70ms; }
.trabajo-foto-card:nth-child(4) { animation-delay: 105ms; }
.trabajo-foto-card__imagen {
  position: relative;
  height: 76px;
  background-size: cover;
  /* El dron queda en el tercio superior de las fotos de stock (ver
     pulverizacion-thumb.jpg/siembra-thumb.jpg), no en el centro exacto — a
     esta altura tan chica (76px) un recorte "center" corta justo las
     hélices de arriba y deja de más pasto/tierra abajo. Anclarlo más
     arriba dentro del recorte deja el dron completo adentro del cuadro. */
  background-position: center 25%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 7px;
}
.trabajo-foto-card__imagen--sin-foto { align-items: center; justify-content: center; }
.trabajo-foto-card__imagen--sin-foto svg { width: 24px; height: 24px; color: #fff; }
.trabajo-foto-card__imagen--pulverizacion { background-color: var(--c-cyan); }
.trabajo-foto-card__imagen--siembra { background-color: var(--c-green); }
.trabajo-foto-card__imagen--labranza { background-color: var(--c-stone); }
.trabajo-foto-card__imagen--cosecha { background-color: var(--c-rust); }
.trabajo-foto-card__imagen--otro { background-color: var(--c-stone); }
/* Esta insignia va SIEMPRE arriba de una foto o de un fondo de color sólido
   (nunca sobre una superficie plana como el resto de las insignias de la
   app) — por eso no puede reusar los fondos tenues de
   .trabajo-card__badge--* (pensados para verse sobre una tarjeta clara):
   un texto verde sobre un fondo verde tenue, encima de una foto con tonos
   de campo, se volvía casi invisible. Acá el fondo es siempre el mismo
   "vidrio" oscuro semitransparente con texto claro — lo único que cambia
   por estado es el color del texto, para que se lea igual de bien sin
   importar qué foto o color de fondo tenga la tarjeta debajo. */
.trabajo-foto-card__badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(15,28,23,0.6);
  color: #F2F4EF;
}
.trabajo-foto-card__badge.trabajo-card__badge--pendiente { color: #F2F4EF; }
.trabajo-foto-card__badge.trabajo-card__badge--facturada { color: #FFD48A; }
.trabajo-foto-card__badge.trabajo-card__badge--cobrada { color: #A8EC93; }
/* Insignia de "es un video" (no una foto fija) — centrada sobre la
   miniatura, igual que el botón de play de cualquier reproductor. No
   intercepta el click de la tarjeta (pointer-events:none): tocar en
   cualquier parte de la tarjeta ya lleva al detalle, donde se reproduce. */
.trabajo-foto-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(15,28,23,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.trabajo-foto-card__play svg { width: 14px; height: 14px; }
.trabajo-foto-card__cuerpo { padding: 8px 10px 10px; }
.trabajo-foto-card__titulo {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trabajo-foto-card__sub {
  font-size: 10.5px;
  color: var(--c-text-mid);
  margin-top: 1px;
}

/* Banner de foto real arriba de los formularios de Pulverización/Siembra.
   Compacto a propósito (130px) para que quede como contexto visual sin
   empujar el formulario real hacia abajo — la versión anterior de esto
   (más grande, sin criterio de tamaño) se había sacado por no sumar nada
   ahí; esta va con el mismo criterio que el resto de la app: decorativo
   pero chico, con el nombre de la labor superpuesto para que no quede
   flotando sin motivo. */
.foto-labor {
  position: relative;
  height: 130px;
  border-radius: var(--r-lg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--elev-1);
}
.foto-labor__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,28,23,0) 40%, rgba(15,28,23,0.8) 100%);
}
.foto-labor__titulo {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: #F2F4EF;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Banner de encabezado con ícono — mismo peso visual que .foto-labor (foto +
   título) para pantallas que no tienen una foto real para mostrar (agregar
   un producto, un equipo, un cliente, etc.). En vez de una foto de stock que
   no tendría sentido para estos formularios, es un bloque con ícono grande
   de marca + título, para que no se sientan "menos vestidos" que Pulverización
   o Siembra al entrar a la pantalla. */
.form-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--c-surface-2), var(--c-surface-1));
  border: 1px solid var(--c-border);
  box-shadow: var(--elev-1);
  margin-bottom: 16px;
}
.form-banner__icono {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--c-amber-glow);
  color: var(--c-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.form-banner__icono svg { width: 24px; height: 24px; }
.form-banner__titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--c-text-hi);
}
.form-banner__sub {
  font-size: 12.5px;
  color: var(--c-text-mid);
  margin-top: 2px;
}

.accesos-chicos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.acceso-chico {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.acceso-chico:active { background: var(--c-surface-2); }
.acceso-chico svg { width: 18px; height: 18px; color: var(--c-cyan); flex-shrink: 0; }
.acceso-chico span {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-hi);
  line-height: 1.2;
}

/* Resumen del mes */
.resumen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.resumen-grid .card {
  padding: 12px 8px;
  margin-bottom: 0;
  text-align: center;
}
.resumen-grid .card__valor { font-size: 24px; }
.resumen-grid .card__label { font-size: 9px; }

/* ============================================
   FILTROS — chips de filtrado
   ============================================ */
.filtros-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.filtros-row::-webkit-scrollbar { display: none; }

.filtro-chip {
  flex-shrink: 0;
  padding: 0 14px;
  height: 34px;
  border-radius: 17px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-mid);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.filtro-chip.activo {
  background: var(--c-amber);
  border-color: var(--c-amber);
  color: #0F1C17;
}
.tema-claro .filtro-chip.activo { color: #F2F4EF; }

/* Subfiltros (dentro de un tab ya activo) — más chicos, sin relleno sólido */
.filtro-chip--sub {
  height: 28px;
  padding: 0 11px;
  font-size: 11px;
  background: none;
}
.filtro-chip--sub.activo {
  background: var(--c-surface-3);
  border-color: var(--c-border-hi);
  color: var(--c-text-hi);
}

/* ============================================
   SWITCH TOGGLE
   ============================================ */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-top: 14px;
  margin-bottom: 10px;
}
/* Variante "plana" — para cuando varios switch-row van juntos DENTRO de un
   mismo .form-card (Preferencias, en Perfil): tres cajas con su propio
   borde/fondo, una adentro de la otra, se sentía recargado. Achica el
   padding y cambia la caja propia por una simple línea divisoria entre
   filas, como una lista de ajustes de verdad, en vez de tres tarjetas
   apiladas. */
.switch-row--plano {
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--c-border);
  margin: 0;
  padding: 11px 0;
}

/* Filas compactas de "Cuenta y ayuda" (Perfil) — icono + texto + acción, sin
   el peso de una tarjeta/botón completo por cada una. Sirve tanto para un
   <button> (Gestionar suscripción, Cerrar sesión) como para un <a> (mailto
   de soporte) — ambos quedan exactamente iguales visualmente. */
.cuenta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-body);
}
.cuenta-row + .cuenta-row { border-top: 1px solid var(--c-border); }
.cuenta-row__icono { color: var(--c-amber); flex-shrink: 0; display: flex; }
.cuenta-row__icono svg { width: 20px; height: 20px; }
.cuenta-row__cuerpo { flex: 1; min-width: 0; }
.cuenta-row__titulo { font-size: 14px; font-weight: 700; color: var(--c-text-hi); }
.cuenta-row__sub { font-size: 12px; color: var(--c-text-mid); margin-top: 1px; }
.cuenta-row__flecha { color: var(--c-text-low); flex-shrink: 0; display: flex; }
.cuenta-row__flecha svg { width: 18px; height: 18px; }
.switch-row:first-child { margin-top: 0; }
.switch-row__label { font-weight: 600; font-size: 14px; color: var(--c-text-hi); }
.switch-row__sub { font-size: 12px; color: var(--c-text-mid); margin-top: 2px; }

/* Indicador de estado de sincronización (Perfil > Cuenta y respaldo) */
.sync-indicador {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--c-text-mid);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  margin: 8px 0;
}
.sync-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--c-text-low);
}
.sync-indicador--sincronizado .sync-dot { background: var(--c-green); }
.sync-indicador--pendiente .sync-dot { background: var(--c-amber-hi); }
.sync-indicador--sin-conexion .sync-dot { background: var(--c-text-low); }

.switch { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--c-surface-3);
  border: 1px solid var(--c-border-hi);
  border-radius: 26px;
  cursor: pointer;
  transition: 0.2s;
}
.switch-slider:before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: var(--c-text-mid);
  border-radius: 50%;
  transition: 0.2s;
}
.switch input:checked + .switch-slider {
  background: var(--c-amber);
  border-color: var(--c-amber);
}
.switch input:checked + .switch-slider:before {
  transform: translateX(22px);
  /* --c-amber (fondo del track activado) es navy oscuro en los dos temas —
     en tema claro es literalmente el mismo color que este punto tenía antes
     (#0F1C17), así que el punto desaparecía dentro del track. Usamos blanco
     para que el punto se vea siempre, en los dos temas. */
  background: #F2F4EF;
}

/* ============================================
   SPLASH
   ============================================ */
.splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  /* Fijo en el verde oscuro de marca a propósito, SIN usar var(--c-bg): el
     splash nativo de Android (ver colors.xml/styles.xml, "splashBackground")
     está harcodeado en #0F1C17 porque se dibuja antes de que exista cualquier
     preferencia de tema (todavía no se leyó nada de la base local). Si acá
     usáramos var(--c-bg), un usuario con el tema claro guardado vería el
     splash nativo oscuro y después, al cargar este HTML, un salto a un splash
     claro — dos pantallas distintas en vez de una transición continua. Por
     eso el splash siempre es oscuro, sin importar el tema elegido; el tema
     elegido se aplica recién en la pantalla de Home. */
  background: #0F1C17;
  gap: 18px;
}
/* Sin animación de entrada acá a propósito (antes tenía un "acercamiento" con
   scale+opacity): en Android 12+ el sistema ya muestra este mismo ícono,
   quieto, durante el splash nativo (antes de que cargue este HTML) — si acá
   se lo volvía a animar apareciendo desde chico, se sentían dos splashes
   distintos en vez de uno solo continuo. Queda fijo, ya "asentado", para que
   la transición entre el splash nativo y este sea invisible. */
.splash img {
  width: 120px;
  height: 120px;
}
/* En pantalla grande (HECTIA Web en la PC) el logo de 120px se veía enorme. */
@media (min-width: 1024px) {
  .splash { gap: 12px; }
  .splash img { width: 56px; height: 56px; }
  .splash__marca { font-size: 18px; }
}
.splash__marca {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #F2F4EF;
}
.splash__sub {
  font-size: 13px;
  color: #A9BDB3;
}
.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(79,191,168,0.25);
  border-top-color: #4FBFA8;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-mini {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Fila de acciones en cuadraditos (detalle de Historial): antes eran botones
   de lista apilados con estilos distintos entre sí (uno con chip de ícono a
   la izquierda, otros centrados) y quedaban desparejos — ahora son todos el
   mismo cuadrado ícono-solo, mismo tamaño entre sí, se reparten el ancho en
   partes iguales (así si "Facturar" no aparece porque ya está facturado, los
   4 restantes se acomodan solos sin dejar un hueco). */
.acciones-cuadros {
  display: flex;
  gap: 10px;
  margin: 16px 0 8px;
}
.accion-cuadro {
  /* Antes flex:1 + aspect-ratio hacía que cada botón creciera cuadrado hasta
     ocupar 1/N del ancho del contenedor — en un celular angosto eso daba un
     tamaño de botón razonable, pero en el panel ancho de escritorio (ver
     @media min-width:900px de #app) el mismo cálculo daba botones cuadrados
     gigantes, de 200px o más de lado. Con flex-basis fijo + flex-grow:0 el
     tamaño queda igual de cómodo en celular y no escala con el ancho de
     pantalla. */
  flex: 0 0 56px;
  width: 56px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-hi);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--c-text-hi);
  box-shadow: var(--elev-1);
  transition: transform var(--dur-rapido) var(--ease-estandar), opacity var(--dur-base) var(--ease-estandar);
}
.accion-cuadro:active { transform: scale(0.93); }
/* Porcentaje de avance mientras se graba el video para compartir (ver
   compartirTrabajoInstagramUI) — reemplaza al spinner genérico en ese botón
   puntual, para que la espera (que puede tardar bastante, dura lo mismo que
   el video) no se sienta como que la app se colgó. */
.accion-cuadro__progreso { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.accion-cuadro svg { width: 20px; height: 20px; flex-shrink: 0; }
.accion-cuadro:disabled { opacity: 0.5; cursor: not-allowed; }
.accion-cuadro--primario {
  background: var(--c-amber);
  color: #0F1C17;
  border-color: rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), var(--elev-1);
}
.tema-claro .accion-cuadro--primario { color: #F2F4EF; }
.accion-cuadro--peligro {
  background: transparent;
  color: var(--c-red);
  border-color: rgba(226,100,90,0.4);
}

/* ============================================
   AUTH
   ============================================ */
.auth-screen {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh; /* en Android, con el teclado abierto, dvh sí se achica — evita que el contenido quede tapado */
  /* Abajo se suma la zona de gestos de Android (edge-to-edge): sin esto,
     los links de Términos/Privacidad del paywall quedaban debajo de la
     barrita de navegación del sistema. */
  padding: 56px 20px calc(40px + env(safe-area-inset-bottom));
  overflow-y: auto;
  /* Antes no tenía background propio (heredaba el de <body>, que ya es
     var(--c-bg)) — se lo dejamos explícito acá porque .tema-oscuro-forzado
     (ver PAYWALL más abajo) redeclara --c-bg en ESTE nodo puntual, y sin un
     background propio en .auth-screen que lea esa variable localmente, se
     seguiría viendo el --c-bg heredado de <body> (el del tema real del
     dispositivo) por más que la tarjeta de adentro ya se vea oscura. */
  background: var(--c-bg);
}
/* Fuerza la paleta oscura de marca (mismos valores que :root) en una
   pantalla puntual, sin importar el tema claro/oscuro elegido en el resto
   de la app — hoy la usa solo el paywall (ver pantallaSuscripcionInactiva en
   app.js, que decide si sumar esta clase leyendo el tema guardado). Al
   redeclarar acá los mismos nombres de variable que .tema-claro redefine,
   alcanza con poner esta clase en un nodo más profundo que <body>.tema-claro:
   por cascada normal de custom properties, la declaración más cercana al
   elemento gana, así que esto pisa el tema del dispositivo sin tocar <body>
   ni afectar ninguna otra pantalla. */
.tema-oscuro-forzado {
  --c-bg:          #0F1C17;
  --c-surface-1:   #1A2E23;
  --c-surface-2:   #22392C;
  --c-surface-3:   #2B4536;
  --c-border:      #24402F;
  --c-border-hi:   #34573F;
  --c-amber:       #4FBFA8;
  --c-amber-hi:    #6FD0BB;
  --c-amber-glow:  rgba(79, 191, 168, 0.35);
  --c-cyan:        #F0BE72;
  --c-green:       #6FBF5B;
  --c-red:         #E2645A;
  --c-text-hi:     #F2F4EF;
  --c-text-mid:    #A9BDB3;
  --c-text-low:    #7E9389;
  --c-rust:        #E29684;
  --c-stone:       #B8C7BC;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.28), 0 1px 1px rgba(0,0,0,0.18);
  --shadow-deep: 0 8px 28px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
}
.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}
.auth-logo img { width: 88px; height: 88px; }
.auth-logo h1 { letter-spacing: 1.2px; }
/* Tarjeta que contiene los botones/formulario de login-registro — separa
   visualmente esa zona del fondo oscuro, para que se sienta más "contenida"
   y profesional en vez de flotar suelta sobre la pantalla. */
.auth-card {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow-card);
}
/* Selector de dos opciones (Crear cuenta / Ya tengo cuenta) — a diferencia de
   los .filtro-chip (pensados para filtros que se scrollean), este ocupa el
   100% del ancho repartido en dos mitades iguales, como un control segmentado. */
.auth-segmented {
  display: flex;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 3px;
  margin: 0 0 16px;
}
.auth-segmented button {
  flex: 1;
  min-height: 38px;
  border-radius: calc(var(--r-md) - 3px);
  background: transparent;
  border: none;
  color: var(--c-text-mid);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.auth-segmented button.activo {
  background: var(--c-amber);
  color: #0F1C17;
}
.tema-claro .auth-segmented button.activo { color: #F2F4EF; }
/* Mismo bug crítico que .btn--primario más arriba: dentro de .tema-oscuro-forzado
   (auth-screen forzada oscura) hace falta el texto oscuro de vuelta. */
.tema-claro .tema-oscuro-forzado .auth-segmented button.activo { color: #0F1C17; }
.auth-toggle {
  text-align: center;
  margin-top: 18px;
  color: var(--c-text-mid);
  font-size: 13px;
}
.auth-toggle a { color: var(--c-cyan); font-weight: 700; text-decoration: none; }
/* En tema claro --c-cyan (#B4781E) da solo ~3.1:1 sobre el fondo de esta
   pantalla — insuficiente para texto de link, justo en la primera pantalla
   que ve un usuario nuevo. Se oscurece un poco solo acá. */
.tema-claro .auth-toggle a { color: #96631A; }
.auth-separador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--c-text-mid);
  font-size: 12px;
}
.auth-separador::before, .auth-separador::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* ============================================
   PAYWALL (pantallaSuscripcionInactiva)
   Rediseño con más presencia visual — es la pantalla que más impacta en
   si alguien se convierte en cliente pago o no, así que se justifica que
   tenga más lenguaje de marca que una tarjeta de formulario común: glow de
   color detrás del ícono, cada beneficio con su propio chip de color (los
   mismos colores reales de los módulos de la app — pulverización/siembra/
   facturación/nube — para que se sienta consistente con el resto de HECTIA
   en vez de una lista genérica de tildes), y una tarjeta de precio con más
   jerarquía. Usa las mismas variables de color de siempre (--c-surface-1,
   --c-amber, etc.), así que hereda tema claro/oscuro automáticamente sin
   necesidad de reglas .tema-claro extra acá.
   ============================================ */
.auth-card--paywall {
  padding: 34px 24px 26px;
  position: relative;
  overflow: hidden;
}
.paywall-logo-wrap {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.paywall-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -22px;
  background: radial-gradient(circle, var(--c-amber-glow) 0%, rgba(0,0,0,0) 72%);
}
.paywall-logo {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-deep);
}
.paywall-titulo {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  text-align: center;
  color: var(--c-text-hi);
  margin: 0 0 6px;
}
.paywall-subtitulo {
  font-size: 13px;
  color: var(--c-text-mid);
  text-align: center;
  line-height: 1.55;
  margin: 0 0 26px;
}
.paywall-beneficios {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
}
.paywall-beneficios li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text-hi);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.paywall-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.paywall-icon svg { width: 16px; height: 16px; }
.paywall-icon--pulv     { background: var(--c-cyan); }
.paywall-icon--facturas { background: var(--c-rust); }
.paywall-icon--reportes { background: var(--c-green); }
.paywall-icon--nube     { background: var(--c-stone); }
.paywall-icon--offline  { background: var(--c-amber); }
/* Los íconos van siempre en un trazo oscuro — sobre estos acentos (más
   claros que el fondo en los dos temas) es lo que da mejor contraste,
   a diferencia del resto de la app donde el ícono suele ir en --c-text-hi. */
.paywall-icon svg { stroke: #14231c; }
.paywall-precio {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-hi);
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
  text-align: center;
  margin-bottom: 22px;
  position: relative;
}
/* "30 días gratis" es el argumento de venta más fuerte de toda la pantalla
   (nadie paga nada hoy) — antes era una píldora chica del mismo tamaño que
   cualquier otro texto secundario y se perdía. Ahora es el elemento más
   grande de toda la tarjeta de precio, el precio real (--detalle, debajo)
   queda a propósito más chico y neutro: es la letra chica que confirma
   cuánto pasa a costar DESPUÉS de la prueba, no lo primero que hay que leer. */
.paywall-precio__badge {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-amber-hi);
  margin: 0 0 6px;
}
.paywall-precio__detalle {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text-mid);
  margin: 0;
}
.paywall-legal {
  text-align: center;
  font-size: 11px;
  color: var(--c-text-low);
  margin: 0 0 24px;
}
/* Reemplaza al banner ámbar de alerta que había antes cuando no se puede
   consultar el precio (offline real, o instalación fuera de Play Store) —
   se pidió que no se vea como un error grave, así que va sin caja ni ícono,
   con el mismo tono neutro que el resto de la letra chica de esta pantalla. */
.paywall-precio__aviso {
  text-align: center;
  font-size: 13px;
  color: var(--c-text-mid);
  margin: 0 0 22px;
  padding: 0 8px;
}
.paywall-footer {
  border-top: 1px solid var(--c-border);
  padding-top: 18px;
  display: flex;
  justify-content: center;
  gap: 24px;
}
.paywall-link {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--c-text-mid);
  cursor: pointer;
  padding: 4px;
}
.paywall-link--accion { color: var(--c-amber-hi); font-weight: 700; }
.paywall-footer { flex-wrap: wrap; row-gap: 4px; }
.paywall-docs {
  text-align: center;
  font-size: 11px;
  color: var(--c-text-low);
  margin: 10px 0 0;
}
.paywall-docs a { color: var(--c-text-mid); }

/* Dos planes (Básico / Pro) con pago mensual o anual */
.paywall-periodo {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 14px;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
}
.paywall-periodo[hidden] { display: none; }
.paywall-periodo button {
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: 9px 8px;
  background: none;
  color: var(--c-text-mid);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.paywall-periodo button[aria-pressed="true"] { background: var(--c-surface-3); color: var(--c-text-hi); }
.paywall-periodo__ahorro {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-amber) 18%, transparent);
  color: var(--c-amber-hi);
  font-size: 11px;
  font-weight: 800;
}
/* Beneficios en grilla de 2×2 (antes 4 filas grandes que empujaban los
   planes fuera de la pantalla). */
.paywall-beneficios--compacto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.paywall-beneficios--compacto li { padding: 8px 10px; gap: 8px; font-size: 12.5px; line-height: 1.25; }
.paywall-beneficios--compacto .paywall-icon { width: 26px; height: 26px; border-radius: 7px; }
.paywall-beneficios--compacto .paywall-icon svg { width: 14px; height: 14px; }
.paywall-planes { display: grid; gap: 12px; margin: 0 0 18px; }
.paywall-plan {
  display: grid;
  gap: 4px;
  text-align: left;
  width: 100%;
  padding: 16px 16px 14px;
  border-radius: var(--r-lg);
  border: 2px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text-hi);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.paywall-plan--pro {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--c-amber) 10%, transparent), transparent 55%),
    var(--c-surface-2);
}
.paywall-plan[aria-pressed="true"] {
  border-color: var(--c-amber);
  background-color: var(--c-surface-3);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-amber) 14%, transparent);
}
.paywall-plan__cabeza { display: flex; align-items: center; gap: 10px; }
.paywall-plan__cabeza b { font-family: var(--font-display); font-size: 18px; font-weight: 800; flex: 1; }
/* Círculo de selección, como un radio button */
.paywall-plan__radio {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--c-border-hi);
  display: grid; place-items: center;
}
.paywall-plan[aria-pressed="true"] .paywall-plan__radio { border-color: var(--c-amber); }
.paywall-plan[aria-pressed="true"] .paywall-plan__radio::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c-amber);
}
.paywall-plan__tag {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--c-amber);
  color: #0F1C17;
  white-space: nowrap;
}
.paywall-plan__tag--actual { background: var(--c-surface-1); color: var(--c-text-hi); border: 1px solid var(--c-border-hi); }
.paywall-plan__desc { font-size: 12.5px; color: var(--c-text-mid); padding-left: 28px; }
.paywall-plan__precio { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin-top: 6px; padding-left: 28px; }
.paywall-plan__precio small { font-size: 13px; font-weight: 600; color: var(--c-text-mid); margin-left: 3px; letter-spacing: 0; }
.paywall-plan__equiv { font-size: 12px; color: var(--c-text-low); padding-left: 28px; }
.paywall-plan__ahorro {
  justify-self: start;
  margin: 4px 0 0 28px;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-amber) 16%, transparent);
  color: var(--c-amber-hi);
  font-size: 11.5px;
  font-weight: 800;
}
.tema-claro .paywall-plan__ahorro { color: var(--c-amber); }
.paywall-plan__items {
  display: grid; gap: 5px;
  margin: 10px 0 0 28px; padding-top: 10px;
  border-top: 1px solid var(--c-border);
  font-size: 12.5px; color: var(--c-text-mid);
}
.paywall-plan__items span { display: flex; gap: 7px; align-items: baseline; }
.paywall-plan__items i { font-style: normal; font-weight: 800; color: var(--c-amber-hi); }
.tema-claro .paywall-plan__items i { color: var(--c-amber); }
.tema-claro .paywall-periodo__ahorro { color: var(--c-amber); }
.tema-claro .paywall-link--accion { color: var(--c-amber); }

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--c-text-mid);
}
.empty-state__icono { margin-bottom: 14px; opacity: 0.45; display: flex; justify-content: center; }
.empty-state__icono svg { width: 40px; height: 40px; }
.empty-state__titulo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: var(--c-text-hi);
  margin-bottom: 6px;
}

/* ============================================
   DIVIDER
   ============================================ */
.divider {
  height: 1px;
  background: var(--c-border);
  margin: 16px 0;
  position: relative;
}

/* ============================================
   UTILIDADES
   ============================================ */
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.oculto { display: none !important; }
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tag--cyan { background: var(--c-cyan-dim); color: var(--c-cyan); border: 1px solid rgba(240,190,114,0.2); }
.tag--green { background: var(--c-green-dim); color: var(--c-green); border: 1px solid rgba(111,191,91,0.2); }
.tag--precargado { background: rgba(240,190,114,0.08); color: var(--c-cyan); border: 1px solid rgba(240,190,114,0.2); }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--c-border-hi); border-radius: 2px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================
   HAMBURGER BUTTON
   ============================================ */
.app-header__hamburger {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.app-header__hamburger:active { background: var(--c-surface-2); }
.app-header__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-text-hi);
  border-radius: 2px;
  transition: 0.2s;
}

/* ============================================
   DRAWER LATERAL
   ============================================ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-lento) var(--ease-estandar);
}
.drawer-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   CONFIRMACIÓN ESTILIZADA (reemplaza confirm() nativo)
   ============================================ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.confirm-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.confirm-modal {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--elev-float);
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.18s var(--ease-salida), opacity 0.18s;
}
.confirm-overlay.visible .confirm-modal {
  transform: scale(1);
  opacity: 1;
}
.confirm-modal__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--c-text-hi);
  margin-bottom: 8px;
}
.confirm-modal__mensaje {
  font-size: 14px;
  color: var(--c-text-mid);
  line-height: 1.5;
  white-space: pre-line;
}
.confirm-modal__input { margin-top: 12px; margin-bottom: 0; }
.confirm-modal__acciones {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.confirm-modal__acciones .btn {
  margin-top: 0;
  flex: 1;
}

/* ============================================
   RECORTE DE LOGO DE REPORTES (pantalla Perfil)
   ============================================
   Mismo lenguaje visual que el overlay de confirmación de arriba (fondo
   oscuro + tarjeta que escala/aparece), pero con su propia área de arrastre
   ("stage") y marco fijo que representa el recorte final — ver
   abrirRecorteLogoUI en app.js para toda la lógica de arrastre/zoom/canvas. */
.logo-crop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 75;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.logo-crop-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.logo-crop-modal {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--elev-float);
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.18s var(--ease-salida), opacity 0.18s;
}
.logo-crop-overlay.visible .logo-crop-modal {
  transform: scale(1);
  opacity: 1;
}
.logo-crop-modal__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--c-text-hi);
  margin-bottom: 4px;
}
.logo-crop-modal__ayuda {
  font-size: 12.5px;
  color: var(--c-text-mid);
  line-height: 1.4;
  margin: 0 0 14px;
}
/* El área de arrastre: más alta que el marco (aspect-ratio 3/2, contra el
   2.5/1 del marco) para dejar margen visible arriba/abajo y a los costados
   mientras se posiciona la imagen — así el usuario ve claramente qué queda
   afuera del recorte, no solo el recuadro final. */
.logo-crop-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  background: var(--c-bg);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.logo-crop-stage--arrastrando { cursor: grabbing; }
.logo-crop-stage__img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  max-height: none;
  pointer-events: none;
}
/* El marco no se recorta a sí mismo — es un rectángulo con un box-shadow
   gigante (truco clásico de crop UI) que oscurece todo el stage AFUERA del
   marco, dejando clarito adentro el área que realmente se va a usar. Ancho/
   alto se fijan por JS (abrirRecorteLogoUI), no acá, porque un % de alto en
   CSS no se puede expresar en términos de un % de ancho del mismo padre. */
.logo-crop-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: 2px solid var(--c-amber);
  border-radius: 4px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.62);
  pointer-events: none;
}
/* Forma circular (selector Recuadro/Círculo) — el box-shadow "cortina" de
   arriba sigue automáticamente la forma del elemento, así que redondear
   esto a 50% ya alcanza para que el recorte visible sea un círculo. */
.logo-crop-frame--circular {
  border-radius: 50%;
}
/* Selector de forma — reutiliza el mismo control segmentado de .auth-segmented
   (ver más abajo en este archivo), un poco más angosto para no ocupar tanto
   lugar arriba del stage de recorte. */
.logo-crop-forma {
  margin: 0 0 14px;
}
.logo-crop-zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.logo-crop-zoom svg { width: 16px; height: 16px; color: var(--c-text-mid); flex-shrink: 0; }
.logo-crop-zoom input[type="range"] { flex: 1; }
.logo-crop-centrar {
  display: block;
  margin: 8px auto 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-amber);
  cursor: pointer;
  padding: 4px 8px;
}
.logo-crop-modal__acciones {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.logo-crop-modal__acciones .btn {
  margin-top: 0;
  flex: 1;
}

/* ============================================
   TRAZAR LOTE A MANO (mapa satelital dentro del form de Lote)
   ============================================
   A diferencia del recorte de logo de arriba (una tarjeta chica centrada),
   este overlay ocupa la pantalla completa — el mapa necesita todo el
   espacio posible para que tocar cada esquina del lote sea preciso. Mismo
   fondo oscuro + transición de aparición que el resto de los overlays de la
   app. Toda la lógica de paneo/zoom/vértices vive en abrirTrazarLoteUI
   (js/app.js). */
.trazo-lote-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.trazo-lote-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.trazo-lote-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--c-bg);
  transform: scale(0.98);
  opacity: 0;
  transition: transform 0.18s var(--ease-salida), opacity 0.18s;
}
.trazo-lote-overlay.visible .trazo-lote-modal {
  transform: scale(1);
  opacity: 1;
}
.trazo-lote-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: var(--c-surface-1);
  border-bottom: 1px solid var(--c-border);
}
.trazo-lote-header__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-text-hi);
}
.trazo-lote-cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--c-surface-2);
  color: var(--c-text-mid);
  cursor: pointer;
}
.trazo-lote-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #141c20;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.trazo-lote-stage:active { cursor: grabbing; }
.trazo-lote-capa {
  position: absolute;
  inset: 0;
  will-change: transform;
}
#trazo-canvas, #trazo-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#trazo-svg { pointer-events: none; }
.trazo-lote-zoom-ctrl {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--elev-1);
}
.trazo-lote-zoom-ctrl button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  background: var(--c-surface-1);
  color: var(--c-text-hi);
  cursor: pointer;
}
.trazo-lote-zoom-ctrl button:first-child { border-bottom: 1px solid var(--c-border); }
.trazo-lote-zoom-ctrl button:active { background: var(--c-surface-2); }
.trazo-lote-barra {
  flex: none;
  background: var(--c-surface-1);
  border-top: 1px solid var(--c-border);
  padding: 14px 16px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.trazo-lote-cifras {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.trazo-lote-ha {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-text-hi);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.trazo-lote-ha__u {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-mid);
  margin-left: 3px;
}
.trazo-lote-vert {
  font-size: 12.5px;
  color: var(--c-text-mid);
  font-variant-numeric: tabular-nums;
}
.trazo-lote-ayuda {
  font-size: 12.5px;
  color: var(--c-text-mid);
  line-height: 1.4;
  margin: 0 0 12px;
}
.trazo-lote-fila {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.trazo-lote-fila .btn { flex: 1; }
.trazo-lote-fila .btn svg { width: 15px; height: 15px; }
#trazo-usar { margin-top: 0; }

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 82%;
  max-width: 320px;
  background: var(--c-surface-1);
  border-right: 1px solid var(--c-border);
  z-index: 55;
  transform: translateX(-100%);
  /* Mismo dúo duración/curva que el resto de los paneles (--dur-lento +
     --ease-estandar), en vez de un valor propio (0.28s) suelto — así el
     menú, la hoja de "+" y el cambio de pantalla se sienten parte del mismo
     movimiento en toda la app. */
  transition: transform var(--dur-lento) var(--ease-estandar);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-deep);
}.drawer.abierto {
  transform: translateX(0);
}

/* En navegador de escritorio el drawer deja de ser un menú que tapa el
   contenido (pensado para pantalla de celular, donde no hay lugar para
   tenerlo siempre abierto) y pasa a ser un panel fijo a la izquierda,
   como en cualquier app de escritorio real — es lo que hace que la web
   deje de sentirse "la app de celular estirada" y empiece a sentirse una
   página pensada para esta pantalla. app.js se asegura de que el drawer
   ya esté en el DOM y actualizado ni bien se entra a la app (ver
   renderDrawer() en updateBottomNav, router.js) para que no haga falta
   tocar ningún botón para verlo. */
@media (min-width: 900px) {
  body {
    padding-left: 280px;
  }
  .drawer-overlay {
    display: none !important;
  }
  .drawer {
    width: 280px;
    max-width: 280px;
    transform: none !important;
    box-shadow: none;
  }
  .drawer__close {
    display: none;
  }
  .app-header__hamburger {
    display: none;
  }
  /* El botón circular de "‹ volver" es un control de navegación de app
     móvil (pila de pantallas) — en un sitio de escritorio con el sidebar
     siempre visible y el botón "atrás" del navegador ya funcionando (esta
     app usa rutas con #, así que el atrás del navegador SIEMPRE funcionó
     bien), mostrarlo también acá es justo lo que hace sentir "app portada a
     web" en vez de un sitio pensado para esta pantalla. */
  .app-header__back {
    display: none;
  }
  /* La barra inferior flotante queda redundante con el sidebar siempre
     visible (mismos destinos) — tenerlas dos juntas es justamente lo que
     hacía sentir la web "una app de celular agrandada". */
  .bottom-nav {
    display: none !important;
  }
}

.drawer__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 16px;
  /* Mismo motivo que .app-header: el drawer es position:fixed/top:0, así
     que con edge-to-edge (API 36) el logo+nombre quedaban arrancando
     debajo de la barra de estado. */
  padding-top: max(20px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-1);
}
.drawer__logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.drawer__marca {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: var(--c-text-hi);
}
.drawer__perfil-nombre {
  font-size: 13px;
  color: var(--c-text-mid);
  margin-top: 2px;
}
.drawer__close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--c-text-mid);
  font-size: 18px;
  cursor: pointer;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.drawer__close:active { background: var(--c-surface-3); }

.drawer__seccion-titulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-text-low);
  padding: 16px 16px 6px;
}

.drawer__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  min-height: 48px;
  background: none;
  border: none;
  color: var(--c-text-hi);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background 0.1s;
}
.drawer__item:active { background: var(--c-surface-2); }
/* Íconos del menú neutros por default (como Notion/Linear) — antes todos
   heredaban el ámbar de Caldo sin ninguna razón semántica, lo que hacía
   que todo el drawer se vea "pintado de un solo color al azar". */
.drawer__item svg { width: 20px; height: 20px; color: var(--c-text-mid); flex-shrink: 0; }
.drawer__item:active svg { color: var(--c-amber-hi); }

/* Sección donde estamos parados, resaltada — sin esto el sidebar fijo de
   escritorio no da ninguna pista de en qué pantalla está uno (ver
   actualizarDrawerActivo en app.js, enganchado a cada navegación). Barra de
   acento a la izquierda + fondo tenue, el mismo lenguaje que cualquier panel
   de navegación real (Notion, Linear, Gmail). */
.drawer__item.activo {
  background: var(--c-amber-glow);
  color: var(--c-amber-hi);
  box-shadow: inset 3px 0 0 var(--c-amber);
}
.drawer__item.activo svg { color: var(--c-amber-hi); }

/* Feedback de mouse — sin esto, en escritorio pasar el cursor por cualquiera
   de estos elementos no cambia nada visualmente, y sin cursor:pointer varios
   ni siquiera avisan que son clickeables (eran <div onclick> pensados para
   dedo, nunca para mouse). Es una de las cosas que más "se siente app" en
   vez de "se siente sitio web": un sitio real siempre responde al pasar el
   mouse. Se agrupa todo bajo (hover:hover) para no afectar el :active táctil
   de siempre en celular. */
@media (hover: hover) and (pointer: fine) {
  .drawer__item:not(.activo):hover { background: var(--c-surface-2); }
  .factura-item:hover { border-color: var(--c-border-hi); box-shadow: var(--elev-2); }
  .trabajo-foto-card:hover { border-color: var(--c-border-hi); box-shadow: var(--elev-2); transform: translateY(-2px); }
  .home-tile:hover .home-tile__icono { transform: translateY(-2px); }
  .resumen-home__item:hover { background: var(--c-surface-2); border-radius: var(--r-md); }
  .btn--secundario:hover { border-color: var(--c-amber); color: var(--c-amber); }
  .btn--peligro:hover { filter: brightness(1.1); }
  .btn--exito:hover { filter: brightness(1.1); }
  .home-hero__cta:hover, .foto-labor:hover { filter: brightness(1.03); }
  .accion-cuadro:hover { border-color: var(--c-amber); background: var(--c-surface-3); }
  a:hover { text-decoration: underline; }
}
/* .trabajo-foto-card/.home-tile/.resumen-home__item ya tenían cursor:pointer
   — a .factura-item (Facturas y Presupuestos) le faltaba, pese a ser
   clickeable (onclick al detalle): en desktop el mouse mostraba flecha
   normal en vez de mano, sin ningún indicio de que la fila abre algo. */
.factura-item {
  cursor: pointer;
}

/* ============================================
   FACTURACIÓN — estados visuales
   ============================================ */
.factura-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--c-surface-elevada);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  margin-bottom: 8px;
}
.factura-item--cobrada {
  opacity: 0.6;
  border-color: var(--c-border);
}
.factura-item--vencida {
  border-color: rgba(226,100,90,0.4);
  background: var(--c-red-dim);
}
/* "Facturar varios juntos" (ver Facturación > Sin facturar): checkbox para
   sumar un trabajo a la selección, y resalte de la fila cuando está
   tildado. factura-item__check--vacio ocupa el mismo lugar sin mostrar
   nada, para que los trabajos sin cliente resoluble (que no se pueden
   agrupar) no desalineen la fila contra los que sí tienen checkbox. */
.factura-item__check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.factura-item__check input[type="checkbox"] {
  width: 19px;
  height: 19px;
  accent-color: var(--c-amber);
}
.factura-item__check--vacio {
  width: 22px;
  flex-shrink: 0;
}
.factura-item--seleccionado {
  border-color: var(--c-amber-hi);
  background: var(--c-amber-dim, rgba(79,191,168,0.08));
}
/* Barra flotante que aparece al tildar trabajos para facturar juntos —
   fija al fondo de la pantalla (igual criterio que el bottom-nav) para que
   quede visible sin importar cuánto se haya scrolleado la lista. */
.barra-seleccion-grupo {
  position: fixed;
  left: 14px;
  right: 14px;
  /* Arriba del .bottom-nav (que ya ocupa ese mismo rincón inferior: 14px +
     env(safe-area-inset-bottom) de margen, más ~64px de alto real) — si no,
     esta barra queda tapada por la barra de navegación o la tapa a ella. */
  bottom: calc(92px + env(safe-area-inset-bottom));
  max-width: 692px;
  margin: 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--c-surface-elevada);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-deep, var(--elev-2));
}
.factura-item__estado {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.factura-item__estado--pendiente { background: var(--c-amber-hi); }
.factura-item__estado--cobrada   { background: var(--c-green); }
.factura-item__estado--vencida   { background: var(--c-red); }

.icon-inline { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.icon-inline svg { width: 14px; height: 14px; flex-shrink: 0; }

.badge-pendiente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #B23B24; /* rojo fijo con buen contraste para texto blanco (ver .toast--error) */
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

/* ============================================
   ONBOARDING — Guía de primer uso
   ============================================ */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 12, 22, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.onboarding-overlay.visible { opacity: 1; }

.onboarding-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-deep);
  padding: 30px 24px 24px;
  text-align: center;
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
}
.onboarding-overlay.visible .onboarding-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.onboarding-skip {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--c-text-mid);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: var(--r-sm);
}
.onboarding-skip:active { background: var(--c-surface-2); color: var(--c-text-hi); }

.onboarding-icono {
  width: 76px;
  height: 76px;
  margin: 4px auto 20px;
  border-radius: 50%;
  background: var(--c-amber-glow);
  border: 1px solid var(--c-border-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-amber-hi);
  box-shadow: var(--glow-amber);
}
.onboarding-icono svg { width: 34px; height: 34px; }

.onboarding-titulo {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  color: var(--c-text-hi);
  margin-bottom: 10px;
  letter-spacing: 0.2px;
  line-height: 1.15;
}
.onboarding-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-mid);
  margin-bottom: 22px;
}

.onboarding-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}
.onboarding-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-border-hi);
  transition: all 0.25s ease;
}
.onboarding-dot.activo {
  width: 22px;
  border-radius: 4px;
  background: var(--c-amber);
}


/* Foco visible con teclado/lector de pantalla en cualquier control (no se
   muestra al tocar con el dedo, solo con :focus-visible). */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
.select-flotante__btn:focus-visible, .opcion-item:focus-visible {
  outline: 2px solid var(--c-amber);
  outline-offset: 2px;
}

/* Aviso de aceptación de Términos/Privacidad al crear la cuenta. */
.auth-legal {
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-text-mid);
  margin: 14px 0 0;
}
.auth-legal a { color: var(--c-text-hi); text-decoration: underline; }

/* Con el --c-cyan más oscuro del tema claro, el ícono oscuro de la insignia
   de pulverización quedaba en 2,96:1; en claro va con ícono claro (5,3:1). */
.tema-claro .trabajo-card__icono-badge--pulverizacion { color: #F2F4EF; }

/* ---- Ventana de aplicación (pronóstico por hora en Pulverización) ---- */
.clima-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px;
  margin: 12px 0;
  background: var(--c-surface-1);
}
.clima-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.clima-card__titulo { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--c-text-hi); }
.clima-card__titulo svg { width: 16px; height: 16px; }
.clima-card__btn { margin: 0; min-height: 34px; padding: 0 12px; font-size: 12px; width: auto; }
.clima-card__nota { font-size: 11.5px; color: var(--c-text-mid); margin: 8px 0; }
.clima-card__nota--error { color: var(--c-red); }
.clima-card__resumen { font-size: 14px; color: var(--c-text-hi); margin: 10px 0 0; }
.clima-tabla { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.clima-fila {
  display: grid;
  grid-template-columns: 3.2em 1fr 2.2em 2.8em 2.6em 5.6em;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-hi);
}
.clima-fila small { color: var(--c-text-mid); font-size: 10.5px; }
.clima-fila--head { font-size: 10.5px; font-weight: 700; color: var(--c-text-mid); text-transform: uppercase; letter-spacing: .04em; }
.clima-chip { display: inline-block; padding: 2px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-align: center; }
.clima-chip--apta { background: var(--c-green-dim); color: var(--c-green); }
.clima-chip--precaucion { background: var(--c-cyan-dim); color: var(--c-cyan); }
.clima-chip--no { background: var(--c-red-dim); color: var(--c-red); }

/* ---- Resultado de la Calculadora de Caldo ---- */
.caldo-resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.caldo-resumen > div {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.caldo-resumen strong { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--c-text-hi); font-variant-numeric: tabular-nums; }
.caldo-resumen span { font-size: 11px; color: var(--c-text-mid); line-height: 1.2; }
.caldo-tanque {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-hi);
  border-radius: var(--r-md);
  padding: 14px;
}
.caldo-tanque__titulo { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; color: var(--c-text-hi); margin-bottom: 10px; }
.caldo-tanque__titulo svg { width: 18px; height: 18px; color: var(--c-amber); }
.caldo-vista { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.caldo-vista__btn {
  min-height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text-mid);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.caldo-vista__btn small { font-weight: 600; opacity: .8; }
.caldo-vista__btn.activo { background: var(--c-amber); border-color: var(--c-amber); color: var(--c-bg); }
.caldo-barra {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--c-surface-2);
  margin-bottom: 12px;
}
.caldo-barra__seg { display: block; height: 100%; flex-grow: 0; flex-shrink: 0; }
.caldo-barra__seg--agua { background: rgba(95, 184, 217, 0.28); flex-grow: 1; }
.caldo-barra__seg--vacio { background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--c-border) 5px 7px); }
.caldo-llenado { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--c-text-mid); margin-bottom: 6px; }
.caldo-llenado strong { color: var(--c-text-hi); font-size: 15px; }
.caldo-llenado small { font-weight: 800; color: var(--c-text-mid); }
.caldo-fila {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--c-border);
}
.caldo-fila__punto { width: 12px; height: 12px; border-radius: 3px; }
.caldo-fila__punto--agua { background: rgba(95, 184, 217, 0.5); }
.caldo-fila__nombre { display: flex; flex-direction: column; min-width: 0; }
.caldo-fila__nombre strong { font-size: 15px; color: var(--c-text-hi); overflow-wrap: anywhere; }
.caldo-fila__nombre small { font-size: 12px; color: var(--c-text-mid); }
.caldo-fila__valor { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--c-amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
.caldo-fila--agua .caldo-fila__valor { color: var(--c-text-hi); }
.caldo-nota { font-size: 12px; color: var(--c-text-mid); margin: 8px 0 0; }
.caldo-totales {
  margin-top: 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 4px 12px;
  background: var(--c-surface-1);
}
.caldo-totales summary { cursor: pointer; padding: 8px 0; font-size: 13px; font-weight: 700; color: var(--c-text-mid); }
.caldo-total { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--c-border); font-size: 14px; color: var(--c-text-hi); }
.caldo-total strong { font-variant-numeric: tabular-nums; }

/* ============================================
   FACTURA ELECTRÓNICA ARCA (detalle de factura)
   ============================================ */
.arca-card { margin-bottom: 12px; }
.arca-card__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.arca-card__tit { font-weight: 700; color: var(--c-text-hi); font-size: 15px; }
.arca-card__txt { color: var(--c-text-mid); font-size: 14px; margin: 0 0 12px; line-height: 1.45; }
.arca-card .btn + .btn, .arca-card .detalle-fila + .btn, .arca-card .arca-notas + .btn { margin-top: 10px; }
.arca-pill { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--c-amber-glow); color: var(--c-amber-hi); }
.arca-pill--w { background: var(--c-cyan-dim); color: var(--c-cyan); }
.arca-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.arca-acciones .btn { margin: 0 !important; font-size: 14px; }
.arca-notas { margin: 10px 0 2px; display: grid; gap: 8px; }
.arca-nota { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-surface-2); font-size: 13.5px; color: var(--c-text-hi); }
.arca-nota small { display: block; color: var(--c-text-low); font-size: 12px; margin-top: 2px; }
.arca-nota .btn { width: auto; flex: none; }
.arca-hoja-fondo { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .18s; }
.arca-hoja-fondo.visible { opacity: 1; }
.arca-hoja { background: var(--c-bg); width: 100%; max-width: 620px; max-height: 92vh; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; transform: translateY(24px); transition: transform .18s; }
.arca-hoja-fondo.visible .arca-hoja { transform: none; }
.arca-hoja__cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--c-border); color: var(--c-text-hi); font-size: 17px; }
.arca-hoja__x { background: none; border: 0; color: var(--c-text-mid); font-size: 20px; padding: 4px 8px; cursor: pointer; }
.arca-hoja__cuerpo { overflow-y: auto; padding: 14px 18px calc(22px + env(safe-area-inset-bottom)); }
.arca-hoja__cuerpo > .btn:last-child { margin-top: 16px; }
.arca-sub { color: var(--c-text-mid); font-size: 14px; margin: 0 0 12px; }
.arca-item { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 10px; margin-bottom: 10px; }
.arca-item textarea { min-height: 64px; padding: 10px 12px; font-size: 14px; line-height: 1.35; resize: vertical; }
.arca-item__fila { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; }
.arca-item__fila label { margin-top: 8px; }
.arca-item__pie { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 13.5px; color: var(--c-text-hi); font-weight: 600; }
.arca-item__x { background: none; border: 0; color: var(--c-red); font-size: 13px; cursor: pointer; padding: 4px; }
.arca-dif { color: var(--c-cyan); font-size: 12.5px; margin: 0; }
.arca-2c { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.arca-aviso { margin: 16px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-cyan-dim); color: var(--c-text-hi); font-size: 13px; line-height: 1.4; }

/* ARCA: Factura A/B (IVA) y ventana centrada en pantallas anchas */
.arca-tipo { margin: 8px 0 4px; color: var(--c-text-mid); font-size: 12.5px; line-height: 1.4; }
.arca-tipo:empty { display: none; }
.arca-check { display: flex !important; align-items: center; gap: 10px; margin: 12px 0 10px !important; color: var(--c-text-hi) !important; font-size: 14px !important; font-weight: 500 !important; }
.arca-check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--c-amber); }
.arca-item__fila--iva { grid-template-columns: 1fr 1fr; }
.arca-totales { margin: 14px 0 4px; display: grid; gap: 4px; }
.arca-totales div { display: flex; justify-content: space-between; color: var(--c-text-mid); font-size: 14px; }
.arca-totales div b { color: var(--c-text-hi); font-weight: 600; }
.arca-totales .arca-totales__total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--c-border); }
.arca-totales .arca-totales__total b { font-size: 22px; font-weight: 700; }
@media (min-width: 560px) { .arca-item__fila--iva { grid-template-columns: 1fr 1fr 1.2fr 1fr; } }
@media (min-width: 900px) {
  .arca-hoja-fondo { align-items: center; }
  .arca-hoja { border-radius: 18px; max-height: 88vh; max-width: 720px; }
}

/* ============================================
   GASTOS
   ============================================ */
.gastos-mes { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 10px; color: var(--c-text-hi); }
.gastos-mes button { background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-hi); width: 40px; height: 40px; border-radius: 12px; font-size: 20px; cursor: pointer; }
.gastos-mes b { font-size: 16px; }
.gastos-resumen { display: grid; gap: 8px; }
.gastos-resumen div { display: flex; justify-content: space-between; align-items: baseline; color: var(--c-text-mid); font-size: 14px; }
.gastos-resumen b { color: var(--c-text-hi); font-size: 15px; }
.gastos-resumen__ganancia { border-top: 1px solid var(--c-border); padding-top: 8px; }
.gastos-resumen__ganancia b { font-size: 20px !important; }
.gasto-barra { margin-bottom: 10px; }
.gasto-barra:last-child { margin-bottom: 0; }
.gasto-barra__top { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--c-text-hi); margin-bottom: 5px; }
.gasto-barra__track { height: 7px; border-radius: 99px; background: var(--c-surface-2); overflow: hidden; }
.gasto-barra__track i { display: block; height: 100%; border-radius: 99px; background: var(--c-amber); }
.gastos-dia { margin-bottom: 12px; }
.gastos-dia__fecha { font-size: 12px; font-weight: 700; color: var(--c-text-low); text-transform: uppercase; letter-spacing: .04em; margin: 0 2px 6px; }
.gasto-fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin-bottom: 6px; background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: 14px; color: var(--c-text-hi); text-align: left; cursor: pointer; font-family: var(--font-body); }
.gasto-fila__cat { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--c-surface-2); color: var(--c-amber); }
.gasto-fila__cat svg { width: 18px; height: 18px; }
.gasto-fila__txt { flex: 1; min-width: 0; display: grid; }
.gasto-fila__txt b { font-size: 14.5px; }
.gasto-fila__txt small, .gasto-fila__monto small { color: var(--c-text-low); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gasto-fila__monto { font-weight: 700; font-size: 15px; display: grid; justify-items: end; }
.gasto-fila__monto small svg { width: 13px; height: 13px; }
.gasto-ayuda { color: var(--c-text-mid); font-size: 12.5px; margin: 2px 0 10px; line-height: 1.4; }
.gasto-trabajo { display: flex !important; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 6px !important; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface-2); color: var(--c-text-hi) !important; font-weight: 500 !important; }
.gasto-trabajo input { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--c-amber); }
.gasto-trabajo span { display: grid; min-width: 0; }
.gasto-trabajo b { font-size: 14px; }
.gasto-trabajo small { color: var(--c-text-low); font-size: 12px; }
.gasto-foto { display: block; max-width: 100%; max-height: 320px; border-radius: 12px; border: 1px solid var(--c-border); }
.gasto-mini { display: grid; gap: 4px; margin-top: 8px; }
.gasto-mini button { display: flex; justify-content: space-between; background: var(--c-surface-2); border: 0; border-radius: 10px; padding: 9px 12px; color: var(--c-text-hi); font: 13.5px var(--font-body); cursor: pointer; }
.gasto-mini small { color: var(--c-text-low); }

/* Trabajos en lista compacta (Inicio e Historial) */
.trabajos-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
.trabajos-grid > * { min-width: 0; }
.trabajo-card__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trabajo-card__foto { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--c-text-low); }
.trabajo-card__foto svg { width: 13px; height: 13px; }
@media (min-width: 900px) { .trabajos-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } }
/* Gastos: tarjeta compacta de categorías y equipos */
.gastos-card { padding: 14px 16px; }
.gastos-card__sep { margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--c-border); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-low); }
.gasto-equipo { margin: 0; padding: 4px 0; }

/* Importar vuelos del dron */
.iv-intro__tit { font-size: 17px; font-weight: 700; color: var(--c-text-hi); margin-bottom: 6px; }
.iv-intro p { color: var(--c-text-mid); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.iv-ayuda { margin-top: 12px; color: var(--c-text-mid); font-size: 13.5px; }
.iv-ayuda summary { cursor: pointer; color: var(--c-amber); font-weight: 600; }
.iv-ayuda ol { padding-left: 18px; margin: 10px 0 0; display: grid; gap: 8px; line-height: 1.45; }
.iv-resumen { display: grid; gap: 4px; }
.iv-resumen b { color: var(--c-text-hi); font-size: 16px; }
.iv-resumen span { color: var(--c-text-mid); font-size: 12.5px; }
.iv-cols summary { cursor: pointer; font-weight: 600; color: var(--c-text-hi); }
.iv-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; align-items: center; margin-top: 8px; font-size: 13.5px; color: var(--c-text-mid); }
.iv-lista { display: grid; gap: 8px; margin: 4px 0 14px; }
.iv-vuelo { display: flex !important; align-items: center; gap: 12px; padding: 12px; margin: 0 !important; border-radius: 14px; background: var(--c-surface-1); border: 1px solid var(--c-border); color: var(--c-text-hi) !important; font-weight: 500 !important; cursor: pointer; }
.iv-vuelo input { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--c-amber); }
.iv-vuelo--dup { opacity: .7; }
.iv-vuelo__txt { flex: 1; min-width: 0; display: grid; }
.iv-vuelo__txt b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-vuelo__txt small { color: var(--c-text-low); font-size: 12px; }
.iv-vuelo__dup { color: var(--c-cyan) !important; }
.iv-vuelo__ha { font-weight: 700; display: grid; justify-items: end; white-space: nowrap; }
.iv-vuelo__ha small { color: var(--c-amber); font-size: 11.5px; display: inline-flex; gap: 3px; align-items: center; }
.iv-vuelo__ha small svg { width: 12px; height: 12px; }
.iv-mapa { display: block; width: 100%; border-radius: 12px; margin-bottom: 10px; border: 1px solid var(--c-border); }
.iv-agrupar { display: flex !important; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0 0 12px !important; border-radius: 14px; background: var(--c-surface-1); border: 1px solid var(--c-border); color: var(--c-text-hi) !important; font-weight: 600 !important; cursor: pointer; }
.iv-agrupar input { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--c-amber); margin-top: 1px; }
.iv-agrupar span { display: grid; gap: 2px; font-size: 14px; }
.iv-agrupar small { color: var(--c-text-low); font-weight: 400; font-size: 12px; }
.iv-equipo-ayuda { margin: 0 0 8px; }
.iv-equipo-ayuda b { color: var(--c-text-hi); }
.iv-col .select-flotante { min-width: 0; }

/* ARCA en el celular: cómo vincular desde la computadora */
.arca-vinc { max-width: 420px; }
.arca-vinc__pasos { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 8px; color: var(--c-text-mid); font-size: 14px; line-height: 1.45; text-align: left; }
.arca-vinc__pasos b { color: var(--c-text-hi); }
.arca-vinc__nota { margin: 0 0 14px; font-size: 12.5px; color: var(--c-text-low); text-align: left; }
.arca-vinc__acciones { display: grid; gap: 8px; }
.arca-vinc__acciones .btn { margin: 0; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.arca-vinc__acciones .btn svg { width: 18px; height: 18px; }
.arca-vinc__aca { margin-top: 12px; background: none; border: 0; color: var(--c-text-low); font-size: 12.5px; text-decoration: underline; cursor: pointer; font-family: inherit; }

/* Registro del dron dentro de Nuevo trabajo */
.vuelo-cargar { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--c-border-strong, var(--c-border)); background: transparent; color: var(--c-text-hi); text-align: left; cursor: pointer; font-family: inherit; }
.vuelo-cargar span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.vuelo-cargar b { font-size: 14.5px; }
.vuelo-cargar small { color: var(--c-text-low); font-size: 12px; }
.vuelo-cargar__ic, .vuelo-precarga__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(79,191,168,.14); color: var(--c-amber); flex: none; }
.vuelo-cargar__ic svg, .vuelo-precarga__ic svg { width: 20px; height: 20px; }
.vuelo-cargar__flecha { color: var(--c-text-low); font-size: 22px; }
.vuelo-precarga { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(79,191,168,.10); border: 1px solid rgba(79,191,168,.35); }
.vuelo-precarga__txt { flex: 1; display: grid; gap: 3px; min-width: 0; }
.vuelo-precarga__txt b { font-size: 14px; color: var(--c-text-hi); }
.vuelo-precarga__txt small { font-size: 12.5px; color: var(--c-text-mid); }
.vuelo-precarga__quitar { background: none; border: 0; color: var(--c-text-low); padding: 4px; cursor: pointer; display: flex; }
.iv-guia { margin: 2px 2px 10px; font-size: 13.5px; color: var(--c-text-mid); line-height: 1.45; }
.iv-guia b { color: var(--c-text-hi); }
.iv-completar { margin: 6px 0 0 !important; min-height: 32px !important; padding: 0 12px !important; font-size: 12.5px !important; width: auto !important; }
.iv-vuelo--ok { opacity: .75; }
.iv-vuelo__ok { color: var(--c-green, #6cc04a); display: flex; }
.iv-vuelo__ok svg { width: 22px; height: 22px; }
.iv-todos summary { cursor: pointer; font-weight: 600; color: var(--c-text-hi); font-size: 14px; }
.iv-todos .btn { margin-top: 8px; }

/* Botón oficial de Google (web) */
.gis-google { display: flex; justify-content: center; min-height: 44px; margin: 0 0 4px; }
.gis-google > div { margin: 0 auto; }
.gis-google-alt { display: block; margin: 2px auto 6px; background: none; border: 0; color: var(--c-text-low); font: 400 12px var(--font-body, inherit); text-decoration: underline; cursor: pointer; }

/* Datos para facturar del cliente */
.cl-cuit-aviso { margin: 6px 2px 0; font-size: 12.5px; color: var(--c-red); }
.arca-ficha { margin: -4px 0 10px; font-size: 12.5px; color: var(--c-green, #6cc04a); }

/* Padrón de ARCA (ficha del cliente y emitir) */
.cl-cuit-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cl-cuit-fila .btn { margin: 0; width: auto; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.cl-cuit-fila .btn svg { width: 16px; height: 16px; }
.cl-padron { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(79,191,168,.10); border: 1px solid rgba(79,191,168,.35); display: grid; gap: 6px; font-size: 13.5px; }
.cl-padron__titulo { font-weight: 700; color: var(--c-text-hi); display: flex; gap: 6px; align-items: center; }
.cl-padron__titulo svg { width: 16px; height: 16px; color: var(--c-green, #6cc04a); }
.cl-padron__dato { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; color: var(--c-text-mid); }
.cl-padron__dato b { color: var(--c-text-hi); font-weight: 600; }
.cl-padron .btn { margin: 4px 0 0; }
.cl-padron__cargando { color: var(--c-text-mid); }
.cl-padron__error { color: var(--c-red); }
.arca-padron { margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; background: rgba(79,191,168,.10); border: 1px solid rgba(79,191,168,.35); color: var(--c-text-hi); }
.arca-padron small { color: var(--c-amber); }
.arca-padron--aviso { background: rgba(240,190,114,.10); border-color: rgba(240,190,114,.45); }
.arca-padron--mal { background: rgba(226,100,90,.10); border-color: rgba(226,100,90,.45); color: var(--c-red); }
.cl-padron[hidden] { display: none; }
.btn[hidden] { display: none !important; }
/* Formulario de lote: contorno y datos que vienen del campo */
.lote-contorno-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lote-contorno-btns .btn { margin: 0; }
.lote-extra { margin-top: 14px; border-top: 1px solid var(--c-border); padding-top: 12px; }
.lote-extra summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--c-text-hi); }
.lote-extra summary span { font-weight: 400; color: var(--c-text-mid); margin-left: 4px; }
.lote-extra[open] summary { margin-bottom: 4px; }
/* Trabajos: filtros, exportar e importar en una fila */
.hist-acciones { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; }
.hist-acciones::-webkit-scrollbar { display: none; }
.hist-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface-1); color: var(--c-text-hi); font: 600 13px var(--font-body, inherit); cursor: pointer; white-space: nowrap; }
.hist-btn svg { width: 16px; height: 16px; }
.hist-btn--activo { border-color: var(--c-amber); color: var(--c-amber); }
.hist-panel { margin-bottom: 12px; padding: 12px; border-radius: 14px; background: var(--c-surface-1); border: 1px solid var(--c-border); }
.hist-panel[hidden] { display: none; }
.hist-panel .grid-2:last-child, .hist-panel > *:last-child { margin-bottom: 0 !important; }
/* Detalle del trabajo: Facturar bien visible y acciones con nombre */
.detalle-facturar { margin: 16px 0 0; display: flex; gap: 8px; align-items: center; justify-content: center; }
.detalle-facturar svg { width: 18px; height: 18px; }
.acciones-cuadros--texto { flex-wrap: wrap; }
.acciones-cuadros--texto .accion-cuadro { flex: 1 1 64px; width: auto; aspect-ratio: auto; min-height: 60px; flex-direction: column; gap: 4px; font: 600 11.5px var(--font-body, inherit); padding: 8px 4px; }
.prod-seccion { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-low); margin: 10px 2px 8px; }

/* Suscripción web con Mercado Pago */
#mp-paywall .paywall-planes { display: grid; gap: 10px; margin: 14px 0; }
.mp-email-label { display: block; font-size: 12.5px; color: var(--c-text-mid); margin: 4px 0 6px; text-align: left; }
.mp-email { width: 100%; margin-bottom: 12px; }

/* Reporte: qué mostrar */
.reporte-opciones { display: grid; gap: 4px; text-align: left; }
.reporte-opcion { display: flex; align-items: center; gap: 10px; padding: 10px 2px; font-size: 14.5px; cursor: pointer; }
.reporte-opcion input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }

/* Mantenimiento y service de equipos (js/mantenimiento.js) */
.mant-estado { border-radius: var(--r-md); padding: 10px 12px; background: var(--c-surface-2); margin-bottom: 8px; }
.mant-estado__top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; align-items: baseline; }
.mant-estado__top span { font-size: 12px; color: var(--c-text-mid); white-space: nowrap; }
.mant-estado__barra { height: 6px; border-radius: 3px; background: var(--c-surface-3, rgba(255,255,255,.08)); margin-top: 8px; overflow: hidden; }
.mant-estado__barra i { display: block; height: 100%; background: var(--c-amber); border-radius: 3px; }
.mant-estado--pronto .mant-estado__barra i { background: #E8C547; }
.mant-estado--vencido .mant-estado__barra i { background: var(--c-red); }
.mant-estado--vencido .mant-estado__top b { color: var(--c-red); }
.mant-uso { font-size: 12.5px; color: var(--c-text-mid); margin: 4px 0 6px; }
.mant-lista { margin-top: 12px; display: grid; gap: 6px; }
.mant-fila { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-hi); font-family: inherit; cursor: pointer; }
.mant-fila__tipo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c-amber) 16%, transparent); color: var(--c-amber); flex-shrink: 0; }
.mant-fila__tipo svg { width: 16px; height: 16px; }
.mant-fila__txt { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13.5px; }
.mant-fila__txt small { color: var(--c-text-mid); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mant-fila__monto { font-size: 13px; font-weight: 700; white-space: nowrap; }
.mant-badge { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-amber) 16%, transparent); color: var(--c-amber); }
.mant-badge[hidden] { display: none; }
.mant-badge--pronto { background: rgba(232,197,71,.16); color: #E8C547; }
.mant-badge--vencido { background: color-mix(in srgb, var(--c-red) 18%, transparent); color: var(--c-red); }

/* Mi empresa en modo ficha (solo lectura) */
.perfil-ficha__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.perfil-ficha__avatar { width: 56px !important; height: 56px !important; font-size: 22px !important; flex-shrink: 0; }
.perfil-ficha__nombre { flex: 1; min-width: 0; display: grid; gap: 2px; }
.perfil-ficha__nombre b { font-family: var(--font-display); font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-ficha__nombre small { font-size: 12.5px; color: var(--c-text-mid); }
.perfil-ficha__editar { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-hi); font: 600 13px var(--font-body); cursor: pointer; flex-shrink: 0; }
.perfil-ficha__editar svg { width: 15px; height: 15px; }
.perfil-ficha__aviso { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; margin: 4px 0 8px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--c-amber) 40%, transparent); background: color-mix(in srgb, var(--c-amber) 10%, transparent); color: var(--c-text-hi); font: 500 12.5px var(--font-body); cursor: pointer; }
.perfil-ficha__aviso svg { width: 16px; height: 16px; color: var(--c-amber); flex-shrink: 0; }
.perfil-ficha__fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c-border); font-size: 13.5px; }
.perfil-ficha__fila span { color: var(--c-text-mid); }
.perfil-ficha__fila b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.perfil-ficha__fila em { font-style: normal; font-weight: 500; color: var(--c-text-low); }
.perfil-ficha__logo { width: 64px; height: 36px; border-radius: 6px; background: #fff center/contain no-repeat; border: 1px solid var(--c-border); }
.perfil-ficha__logo--circular { width: 36px; border-radius: 50%; }

/* Pantalla interna de usuarios (#/admin-usuarios) */
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.adm-kpis div { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 10px 12px; }
.adm-kpis small { font-size: 11.5px; color: var(--c-text-mid); }
.adm-kpis b { display: block; font-family: var(--font-display); font-size: 22px; }
.adm-barra { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.adm-barra input { flex: 1; min-width: 200px; margin: 0; background: var(--c-surface-2); color: var(--c-text-hi); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 10px 12px; font: inherit; }
.adm-tabla-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); }
.adm-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.adm-tabla th { position: sticky; top: 0; background: var(--c-surface-2); text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-mid); white-space: nowrap; }
.adm-tabla td { padding: 8px 10px; border-top: 1px solid var(--c-border); white-space: nowrap; }
.adm-tabla td.adm-email { color: var(--c-text-mid); }
.adm-tabla td.adm-trabajos, .adm-tabla td.adm-hectareas, .adm-tabla td.adm-equipos, .adm-tabla td.adm-clientes, .adm-tabla td.adm-facturas_arca { text-align: right; }
.adm-tabla a { color: var(--c-amber); text-decoration: none; font-weight: 600; }
.adm-tabla a:hover { text-decoration: underline; }

/* Mapa de la campaña (js/mapa-campana.js) */
.mc-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }
.mc-filtros select { margin: 0; }
.mc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.mc-kpis div { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 8px 12px; }
.mc-kpis small { font-size: 11px; color: var(--c-text-mid); }
.mc-kpis b { display: block; font-family: var(--font-display); font-size: 19px; }
.mc-mapa-wrap { position: relative; isolation: isolate; z-index: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-border); }
#mc-mapa { height: 62vh; min-height: 380px; background: #13251E; }
body.escritorio #mc-mapa { height: calc(100vh - 250px); min-height: 480px; }
.mc-leyenda { position: absolute; z-index: 500; right: 10px; bottom: 10px; max-width: 60%; max-height: 45%; overflow: auto; background: rgba(15,28,23,.82); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px 10px; display: grid; gap: 4px; font-size: 12px; color: #F2F5F3; }
.mc-leyenda:empty { display: none; }
.mc-leyenda div { display: flex; align-items: center; gap: 8px; }
.mc-leyenda i { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.mc-leyenda span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-pop { display: grid; gap: 2px; font-family: var(--font-body); font-size: 12.5px; min-width: 170px; }
.mc-pop b { font-size: 13.5px; }
.mc-pop a { margin-top: 4px; font-weight: 700; color: #1F7A68; }
.mc-contorno { margin-top: 6px; padding: 7px 10px; border-radius: 8px; border: 1px solid #1F7A68; background: #E8F5EF; color: #1F5C47; font: 700 12px var(--font-body); cursor: pointer; text-align: left; }

/* Plan de mantenimiento DJI, guía de fallas y aliados */
.plan-dji { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 12px; margin: 4px 0 6px; }
.plan-dji__tit { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-mid); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-dji__link { background: none; border: 0; color: var(--c-amber); font: 700 12px var(--font-body); cursor: pointer; padding: 0; text-transform: none; letter-spacing: 0; }
.plan-dji__uso { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 6px; }
.plan-dji__uso div { background: var(--c-surface-1); border-radius: 10px; padding: 7px 9px; }
.plan-dji__uso small { font-size: 10.5px; color: var(--c-text-low); }
.plan-dji__uso b { display: block; font-family: var(--font-display); font-size: 16px; }
.plan-dji__item { padding: 10px 0; border-top: 1px solid var(--c-border); }
.plan-dji__fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.plan-dji__item small { display: block; font-size: 11.5px; color: var(--c-text-mid); margin-top: 2px; }
.plan-dji__nota { color: var(--c-text-low) !important; }
.plan-chip { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--c-amber) 16%, transparent); color: var(--c-amber); }
.plan-chip--pronto { background: rgba(232,197,71,.16); color: #E8C547; }
.plan-chip--vencido { background: color-mix(in srgb, var(--c-red) 18%, transparent); color: var(--c-red); }
.plan-dji__barra { height: 5px; border-radius: 3px; background: var(--c-surface-1); margin-top: 6px; overflow: hidden; }
.plan-dji__barra i { display: block; height: 100%; border-radius: 3px; background: var(--c-amber); }
.plan-dji__barra--pronto i { background: #E8C547; }
.plan-dji__barra--vencido i { background: var(--c-red); }
.plan-dji__hecho { margin-top: 7px; background: none; border: 1px solid var(--c-border); color: var(--c-text-hi); border-radius: 8px; padding: 5px 10px; font: 700 11.5px var(--font-body); cursor: pointer; }
.plan-dji__diario { margin-top: 10px; font-size: 12.5px; color: var(--c-text-mid); }
.plan-dji__diario summary { cursor: pointer; font-weight: 700; color: var(--c-text-hi); margin-bottom: 4px; }
.plan-dji__diario div { padding: 2px 0; }
.plan-dji__fuente { font-size: 11px; color: var(--c-text-low); margin-top: 10px; line-height: 1.4; }
.mant-sep { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-low); margin: 6px 0 4px; }
.aliado-cta { margin-top: 12px; border-radius: var(--r-md); padding: 12px; background: color-mix(in srgb, #25D366 10%, var(--c-surface-1)); border: 1px solid color-mix(in srgb, #25D366 35%, transparent); display: grid; gap: 10px; }
.aliado-cta__txt b { display: block; font-size: 14px; }
.aliado-cta__txt span { font-size: 12.5px; color: var(--c-text-mid); }
.aliado-cta__wa { background: #25D366; color: #fff; border: 0; border-radius: 10px; padding: 11px; font: 800 13.5px var(--font-body); cursor: pointer; }
.falla-op { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 13px 0; border: 0; border-top: 1px solid var(--c-border); background: none; color: var(--c-text-hi); font: 600 14px var(--font-body); cursor: pointer; text-align: left; }
.falla-op:first-child { border-top: 0; }
.falla-op svg { width: 16px; height: 16px; color: var(--c-text-low); }
.falla-paso { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--c-border); font-size: 13.5px; line-height: 1.45; }
.falla-paso:first-of-type { border-top: 0; }
.falla-paso__n { width: 24px; height: 24px; border-radius: 50%; background: var(--c-surface-2); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.falla-paso--ok .falla-paso__n { background: var(--c-amber); color: #06231C; }
.falla-paso--prox { opacity: .45; }
.falla-paso__bot { display: flex; gap: 8px; margin-top: 8px; }
.falla-paso__bot .btn { width: auto; margin: 0; }
.falla-final { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--c-red) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-red) 35%, transparent); font-size: 13px; line-height: 1.45; }
.aliado-card__cab { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.aliado-card__cab b { display: block; font-size: 16px; }
.aliado-card__cab small { font-size: 12px; color: var(--c-text-mid); }
.aliado-card__marca { display: block; width: 100%; max-height: 120px; object-fit: contain; object-position: left center; border-radius: 12px; background: #0E2A1A; margin-bottom: 12px; }
.aliado-card__logo { width: 46px; height: 46px; border-radius: 12px; background: #1F2A33; color: #fff; display: grid; place-items: center; font-weight: 800; }
.aliado-card__ben { font-size: 14px; margin-bottom: 12px; line-height: 1.45; }
.aliado-card__ben b { color: var(--c-amber); font-size: 18px; }
.credencial-ov { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.7); display: grid; place-items: center; padding: 20px; }
.credencial { width: 100%; max-width: 380px; border-radius: 22px; padding: 22px; color: #F2F5F3; background: linear-gradient(135deg, #1F5C47, #0F1C17 55%, #2E8F7C); background-size: 200% 200%; animation: credencial-brillo 6s ease infinite; box-shadow: 0 20px 60px rgba(0,0,0,.5); display: grid; gap: 10px; }
@keyframes credencial-brillo { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.credencial__cab { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .12em; }
.credencial__cab img { width: 26px; height: 26px; }
.credencial__cab span { font-weight: 600; letter-spacing: 0; color: #B9C7C0; }
.credencial__nombre { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin-top: 8px; }
.credencial__emp { font-size: 13px; color: #B9C7C0; }
.credencial__ben { background: rgba(255,255,255,.1); border-radius: 14px; padding: 12px; font-size: 22px; font-weight: 800; color: #F0BE72; }
.credencial__ben small { display: block; font-size: 12.5px; font-weight: 500; color: #E5ECE8; margin-top: 3px; }
.credencial__pie { display: flex; align-items: center; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.credencial__vivo { width: 9px; height: 9px; border-radius: 50%; background: #6CC04A; box-shadow: 0 0 0 0 rgba(108,192,74,.7); animation: pulso-cred 1.6s infinite; }
@keyframes pulso-cred { 70% { box-shadow: 0 0 0 8px rgba(108,192,74,0); } 100% { box-shadow: 0 0 0 0 rgba(108,192,74,0); } }
.credencial__plan { margin-left: auto; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #F0BE72; color: #0F1C17; }

/* Equipos en tarjetas (mismo estilo que la web) */
.equipo-card { display: grid; gap: 10px; width: 100%; text-align: left; margin-bottom: 10px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--c-border); background: var(--c-surface-1); color: var(--c-text-hi); font-family: var(--font-body); cursor: pointer; }
.equipo-card--inactivo { opacity: .55; }
.equipo-card__cab { display: flex; align-items: center; gap: 12px; }
.equipo-card__cab .list-item__icono { flex-shrink: 0; }
.equipo-card__nombre { flex: 1; min-width: 0; display: grid; gap: 2px; }
.equipo-card__nombre b { font-size: 15.5px; }
.equipo-card__nombre small { font-size: 12px; color: var(--c-text-mid); }
.equipo-card__estado { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.equipo-card__estado--ok { background: color-mix(in srgb, var(--c-amber) 16%, transparent); color: var(--c-amber); }
.equipo-card__estado--off { background: var(--c-surface-2); color: var(--c-text-low); }
.equipo-card__datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.equipo-card__datos div { background: var(--c-surface-2); border-radius: 10px; padding: 8px 10px; }
.equipo-card__datos small { display: block; font-size: 10.5px; color: var(--c-text-low); }
.equipo-card__datos b { font-size: 14.5px; }
.equipo-card__specs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--c-text-low); }
.equipo-card__specs b { color: var(--c-text-hi); font-weight: 600; }
.equipo-card .mant-badge { justify-self: start; margin-top: 0; }

/* Perfil → Notificaciones */
.notif-general { border-bottom: 1px solid var(--c-border); padding-bottom: 10px; margin-bottom: 4px; }
.notif-tipos { padding-left: 10px; border-left: 2px solid var(--c-border); }
.notif-tipos--off { opacity: .45; }

/* Equipos de apoyo (js/equipos-apoyo.js) */
.equipos-apoyo { margin-top: 22px; }
.equipos-apoyo h3 { margin: 0 0 2px; font-size: 15px; }
.equipos-apoyo .gasto-ayuda { margin-top: 0; }
.equipo-card--apoyo { gap: 6px; }
.apoyo-cab { display: flex; gap: 6px; margin-bottom: 8px; }
.apoyo-tipo { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--c-surface-2); color: var(--c-text-mid); }
.apoyo-uso { display: grid; gap: 10px; }
.apoyo-uso small { display: block; font-size: 11.5px; color: var(--c-text-low); }
.apoyo-uso b { font-family: var(--font-display); font-size: 26px; }
.apoyo-uso__act { display: flex; gap: 8px; }
.apoyo-uso__act input { flex: 1; margin: 0; }
.apoyo-uso__act .btn { width: auto; margin: 0; }
.apoyo-edit { padding: 12px; margin: 8px 0; border: 1px solid var(--c-amber); border-radius: var(--r-md); background: var(--c-surface-2); display: grid; gap: 4px; }
.apoyo-edit label { margin-top: 6px; }
.apoyo-edit input, .apoyo-edit select { margin: 0; }
.apoyo-edit__cada { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.apoyo-edit__tiempo { display: grid; grid-template-columns: minmax(56px, 1fr) minmax(0, 1.2fr); gap: 6px; }
.apoyo-edit__tiempo input, .apoyo-edit__tiempo select { width: 100%; min-width: 0; }
.apoyo-botones { display: flex; gap: 8px; margin-top: 10px; }
.apoyo-botones .btn { margin: 0; flex: 1; }
.apoyo-botones .apoyo-borrar { flex: 0 0 auto; width: auto; color: var(--c-red); }
.apoyo-tarea { display: grid; gap: 2px; width: 100%; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.apoyo-tarea small { font-size: 12px; color: var(--c-text-mid); }
.apoyo-tarea__lapiz svg { width: 12px; height: 12px; vertical-align: -1px; color: var(--c-amber); }
.apoyo-cab { align-items: center; }
.apoyo-cab__editar { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.apoyo-cab__editar svg { width: 14px; height: 14px; }
.apoyo-marca { font-size: 13px; color: var(--c-text-mid); margin: -2px 0 10px; }
.apoyo-previa { margin-top: 14px; padding: 12px; border-radius: var(--r-md); background: var(--c-surface-2); font-size: 13px; color: var(--c-text-mid); display: grid; gap: 4px; }
.apoyo-previa b { color: var(--c-text-hi); }
.apoyo-previa small { color: var(--c-text-low); }
.plan-chip--hecho { background: var(--c-surface-2); color: var(--c-text-low); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Reporte de varios trabajos (js/reporte-varios.js) */
.rv-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--c-border); cursor: pointer; }
.rv-item:first-child { border-top: 0; }
.rv-item input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-amber); }
.rv-item span b { display: block; font-size: 14.5px; color: var(--c-text-hi); }
.rv-item span small { font-size: 12px; color: var(--c-text-mid); }
.rv-item__ha { font-family: var(--font-display); font-weight: 800; color: var(--c-text-hi); white-space: nowrap; }
.rv-item--todos { grid-template-columns: 22px 1fr; }
.rv-pie { position: sticky; bottom: calc(var(--bottom-nav-h, 64px) + 8px); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-surface-1); border: 1px solid var(--c-border-hi); box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 5; }
.rv-pie span { font-weight: 700; font-size: 14px; }
.rv-pie .btn { width: auto; margin: 0; }

/* Instalar en iPhone / descargar en Android (js/instalar.js) */
.instalar-boton { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 420px; margin: 14px auto 0; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--c-border-hi); background: transparent; color: var(--c-text-hi); font: 700 14px var(--font-body); text-decoration: none; cursor: pointer; }
.instalar-boton svg, .instalar__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.instalar-ov { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.instalar { width: 100%; max-width: 440px; background: var(--c-surface-1, #15241E); color: var(--c-text-hi, #F2F5F3); border: 1px solid var(--c-border-hi, #2A4036); border-radius: 22px; padding: 20px; display: grid; gap: 14px; }
.instalar__cab { display: flex; gap: 12px; align-items: center; }
.instalar__cab img { width: 56px; height: 56px; border-radius: 14px; }
.instalar__cab b { display: block; font-size: 17px; }
.instalar__cab small { font-size: 13px; color: var(--c-text-mid, #B9C7C0); }
.instalar__aviso { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(240,190,114,.15); color: #F0BE72; font-size: 13px; font-weight: 700; }
.instalar__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.instalar__pasos li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.instalar__n { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #4FBFA8; color: #0F1C17; font-weight: 800; font-size: 13px; }
.instalar__ico { display: inline-grid; place-items: center; vertical-align: middle; width: 30px; height: 30px; border-radius: 8px; background: rgba(79,191,168,.15); color: #4FBFA8; margin: 0 2px; }
.instalar__nota { margin: 0; font-size: 12.5px; color: var(--c-text-mid, #B9C7C0); }
.instalar .btn { margin: 0; }