/*
 * Tokens del sistema de diseño de Semences del Caribe.
 * Colores: tema oscuro de semences-sitio-web (src/app/globals.css). app.js lee estos mismos
 * tokens (PALETA) para pintar la escena 3D y los letreros: cambiar un color aquí lo cambia en todo.
 * Los colores que lee el 3D van siempre en hexadecimal de 6 dígitos.
 */
:root {
    /* Superficies */
    --sdc-fondo: #0B1F14;
    --sdc-tarjeta: #12291B;
    --sdc-apagado: #1B3324;
    --sdc-fondo-velo: rgba(11, 31, 20, 0.85);       /* --sdc-fondo translúcido, sobre la escena */
    --sdc-fondo-velo-suave: rgba(11, 31, 20, 0.7);
    --sdc-borde: rgba(255, 255, 255, 0.12);

    /* Texto */
    --sdc-blanco: #FFFFFF;
    --sdc-texto: #E7F6EC;
    --sdc-texto-suave: #A7C4B2;

    /* Marca */
    --sdc-primario: #22C55E;
    --sdc-primario-oscuro: #15803D;
    --sdc-verde-profundo: #14532D;
    --sdc-brote: #4ADE80;          /* Color del logo (icono Sprout) */
    --sdc-menta: #BBF7D0;
    --sdc-menta-claro: #DCFCE7;
    --sdc-claro: #F0FDF4;
    --sdc-acento: #A16207;         /* Botón "Pedir cotización" del sitio */
    --sdc-acento-hover: #8A5306;
    --sdc-dorado: #EAB308;

    /* Señalización */
    --sdc-peligro: #DC2626;
    --sdc-peligro-oscuro: #B91C1C;
    --sdc-peligro-claro: #FCA5A5;  /* Errores de formulario: el rojo de peligro no se lee sobre fondo oscuro */
    --sdc-agua: #0C4A6E;
    --sdc-agua-claro: #38BDF8;
    --sdc-agua-palido: #BAE6FD;

    /* Tipografía: familias y escala (mínimo 0.7rem = 11px) */
    --font-titulo: 'Lora', Georgia, serif;
    --font-cuerpo: 'Raleway', 'Segoe UI', sans-serif;
    --font-dato: 'JetBrains Mono', ui-monospace, monospace;
    --sdc-texto-xs: 0.7rem;
    --sdc-texto-sm: 0.8rem;
    --sdc-texto-md: 0.9rem;
    --sdc-texto-lg: 1rem;
    --sdc-texto-xl: 1.25rem;
    --sdc-texto-cifra: 1.6rem;  /* Cifras grandes de las fichas (panel de indicadores) */
    --sdc-peso-normal: 400;
    --sdc-peso-medio: 600;
    --sdc-peso-fuerte: 700;
    --sdc-peso-extra: 800;

    /* Espaciado */
    --sdc-espacio-1: 4px;
    --sdc-espacio-2: 6px;
    --sdc-espacio-3: 8px;
    --sdc-espacio-4: 12px;
    --sdc-espacio-5: 16px;
    --sdc-espacio-6: 20px;

    /* Bordes, sombras y movimiento */
    --sdc-radio-barra: 4px;     /* Extremo redondeado de las barras de los gráficos */
    --sdc-radio-xs: 6px;        /* Filas y etiquetas emergentes pequeñas */
    --sdc-radio-sm: 10px;
    --sdc-radio-md: 16px;
    --sdc-radio-pildora: 999px;
    --sdc-sombra: 0 4px 12px rgba(0, 0, 0, 0.3);
    --sdc-sombra-acento: 0 4px 10px rgba(161, 98, 7, 0.35);
    --sdc-transicion: 0.2s ease;
    --sdc-opacidad-apagado: 0.55; /* Botones y campos deshabilitados */

    /* Velos */
    --sdc-velo-dialogo: rgba(0, 0, 0, 0.6);
    --sdc-borde-sobre-blanco: rgba(20, 83, 45, 0.18); /* Fichas blancas de los logos, en los dos temas */
    --sdc-sombra-superior: 0 -2px 10px rgba(0, 0, 0, 0.15); /* Barra fija abajo */
    --sdc-peligro-velo: rgba(220, 38, 38, 0.14);

    /* Ancho de los diálogos */
    --sdc-dialogo-sm: 560px;
    --sdc-dialogo-md: 640px;
    --sdc-dialogo-lg: 720px;
    --sdc-dialogo-xl: 960px;  /* Auditoría: lista ancha con filtros */

    /* Capas (z-index), de abajo arriba */
    --sdc-capa-emergente: 2;          /* Etiqueta emergente dentro de un diálogo */
    --sdc-capa-escena-etiqueta: 4;    /* Etiquetas sobre la escena 3D */
    --sdc-capa-escena-control: 5;     /* Botones sobre la escena (centrar, lugares, pista) */
    --sdc-capa-escena-menu: 6;
    --sdc-capa-escena-panel: 7;       /* Ficha de un edificio o parcela */
    --sdc-capa-paneles: 10;           /* Métricas y controles */
    --sdc-capa-navegacion: 20;
    --sdc-capa-menu: 30;
    --sdc-capa-lateral: 60;           /* Chat del equipo */
    --sdc-capa-aviso: 70;             /* Avisos flotantes: siempre encima */

    /* Accesibilidad: alto mínimo de lo que se toca o se pulsa */
    --sdc-objetivo-tactil: 44px;
    --sdc-objetivo-raton: 36px;      /* Botones compactos de la cabecera con ratón; en pantallas táctiles suben a 44 px */
    --sdc-alto-barra-inferior: 60px; /* Barra de accesos del teléfono: botón de 52 px + su relleno */
}

/*
 * Tema de la interfaz (paneles, menús, formularios). Por defecto oscuro, como el sitio web; claro si el
 * sistema está en modo claro o si se elige en el menú (tema.js pone data-tema="claro" u "oscuro").
 * La escena 3D no cambia: app.js lee los tokens --sdc-* de arriba, no estos.
 */
:root {
    color-scheme: dark;
    --ui-fondo: var(--sdc-fondo);
    --ui-tarjeta: var(--sdc-tarjeta);
    --ui-apagado: var(--sdc-apagado);
    --ui-velo: var(--sdc-fondo-velo);
    --ui-velo-suave: var(--sdc-fondo-velo-suave);
    --ui-borde: var(--sdc-borde);
    --ui-texto: var(--sdc-texto);
    --ui-texto-suave: var(--sdc-texto-suave);
    --ui-titulo: var(--sdc-blanco);
    --ui-enlace: var(--sdc-brote);
    --ui-menta-texto: var(--sdc-menta);
    --ui-error: var(--sdc-peligro-claro);
    --ui-aviso: var(--sdc-dorado);
    --ui-foco: var(--sdc-blanco);
    /* Gráficos: relleno de barras y relleno de "bajo el mínimo". --ui-aviso es para texto y bordes (más
       claro); estos son rellenos, más oscuros para que barras y fondo se distingan también con daltonismo */
    --ui-grafico: #0B95D6;
    --ui-aviso-grafico: #B97D04;
}

/* Claro: texto oscuro sobre verde muy pálido, para leer a pleno sol (contraste mínimo 4.5:1) */
@media (prefers-color-scheme: light) {
    :root:not([data-tema="oscuro"]) {
        color-scheme: light;
        --ui-fondo: var(--sdc-claro);
        --ui-tarjeta: #FFFFFF;
        --ui-apagado: var(--sdc-menta-claro);
        --ui-velo: rgba(240, 253, 244, 0.92);
        --ui-velo-suave: rgba(240, 253, 244, 0.8);
        --ui-borde: rgba(20, 83, 45, 0.18);
        --ui-texto: #14281C;
        --ui-texto-suave: #4B6355;
        --ui-titulo: var(--sdc-fondo);
        --ui-enlace: var(--sdc-primario-oscuro);
        --ui-menta-texto: #166534;
        --ui-error: var(--sdc-peligro-oscuro);
        --ui-aviso: var(--sdc-acento);
        --ui-foco: var(--sdc-verde-profundo);
        --sdc-sombra: 0 4px 12px rgba(20, 83, 45, 0.15);
        --ui-grafico: #0369A1;
        --ui-aviso-grafico: var(--ui-aviso);
    }
}

:root[data-tema="claro"] {
    color-scheme: light;
    --ui-fondo: var(--sdc-claro);
    --ui-tarjeta: #FFFFFF;
    --ui-apagado: var(--sdc-menta-claro);
    --ui-velo: rgba(240, 253, 244, 0.92);
    --ui-velo-suave: rgba(240, 253, 244, 0.8);
    --ui-borde: rgba(20, 83, 45, 0.18);
    --ui-texto: #14281C;
    --ui-texto-suave: #4B6355;
    --ui-titulo: var(--sdc-fondo);
    --ui-enlace: var(--sdc-primario-oscuro);
    --ui-menta-texto: #166534;
    --ui-error: var(--sdc-peligro-oscuro);
    --ui-aviso: var(--sdc-acento);
    --ui-foco: var(--sdc-verde-profundo);
    --sdc-sombra: 0 4px 12px rgba(20, 83, 45, 0.15);
    --ui-grafico: #0369A1;
    --ui-aviso-grafico: var(--ui-aviso);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-cuerpo);
}

/* Lo que el código oculta (atributo hidden) no se ve nunca, aunque su clase le dé display: flex o grid */
[hidden] {
    display: none !important;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none; /* Sin el rebote ni el "tirar para recargar" del navegador móvil */
    background-color: var(--ui-fondo);
    color: var(--ui-texto);
}

/* Botones táctiles: sin el destello gris de Android ni la espera del doble toque */
button,
a,
select,
summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Oculto a la vista pero leído por lectores de pantalla */
.solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

#dashboard-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Alto real en móviles, con la barra del navegador visible u oculta */
    /* Márgenes seguros: muesca, esquinas redondeadas y barra de gestos del teléfono */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ===== Barra superior: marca y pestañas de módulos ===== */
#app-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sdc-espacio-4);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-6);
    background: var(--ui-tarjeta);
    border-bottom: 1px solid var(--ui-borde);
    z-index: var(--sdc-capa-navegacion);
}

/* La marca ocupa lo que sobra; a la derecha, menú de módulos, responsable, sincronización y chat */
#app-nav .brand {
    flex: 1 1 auto;
    min-width: 0;
}

/* Menú de módulos: botón con el módulo actual y lista desplegable */
.menu-modulos {
    position: relative;
    flex-shrink: 0;
}

.btn-modulos {
    display: inline-flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
    min-height: var(--sdc-objetivo-tactil);
    padding: 0 var(--sdc-espacio-4);
    background: var(--sdc-primario-oscuro);
    border: 1px solid var(--sdc-primario);
    border-radius: var(--sdc-radio-sm);
    color: var(--sdc-blanco);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-fuerte);
    white-space: nowrap;
    cursor: pointer;
}

