/* ═══ Componentes de Unnión (S30, bloque C) ═══
   Piezas comunes a la app de campo, el panel, el panel de empresa y lo público. Solo usan variables de tokens.css
   (se carga antes). Prefijo u- para convivir con las clases de la demo mientras cada pantalla se rehace.
   Muestra de todas, con sus estados: herramientas/diseno/componentes.html.

   Tamaños: por defecto, los del panel. Dentro de .u-campo-app (la app de campo) suben a toque de 48 px y letra de
   16 px (S30-R45). */

/* ── base ── */
.u-base *,.u-base *::before,.u-base *::after{box-sizing:border-box}
.u-base{font-family:var(--sans);font-size:var(--t-s);line-height:1.5;color:var(--tinta);-webkit-font-smoothing:antialiased}
.u-campo-app{font-size:var(--t-m)}
.u-base :focus-visible{outline:3px solid var(--hoja);outline-offset:2px}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i.grande{width:28px;height:28px}
.u-num{font-variant-numeric:tabular-nums}

/* ── títulos y textos ── */
.u-ceja{font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--verde)}
.u-titulo{font-size:var(--t-xl);font-weight:700;letter-spacing:-.015em;line-height:1.15;color:var(--tinta)}
.u-subtitulo{font-size:var(--t-l);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.u-texto2{color:var(--tinta2)}
.u-texto3{color:var(--tinta3)}

/* ── botones ── */
.u-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);min-height:40px;padding:0 var(--e4);
  border:1.5px solid transparent;border-radius:var(--radio-m);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background-color var(--dur-corta) var(--curva),border-color var(--dur-corta) var(--curva),transform var(--dur-corta) var(--curva)}
.u-campo-app .u-btn{min-height:var(--toque);padding:0 var(--e5)}
.u-btn:active{transform:translateY(1px)}
.u-btn.principal{background:var(--verde);color:var(--blanco)}
.u-btn.principal:hover{background:var(--noche)}
.u-btn.secundario{background:var(--fondo);color:var(--verde);border-color:var(--linea2)}
.u-btn.secundario:hover{border-color:var(--verde)}
.u-btn.suave{background:var(--panel);color:var(--tinta)}
.u-btn.suave:hover{background:var(--panel2)}
.u-btn.peligro{background:var(--fondo);color:var(--mal-t);border-color:currentColor}
.u-btn.peligro:hover{background:var(--mal-f)}
.u-btn.ancho{width:100%}
.u-btn:disabled,.u-btn[aria-disabled="true"]{background:var(--panel2);color:var(--tinta3);border-color:transparent;cursor:not-allowed;transform:none}
.u-btn[aria-busy="true"]{position:relative;color:transparent}
.u-btn[aria-busy="true"]::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid var(--blanco);border-right-color:transparent;animation:u-gira .7s linear infinite}
.u-btn.secundario[aria-busy="true"]::after,.u-btn.suave[aria-busy="true"]::after{border-color:var(--verde);border-right-color:transparent}
@keyframes u-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.u-btn[aria-busy="true"]::after{animation-duration:2.4s}}

/* sobre fondo oscuro (cabecera de lo público, piel del panel): el principal toma la hoja, como «Siembra hoy» del sitio */
.u-oscuro .u-btn.principal{background:var(--hoja);color:var(--noche)}
.u-oscuro .u-btn.principal:hover{background:var(--blanco)}
.u-oscuro .u-btn.secundario{background:transparent;color:var(--tinta-o);border-color:var(--borde)}

/* ── campos de formulario ── */
.u-campo{display:grid;gap:var(--e1)}
.u-campo>label{font-weight:600;font-size:var(--t-s);color:var(--tinta)}
.u-campo .ayuda{font-size:var(--t-xs);color:var(--tinta3)}
.u-campo-app .u-campo .ayuda{font-size:var(--t-s)}
.u-campo :is(input,select,textarea){width:100%;min-height:40px;padding:var(--e2) var(--e3);font:inherit;color:var(--tinta);background:var(--fondo);
  border:1.5px solid var(--linea2);border-radius:var(--radio-m);transition:border-color var(--dur-corta) var(--curva)}
