/* ============================================================
   panel.css — Sistema de diseño "Campos" (handoff jul 2026)
   Shell + sidebar oliva + componentes comunes del panel.
   Tokens: crema #F7F5F0 · musgo #4A5D4E · oliva #3E4A3A ·
   bordó #9C3D2E · dorado #B8A47C · Playfair + Instrument Sans.
   Breakpoint único: 820px (sidebar -> top bar con chips).
   ============================================================ */
:root{
  /* Tokens nuevos */
  --app:#F7F5F0; --card:#fff;
  --musgo:#4A5D4E; --musgo-h:#3E4A3A; --oliva:#3E4A3A;
  --bordo:#9C3D2E; --bordo-t:#F5E9E5;
  --dorado:#B8A47C; --dorado-claro:#E8C97A;
  /* El dorado de marca sobre el oliva del menu daba 3,8 de contraste y se
     leia apagado. Este es el mismo dorado un punto mas claro, solo para
     texto sobre fondo oscuro: 4,8. En el resto del panel no cambia nada. */
  --dorado-sobre-oscuro:#CBB88C;
  --tinta:#2D2D2D; --gris:#8A8A8A;
  --tint-musgo:#EDF0EC; --tint-visita:#F1EBDD; --visita-tx:#8a6d3b;
  --borde:rgba(45,45,45,.12); --borde-i:rgba(45,45,45,.2);
  --wsp:#25D366;
  /* Radios. En el telefono el sistema se endereza a 4px (decision de Charlie,
     ago 2026): se redefinen abajo, dentro del @media, y NADA los usa por
     valor suelto. Si algun dia se adopta el 4 tambien en escritorio, son
     estas tres lineas y listo. */
  --r-card:12px; --r-ctrl:8px; --r-chip:99px;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Instrument Sans',system-ui,sans-serif;

  /* Alias legados (los usan las pantallas existentes) */
  --side:#3E4A3A; --input:#fff;
  --bc:rgba(45,45,45,.12); --bi:rgba(45,45,45,.2); --div:rgba(45,45,45,.08);
  --t1:#2D2D2D; --t2:rgba(45,45,45,.7); --t3:#8A8A8A; --t4:#8A8A8A;
  --green:#4A5D4E; --green-h:#3E4A3A; --green-fill:#4A5D4E;
  --green-t:#EDF0EC; --green-tx:#4A5D4E; --green-b:#cfd8cf;
  --amber:#8a6d3b; --amber-bg:#F1EBDD; --amber-b:#e4d9bd;
  --red:#9C3D2E; --red-bg:#F5E9E5; --red-b:rgba(156,61,46,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.panel{font-family:var(--sans);background:var(--app);color:var(--tinta);display:flex;min-height:100vh;font-size:14px;line-height:normal;-webkit-font-smoothing:antialiased}
/* line-height explícito a propósito: /admin carga además styles.css, que pone
   line-height:1.5 en body. Sin esto, los ítems del menú pasaban de 34 a 38px
   de alto al entrar a esa pantalla y el menú entero se movía. */
/* Un enlace del panel hereda el color del texto que lo rodea... salvo que
   tenga clase propia que diga otra cosa. El :where() es a proposito: deja la
   regla con peso CERO, asi cualquier clase (un boton, un chip) le gana.

   Sin eso, esta regla le ganaba por especificidad a .btn-green y a .btn-bordo,
   y todo boton que fuera un <a> en vez de un <button> salia con letra negra
   sobre verde oscuro: 1,9 de contraste, ilegible. Los <button> estaban bien y
   los <a> no, aunque se vieran iguales. */
.panel :where(a){color:inherit}
.mono{font-family:ui-monospace,monospace}
.hidden{display:none !important}

/* ============ Sidebar (desktop) ============ */
.side{width:224px;flex:0 0 224px;background:var(--oliva);color:#F1EFE8;padding:20px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:0 20px 22px}
.brand .sq{width:34px;height:34px;border-radius:8px;background:var(--bordo);color:#fff;display:flex;align-items:center;justify-content:center;font:700 16px var(--serif)}
.brand .nm{font:700 15px var(--serif);color:#fff;line-height:1.1}
.brand .sm{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,245,240,.55)}
.nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;margin:0}
.nav a{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:7px;font-size:13.5px;color:rgba(247,245,240,.85);text-decoration:none;font-weight:500}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.active{background:rgba(255,255,255,.12);color:#fff;font-weight:700}
.nav .badge{background:var(--bordo);color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px}
.nav .badge.soft{background:rgba(255,255,255,.14);color:rgba(247,245,240,.75);font-weight:600}
.nav a.active .badge.soft{background:rgba(255,255,255,.22);color:#fff}
.nav .grp{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,240,.4);font-weight:700;padding:16px 12px 5px;margin:0}
.nav .grp:first-child{padding-top:4px}
/* Sub-items de la seccion abierta. Lo que salio del menu de 12 vive aca dentro,
   desplegado solo en la seccion donde estas parado. */
.nav .sub{display:flex;flex-direction:column;margin:1px 0 7px 25px;padding-left:9px;border-left:1px solid rgba(255,255,255,.16)}
.nav .sub a{padding:6px 10px;font-size:12.5px;font-weight:500;color:rgba(247,245,240,.6);border-radius:6px}
.nav .sub a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav .sub a.active{background:rgba(255,255,255,.11);color:#fff;font-weight:700}
.side .foot .cta-2{display:block;text-align:center;background:rgba(255,255,255,.10);color:#F1EFE8;text-decoration:none;font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:8px;margin-bottom:12px}
.side .foot .cta-2:hover{background:rgba(255,255,255,.17);color:#fff}
.side .foot .cta-2.active{background:rgba(255,255,255,.2);color:#fff;font-weight:700}
.side .foot{margin-top:auto;padding:14px 20px 0;border-top:1px solid rgba(255,255,255,.12);display:block}
.side .foot .cta{display:block;text-align:center;background:var(--bordo);color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:9px 12px;border-radius:8px;margin-bottom:12px}
.side .foot .cta:hover{background:#86331f}
.side .foot .weblink{font-size:12px;color:var(--dorado-sobre-oscuro);text-decoration:none;font-weight:600;display:inline-block}
.side .foot .em{font-size:12px;color:rgba(247,245,240,.7);margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .foot .ses{font-size:11px;color:rgba(247,245,240,.45)}
.side .foot .out{background:none;border:none;cursor:pointer;color:rgba(247,245,240,.45);font-size:11px;padding:0;font-family:inherit;text-decoration:underline}
.side .foot .out:hover{color:#fff}

/* ============ Barras móviles (<820px) ============
   En escritorio no existe ninguna de las tres: el menu es el sidebar. */
.mtop,.mt-subs,.mbot,.hoja{display:none}

/* ============ Main ============ */
.main{flex:1;min-width:0;display:flex;justify-content:center;padding:24px clamp(14px,3vw,32px) 80px}
.col{width:100%;max-width:1180px}
.h1{font:700 clamp(20px,3vw,25px) var(--serif);color:var(--tinta);margin:0}
.sub{font-size:13.5px;color:var(--gris);margin:4px 0 0}
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.count-tag{font-size:13px;color:var(--gris)}

/* Los iconos de assets/iconos.js. Van dentro de botones y renglones de texto,
   asi que se alinean con la linea de base y no se dejan achicar por un flex. */
.ic{display:inline-block;vertical-align:-.18em;flex:0 0 auto}
button .ic,a .ic{pointer-events:none}

/* ============ Cards + botones ============ */
.card{background:var(--card);border:1px solid var(--borde);border-radius:12px;padding:20px}
.btn{border:none;border-radius:8px;padding:9px 18px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:36px}
.btn-green{background:var(--musgo);color:#fff}
.btn-green:hover{background:var(--musgo-h)}
.btn-green:disabled{background:#ddd9cf;color:#9a9e97;cursor:not-allowed}
.btn-bordo{background:var(--bordo);color:#fff}
.btn-bordo:hover{background:#86331f}
.btn-sec{background:#fff;border:1px solid var(--borde-i);color:var(--musgo)}
.btn-sec:hover{background:var(--app)}
.btn-sm{padding:6px 12px;font-size:12.5px;min-height:0}
.btn-full{width:100%;text-align:center}
.spin{display:inline-block;width:14px;height:14px;border:2px solid #ffffff88;border-top-color:#fff;border-radius:99px;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.spin.spin-t{border-color:rgba(45,45,45,.22);border-top-color:var(--tinta)}
.err-box{background:var(--bordo-t);border:1px solid var(--red-b);border-radius:9px;padding:12px 14px;font-size:13px;color:var(--bordo);margin-top:12px}
.step-tag{font-size:11px;letter-spacing:.04em;color:var(--gris);text-transform:uppercase;font-weight:600}
.step-title{font:600 15px var(--serif);margin-left:8px}
.step-head{display:flex;align-items:baseline;margin-bottom:14px}

/* ============ Chips (filtros / estados) ============ */
.chip-f{font-size:12px;font-weight:600;padding:7px 13px;border-radius:99px;cursor:pointer;background:#fff;color:var(--tinta);border:1px solid var(--borde-i);font-family:inherit}
.chip-f.active{background:#2D2D2D;color:#fff;border-color:#2D2D2D}
.chip-f.active-musgo{background:var(--musgo);color:#fff;border-color:var(--musgo)}

/* ============ Sub-pestañas (Propiedades: Todas | Incompletas) ============ */
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--borde);margin:16px 0 0;flex-wrap:wrap}
.subtabs a{font-size:13.5px;font-weight:600;padding:9px 16px;text-decoration:none;color:var(--gris);border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs a:hover{color:var(--tinta)}
.subtabs a.on{color:var(--tinta);border-bottom-color:var(--bordo)}
.subtabs button{font-family:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;background:none;border:none;cursor:pointer;color:var(--gris);border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs button:hover{color:var(--tinta)}
.subtabs button.active{color:var(--tinta);border-bottom-color:var(--bordo)}

/* ============ Badges de estado ============ */
.badge-st{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.badge-nuevo{background:var(--bordo-t);color:var(--bordo)}
.badge-contactado{background:var(--tint-musgo);color:var(--musgo)}
.badge-visita{background:var(--tint-visita);color:var(--visita-tx)}
.badge-negociacion{background:var(--oliva);color:#fff}
.badge-cerrado{background:#eee;color:var(--gris)}
.badge-disponible{background:var(--musgo);color:#fff}
.badge-reservado{background:var(--dorado);color:#fff}
.badge-vendido{background:#9a9a9a;color:#fff}

/* ============ KPIs ============ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid rgba(45,45,45,.1);border-radius:10px;padding:14px 16px;cursor:pointer}
.kpi .k-l{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
.kpi .k-n{font:700 26px var(--serif);color:var(--tinta);margin-top:2px}
.kpi .k-n.bordo{color:var(--bordo)}
.kpi .k-s{font-size:11.5px;color:var(--gris)}
.kpi .k-s.alerta{color:var(--bordo);font-weight:600}

/* ============ Inputs redondos (buscadores) ============ */
.search-round{flex:1;min-width:min(100%,220px);padding:10px 14px;border:1px solid rgba(45,45,45,.18);border-radius:99px;font-size:13px;background:#fff;font-family:inherit;color:var(--tinta)}
.search-round:focus{outline:2px solid var(--green-b)}

/* ============ Móvil (<820px): cabecera de 56 + barra abajo ============
   Antes habia una sola barra arriba con dos filas de chips que scrolleaban
   729px de costado — Campos, Mercado, Contenido y Cargar quedaban fuera de la
   vista — y ocupaba 148px de alto fijo, un 20% de la pantalla.
   Ahora arriba va solo donde estas, y los destinos van abajo, donde llega el
   pulgar. El contenido pasa por debajo de la barra, que es opaca.
   ============================================================ */
@media(max-width:819px){
  body.panel{flex-direction:column}
  .side{display:none}

  /* --- La franja del reloj, en el verde del encabezado (pedido de Charlie) ---
     Instalada, la app pasa a barra de estado transparente: el contenido llega
     hasta el borde de arriba y el reloj queda ENCIMA de lo que haya. Como la
     cabecera es oliva y esta pegada arriba, se ve una sola pieza verde de punta
     a punta, que es lo que se busca.
     Esta franja es el respaldo: si alguna pantalla no llegara a dibujar la
     cabecera, abajo del reloj hay crema y el reloj -que ahora es BLANCO- no se
     leeria. Con inset 0 (iPhone con boton, o el navegador comun) mide 0 y no
     existe. Va por encima de la hoja de filtros a proposito: la barra de estado
     esta arriba de todo. */
  body.panel::before{content:'';position:fixed;top:0;left:0;right:0;z-index:60;
                     height:env(safe-area-inset-top);background:var(--oliva);
                     pointer-events:none}

  /* --- Cabecera: 56px, marca + en que pantalla estas + PEPE ---
     El env() de arriba es por la app instalada. Con viewport-fit=cover el
     navegador deja de frenar el contenido en los bordes del telefono: sin este
     padding, en un iPhone con isla el reloj se sentaria arriba del titulo.
     Instalada con la barra de estado opaca el inset vale 0 y no cambia nada,
     asi que sirve en los dos casos sin tener que adivinar cual es. */
  .mtop{display:flex;align-items:center;background:var(--oliva);
        height:calc(56px + env(safe-area-inset-top));
        padding:env(safe-area-inset-top) 16px 0;position:sticky;top:0;z-index:30}
  .mtop .mt-head{display:flex;align-items:center;gap:10px;width:100%;min-width:0}
  .mtop .sq{width:28px;height:28px;border-radius:var(--r-ctrl);background:var(--bordo);color:#fff;
            display:flex;align-items:center;justify-content:center;font:700 13px var(--serif);flex:0 0 auto}
  .mtop .mt-donde{font:600 17px var(--serif);color:#fff;flex:1;min-width:0;
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mtop .mt-pepe{flex:0 0 44px;height:44px;display:flex;align-items:center;justify-content:center;
                 font-size:19px;text-decoration:none;border-radius:var(--r-ctrl);background:rgba(255,255,255,.12)}

  /* --- Sub-items de la seccion. Estan fuera de la cabecera a proposito: se
         van con el scroll en vez de comer alto fijo toda la pantalla. --- */
  .mt-subs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
           padding:10px 16px;background:var(--app);border-bottom:1px solid var(--borde)}
  .mt-subs a{flex:none;min-height:44px;display:flex;align-items:center;padding:0 15px;
             border-radius:var(--r-chip);font-size:14px;font-weight:600;text-decoration:none;
             color:var(--gris);background:#fff;border:1px solid var(--borde)}
  .mt-subs a.active{background:var(--oliva);color:#fff;border-color:var(--oliva)}

  /* --- Barra de abajo: cinco destinos fijos ---
     La fila mide 56px y la franja del gesto se suma aparte: en un iPhone con
     barra de gestos son 90px en total, y en uno con boton de inicio el inset
     vale 0 y son 56, sin franja muerta. Por eso va con env() y no con 34. */
  .mbot{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--oliva);
        display:grid;grid-template-columns:repeat(5,1fr);
        height:calc(56px + env(safe-area-inset-bottom));
        padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        border-top:1px solid rgba(255,255,255,.10)}
  .mbot>*{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
          gap:2px;text-decoration:none;background:none;border:0;cursor:pointer;
          font-family:inherit;color:rgba(247,245,240,.62);padding:0 2px;min-width:0}
  .mbot .mb-i{font-size:17px;line-height:1}
  /* En 78px por destino, "Búsquedas" es la palabra justa. Con Instrument Sans
     entra; si la fuente no llega a cargar y cae en la del sistema, que es mas
     ancha, se corta con puntos en vez de encimarse con la de al lado. */
  .mbot .mb-l{font-size:14px;font-weight:600;line-height:1;max-width:100%;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbot>.active{color:#fff}
  .mbot>.active .mb-i{color:var(--dorado-sobre-oscuro)}
  .mbot .badge{position:absolute;top:4px;left:calc(50% + 6px);background:var(--bordo);color:#fff;
               font-size:10.5px;font-weight:700;padding:0 5px;border-radius:99px;line-height:16px}
  .mbot .badge.soft{background:rgba(255,255,255,.28)}

  /* --- La hoja de "Mas" --- */
  body.hoja-abierta{overflow:hidden}
  .hoja{display:block;position:fixed;inset:0;z-index:50}
  .hoja.oculta{display:none}
  .hoja-fondo{position:absolute;inset:0;background:rgba(31,35,30,.45)}
  .hoja-caja{position:absolute;left:0;right:0;bottom:0;background:var(--card);
             border-radius:14px 14px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom));
             max-height:80vh;overflow-y:auto}
  .hoja-tirador{width:38px;height:4px;border-radius:99px;background:var(--borde-i);margin:0 auto 10px}
  .hoja-items{display:flex;flex-direction:column}
  .hoja-items a{display:flex;align-items:center;gap:12px;min-height:52px;text-decoration:none;
                color:var(--tinta);font-size:16px;font-weight:600;
                border-bottom:1px solid var(--line,var(--div))}
  .hoja-items a:last-child{border-bottom:0}
  .hoja-items .hj-i{width:26px;text-align:center;color:var(--musgo);font-size:17px}
  .hoja-items .hj-cta{color:var(--bordo)}
  .hoja-items .hj-cta .hj-i{color:var(--bordo)}
  .hoja-items .badge{margin-left:auto;background:var(--bordo);color:#fff;font-size:11px;
                     font-weight:700;padding:1px 7px;border-radius:99px}
  .hoja-items .badge.soft{background:var(--tint-musgo);color:var(--musgo)}
  .hoja-pie{display:flex;align-items:center;gap:10px;padding-top:14px;margin-top:6px;
            border-top:1px solid var(--div);font-size:14px;color:var(--gris)}
  .hoja-pie #hoja-em{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hoja-pie .out{background:none;border:0;color:var(--gris);font:inherit;text-decoration:underline;
                 cursor:pointer;min-height:44px;padding:0 4px}

  /* El contenido pasa por debajo de la barra; este es el aire para que la
     ultima tarjeta se pueda leer entera. */
  .main{padding:16px 16px calc(56px + env(safe-area-inset-bottom) + 16px)}
}

/* ============ Navegación fluida (assets/nav.js) ============
   El menú se dibuja con JS. Antes de que corra, #side-mount era un <aside>
   vacío de ancho 0: el contenido arrancaba pegado a la izquierda y saltaba a su
   lugar cuando aparecía la barra. Reservarle el lugar desde el primer pixel
   saca ese salto de arranque. */
body.panel > #side-mount{width:224px;flex:0 0 224px;background:var(--oliva)}

/* El fondo va tambien en <html>, no solo en <body>. Es la tela sobre la que
   pinta el navegador cuando por un instante no hay nada mas: sin esto es
   blanca, y cualquier destello se veia blanco contra el crema del panel. */
html{background:var(--app)}

/* ACA VIVIA EL PARPADEO. Habia dos cosas peleando en el borde de arriba:
   1. Una barra de progreso de 2px pegada al techo de la pantalla, que aparecia
      y se iba en cada click.
   2. Un fundido cruzado entre la pantalla vieja y la nueva. Durante el cruce
      las dos estan a medias, la suma no llega a tapar del todo, y se colaba la
      tela de atras: por eso el destello claro. Encima la pantalla nueva entraba
      con un translateY(4px), o sea empezaba 4px mas abajo — y esos 4px del
      borde superior quedaban al descubierto. Ese era el filo.
   Las dos se fueron. El cambio de pantalla ahora es instantaneo, sin cruce y
   sin nada moviendose contra el techo: la tapa de carga ya avisa cuando algo
   esta viajando, no hace falta una barrita ademas. */

@media(max-width:819px){
  body.panel > #side-mount{display:none}
}

/* ============ Cargando: tapa + cosechadora + esqueleto (assets/cargando.js) ============ */

/* LA TAPA. Mientras carga, una capa opaca cubre el área de trabajo: no se ve el
   andamiaje de atrás armándose. El menú lateral queda a la vista a propósito —
   es lo único que no está cargando, y taparlo daría la sensación de que se cayó
   todo. Aparece recién a los 140ms (lo maneja el JS): si el dato ya estaba en
   memoria, no llega ni a aparecer. */
.cg-tapa{position:fixed;top:0;right:0;bottom:0;left:224px;background:var(--app);
  z-index:60;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .14s ease,visibility 0s .14s}
/* Aparece SECA, sin fundido: si entrara despacio se veria el andamiaje debajo
   mientras se opaca, que es justo lo que la tapa viene a esconder. Se va con un
   fundido corto — ahi abajo ya esta el contenido final, no hay nada que tapar. */
.cg-tapa.va{opacity:1;visibility:visible;transition:none}
/* En el telefono la tapa no llega hasta abajo: la barra de destinos queda a la
   vista, por el mismo motivo que el sidebar en la computadora. Es lo unico que
   no esta cargando, y taparla daria la sensacion de que se cayo todo. */
@media(max-width:819px){.cg-tapa{left:0;bottom:calc(56px + env(safe-area-inset-bottom))}}

/* Red de seguridad sin JS: si por lo que sea cargando.js no llega a correr, la
   tapa que viene puesta desde el HTML se rinde sola y no deja el panel tapado. */
.cg-tapa.va{animation:cg-rendirse .4s ease 20s forwards}
@keyframes cg-rendirse{to{opacity:0;visibility:hidden}}

/* EL ESQUELETO. No está para mirarlo — está para ocupar el lugar exacto de lo
   que viene, así cuando la tapa se va no se mueve nada. */
.cg{width:100%;flex:1 1 100%;grid-column:1/-1}
.cg-b{background:#ECEAE4;border-radius:6px;margin-bottom:8px}

/* LA COSECHADORA. Dos tonos: verde musgo y trigo. */
.cg-cos{display:flex;flex-direction:column;align-items:center;gap:4px}
.cg-svg{width:220px;height:106px;overflow:visible}
.cg-txt{font-size:13px;font-weight:600;color:var(--gris);letter-spacing:.02em}
.cg-pts i{font-style:normal;opacity:0;animation:cg-punto 1.2s infinite}
.cg-pts i:nth-child(2){animation-delay:.2s}
.cg-pts i:nth-child(3){animation-delay:.4s}
@keyframes cg-punto{0%,60%,100%{opacity:0}30%{opacity:1}}

.cg-campo{animation:cg-avanza 1.9s linear infinite}
@keyframes cg-avanza{to{transform:translateX(-105px)}}
.cg-maq{animation:cg-bota .42s ease-in-out infinite alternate}
@keyframes cg-bota{to{transform:translateY(.8px)}}
.cg-carrete{transform-origin:150px 48px;animation:cg-gira 1.15s linear infinite}
.cg-rueda{animation:cg-gira .95s linear infinite}
.cg-rueda.cg-lenta{animation-duration:.72s}
@keyframes cg-gira{to{transform:rotate(360deg)}}

.cg-polvo circle{fill:#D8D3C7}
.cg-p1{animation:cg-polvo 1.5s ease-out infinite}
.cg-p2{animation:cg-polvo 1.5s ease-out infinite .5s}
.cg-p3{animation:cg-polvo 1.5s ease-out infinite 1s}
@keyframes cg-polvo{0%{opacity:0;transform:translate(0,0) scale(.4)}
  25%{opacity:.7}100%{opacity:0;transform:translate(-16px,-12px) scale(1.5)}}

.cg-humo circle{fill:#C6C2B8}
.cg-h1{animation:cg-humo 1.6s ease-out infinite}
.cg-h2{animation:cg-humo 1.6s ease-out infinite .8s}
@keyframes cg-humo{0%{opacity:0;transform:translate(0,0) scale(.3)}
  20%{opacity:.55}100%{opacity:0;transform:translate(-7px,-16px) scale(1.4)}}

.cg-g1{animation:cg-grano 1.1s ease-in infinite}
.cg-g2{animation:cg-grano 1.1s ease-in infinite .36s}
.cg-g3{animation:cg-grano 1.1s ease-in infinite .72s}
@keyframes cg-grano{0%{opacity:0;transform:translate(0,0)}
  18%{opacity:1}70%{opacity:1;transform:translate(-40px,-24px)}
  100%{opacity:0;transform:translate(-58px,-18px)}}

/* --- las formas del esqueleto --- */
.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
/* 347px es lo que mide una tarjeta de campo de verdad (.pcard): foto 140 +
   cuerpo + la fila de botones. Medido, no estimado. */
.cg-card{background:#fff;border:1px solid var(--borde);border-radius:12px;overflow:hidden;min-height:347px}
.cg-card .cg-foto{margin:0;border-radius:0}
.cg-card-txt{padding:14px 16px 6px}

.cg-tabla{background:#fff;border:1px solid var(--borde);border-radius:12px;overflow:hidden}
.cg-tabla .cg-thead{margin:0;border-radius:0;opacity:.65}
.cg-fila{display:flex;align-items:center;gap:12px;padding:13px 18px;
  border-bottom:1px solid rgba(45,45,45,.06)}
.cg-fila .cg-b{margin:0}
.cg-fila .cg-b:last-child{margin-left:auto}

.cg-lista{display:flex;flex-direction:column;gap:12px}
.cg-item{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:14px 16px}
.cg-item .cg-b:last-child{margin-bottom:0}

.cg-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
/* 90px es lo que mide un .kpi de verdad. */
.cg-kpi{background:#fff;border:1px solid rgba(45,45,45,.1);border-radius:10px;padding:14px 16px;min-height:90px}
.cg-kpi .cg-b:last-child{margin-bottom:0}

.cg-chips{display:flex;flex-wrap:wrap;gap:8px}
.cg-chips .cg-chip{height:30px;border-radius:99px;margin:0}

.cg-tablero{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:14px}
.cg-tablero .cg-col{background:#f4f2ec;border-radius:12px;padding:12px}
.cg-tablero .cg-item{padding:11px 12px;margin-bottom:10px}
@media(max-width:819px){.cg-tablero{grid-template-columns:1fr}}

/* Quien pidió menos movimiento, ve la cosechadora quieta. */
@media (prefers-reduced-motion: reduce){
  .cg-campo,.cg-maq,.cg-carrete,.cg-rueda,.cg-polvo circle,.cg-humo circle,
  .cg-grano circle,.cg-pts i{animation:none}
}


/* ============================================================
   MÓVIL — LA BASE (tanda 1, ago 2026)
   Tres reglas para las quince pantallas por debajo de 820px. No cambian nada
   en la computadora. Salen de la auditoría de agosto: el panel no estaba roto
   por descuido, estaba roto por estas tres cosas repetidas quince veces.
   ============================================================ */
@media(max-width:819px){

  /* 0. Los radios se enderezan en el telefono. */
  :root{--r-card:4px; --r-ctrl:4px; --r-chip:4px}

  /* 1. NINGÚN CAMPO POR DEBAJO DE 16px.
     Safari en iPhone acerca la página solo cuando tocás un campo con letra
     menor a 16px, y al volver queda corrida: es el famoso "se sale del eje".
     El !important es a propósito. Cada pantalla trae su propio <style> que se
     carga DESPUÉS de este archivo (.bform input{font-size:13px} y compañía) y
     le gana por especificidad. Esto es un piso, no una preferencia estética:
     tiene que ganar siempre, incluso a una regla escrita después. */
  input,select,textarea{font-size:16px !important}

  /* El alto va con la letra: 16px adentro de una caja de 30 no entra. */
  select,
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){
    min-height:44px
  }

  /* 2. NADA MÁS ANCHO QUE SU CONTENEDOR.
     Un <select> se estira al largo de su opción más larga y una imagen a su
     tamaño real. Sin tope empujan la página entera y desaparecen los márgenes. */
  input,select,textarea,img,video,canvas,iframe,pre{max-width:100%}

  /* Mismo bug un nivel más adentro: un hijo de flex no se deja achicar por
     debajo de su contenido salvo que se le diga min-width:0. */
  .fi-row>*,.fi-linkbox>*,.facts>*,.q>*,.bqadd>*,.segform>*{min-width:0}

  /* 2b. LO QUE SE TOCA MIDE 44px.
     Los chips de filtro medían 30px de alto en todas las pantallas. Es el
     control que mas se usa desde el telefono y el que mas cuesta acertar. */
  .chip-f{min-height:44px;padding:7px 16px;font-size:14px}

  /* 3. UNA PALABRA LARGA NO ROMPE LA FILA.
     Links pegados, mails y nombres de archivo sin espacios. */
  body.panel{overflow-wrap:break-word}

  /* --- fichas: acá vivía el peor desborde del panel ---
     El select "Propiedad de la cartera" medía 863px y la tabla del historial
     715: entre las dos empujaban la página a 895px de ancho en un teléfono
     de 375. El select ya queda topeado por la regla 2; la tabla necesita un
     contenedor propio que se note que scrollea. */
  .fi-chip .t{max-width:100%}
  .fi-hist{min-width:560px}
}

/* Contenedor para las tablas que todavía no entran en el teléfono. La página
   nunca se mueve de costado; la tabla, adentro de esto, sí. En la tanda 2
   estas tablas pasan a ser tarjetas y esto queda sin uso. */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}