.btn-modulos svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-modulos-texto {
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-modulos-flecha {
    transition: transform var(--sdc-transicion);
}

.btn-modulos[aria-expanded="true"] .btn-modulos-flecha {
    transform: rotate(180deg);
}

.btn-modulos:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

.lista-modulos {
    position: absolute;
    top: calc(100% + var(--sdc-espacio-2));
    right: 0;
    z-index: var(--sdc-capa-menu);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 240px;
    padding: var(--sdc-espacio-2);
    background: var(--ui-tarjeta);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-md);
    box-shadow: var(--sdc-sombra);
}

.lista-modulos[hidden] {
    display: none;
}

.nav-tab {
    min-height: var(--sdc-objetivo-tactil);
    padding: 0 var(--sdc-espacio-4);
    background: transparent;
    border: 0;
    border-radius: var(--sdc-radio-sm);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-md);
    font-weight: var(--sdc-peso-medio);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.nav-tab:hover {
    background: var(--ui-apagado);
}

.nav-tab[aria-current="true"] {
    background: var(--sdc-verde-profundo);
    color: var(--sdc-blanco);
    font-weight: var(--sdc-peso-extra);
}

/* Responsable: nombre de quien usa la app (pulsar = cambiarlo) */
.btn-responsable {
    display: inline-flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
    flex-shrink: 0;
    max-width: 180px;
    min-height: var(--sdc-objetivo-raton);
    padding: 0 var(--sdc-espacio-3) 0 var(--sdc-espacio-1);
    background: none;
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-pildora);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-fuerte);
    cursor: pointer;
}

.btn-responsable[hidden] {
    display: none;
}

.btn-responsable:hover {
    border-color: var(--sdc-primario);
}

.btn-responsable:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

.responsable-inicial {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sdc-verde-profundo);
    color: var(--sdc-menta);
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-extra);
}

.responsable-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Estado de la sincronización con la hoja compartida (pulsar = sincronizar ahora) */
.estado-sync {
    display: inline-flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
    flex-shrink: 0;
    min-height: var(--sdc-objetivo-raton);
    padding: 0 var(--sdc-espacio-3);
    background: none;
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-pildora);
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-fuerte);
    white-space: nowrap;
    cursor: pointer;
}

.estado-sync:hover {
    color: var(--ui-texto);
}

.estado-sync:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

.estado-sync i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-texto-suave);
}

.estado-sync[data-estado="ok"] i { background: var(--sdc-primario); }
.estado-sync[data-estado="trabajando"] i { background: var(--sdc-dorado); }
.estado-sync[data-estado="error"] i { background: var(--ui-error); }
.estado-sync[data-estado="error"] { color: var(--ui-error); }

/* ===== Chat del equipo y alertas ===== */
.btn-chat {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
    flex-shrink: 0;
    min-height: var(--sdc-objetivo-raton);
    padding: 0 var(--sdc-espacio-4);
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-pildora);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-fuerte);
    white-space: nowrap;
    cursor: pointer;
}

.btn-chat[hidden] {
    display: none;
}

.btn-chat:hover,
.btn-chat[aria-expanded="true"] {
    border-color: var(--sdc-primario);
}

.chat-contador {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--sdc-espacio-1);
    border-radius: var(--sdc-radio-pildora);
    background: var(--sdc-dorado);
    color: var(--sdc-fondo);
    font-size: var(--sdc-texto-xs);
    line-height: 20px;
    text-align: center;
}

.chat-contador[hidden] {
    display: none;
}

.panel-chat {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--sdc-capa-lateral);
    width: min(380px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--ui-tarjeta);
    border-left: 1px solid var(--ui-borde);
    box-shadow: var(--sdc-sombra);
}

.panel-chat[hidden] {
    display: none;
}

.panel-chat-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sdc-espacio-3);
    padding: var(--sdc-espacio-5);
    border-bottom: 1px solid var(--ui-borde);
}

.panel-chat-acciones {
    display: flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
    flex-shrink: 0;
}

.chat-meet {
    display: inline-flex;
    align-items: center;
    gap: var(--sdc-espacio-1);
    min-height: 36px;
    padding: 0 var(--sdc-espacio-3);
    font-size: var(--sdc-texto-sm);
}

.chat-meet .icono,
.chat-meet-enlace .icono {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.chat-meet-enlace {
    display: flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
}

.chat-meet-enlace a {
    color: var(--ui-enlace);
    font-weight: var(--sdc-peso-fuerte);
}

.panel-chat-cabecera h2 {
    font-family: var(--font-titulo);
    font-size: var(--sdc-texto-lg);
    font-weight: var(--sdc-peso-medio);
    color: var(--ui-titulo);
}

.panel-chat-nota {
    margin-top: var(--sdc-espacio-1);
    font-size: var(--sdc-texto-xs);
    color: var(--ui-texto-suave);
}

/* ===== Tareas del equipo (mismo panel lateral que el chat) ===== */
.tarea-form {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-3);
    padding: var(--sdc-espacio-4) var(--sdc-espacio-5);
    border-bottom: 1px solid var(--ui-borde);
}

.tarea-form .form-group {
    margin-bottom: 0;
}

.tarea-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--sdc-espacio-2);
}

.tareas-listas {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sdc-espacio-4) var(--sdc-espacio-5);
}

.tareas-subtitulo,
.tareas-hechas summary {
    margin-bottom: var(--sdc-espacio-2);
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-extra);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-texto-suave);
}

.tareas-hechas {
    margin-top: var(--sdc-espacio-5);
}

.tareas-hechas summary {
    cursor: pointer;
}

.tareas-lista {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-2);
    list-style: none;
}

.tareas-vacio {
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

.tarea {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--sdc-espacio-3);
    padding: var(--sdc-espacio-3);
    background: var(--ui-fondo);
    border: 1px solid var(--ui-borde);
    border-left: 4px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
}

.tarea-alta {
    border-left-color: var(--sdc-peligro);
}

.tarea input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    accent-color: var(--sdc-primario);
    cursor: pointer;
}

.tarea-titulo {
    display: block;
    font-size: var(--sdc-texto-md);
    font-weight: var(--sdc-peso-fuerte);
    color: var(--ui-texto);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.tarea-hecha .tarea-titulo {
    color: var(--ui-texto-suave);
    text-decoration: line-through;
}

.tarea-datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sdc-espacio-1) var(--sdc-espacio-3);
    margin-top: var(--sdc-espacio-1);
    font-size: var(--sdc-texto-xs);
    color: var(--ui-texto-suave);
}

.tarea-prioridad {
    font-weight: var(--sdc-peso-extra);
}

.prioridad-alta {
    color: var(--ui-error);
}

.prioridad-media {
    color: var(--ui-aviso);
}

.prioridad-baja {
    color: var(--ui-enlace);
}

.tarea-vencida {
    font-weight: var(--sdc-peso-extra);
    color: var(--ui-error);
}

.tarea-hoy {
    font-weight: var(--sdc-peso-extra);
    color: var(--ui-aviso);
}

.tarea-eliminar {
    font-size: var(--sdc-texto-xs);
}

/* ===== Menú de módulos: opción "Instalar la app" ===== */
.menu-separador {
    margin: var(--sdc-espacio-1) 0;
    border: 0;
    border-top: 1px solid var(--ui-borde);
}

.menu-separador[hidden],
.menu-extra[hidden],
.solo-telefono {
    display: none;
}

.menu-extra {
    min-height: var(--sdc-objetivo-tactil);
    padding: 0 var(--sdc-espacio-4);
    background: transparent;
    border: 0;
    border-radius: var(--sdc-radio-sm);
    color: var(--ui-enlace);
    font-size: var(--sdc-texto-md);
    font-weight: var(--sdc-peso-fuerte);
    text-align: left;
    cursor: pointer;
}

.menu-extra:hover {
    background: var(--ui-apagado);
}

.menu-extra:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: -2px;
}

.pasos-instalar {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-2);
    padding-left: var(--sdc-espacio-5);
    font-size: var(--sdc-texto-md);
    line-height: 1.5;
}

.chat-mensajes {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-3);
    padding: var(--sdc-espacio-5);
}

.chat-vacio {
    margin: auto;
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-sm);
    text-align: center;
}

.chat-mensaje {
    max-width: 88%;
    align-self: flex-start;
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    background: var(--ui-apagado);
    border-radius: var(--sdc-radio-sm);
}

.chat-propio {
    align-self: flex-end;
    background: var(--sdc-verde-profundo);
}

.chat-alerta {
    max-width: 100%;
    align-self: stretch;
    background: var(--sdc-peligro-velo);
    border: 1px solid var(--sdc-peligro);
}

.chat-meta {
    display: flex;
    align-items: baseline;
    gap: var(--sdc-espacio-3);
    margin-bottom: 2px;
    font-size: var(--sdc-texto-xs);
}

.chat-meta strong {
    color: var(--ui-menta-texto);
}

.chat-meta time {
    color: var(--ui-texto-suave);
}

.chat-alerta-motivo {
    display: flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
    margin-bottom: var(--sdc-espacio-1);
    color: var(--ui-error);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-fuerte);
}

.chat-texto {
    font-size: var(--sdc-texto-md);
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.chat-form {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-2);
    padding: var(--sdc-espacio-4) var(--sdc-espacio-5) var(--sdc-espacio-5);
    border-top: 1px solid var(--ui-borde);
}

.chat-nombre {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-1);
}

.chat-nombre[hidden] {
    display: none;
}

.chat-nombre label {
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-fuerte);
    color: var(--ui-texto-suave);
}

.chat-firma {
    font-size: var(--sdc-texto-xs);
    color: var(--ui-texto-suave);
}

.chat-firma[hidden] {
    display: none;
}

.chat-escribir {
    display: flex;
    gap: var(--sdc-espacio-2);
}

.chat-form input {
    flex: 1;
    min-width: 0;
    min-height: var(--sdc-objetivo-tactil);
    padding: 0 var(--sdc-espacio-4);
    background: var(--ui-fondo);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-lg);
}

.chat-form input:focus-visible,
.chat-mensajes:focus-visible,
.btn-chat:focus-visible,
.btn-alerta:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

.chat-escribir .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sdc-objetivo-tactil);
    padding: 0;
}

.acciones-cabecera {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-2);
}

.btn-alerta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sdc-espacio-2);
    min-height: var(--sdc-objetivo-tactil);
    padding: 0 var(--sdc-espacio-5);
    background: var(--sdc-peligro);
    border: none;
    border-radius: var(--sdc-radio-sm);
    color: var(--sdc-blanco);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-fuerte);
    cursor: pointer;
    transition: background var(--sdc-transicion);
}