.u-campo-app .u-campo :is(input,select,textarea){min-height:var(--toque);font-size:var(--t-m)}
.u-campo :is(input,select,textarea):hover{border-color:var(--tinta3)}
.u-campo :is(input,select,textarea):focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 3px rgba(0,79,40,.16)}
.u-campo.error :is(input,select,textarea){border-color:var(--mal-t)}
.u-campo .msj-error{display:flex;gap:var(--e1);align-items:center;font-size:var(--t-s);font-weight:500;color:var(--mal-t)}
.u-campo .unidad{position:relative}
.u-campo .unidad>span{position:absolute;right:var(--e3);top:50%;transform:translateY(-50%);color:var(--tinta3);pointer-events:none}
.u-campo .unidad>input{padding-right:var(--e7)}

/* opciones en botones (estado, fenología, método): una sola elección, todas a la vista */
.u-opciones{display:flex;flex-wrap:wrap;gap:var(--e2)}
.u-opciones label{position:relative}
.u-opciones input{position:absolute;opacity:0;inset:0}
.u-opciones span{display:inline-flex;align-items:center;gap:var(--e2);min-height:40px;padding:0 var(--e4);border:1.5px solid var(--linea2);border-radius:var(--radio-pildora);
  background:var(--fondo);font-weight:500;cursor:pointer}
.u-campo-app .u-opciones span{min-height:var(--toque)}
.u-opciones input:checked+span{background:var(--verde);border-color:var(--verde);color:var(--blanco)}
.u-opciones input:focus-visible+span{outline:3px solid var(--hoja);outline-offset:2px}

/* ── fichas de filtro (arriba del mapa y de las listas): se deslizan de lado ── */
.u-fichas{display:flex;gap:var(--e2);overflow-x:auto;scrollbar-width:none;padding:var(--e1) 0}
.u-fichas::-webkit-scrollbar{display:none}
.u-ficha{flex:none;display:inline-flex;align-items:center;gap:var(--e2);min-height:36px;padding:0 var(--e3);border-radius:var(--radio-pildora);
  border:1.5px solid var(--linea2);background:var(--fondo);color:var(--tinta);font:inherit;font-weight:500;cursor:pointer}
.u-campo-app .u-ficha{min-height:44px;padding:0 var(--e4)}
.u-ficha[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:var(--blanco)}
.u-ficha .cuenta{font-size:var(--t-xs);font-weight:600;padding:1px 7px;border-radius:var(--radio-pildora);background:var(--panel)}
.u-ficha[aria-pressed="true"] .cuenta{background:rgba(255,254,254,.18);color:var(--blanco)}
.u-ficha .color{width:10px;height:10px;border-radius:50%}

/* ── tarjetas ── */
.u-tarjeta{background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio);padding:var(--e5);box-shadow:var(--sombra)}
.u-tarjeta.plana{box-shadow:none}
.u-tarjeta.suave{background:var(--panel);border-color:transparent;box-shadow:none}
.u-tarjeta>header{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);margin-bottom:var(--e4)}

/* cifra grande: avance, árboles vivos, carbono. Una cifra, una frase y, si hace falta, una barra (sin gráficos técnicos) */
.u-cifra{display:grid;gap:var(--e1)}
.u-cifra b{font-size:var(--t-xxl);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--verde);font-variant-numeric:tabular-nums}
.u-cifra small{font-size:var(--t-s);color:var(--tinta2)}
.u-barra{height:8px;border-radius:var(--radio-pildora);background:var(--panel2);overflow:hidden}
.u-barra>i{display:block;height:100%;border-radius:inherit;background:var(--hoja)}

/* ── etiquetas de estado: siempre con texto (el color nunca va solo) ── */
.u-etq{display:inline-flex;align-items:center;gap:6px;padding:2px var(--e2);border-radius:var(--radio-pildora);font-size:var(--t-xs);font-weight:600;white-space:nowrap}
.u-campo-app .u-etq{font-size:var(--t-s);padding:3px var(--e3)}
.u-etq::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.u-etq.bien{background:var(--bien-f);color:var(--bien-t)}
.u-etq.aviso{background:var(--aviso-f);color:var(--aviso-t)}
.u-etq.mal{background:var(--mal-f);color:var(--mal-t)}
.u-etq.info{background:var(--info-f);color:var(--info-t)}
.u-etq.neutra{background:var(--panel);color:var(--tinta2)}