.btn-alerta:hover {
    background: var(--sdc-peligro-oscuro);
}

.aviso-flotante {
    position: fixed;
    left: 50%;
    bottom: var(--sdc-espacio-6);
    z-index: var(--sdc-capa-aviso);
    transform: translateX(-50%);
    max-width: min(460px, calc(100vw - 2 * var(--sdc-espacio-5)));
    padding: var(--sdc-espacio-3) var(--sdc-espacio-5);
    background: var(--ui-tarjeta);
    border: 1px solid var(--sdc-primario);
    border-radius: var(--sdc-radio-sm);
    box-shadow: var(--sdc-sombra);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-medio);
}

.aviso-flotante[data-tipo="alerta"],
.aviso-flotante[data-tipo="error"] {
    border-color: var(--ui-error);
}

.aviso-flotante[hidden] {
    display: none;
}

/* ===== Módulos: uno visible a la vez ===== */
#modules-container {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.app-module {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.app-module[hidden] {
    display: none;
}

/* ===== Módulos del CRM: cabecera, tabla y estado vacío ===== */
.module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sdc-espacio-4);
    padding: var(--sdc-espacio-5) var(--sdc-espacio-6);
    border-bottom: 1px solid var(--ui-borde);
}

.module-header h2 {
    font-family: var(--font-titulo);
    font-size: var(--sdc-texto-xl);
    font-weight: var(--sdc-peso-medio);
    color: var(--ui-titulo);
}

.module-sub {
    margin-top: var(--sdc-espacio-1);
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

.module-nota {
    margin-bottom: var(--sdc-espacio-4);
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

.table-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--sdc-espacio-5) var(--sdc-espacio-6);
}

.table-container table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ui-tarjeta);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
    overflow: hidden;
}

.table-container table[hidden] {
    display: none;
}

.table-container th,
.table-container td {
    padding: var(--sdc-espacio-4) var(--sdc-espacio-5);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ui-borde);
    font-size: var(--sdc-texto-md);
}

.table-container tbody tr:last-child td {
    border-bottom: none;
}

.table-container th {
    background: var(--ui-apagado);
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-fuerte);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
}

.table-container tbody tr:hover {
    background: var(--ui-apagado);
}

.table-container a {
    color: var(--ui-enlace);
}

.celda-dato {
    font-family: var(--font-dato);
    white-space: nowrap;
}

.celda-larga {
    min-width: 220px;
    color: var(--ui-texto-suave);
}

.col-acciones {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.etiqueta {
    display: inline-block;
    padding: 2px var(--sdc-espacio-3);
    border-radius: var(--sdc-radio-pildora);
    background: var(--sdc-verde-profundo);
    color: var(--sdc-menta);
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-fuerte);
    white-space: nowrap;
}

/* Variante con borde: el tono va en el borde izquierdo y el texto queda en el color del tema (listas largas,
   donde una pastilla llena por fila pesaría demasiado). data-tono: info, exito, aviso, peligro */
.etiqueta-borde {
    display: inline-block;
    justify-self: start;
    padding: 2px var(--sdc-espacio-2);
    border: 1px solid var(--ui-borde);
    border-left: 4px solid var(--ui-texto-suave);
    border-radius: var(--sdc-radio-xs);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-fuerte);
    white-space: nowrap;
}

.etiqueta-borde[data-tono="info"] { border-left-color: var(--sdc-agua-claro); }
.etiqueta-borde[data-tono="exito"] { border-left-color: var(--sdc-primario); }
.etiqueta-borde[data-tono="aviso"] { border-left-color: var(--sdc-dorado); }
.etiqueta-borde[data-tono="peligro"] { border-left-color: var(--sdc-peligro); }

.tabla-vacia {
    padding: var(--sdc-espacio-6);
    border: 1px dashed var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-md);
    text-align: center;
}

.tabla-vacia[hidden] {
    display: none;
}

/* Nombre del cliente: botón con aspecto de enlace que abre su expediente */
.enlace-cliente {
    padding: 0;
    background: none;
    border: none;
    color: var(--ui-enlace);
    font: inherit;
    font-weight: var(--sdc-peso-medio);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.enlace-cliente:hover {
    color: var(--ui-menta-texto);
}

/* ===== Procesos agrupados por cliente ===== */
.grupo-cliente {
    margin-bottom: var(--sdc-espacio-6);
}

.grupo-cliente-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sdc-espacio-4);
    margin-bottom: var(--sdc-espacio-3);
}

.grupo-cliente-cabecera h3 {
    font-family: var(--font-titulo);
    font-size: var(--sdc-texto-lg);
    font-weight: var(--sdc-peso-medio);
    color: var(--ui-titulo);
}

.grupo-cliente-meta {
    display: block;
    margin-top: 2px;
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

/* ===== Expediente del cliente ===== */
.dialogo.dialogo-ancho {
    width: min(760px, calc(100vw - 2 * var(--sdc-espacio-5)));
}

.expediente {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-5);
    padding: var(--sdc-espacio-6);
}

.expediente-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sdc-espacio-4);
}

.expediente-cabecera h3 {
    font-family: var(--font-titulo);
    font-size: var(--sdc-texto-xl);
    font-weight: var(--sdc-peso-medio);
    color: var(--ui-titulo);
}

.expediente-datos {
    margin-top: var(--sdc-espacio-1);
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

.expediente-atajos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sdc-espacio-3);
}

.expediente-seccion h4 {
    margin-bottom: var(--sdc-espacio-3);
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-fuerte);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-texto-suave);
}

.expediente-vacio {
    font-size: var(--sdc-texto-md);
    color: var(--ui-texto-suave);
}

.expediente-tabla {
    padding: 0;
    overflow: visible;
}

/* Línea de tiempo de un lote: un punto por fase, unidos por una línea */
.linea-lote + .linea-lote {
    margin-top: var(--sdc-espacio-4);
}

.linea-lote h5 {
    margin-bottom: var(--sdc-espacio-2);
    font-size: var(--sdc-texto-md);
    font-weight: var(--sdc-peso-fuerte);
    color: var(--ui-texto);
}

.linea-tiempo {
    list-style: none;
    margin-left: var(--sdc-espacio-2);
    border-left: 2px solid var(--ui-apagado);
}

.linea-tiempo li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sdc-espacio-3);
    padding: var(--sdc-espacio-2) 0 var(--sdc-espacio-2) var(--sdc-espacio-5);
}

.linea-tiempo li::before {
    content: '';
    position: absolute;
    left: -6px;
    top: calc(var(--sdc-espacio-2) + 5px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sdc-primario);
}

.linea-fechas {
    font-family: var(--font-dato);
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

.linea-datos {
    flex-basis: 100%;
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-medio);
    color: var(--ui-texto);
}

.linea-comentario {
    flex-basis: 100%;
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

/* ===== Botones del CRM ===== */
.btn-primary,
.btn-secondary,
.btn-texto {
    min-height: var(--sdc-objetivo-tactil);
    padding: 0 var(--sdc-espacio-5);
    border-radius: var(--sdc-radio-sm);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-fuerte);
    cursor: pointer;
    transition: background var(--sdc-transicion), border-color var(--sdc-transicion);
}

.btn-primary {
    background: var(--sdc-primario);
    color: var(--sdc-fondo);
    border: none;
}

.btn-primary:hover {
    background: var(--sdc-brote);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--ui-borde);
    color: var(--ui-texto);
}

.btn-secondary:hover {
    border-color: var(--ui-texto-suave);
}

.btn-texto {
    background: none;
    border: none;
    padding: 0 var(--sdc-espacio-3);
    color: var(--ui-texto-suave);
}

.btn-texto:hover {
    color: var(--ui-texto);
}

.btn-peligro:hover {
    color: var(--sdc-blanco);
    background: var(--sdc-peligro);
}

/* Deshabilitado (p. ej. mientras se envía): apagado y sin reaccionar al pasar por encima */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-texto:disabled,
.menu-extra:disabled,
:where(input, select, textarea):disabled {
    opacity: var(--sdc-opacidad-apagado);
    cursor: not-allowed;
}

.btn-primary:disabled:hover {
    background: var(--sdc-primario);
}

.btn-secondary:disabled:hover {
    border-color: var(--ui-borde);
}

.btn-texto:disabled:hover {
    color: var(--ui-texto-suave);
    background: none;
}

.nav-tab:focus-visible,
.enlace-cliente:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-texto:focus-visible,
.table-container a:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

/* ===== Diálogo de registro ===== */
.dialogo {
    width: min(460px, calc(100vw - 2 * var(--sdc-espacio-5)));
    max-height: calc(100vh - 2 * var(--sdc-espacio-5));
    max-height: calc(100dvh - 2 * var(--sdc-espacio-5));
    margin: auto;
    padding: 0;
    background: var(--ui-tarjeta);
    color: var(--ui-texto);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-md);
    box-shadow: var(--sdc-sombra);
}

.dialogo::backdrop {
    background: var(--sdc-velo-dialogo);
}

/* Subtítulo bajo el título de un diálogo y notas pequeñas en gris */
.dialogo-subtitulo,
.nota-suave {
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-sm);
}

.dialogo-form {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-4);
    padding: var(--sdc-espacio-6);
}

.dialogo-form h3 {
    font-family: var(--font-titulo);
    font-size: var(--sdc-texto-xl);
    font-weight: var(--sdc-peso-medio);
    color: var(--ui-titulo);
}

.entrada-google {
    align-items: center;
    text-align: center;
}

.entrada-logo {
    width: 44px;
    height: 44px;
    color: var(--ui-enlace);
}

.aviso-integrado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sdc-espacio-3);
}

.boton-google {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sdc-espacio-2);
    min-height: 44px;
}

/* Opción B: entrar con una cuenta personal de Google, debajo del botón principal (cuenta de la empresa) */
.btn-entrar-personal {
    max-width: 30ch;
    text-align: center;
    line-height: 1.35;
    min-height: 44px;
}

.dialogo-nota {
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-2);
}

.form-group[hidden] {
    display: none;
}

.form-group label {
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-medio);
    color: var(--ui-texto-suave);
}

.form-group input,
.form-group select,
.form-group textarea,
.meta-form :is(input, select),
.agenda-barra input {
    min-height: var(--sdc-objetivo-tactil);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    background: var(--ui-fondo);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-lg); /* 16px: en el móvil evita que el navegador haga zoom al escribir */
}

.form-group textarea {
    resize: vertical;
}

/* Foco de los campos: el mismo en toda la app (también fuera de .form-group). :where() no suma
   especificidad, así que los campos con su propio foco (chat, mapa) lo conservan */
:where(input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--sdc-primario);
    outline-offset: 1px;
}

.form-group [aria-invalid="true"] {
    border-color: var(--sdc-peligro);
}

.form-error {
    font-size: var(--sdc-texto-sm);
    color: var(--ui-error);
}

.form-error[hidden] {
    display: none;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sdc-espacio-3);
    margin-top: var(--sdc-espacio-2);
}

/* ===== Simulador 3D: métricas de la finca ===== */
#metrics-panel {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--ui-velo);
    backdrop-filter: blur(12px);
    padding: var(--sdc-espacio-4) var(--sdc-espacio-6);
    border-bottom: 1px solid var(--ui-borde);
    z-index: var(--sdc-capa-paneles);
    flex-wrap: wrap;
    gap: var(--sdc-espacio-4);
}

/* Marca Semences del Caribe: brote + nombre en Lora, como en la cabecera del sitio */
.brand {
    display: flex;
    align-items: center;
    gap: var(--sdc-espacio-3);
}

.brand-logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--ui-enlace);
}

.brand-texto {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.brand-nombre {
    font-family: var(--font-titulo);
    font-size: var(--sdc-texto-xl);
    font-weight: var(--sdc-peso-medio);
    letter-spacing: -0.01em;
    color: var(--ui-titulo);
}

.brand-sub {
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

/* El logo y el nombre son el botón del menú de la app (cuenta, equipo, reportes, tema…) */
.menu-app {
    position: relative;
}

.btn-app {
    display: flex;
    align-items: center;
    gap: var(--sdc-espacio-3);
    min-width: 0;
    min-height: var(--sdc-objetivo-tactil);
    padding: var(--sdc-espacio-1) var(--sdc-espacio-3) var(--sdc-espacio-1) var(--sdc-espacio-1);
    margin-left: calc(-1 * var(--sdc-espacio-1));
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--sdc-radio-md);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.btn-app:hover,
.btn-app[aria-expanded="true"] {
    background: var(--ui-apagado);
    border-color: var(--ui-borde);
}

.btn-app:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

.btn-app-flecha {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ui-texto-suave);
    transition: transform var(--sdc-transicion);
}

.btn-app[aria-expanded="true"] .btn-app-flecha {
    transform: rotate(180deg);
}

/* Se abre bajo el logo, hacia la derecha */
.lista-app {
    left: 0;
    right: auto;
    max-height: min(70vh, 560px);
    overflow-y: auto;
}

.lista-app > .menu-separador:first-child {
    display: none;
}

.metric-card {
    background: var(--ui-tarjeta);
    padding: var(--sdc-espacio-4) var(--sdc-espacio-6);
    border-radius: var(--sdc-radio-md);
    text-align: center;
    border: 1px solid var(--ui-borde);
    min-width: 160px;
    box-shadow: var(--sdc-sombra);
}

.metric-card h2 {
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-medio);
    color: var(--ui-texto-suave);
    margin-bottom: var(--sdc-espacio-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Los datos van en la fuente de datos del sitio */
.metric-card p {
    font-family: var(--font-dato);
    font-size: var(--sdc-texto-xl);
    font-weight: var(--sdc-peso-medio);
    color: var(--ui-enlace);
}

/* Línea de contexto bajo la cifra (qué mide o qué está pendiente) */
.metric-nota {
    display: block;
    margin-top: var(--sdc-espacio-1);
    font-size: var(--sdc-texto-xs);
    color: var(--ui-texto-suave);
}

/* Hay alertas vencidas: la tarjeta de eficiencia se marca en dorado */
.metric-aviso {
    border-color: var(--sdc-dorado);
}

.metric-aviso p,
.metric-aviso .metric-nota {
    color: var(--ui-aviso);
}

#btn-toggle-clima {
    min-height: var(--sdc-objetivo-tactil);
    background: var(--sdc-acento);
    color: var(--sdc-blanco);
    border: none;
    padding: var(--sdc-espacio-4) var(--sdc-espacio-6);
    border-radius: var(--sdc-radio-sm);
    cursor: pointer;
    font-weight: var(--sdc-peso-fuerte);
    font-size: var(--sdc-texto-md);
    box-shadow: var(--sdc-sombra-acento);
    transition: transform var(--sdc-transicion), background var(--sdc-transicion);
}

#btn-toggle-clima:hover {
    background: var(--sdc-acento-hover);
    transform: translateY(-2px);
}

#btn-toggle-clima:focus-visible,
#btn-centrar-vista:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

#canvas-container {
    flex: 1;
    min-height: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Los gestos sobre el escenario mueven la cámara 3D, no la página (zoom, selección de texto, menú al mantener) */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* El canvas es inline por defecto y deja un hueco bajo el escenario */
#canvas-container canvas {
    display: block;
}

/* Botón de vista general y pista de uso, sobre el escenario 3D */
#btn-centrar-vista {
    position: absolute;
    top: var(--sdc-espacio-4);
    right: var(--sdc-espacio-4);
    z-index: var(--sdc-capa-escena-control);
    min-height: var(--sdc-objetivo-tactil);
    background: var(--ui-velo);
    color: var(--ui-texto);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-pildora);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-5);
    font-weight: var(--sdc-peso-fuerte);
    font-size: var(--sdc-texto-sm);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background var(--sdc-transicion);
}

/* Verde profundo: el texto claro se lee bien (el verde de marca se quedaba en 4.49:1) */
#btn-centrar-vista:hover {
    background: var(--sdc-verde-profundo);
}

/* ===== Mapa interactivo: lista de lugares, panel de información y etiqueta del puntero ===== */
#btn-lugares {
    position: absolute;
    top: calc(var(--sdc-espacio-4) + var(--sdc-objetivo-tactil) + var(--sdc-espacio-3));
    right: var(--sdc-espacio-4);
    z-index: var(--sdc-capa-escena-control);
    min-height: var(--sdc-objetivo-tactil);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-5);
    background: var(--ui-velo);
    color: var(--ui-texto);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-pildora);
    font-weight: var(--sdc-peso-fuerte);
    font-size: var(--sdc-texto-sm);
    cursor: pointer;
    backdrop-filter: blur(8px);
}

#btn-lugares:hover,
#btn-lugares[aria-expanded="true"] {
    background: var(--sdc-verde-profundo);
}

.menu-lugares {
    position: absolute;
    top: calc(var(--sdc-espacio-4) + 2 * var(--sdc-objetivo-tactil) + 2 * var(--sdc-espacio-3));
    right: var(--sdc-espacio-4);
    z-index: var(--sdc-capa-escena-menu);
    width: min(280px, calc(100% - 2 * var(--sdc-espacio-4)));
    max-height: calc(100% - 140px);
    overflow-y: auto;
    list-style: none;
    padding: var(--sdc-espacio-1);
    background: var(--ui-tarjeta);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
    box-shadow: var(--sdc-sombra);
}

.menu-lugares[hidden] {
    display: none;
}

.menu-lugares button {
    width: 100%;
    min-height: 36px;
    padding: var(--sdc-espacio-2) var(--sdc-espacio-3);
    background: none;
    border: none;
    border-radius: var(--sdc-radio-sm);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-medio);
    text-align: left;
    cursor: pointer;
}

.menu-lugares button:hover,
.menu-lugares button:focus-visible {
    background: var(--ui-apagado);
    outline: none;
}

.mapa-panel {
    position: absolute;
    top: var(--sdc-espacio-4);
    left: var(--sdc-espacio-4);
    z-index: var(--sdc-capa-escena-panel);
    width: min(320px, calc(100% - 2 * var(--sdc-espacio-4)));
    max-height: calc(100% - 2 * var(--sdc-espacio-4));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-3);
    padding: var(--sdc-espacio-5);
    background: var(--ui-velo);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-md);
    box-shadow: var(--sdc-sombra);
    backdrop-filter: blur(8px);
}

.mapa-panel[hidden],
.mapa-panel [hidden] {
    display: none;
}

.mapa-panel-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sdc-espacio-3);
}

.mapa-panel-cabecera h3 {
    font-family: var(--font-titulo);
    font-size: var(--sdc-texto-lg);
    font-weight: var(--sdc-peso-medio);
    color: var(--ui-titulo);
}

.mapa-panel-estado {
    align-self: flex-start;
    padding: 2px var(--sdc-espacio-3);
    border-radius: var(--sdc-radio-pildora);
    background: var(--sdc-verde-profundo);
    color: var(--sdc-menta);
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-fuerte);
}

.mapa-panel-vista {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sdc-espacio-4);
}

.mapa-panel-texto {
    font-size: var(--sdc-texto-md);
    line-height: 1.5;
    color: var(--ui-texto);
    white-space: pre-line;
}

.mapa-extra {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-3);
    padding-top: var(--sdc-espacio-4);
    border-top: 1px solid var(--ui-borde);
}

.mapa-extra-titulo {
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-extra);
    color: var(--ui-enlace);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mapa-extra-vacio {
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

.mapa-extra .form-group {
    margin-bottom: 0;
}

.ensayos-lista {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-2);
    list-style: none;
}

/* ----- Cotizaciones (cotizador.js): líneas libres y aprobación de administración ----- */
.cotizacion-estado {
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    border: 1px solid var(--ui-borde);
    border-left: 4px solid var(--sdc-dorado);
    border-radius: var(--sdc-radio-sm);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-medio);
}

.cotizacion-estado[data-tono="exito"] { border-left-color: var(--sdc-primario); }
.cotizacion-estado[data-tono="peligro"] { border-left-color: var(--sdc-peligro); }

.cotizacion-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0 var(--sdc-espacio-4);
}

.cotizacion-lineas {
    border: none;
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-3);
    min-width: 0;
}

.cotizacion-lineas legend {
    margin-bottom: var(--sdc-espacio-2);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-fuerte);
    color: var(--ui-texto-suave);
}

.cotizacion-cabecera,
.cotizacion-filas li {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) auto;
    align-items: center;
    gap: var(--sdc-espacio-2);
}

.cotizacion-cabecera {
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-fuerte);
    color: var(--ui-texto-suave);
}

.cotizacion-filas {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-2);
    list-style: none;
}

.cotizacion-filas input {
    width: 100%;
    min-width: 0;
    min-height: var(--sdc-objetivo-raton);
    padding: 0 var(--sdc-espacio-3);
    background: var(--ui-fondo);
    color: var(--ui-texto);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
    font: inherit;
    font-size: var(--sdc-texto-sm);
}

.cotizacion-subtotal,
.cotizacion-total {
    font-family: var(--font-dato);
    text-align: right;
}

.cotizacion-subtotal {
    font-size: var(--sdc-texto-sm);
}

.cotizacion-anadir {
    align-self: flex-start;
}

.cotizacion-total {
    font-size: var(--sdc-texto-lg);
    font-weight: var(--sdc-peso-fuerte);
    color: var(--ui-titulo);
}