/* ── avisos en la página ── */
.u-aviso{display:grid;grid-template-columns:auto 1fr;gap:var(--e3);align-items:start;padding:var(--e3) var(--e4);border-radius:var(--radio-m);background:var(--info-f);color:var(--tinta)}
.u-aviso>.i{color:var(--info-t);margin-top:2px}
.u-aviso b{display:block;font-weight:600}
.u-aviso p{color:var(--tinta2);margin-top:2px}
.u-aviso.bien{background:var(--bien-f)}.u-aviso.bien>.i{color:var(--bien-t)}
.u-aviso.aviso{background:var(--aviso-f)}.u-aviso.aviso>.i{color:var(--aviso-t)}
.u-aviso.mal{background:var(--mal-f)}.u-aviso.mal>.i{color:var(--mal-t)}

/* ── tablas del panel: siempre dentro de .u-tabla-caja, que se desliza de lado en pantallas angostas ── */
.u-tabla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radio-m)}
.u-tabla-caja>.u-tabla{min-width:560px}
.u-tabla{width:100%;border-collapse:separate;border-spacing:0;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio-m);overflow:hidden;font-size:var(--t-s)}
.u-tabla th{text-align:left;font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta3);background:var(--panel);padding:var(--e2) var(--e3);border-bottom:1px solid var(--linea)}
.u-tabla td{padding:var(--e3);border-bottom:1px solid var(--linea);vertical-align:middle}
.u-tabla tr:last-child td{border-bottom:0}
.u-tabla tbody tr:hover td{background:#F8FAF6}
.u-tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.u-tabla .codigo{font-family:var(--codigo);font-size:13px;color:var(--tinta2)}

/* ── tarjeta del mapa: abajo, sobre el mapa, al tocar un árbol o un punto de visita (S30-R25) ── */
.u-mapa-tarjeta{display:grid;grid-template-columns:96px 1fr;gap:var(--e3);background:var(--fondo);border-radius:var(--radio);padding:var(--e3);box-shadow:var(--sombra2);max-width:440px}
.u-mapa-tarjeta>img,.u-mapa-tarjeta>.foto{width:96px;height:96px;border-radius:var(--radio-m);object-fit:cover;background:var(--panel2)}
.u-mapa-tarjeta .especie{font-weight:700;font-size:var(--t-m);line-height:1.25}
.u-mapa-tarjeta .cientifico{font-style:italic;color:var(--tinta2);font-size:var(--t-s)}
.u-mapa-tarjeta .datos{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);margin-top:var(--e2);font-size:var(--t-s);color:var(--tinta2)}
.u-mapa-tarjeta .datos span{display:inline-flex;align-items:center;gap:var(--e1)}
.u-mapa-tarjeta .datos .i{width:16px;height:16px;color:var(--verde)}
.u-mapa-tarjeta .acciones{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}
.u-mapa-tarjeta .acciones .u-btn{padding:0 var(--e3);white-space:nowrap}

/* globo agrupado del mapa (S30-R23): el número de árboles; el color de especie va en el árbol suelto */
.u-globo{display:grid;place-items:center;min-width:40px;height:40px;padding:0 var(--e2);border-radius:var(--radio-pildora);background:var(--verde);color:var(--blanco);
  font-weight:700;font-size:var(--t-s);border:3px solid var(--blanco);box-shadow:0 4px 12px rgba(0,35,19,.3);font-variant-numeric:tabular-nums}
.u-globo.grande{min-width:52px;height:52px;font-size:var(--t-m)}
.u-arbol-punto{width:18px;height:18px;border-radius:50%;border:3px solid var(--blanco);box-shadow:0 2px 6px rgba(0,35,19,.35)}

/* ── conmutador de dos modos (Ilustrado | Satélite) ── */
.u-conmutador{display:inline-flex;padding:3px;border-radius:var(--radio-pildora);background:var(--fondo);box-shadow:var(--sombra)}
.u-conmutador button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--e3);border:0;border-radius:var(--radio-pildora);background:transparent;font:inherit;font-weight:600;color:var(--tinta2);cursor:pointer}
.u-campo-app .u-conmutador button{min-height:44px}
.u-conmutador button[aria-pressed="true"]{background:var(--verde);color:var(--blanco)}