.cotizacion-nota {
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

.cotizacion-acciones {
    flex-wrap: wrap;
}

/* En el móvil cada producto es una tarjeta: el nombre arriba y cantidad, unidad y precio debajo */
@media (max-width: 600px) {
    .cotizacion-cabecera {
        display: none;
    }

    .cotizacion-filas li {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: var(--sdc-espacio-3);
        background: var(--ui-tarjeta);
        border: 1px solid var(--ui-borde);
        border-radius: var(--sdc-radio-sm);
    }

    .cotizacion-producto {
        grid-column: 1 / -1;
    }

    .cotizacion-subtotal {
        grid-column: 1 / 3;
        text-align: left;
    }
}

.ensayos-lista li {
    padding: var(--sdc-espacio-3);
    background: var(--ui-tarjeta);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
}

.ensayo-variedad {
    font-weight: var(--sdc-peso-fuerte);
    color: var(--ui-titulo);
}

.ensayo-dato {
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

.mapa-panel-texto.mapa-panel-vacio {
    color: var(--ui-texto-suave);
}

.mapa-panel-edicion textarea {
    width: 100%;
    padding: var(--sdc-espacio-3);
    background: var(--ui-fondo);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-lg);
    line-height: 1.5;
    resize: vertical;
}

.mapa-etiqueta {
    position: absolute;
    z-index: var(--sdc-capa-escena-etiqueta);
    padding: var(--sdc-espacio-1) var(--sdc-espacio-3);
    border-radius: var(--sdc-radio-pildora);
    background: var(--ui-velo);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-fuerte);
    pointer-events: none;
    white-space: nowrap;
}

.mapa-etiqueta[hidden] {
    display: none;
}

#btn-lugares:focus-visible,
.mapa-panel-edicion textarea:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

#pista-camara {
    position: absolute;
    left: var(--sdc-espacio-4);
    max-width: calc(100% - 2 * var(--sdc-espacio-4));
    bottom: var(--sdc-espacio-3);
    z-index: var(--sdc-capa-escena-control);
    margin: 0;
    padding: var(--sdc-espacio-1) var(--sdc-espacio-3);
    border-radius: var(--sdc-radio-pildora);
    background: var(--ui-velo-suave);
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-xs);
    pointer-events: none;
}

/* Ficha "Marcas que representamos" (mapa.js) */
.mapa-marcas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sdc-espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mapa-marcas li {
    display: grid;
    gap: var(--sdc-espacio-1);
    justify-items: center;
    padding: var(--sdc-espacio-3);
    background: var(--sdc-blanco);
    border: 1px solid var(--sdc-borde-sobre-blanco);
    border-bottom: 4px solid var(--marca);
    border-radius: var(--sdc-radio-sm);
}

.mapa-marcas img {
    width: 100%;
    height: 72px;
    object-fit: contain;
}

.mapa-marcas span {
    color: var(--sdc-fondo);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-fuerte);
}

/* Panel de parcelas: resumen + dos filas de fichas con anillo de progreso */
#control-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-2);
    background: var(--ui-velo);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-6) var(--sdc-espacio-4);
    border-top: 1px solid var(--ui-borde);
    z-index: var(--sdc-capa-paneles);
}

.icono {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.panel-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sdc-espacio-3);
}

.panel-resumen {
    /* Siempre en una línea: si el texto cambiaba de una a dos líneas, la escena 3D saltaba de alto */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-medio);
    color: var(--ui-texto-suave);
}

.panel-plegar {
    display: inline-flex;
    align-items: center;
    gap: var(--sdc-espacio-1);
    min-height: var(--sdc-objetivo-tactil);
    padding: 0 var(--sdc-espacio-3);
    background: none;
    border: none;
    border-radius: var(--sdc-radio-sm);
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-medio);
    cursor: pointer;
}

.panel-acciones {
    display: inline-flex;
    align-items: center;
    gap: var(--sdc-espacio-1);
}

/* Avisos ya decididos (activados o bloqueados): se muestra el estado, sin acción */
.panel-avisos:disabled {
    cursor: default;
    opacity: 1;
}

.panel-avisos:disabled:hover {
    background: none;
    color: var(--ui-texto-suave);
}

.panel-plegar:hover {
    color: var(--ui-texto);
    background: var(--ui-apagado);
}

.panel-plegar .icono {
    transition: transform var(--sdc-transicion);
}

.panel-plegar[aria-expanded="false"] .icono {
    transform: rotate(180deg);
}

.panel-grupos {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-2);
}

.panel-grupos[hidden] {
    display: none;
}

.panel-grupo {
    display: flex;
    align-items: center;
    gap: var(--sdc-espacio-3);
}

.panel-grupo-titulo {
    display: inline-flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
    width: 132px;
    flex-shrink: 0;
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-fuerte);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-texto-suave);
}

.panel-grupo-titulo .icono {
    color: var(--ui-enlace);
}

.panel-fichas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sdc-espacio-2);
}

/* Ficha: botón en forma de píldora con el anillo de progreso a la izquierda */
.ficha {
    display: inline-flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
    min-height: 36px;
    padding: var(--sdc-espacio-1) var(--sdc-espacio-4) var(--sdc-espacio-1) var(--sdc-espacio-1);
    background: var(--ui-tarjeta);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-pildora);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-medio);
    cursor: pointer;
    transition: border-color var(--sdc-transicion), background var(--sdc-transicion);
}

.ficha:hover {
    border-color: var(--sdc-primario);
}

.ficha:focus-visible,
.panel-plegar:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

.ficha-anillo {
    --p: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(var(--sdc-primario) calc(var(--p) * 1%), var(--ui-apagado) 0);
}

.ficha-valor {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ui-tarjeta);
    font-family: var(--font-dato);
    font-size: var(--sdc-texto-xs);
    color: var(--ui-texto);
}

.icono-ficha {
    width: 13px;
    height: 13px;
}

/* Lista para cosechar: anillo y borde dorados */
.ficha-lista {
    border-color: var(--sdc-dorado);
}

.ficha-lista .ficha-anillo {
    background: var(--sdc-dorado);
}

.ficha-lista .ficha-valor {
    color: var(--ui-aviso);
}

.ficha-tractor {
    display: inline-flex;
    color: var(--ui-aviso);
}

.ficha-tractor[hidden] {
    display: none;
}

/* Parcela libre: borde discontinuo y texto suave */
.ficha-libre {
    border-style: dashed;
    color: var(--ui-texto-suave);
}

.ficha-libre .ficha-anillo {
    background: var(--ui-apagado);
}

.ficha-libre .ficha-valor {
    color: var(--ui-texto-suave);
}

/* Pantallas estrechas: paneles compactos para dejar más alto al escenario 3D */
@media (max-width: 768px) {
    #app-nav {
        gap: var(--sdc-espacio-2);
        padding: var(--sdc-espacio-2) var(--sdc-espacio-3);
    }

    .btn-modulos {
        min-height: 40px;
        padding: 0 var(--sdc-espacio-3);
    }

    .btn-modulos-texto {
        max-width: 150px;
    }

    /* En el móvil el chat y el responsable quedan solo con su icono e inicial */
    .btn-chat {
        min-height: 36px;
        padding: 0 var(--sdc-espacio-3);
    }

    .btn-responsable {
        padding: 0 var(--sdc-espacio-1);
        border-color: transparent;
    }

    .responsable-nombre {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .btn-chat span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .module-header {
        padding: var(--sdc-espacio-4);
    }

    .module-header h2 {
        font-size: var(--sdc-texto-lg);
    }

    .table-container {
        padding: var(--sdc-espacio-4);
    }

    /* Tablas como tarjetas: cada fila un bloque, cada celda con su título delante */
    .table-container table,
    .table-container tbody,
    .table-container tr,
    .table-container td {
        display: block;
        width: 100%;
    }

    .table-container table {
        background: none;
        border: none;
    }

    .table-container thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .table-container tr {
        margin-bottom: var(--sdc-espacio-3);
        background: var(--ui-tarjeta);
        border: 1px solid var(--ui-borde);
        border-radius: var(--sdc-radio-sm);
    }

    .table-container td {
        display: grid;
        grid-template-columns: 9.5em 1fr;
        gap: var(--sdc-espacio-3);
        padding: var(--sdc-espacio-2) var(--sdc-espacio-4);
        border-bottom: none;
        text-align: left;
    }

    /* La etiqueta de estado o fase conserva su ancho dentro de la cuadrícula de la tarjeta */
    .table-container td > .etiqueta {
        justify-self: start;
        align-self: start;
    }

    .table-container td::before {
        content: attr(data-titulo);
        font-size: var(--sdc-texto-xs);
        font-weight: var(--sdc-peso-fuerte);
        text-transform: uppercase;
        color: var(--ui-texto-suave);
    }

    .table-container td.col-acciones {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .table-container td.col-acciones::before {
        content: none;
    }

    .celda-larga {
        min-width: 0;
    }

    #metrics-panel {
        display: grid;
        grid-template-columns: repeat(3, 1fr) auto;
        gap: var(--sdc-espacio-2);
        padding: var(--sdc-espacio-3);
    }

    .brand {
        grid-column: 1 / -1;
        gap: var(--sdc-espacio-3);
        min-width: 0;
    }

    .brand-logo {
        width: 22px;
        height: 22px;
    }

    .brand-texto {
        flex-direction: row;
        align-items: baseline;
        gap: var(--sdc-espacio-3);
    }

    .brand-nombre {
        font-size: var(--sdc-texto-lg);
        white-space: nowrap;
    }

    .brand-sub {
        font-size: var(--sdc-texto-xs);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .metric-card {
        min-width: 0;
        padding: var(--sdc-espacio-2) var(--sdc-espacio-1);
        border-radius: var(--sdc-radio-sm);
    }

    .metric-card h2 {
        letter-spacing: 0;
        margin-bottom: var(--sdc-espacio-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .metric-card p {
        font-size: var(--sdc-texto-sm);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #btn-toggle-clima {
        padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
        font-size: var(--sdc-texto-sm);
    }

    /* Panel de parcelas compacto: título del grupo encima de sus fichas */
    #control-panel {
        padding: var(--sdc-espacio-1) var(--sdc-espacio-3) var(--sdc-espacio-3);
        gap: var(--sdc-espacio-1);
    }

    /* El grupo queda en una sola línea: su icono y luego las fichas; el nombre del grupo
       solo lo oyen los lectores de pantalla */
    .panel-grupo {
        align-items: flex-start;
        gap: var(--sdc-espacio-2);
    }

    .panel-grupo-titulo {
        width: auto;
        min-height: 32px;
    }

    .panel-grupo-titulo .icono {
        width: 18px;
        height: 18px;
    }

    .grupo-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .panel-plegar {
        min-height: 36px;
    }

    .panel-fichas {
        gap: var(--sdc-espacio-1);
    }

    .ficha {
        min-height: 32px;
        padding-right: var(--sdc-espacio-3);
        font-size: var(--sdc-texto-xs);
    }

    .ficha-anillo {
        width: 26px;
        height: 26px;
    }

    .ficha-valor {
        width: 21px;
        height: 21px;
    }
}

/* Hasta 600px: las tres métricas en una fila y el botón de clima a lo ancho debajo */
@media (max-width: 600px) {
    #metrics-panel {
        grid-template-columns: repeat(3, 1fr);
    }

    .metric-nota {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .acciones-cabecera {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .acciones-cabecera > * {
        flex: 1;
    }

    /* En el teléfono el estado de la hoja es solo el punto de color (el texto queda en aria-label y title) */
    .estado-sync span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    /* Con poco ancho la marca queda en su nombre y el menú, en el módulo actual */
    .brand-sub {
        display: none;
    }

    .brand-nombre {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btn-modulos-texto {
        max-width: 104px;
    }

    /* En el teléfono la marca se queda en "Semences" y el menú, sin el icono de cuadrícula */
    .brand-resto,
    .btn-modulos-icono {
        display: none;
    }

    /* Responsable: dentro del menú de módulos en lugar de en la barra */
    #btn-responsable {
        display: none;
    }

    .menu-extra.solo-telefono:not([hidden]) {
        display: block;
    }

    /* El menú desplegado ocupa el ancho de la pantalla, bajo la barra */
    .lista-modulos {
        position: fixed;
        top: calc(env(safe-area-inset-top) + 58px);
        left: var(--sdc-espacio-3);
        right: var(--sdc-espacio-3);
        min-width: 0;
    }

    /* La marca no se recorta: el que cede es el botón del menú */
    #app-nav .brand {
        flex: 0 0 auto;
        gap: var(--sdc-espacio-2);
    }

    .menu-modulos {
        flex-shrink: 1;
        min-width: 0;
    }

    .btn-modulos {
        max-width: 100%;
    }

    .btn-chat {
        padding: 0 var(--sdc-espacio-2);
    }

    .estado-sync {
        justify-content: center;
        min-width: 28px;
        padding: 0;
    }
}

/* Movimiento reducido: sin desplazamientos ni transiciones (app.js además detiene la lluvia) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        scroll-behavior: auto !important;
    }

    #btn-toggle-clima:hover {
        transform: none;
    }
}

/* ===== Ventana flotante (ventana.js): la finca 3D sola, con sus cifras arriba ===== */
body.ventana-flotante {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    background: var(--ui-fondo);
}

.ventana-flotante #canvas-container {
    flex: 1;
    min-height: 0;
}

.flotante-barra {
    padding: var(--sdc-espacio-2) var(--sdc-espacio-3);
    background: var(--ui-tarjeta);
    border-bottom: 1px solid var(--ui-borde);
    color: var(--ui-enlace);
    font-family: var(--font-dato);
    font-size: var(--sdc-texto-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* En la página, mientras la finca está en la ventana flotante */
.flotante-aviso {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sdc-espacio-3);
    min-height: 200px;
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-md);
}

/* Enlace al reporte de Drive junto a los atajos del expediente: se ve como un botón */
.enlace-reporte {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Casilla con su texto al lado (p. ej. "Invitar al cliente" en la reunión con Meet) */
.casilla {
    display: flex;
    align-items: flex-start;
    gap: var(--sdc-espacio-3);
    font-size: var(--sdc-texto-md);
    color: var(--ui-texto);
    cursor: pointer;
}

.casilla input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--sdc-primario);
}

.reunion-ocupado:empty {
    display: none;
}

.reunion-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sdc-espacio-4);
}

/* ----- Tablero del equipo y accesos (tablero.js) ----- */
.dialogo-tablero {
    width: min(var(--sdc-dialogo-sm), calc(100vw - 2 * var(--sdc-espacio-5)));
}

.tablero-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sdc-espacio-4);
}

.tablero-avatares,
.tablero-mensajes,
.accesos-lista {
    list-style: none;
    display: grid;
    gap: var(--sdc-espacio-3);
    max-height: 40vh;
    overflow-y: auto;
}

.accesos-lista {
    max-height: 70vh;
}

.avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sdc-verde-profundo);
    color: var(--sdc-menta);
    font-weight: var(--sdc-peso-fuerte);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tablero-persona {
    width: 100%;
    min-height: var(--sdc-objetivo-tactil);
    display: flex;
    align-items: center;
    gap: var(--sdc-espacio-4);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
    color: var(--ui-texto);
    text-align: left;
    cursor: pointer;
}

.tablero-persona:hover,
.tablero-persona:focus-visible {
    border-color: var(--sdc-primario);
}

/* Punto de estado sobre la foto */
.tablero-persona .avatar {
    position: relative;
    overflow: visible;
}

.tablero-persona .avatar img {
    border-radius: 50%;
}

.tablero-persona .avatar::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--ui-apagado);
    background: var(--ui-texto-suave);
}

.tablero-persona[data-estado="disponible"] .avatar::after { background: var(--sdc-primario); }
.tablero-persona[data-estado="en_parcela"] .avatar::after { background: var(--sdc-dorado); }
.tablero-persona[data-estado="en_reunion"] .avatar::after { background: var(--sdc-agua-claro); }
.tablero-persona[data-estado="desconectado"] { opacity: 0.7; }

.tablero-persona-textos {
    display: grid;
    gap: 2px;
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

.tablero-persona-textos strong {
    font-size: var(--sdc-texto-md);
    color: var(--ui-titulo);
}

.tablero-accion {
    display: grid;
    gap: var(--sdc-espacio-4);
    padding: var(--sdc-espacio-4);
    border: 1px solid var(--sdc-primario);
    border-radius: var(--sdc-radio-sm);
}

.tablero-accion[hidden] {
    display: none;
}

.tablero-accion h4,
.tablero-bandeja h4 {
    color: var(--ui-titulo);
    font-size: var(--sdc-texto-md);
}

.tablero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sdc-espacio-3);
}

.tablero-mensaje {
    display: grid;
    gap: var(--sdc-espacio-1);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    border-left: 3px solid var(--ui-borde);
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto);
}

.tablero-mensaje-nuevo {
    border-left-color: var(--sdc-primario);
}

.tablero-mensaje strong {
    color: var(--ui-texto-suave);
    font-weight: var(--sdc-peso-medio);
}

.tablero-mensaje a {
    color: var(--ui-enlace);
}

.acceso {
    display: grid;
    gap: var(--sdc-espacio-4);
    padding: var(--sdc-espacio-4);
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
}

.acceso-pendiente {
    border-color: var(--sdc-dorado);
}

.acceso-cabecera {
    display: flex;
    align-items: center;
    gap: var(--sdc-espacio-4);
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto-suave);
}

.acceso-cabecera div {
    display: grid;
    gap: 2px;
}

.acceso-cabecera strong {
    color: var(--ui-titulo);
    font-size: var(--sdc-texto-md);
}

.acceso-form {
    display: grid;
    gap: var(--sdc-espacio-4);
}

.acceso-grupo {
    border: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sdc-espacio-3) var(--sdc-espacio-5);
}

.acceso-grupo legend {
    width: 100%;
    margin-bottom: var(--sdc-espacio-2);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-fuerte);
    color: var(--ui-texto-suave);
}

.acceso-grupo select {
    min-height: var(--sdc-objetivo-tactil);
    padding: 0 var(--sdc-espacio-4);
    background: var(--ui-fondo);
    color: var(--ui-texto);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
}

.casilla[hidden] {
    display: none;
}

.expediente-datos a {
    color: var(--ui-enlace);
}

/* ----- Dentro de las apps nativas (Capacitor en Android/iPhone/iPad y Electron; nativo.js pone .app-nativa) ----- */
/* Mantener pulsado un botón no abre el menú del sistema ni selecciona el texto de la interfaz */
.app-nativa button,
.app-nativa .nav-tab,
.app-nativa .ficha {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Teléfonos y tabletas: botones de al menos 44 px de alto, el mínimo cómodo para el dedo (guía de Apple) */
@media (pointer: coarse) {
    .app-android .btn-primary,
    .app-android .btn-secondary,
    .app-android .btn-texto,
    .app-ios .btn-primary,
    .app-ios .btn-secondary,
    .app-ios .btn-texto {
        min-height: 44px;
    }
}

/* Documentos del cliente en Drive (crm.js › abrirDocumentos) */
.documentos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-2);
    max-height: 40vh;
    overflow-y: auto;
}

.documentos-lista a {
    color: inherit;
    font-weight: var(--sdc-peso-medio);
    word-break: break-word;
}

.documentos-subir {
    position: relative;
    align-self: flex-start;
    cursor: pointer;
}

.documentos-subir.ocupado {
    opacity: 0.6;
    pointer-events: none;
}

.documentos-subir:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.cuenta-workspace {
    display: flex;
    flex-direction: column;
    gap: var(--sdc-espacio-2);
}

/* ----- Bandeja de Instagram (bandejaInstagram.js) ----- */
.ig-vista[hidden] {
    display: none;
}

.ig-vista {
    display: grid;
    gap: var(--sdc-espacio-4);
}

.ig-conversaciones,
.ig-mensajes {
    list-style: none;
    display: grid;
    gap: var(--sdc-espacio-3);
    max-height: 50vh;
    overflow-y: auto;
}

.ig-conversacion {
    width: 100%;
    min-height: var(--sdc-objetivo-tactil);
    display: grid;
    gap: var(--sdc-espacio-1);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    text-align: left;
    color: var(--ui-texto);
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    border-left: 3px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
    font: inherit;
    cursor: pointer;
}

.ig-conversacion:hover,
.ig-conversacion:focus-visible {
    border-color: var(--sdc-primario);
}

.ig-nueva {
    border-left-color: var(--sdc-primario);
}

.ig-conversacion-cabecera {
    display: flex;
    justify-content: space-between;
    gap: var(--sdc-espacio-3);
    font-size: var(--sdc-texto-sm);
}

.ig-conversacion-cabecera span,
.ig-conversacion-detalle {
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-sm);
}

.ig-conversacion-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ig-mensaje {
    max-width: 85%;
    display: grid;
    gap: var(--sdc-espacio-1);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    border-radius: var(--sdc-radio-sm);
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    color: var(--ui-texto);
    overflow-wrap: anywhere;
}

.ig-saliente {
    justify-self: end;
    border-color: var(--sdc-primario);
}

.ig-mensaje span {
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-sm);
}

.ig-responder {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sdc-espacio-3);
    align-items: end;
}

.ig-responder .dialogo-nota,
.ig-responder .form-error {
    grid-column: 1 / -1;
}

/* ----- Panel de indicadores (panel.js) ----- */
.dialogo-indicadores {
    width: min(var(--sdc-dialogo-lg), calc(100vw - 2 * var(--sdc-espacio-5)));
    position: relative;
}

.indicadores-fichas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sdc-espacio-3);
}

.indicadores-ficha {
    display: grid;
    gap: var(--sdc-espacio-1);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
}

.indicadores-ficha-aviso {
    border-color: var(--ui-aviso-grafico);
}

.indicadores-ficha-titulo,
.indicadores-ficha-detalle {
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-sm);
}

.indicadores-ficha strong {
    color: var(--ui-titulo);
    font-size: var(--sdc-texto-cifra);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.indicadores-seccion {
    display: grid;
    gap: var(--sdc-espacio-2);
    margin-top: var(--sdc-espacio-4);
}

.indicadores-seccion h4 {
    color: var(--ui-titulo);
    font-size: var(--sdc-texto-md);
}

.indicadores-barras {
    list-style: none;
    display: grid;
    gap: var(--sdc-espacio-2);
}

.indicadores-barra {
    display: grid;
    grid-template-columns: minmax(90px, 32%) 1fr auto;
    align-items: center;
    gap: var(--sdc-espacio-3);
    min-height: 28px;
    padding: 2px var(--sdc-espacio-2);
    border-radius: var(--sdc-radio-xs);
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto);
}

.indicadores-barra:hover,
.indicadores-barra:focus-visible {
    background: var(--ui-apagado);
}

.indicadores-barra-etiqueta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.indicadores-barra-pista {
    position: relative;
    height: 12px;
}

.indicadores-barra-relleno {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--ui-grafico);
    border-radius: 0 var(--sdc-radio-barra) var(--sdc-radio-barra) 0;
}

.indicadores-barra-aviso .indicadores-barra-relleno {
    background: var(--ui-aviso-grafico);
}

.indicadores-barra-linea {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 0;
    border-left: 2px dashed var(--ui-texto-suave);
}

.indicadores-barra-valor {
    min-width: 4.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ui-texto);
}

.indicadores-barra-aviso .indicadores-barra-valor,
.indicadores-aviso {
    color: var(--ui-titulo);
    font-weight: var(--sdc-peso-medio);
}

.tabla-datos {
    overflow-x: auto;
}

.tabla-datos table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sdc-texto-sm);
}

.tabla-datos th,
.tabla-datos td {
    padding: var(--sdc-espacio-2) var(--sdc-espacio-3);
    text-align: left;
    border-bottom: 1px solid var(--ui-borde);
    color: var(--ui-texto);
}

.tabla-datos th {
    color: var(--ui-texto-suave);
    font-weight: var(--sdc-peso-medio);
}

.indicadores-tooltip {
    position: absolute;
    z-index: var(--sdc-capa-emergente);
    max-width: 260px;
    padding: var(--sdc-espacio-2) var(--sdc-espacio-3);
    background: var(--ui-tarjeta);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-xs);
    box-shadow: var(--sdc-sombra);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-sm);
    pointer-events: none;
}

.indicadores-tooltip[hidden] {
    display: none;
}

@media (max-width: 520px) {
    .indicadores-barra {
        grid-template-columns: 1fr auto;
    }

    .indicadores-barra-pista {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* ----- Reporte semanal (reporte.js) ----- */
.dialogo-reporte {
    width: min(var(--sdc-dialogo-md), calc(100vw - 2 * var(--sdc-espacio-5)));
}

.reporte-bloqueo {
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    border: 1px solid var(--ui-aviso);
    border-radius: var(--sdc-radio-sm);
    color: var(--ui-titulo);
    font-weight: var(--sdc-peso-medio);
}

.reporte-bloqueo[hidden] {
    display: none;
}

.reporte-actividades,
.reportes-equipo,
.reporte-detalle {
    list-style: none;
    display: grid;
    gap: var(--sdc-espacio-3);
}

.reporte-actividades {
    max-height: 50vh;
    overflow-y: auto;
}

.reportes-equipo {
    max-height: 65vh;
    overflow-y: auto;
}

.reporte-actividad {
    display: grid;
    gap: var(--sdc-espacio-2);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
}

.reporte-actividad-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sdc-espacio-2) var(--sdc-espacio-3);
    color: var(--ui-texto);
}

.reporte-actividad-cabecera input {
    flex: 1 1 200px;
}

.reportes-equipo details {
    color: var(--ui-texto);
    font-size: var(--sdc-texto-sm);
}

.reportes-equipo summary {
    cursor: pointer;
    min-height: var(--sdc-objetivo-tactil);
    display: flex;
    align-items: center;
}

.reporte-resumen-texto {
    margin-bottom: var(--sdc-espacio-3);
    white-space: pre-line;
}

.reporte-detalle li {
    display: grid;
    gap: var(--sdc-espacio-1);
    padding-left: var(--sdc-espacio-3);
    border-left: 3px solid var(--ui-borde);
}

/* Revisión y resumen hechos con IA (reporte.js): siempre rotulados, con borde de "ayuda", no de dato */
.reporte-ia,
.reportes-resumen {
    display: grid;
    gap: var(--sdc-espacio-2);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    border: 1px dashed var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-sm);
}

.reportes-resumen[hidden] {
    display: none;
}

.reportes-resumen h4 {
    color: var(--ui-titulo);
    font-size: var(--sdc-texto-md);
}

.reportes-resumen ul {
    padding-left: var(--sdc-espacio-5);
}

.reporte-ia-atencion {
    border-style: solid;
    border-color: var(--ui-aviso);
}

.reporte-ia-titulo {
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-fuerte);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ----- Barra de accesos y sus paneles (accesos.js, agenda.js, reunionesMetas.js) ----- */
:root {
    --ui-agenda-seguimiento: #0B95D6;
    --ui-agenda-reunion: #8B5CF6;
    --ui-agenda-tarea: var(--sdc-dorado);
    --ui-agenda-envio: #E07A2E;
    --ui-agenda-germinador: var(--sdc-primario);
    --ui-agenda-google: var(--ui-texto-suave);
}

.accesos-cabecera {
    display: flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
    flex-shrink: 0;
}

/* Sin espacio para los nombres: solo el icono (el nombre sigue en title y para lectores) */
@media (max-width: 1360px) {
    .btn-acceso span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .btn-acceso {
        justify-content: center;
        min-width: var(--sdc-objetivo-tactil);
        padding: 0 var(--sdc-espacio-3);
    }
}

.btn-acceso .chat-contador,
.barra-boton .chat-contador,
.hoja-mas-boton .chat-contador {
    position: absolute;
    top: -6px;
    right: -6px;
}

/* Barra inferior: solo en el teléfono */
.barra-inferior {
    display: none;
}

@media (max-width: 600px) {
    .accesos-cabecera {
        display: none;
    }

    .barra-inferior {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--sdc-capa-menu);
        display: flex;
        justify-content: space-around;
        padding: var(--sdc-espacio-1) var(--sdc-espacio-2) calc(var(--sdc-espacio-1) + env(safe-area-inset-bottom));
        background: var(--ui-tarjeta);
        border-top: 1px solid var(--ui-borde);
        box-shadow: var(--sdc-sombra-superior);
    }

    body.con-barra-inferior {
        padding-bottom: calc(var(--sdc-alto-barra-inferior) + env(safe-area-inset-bottom));
    }

    /* Los paneles laterales no quedan tapados por la barra */
    body.con-barra-inferior .panel-chat {
        bottom: calc(var(--sdc-alto-barra-inferior) + env(safe-area-inset-bottom));
    }
}

.barra-boton,
.hoja-mas-boton {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 56px;
    min-height: 52px;
    padding: var(--sdc-espacio-1);
    background: none;
    border: none;
    border-radius: var(--sdc-radio-xs);
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-xs);
    font-weight: var(--sdc-peso-medio);
    cursor: pointer;
}

.barra-boton[aria-expanded="true"],
.barra-boton:hover {
    color: var(--ui-enlace);
}

.barra-boton .icono,
.hoja-mas-boton .icono {
    width: 22px;
    height: 22px;
}

.barra-boton:focus-visible,
.hoja-mas-boton:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

.hoja-mas {
    width: min(420px, calc(100vw - 2 * var(--sdc-espacio-4)));
    padding: var(--sdc-espacio-4);
}

.hoja-mas-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sdc-espacio-2);
    margin-bottom: var(--sdc-espacio-4);
}

.hoja-mas-boton {
    min-height: 72px;
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-sm);
}

.hoja-mas-cerrar {
    width: 100%;
}

/* Paneles laterales nuevos (mismo aspecto que el del chat) */
.panel-ancho {
    width: min(560px, 100vw);
}

.panel-acceso-cuerpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: var(--sdc-espacio-4);
    padding: var(--sdc-espacio-5);
}

.subtitulo-acceso {
    color: var(--ui-titulo);
    font-size: var(--sdc-texto-md);
}

.lista-acceso {
    display: grid;
    gap: var(--sdc-espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-acceso > li {
    display: flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
}

.fila-acceso {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--sdc-espacio-3);
    min-height: var(--sdc-objetivo-tactil);
    padding: var(--sdc-espacio-3);
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    border-left: 3px solid var(--ui-borde);
    border-radius: var(--sdc-radio-xs);
    color: var(--ui-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fila-acceso:hover,
.fila-acceso:focus-visible {
    border-color: var(--sdc-primario);
}

.fila-nueva {
    border-left-color: var(--sdc-primario);
    font-weight: var(--sdc-peso-medio);
}

.fila-icono {
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    font-size: var(--sdc-texto-xl);
    line-height: 1.4;
}

.avatar-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sdc-verde-profundo);
    color: var(--sdc-menta);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-fuerte);
}

.fila-textos {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.fila-texto {
    overflow-wrap: anywhere;
    font-size: var(--sdc-texto-sm);
}

.fila-cuando {
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-xs);
}

/* Conversación 1 a 1 */
.hilo-acceso {
    display: grid;
    align-content: start;
    gap: var(--sdc-espacio-2);
    min-height: 200px;
    max-height: 55vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.burbuja {
    justify-self: start;
    max-width: 85%;
    display: grid;
    gap: 2px;
    padding: var(--sdc-espacio-2) var(--sdc-espacio-3);
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm) var(--sdc-radio-sm) var(--sdc-radio-sm) var(--sdc-radio-barra);
    color: var(--ui-texto);
    overflow-wrap: anywhere;
}

.burbuja-mia {
    justify-self: end;
    border-color: var(--sdc-primario);
    border-radius: var(--sdc-radio-sm) var(--sdc-radio-sm) var(--sdc-radio-barra) var(--sdc-radio-sm);
}

.burbuja span {
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-xs);
}

.burbuja a {
    color: var(--ui-enlace);
    font-weight: var(--sdc-peso-medio);
}

.hilo-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sdc-espacio-2);
    align-items: end;
}

.hilo-form button .icono {
    width: 20px;
    height: 20px;
}

/* Agenda */
.agenda-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sdc-espacio-2);
}

.agenda-barra .btn-primary {
    margin-left: auto;
}

.agenda-semana {
    display: grid;
    gap: var(--sdc-espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.agenda-dia {
    display: grid;
    gap: var(--sdc-espacio-2);
    padding: var(--sdc-espacio-3);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
}

.agenda-hoy {
    border-color: var(--sdc-primario);
}

.agenda-vacio {
    padding-block: var(--sdc-espacio-2);
}

.agenda-dia h3 {
    color: var(--ui-titulo);
    font-size: var(--sdc-texto-sm);
}

.agenda-vacio h3,
.agenda-vacio .nota-suave {
    display: inline;
}

.agenda-vacio .nota-suave::before {
    content: ' · ';
}

.agenda-dia ul {
    display: grid;
    gap: var(--sdc-espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.agenda-item {
    display: flex;
    align-items: center;
    gap: var(--sdc-espacio-2);
    border-left: 4px solid var(--color-agenda, var(--ui-borde));
    border-radius: var(--sdc-radio-barra);
    background: var(--ui-apagado);
}

.agenda-item button {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 5.5em 1fr;
    gap: 0 var(--sdc-espacio-3);
    padding: var(--sdc-espacio-2) var(--sdc-espacio-3);
    background: none;
    border: none;
    color: var(--ui-texto);
    font: inherit;
    font-size: var(--sdc-texto-sm);
    text-align: left;
    cursor: pointer;
}

.agenda-hora {
    grid-row: span 2;
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-xs);
    font-variant-numeric: tabular-nums;
}

.agenda-detalle {
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-xs);
}

.agenda-meet {
    flex-shrink: 0;
    padding-inline: var(--sdc-espacio-3);
}

.agenda-seguimiento { --color-agenda: var(--ui-agenda-seguimiento); }
.agenda-reunion { --color-agenda: var(--ui-agenda-reunion); }
.agenda-tarea { --color-agenda: var(--ui-agenda-tarea); }
.agenda-envio { --color-agenda: var(--ui-agenda-envio); }
.agenda-germinador { --color-agenda: var(--ui-agenda-germinador); }
.agenda-google { --color-agenda: var(--ui-agenda-google); }

.agenda-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sdc-espacio-2) var(--sdc-espacio-4);
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-xs);
}

.agenda-clave::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: var(--sdc-espacio-1);
    border-radius: 2px;
    background: var(--color-agenda);
    vertical-align: -1px;
}

/* Reuniones */
.lista-acceso > .tarjeta-reunion {
    display: grid;
    gap: var(--sdc-espacio-1);
    padding: var(--sdc-espacio-3) var(--sdc-espacio-4);
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    border-left: 4px solid var(--ui-agenda-reunion);
    border-radius: var(--sdc-radio-xs);
    color: var(--ui-texto);
}

.fila-resaltada {
    border-color: var(--sdc-primario);
}

.reunion-acta-resumen {
    color: var(--ui-texto-suave);
    font-size: var(--sdc-texto-sm);
    white-space: pre-line;
}

.form-acceso {
    display: grid;
    gap: var(--sdc-espacio-3);
}

.form-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--sdc-espacio-3);
}

.re-participantes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--sdc-espacio-2);
}

.acta-acuerdos {
    display: grid;
    gap: var(--sdc-espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.acta-acuerdo {
    display: grid;
    grid-template-columns: 1fr 9em 9.5em auto;
    gap: var(--sdc-espacio-2);
    align-items: center;
}

@media (max-width: 600px) {
    .acta-acuerdo {
        grid-template-columns: 1fr 1fr;
    }

    .acta-acuerdo .acuerdo-texto {
        grid-column: 1 / -1;
    }
}

/* Metas */
.tarjeta-metas {
    display: grid;
    gap: var(--sdc-espacio-3);
    padding: var(--sdc-espacio-4);
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
}

.tarjeta-metas h3 {
    color: var(--ui-titulo);
    font-size: var(--sdc-texto-md);
}

.meta-fila {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--sdc-espacio-1) var(--sdc-espacio-3);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-sm);
}

.meta-cifra {
    font-variant-numeric: tabular-nums;
    font-weight: var(--sdc-peso-medio);
}

.meta-barra {
    grid-column: 1 / 3;
    height: 10px;
    background: var(--ui-tarjeta);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-pildora);
    overflow: hidden;
}

.meta-barra span {
    display: block;
    height: 100%;
    background: var(--ui-grafico);
    border-radius: var(--sdc-radio-pildora);
}

.meta-cumplida .meta-barra span {
    background: var(--sdc-primario);
}

.meta-form {
    display: grid;
    grid-template-columns: 1fr 7em auto;
    gap: var(--sdc-espacio-2);
}

@media (max-width: 600px) {
    .meta-form {
        grid-template-columns: 1fr 1fr;
    }

    .meta-form select {
        grid-column: 1 / -1;
    }
}

/* ----- Alto contraste (forced-colors) ----- */
@media (forced-colors: active) {
    /* Los fondos se quitan: las barras y el botón principal necesitan color del sistema o borde */
    .indicadores-barra-relleno {
        forced-color-adjust: none;
        background: CanvasText;
    }

    .indicadores-barra-aviso .indicadores-barra-relleno {
        background: Highlight;
    }

    .btn-primary {
        border: 1px solid ButtonText;
    }

    .etiqueta {
        border: 1px solid CanvasText;
    }
}

/* ----- Idioma: botón English / Español (idioma.js) ----- */
.btn-idioma {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: var(--sdc-objetivo-raton);
    padding: 0 var(--sdc-espacio-3);
    background: none;
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-pildora);
    color: var(--ui-texto);
    font-size: var(--sdc-texto-sm);
    font-weight: var(--sdc-peso-fuerte);
    cursor: pointer;
}

.btn-idioma:hover {
    border-color: var(--sdc-primario);
}

.btn-idioma:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

/* En la entrada y la sala de espera, arriba a la derecha del diálogo */
.btn-idioma-entrada {
    align-self: flex-end;
}

.btn-idioma .idioma-corto {
    display: none;
}

@media (max-width: 1100px) {
    .btn-idioma-cabecera .idioma-largo {
        display: none;
    }

    .btn-idioma-cabecera .idioma-corto {
        display: inline;
    }
}

/* ----- Auditoría (auditoria.js, solo Master) ----- */
.dialogo-auditoria {
    width: min(var(--sdc-dialogo-xl), calc(100vw - 2 * var(--sdc-espacio-5)));
}

.auditoria-pestanas {
    display: flex;
    gap: var(--sdc-espacio-2);
    border-bottom: 1px solid var(--ui-borde);
}

.auditoria-pestana {
    min-height: var(--sdc-objetivo-tactil);
    padding: 0 var(--sdc-espacio-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ui-texto-suave);
    font-family: inherit;
    font-size: var(--sdc-texto-md);
    font-weight: var(--sdc-peso-medio);
    cursor: pointer;
}

.auditoria-pestana[aria-selected="true"] {
    color: var(--ui-titulo);
    border-bottom-color: var(--sdc-primario);
}

.auditoria-pestana:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

.auditoria-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sdc-espacio-3);
}

.auditoria-filtros .form-group[hidden] {
    display: none;
}

/* El buscador ocupa la fila entera: así se lee el ejemplo */
.auditoria-buscar {
    grid-column: 1 / -1;
}

.auditoria-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sdc-espacio-3);
}

.auditoria-barra [hidden] {
    display: none;
}

.auditoria-integridad {
    flex: 1 1 240px;
    margin: 0;
}

.auditoria-rota {
    color: var(--ui-error);
    font-weight: var(--sdc-peso-medio);
}

.auditoria-lista {
    list-style: none;
    display: grid;
    gap: var(--sdc-espacio-2);
    max-height: 55vh;
    overflow-y: auto;
}

.auditoria-entrada {
    background: var(--ui-apagado);
    border: 1px solid var(--ui-borde);
    border-radius: var(--sdc-radio-sm);
}

.auditoria-entrada summary {
    display: grid;
    /* Mismos anchos en todas las filas: la columna de "qué" empieza siempre a la misma altura */
    grid-template-columns: 10rem 8.5rem 9rem minmax(0, 1fr);
    align-items: center;
    gap: var(--sdc-espacio-3);
    min-height: var(--sdc-objetivo-tactil);
    padding: var(--sdc-espacio-2) var(--sdc-espacio-3);
    cursor: pointer;
    font-size: var(--sdc-texto-sm);
    color: var(--ui-texto);
}

.auditoria-entrada summary:focus-visible {
    outline: 2px solid var(--ui-foco);
    outline-offset: 2px;
}

.auditoria-cuando {
    color: var(--ui-texto-suave);
    font-variant-numeric: tabular-nums;
}

.auditoria-quien {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auditoria-que {
    min-width: 0;
    overflow-wrap: anywhere;
}

.auditoria-modulo {
    color: var(--ui-texto-suave);
}



.auditoria-detalle {
    display: grid;
    gap: var(--sdc-espacio-2);
    padding: 0 var(--sdc-espacio-3) var(--sdc-espacio-3);
}

.auditoria-detalle td {
    overflow-wrap: anywhere;
}

.auditoria-meta {
    margin: 0;
    overflow-wrap: anywhere;
}

.auditoria-contenido {
    display: grid;
}

.auditoria-mas {
    justify-self: center;
    margin-top: var(--sdc-espacio-3);
}

@media (max-width: 768px) {
    /* En el teléfono se desplaza el diálogo entero: sin una lista con su propio desplazamiento dentro */
    .auditoria-lista {
        max-height: none;
    }

    .auditoria-entrada summary {
        grid-template-columns: 8.5rem minmax(0, 1fr);
    }

    .auditoria-cuando {
        grid-column: 1 / -1;
    }

    .auditoria-que {
        grid-column: 1 / -1;
    }
}

/* Pantallas táctiles: lo compacto (cabecera, fichas de parcelas, lugares, plegar el panel, Meet del chat)
   crece hasta el objetivo táctil (44 px) */
@media (pointer: coarse) {
    .btn-responsable,
    .estado-sync,
    .btn-chat,
    .btn-idioma,
    .btn-modulos,
    .ficha,
    .menu-lugares button,
    .panel-plegar,
    .chat-meet {
        min-height: var(--sdc-objetivo-tactil);
    }

    .btn-idioma-cabecera,
    .estado-sync {
        min-width: var(--sdc-objetivo-tactil);
        justify-content: center;
    }
}