/* ═══════════════════════════════════════════════════════════════
   Galápago Portal — Sistema de diseño (base)
   Brandbook El Galápago 2026
   Variables, reset, tipografía, componentes reutilizables
   (tarjetas, botones, formularios, badges, tablas genéricas).
   Ver también:
     sidebar.css — layout, sidebar, topbar, notificaciones
     tareas.css  — módulo Tareas y Comité (solo esas 3 páginas)
   ═══════════════════════════════════════════════════════════════ */

/* Letras servidas desde el propio portal, no desde Google Fonts: la app
   instalada solo guarda lo de /assets/, y la cadena hacia Google hacía
   lenta la carga en celulares viejos con mala señal (2026-09-13). */
@import url('fonts.css');
@import url('sidebar.css');

/* ─── Variables de marca ─────────────────────────────────────── */
:root {
    /* Colores principales (Brandbook pág. 20) */
    --carbon:          #403834;   /* Black 7C */
    --carbon-medio:    #58564B;   /* Black 418C */
    --crema:           #E9D8C9;   /* Black 7604C */
    --tierra:          #948271;   /* Warm Gray 8C */
    --naranja:         #F04C24;   /* 7417C — acento principal */

    /* Colores secundarios (Brandbook pág. 21) */
    --lila:            #716EAA;
    --dorado:          #D5C362;
    --acero:           #598794;
    --salmon:          #FCC28B;
    --cielo:           #73D0F1;
    --azul:            #2F6DB0;   /* azul sólido — etapa "Cotización" en Eventos */

    /* Versiones oscuras para TEXTO sobre fondo claro (las normales no
       alcanzan contraste suficiente para leerse) */
    --naranja-oscuro:  #C03A18;   /* texto naranja, ej. pastilla "Yo mismo" */
    --dorado-oscuro:   #7A6E1A;   /* texto dorado, ej. "Cumplimiento semanal" */
    --blanco:          #FFFFFF;   /* texto e íconos sobre fondos de color */
    --acero-oscuro:    #3F6572;   /* texto acero, ej. etiqueta "Estratégica" */
    --lila-oscuro:     #5A5794;   /* texto lila, ej. etiqueta "Comité" */
    --tierra-oscuro:   #5E5046;
    --tierra-claro:    #BFB3A6;   /* texto secundario sobre el fondo carbón del sidebar */   /* texto tierra sobre fondo tierra claro */

    /* Semánticos UI */
    --fondo-pagina:    #F5EFE9;
    --fondo-tarjeta:   #FFFFFF;
    --texto-principal: #403834;
    --texto-secundario:#6B5F57;
    --borde:           #DDD4C8;
    --borde-suave:     #EEE7DF;
    --fondo-suave:     #FAF8F5;   /* zonas apenas más claras que el fondo, dentro de tarjetas */
    --fondo-encabezado-tabla: rgba(64, 56, 52, 0.05); /* encabezado (thead) de cualquier tabla del portal */
    --color-error:     #C0392B;
    --fondo-error:     #FDEEEC;
    --color-exito:     #2E6B3E;
    --fondo-exito:     #EBF5EE;
    /* Sólidos (no rgba translúcido) para las etapas "Cotización"/"Confirmado"
       del módulo Eventos — mismo criterio que fondo-exito/fondo-error: con
       rgba() la tarjeta se veía gris en fondos que no son blancos (panel del
       día en Mes, fondo crema), porque el color se mezclaba con lo que hay
       detrás en vez de ser fijo (Felipe, 2026-09-23). */
    --fondo-cotizacion: #EAF1F8;
    --fondo-confirmado: #FAF6E3;

    /* Etapas de Eventos (HubSpot): color fuerte (puntos, barras), fondo
       suave (chips, bloques) y color de texto legible sobre ese fondo */
    --etapa-cotizacion:       var(--azul);
    --etapa-cotizacion-fondo: rgba(47, 109, 176, 0.13);
    --etapa-cotizacion-texto: var(--azul);
    --etapa-confirmado:       var(--dorado);
    --etapa-confirmado-fondo: rgba(213, 195, 98, 0.24);
    --etapa-confirmado-texto: var(--dorado-oscuro);
    --etapa-ejecutado:        var(--color-exito);
    --etapa-ejecutado-fondo:  var(--fondo-exito);
    --etapa-ejecutado-texto:  var(--color-exito);
    --etapa-perdido:          var(--color-error);
    --etapa-perdido-fondo:    var(--fondo-error);
    --etapa-perdido-texto:    var(--color-error);

    /* Tipografías (Brandbook pág. 23–25) */
    --fuente-titulo:   'Playfair Display', Georgia, serif;
    --fuente-base:     'Inter', 'Segoe UI', Arial, sans-serif;

    /* Escala tipográfica */
    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   17px;
    --text-lg:   20px;
    --text-xl:   24px;
    --text-2xl:  30px;
    --text-3xl:  38px;

    /* Espaciado */
    --s1:   4px;
    --s2:   8px;
    --s3:  12px;
    --s4:  16px;
    --s5:  20px;
    --s6:  24px;
    --s8:  32px;
    --s10: 40px;
    --s12: 48px;

    /* Bordes */
    --radio-sm:   4px;
    --radio-md:   8px;
    --radio-lg:  12px;
    --radio-xl:  16px;
    --radio-pill: 999px;  /* pastillas y chips: extremos totalmente redondos */

    /* Sombras */
    --sombra-sm:  0 1px 3px rgba(64, 56, 52, 0.08);
    --sombra-md:  0 4px 16px rgba(64, 56, 52, 0.10);
    --sombra-lg:  0 8px 32px rgba(64, 56, 52, 0.14);
    --sombra-panel: -8px 0 32px rgba(64, 56, 52, 0.20);  /* paneles que entran por la derecha */

    /* Layout */
    --sidebar-ancho: 248px;
    --topbar-alto:    56px;
    /* Círculos con iniciales (avatares): 3 tamaños y 3 colores con
       significado fijo en todo el portal */
    --avatar-xs: 18px;   /* chips de Mes y bloques de Semana del calendario */
    --avatar-sm: 24px;   /* calendario, ficha del evento */
    --avatar-md: 30px;   /* filas de tareas, listas, selectores */
    --avatar-lg: 36px;   /* menú de usuario */
    --avatar-yo:        var(--naranja);  /* vos */
    --avatar-encargado: var(--acero);    /* el encargado de la tarea */
    --avatar-otro:      var(--tierra);   /* cualquier otra persona */
    --panel-angosto: 440px;  /* paneles laterales con formulario */
    --panel-ancho:   760px;  /* paneles laterales con lista de tarjetas */

    /* Movimiento — duraciones y curvas de las animaciones */
    --dur-rapida: 0.15s;   /* hover, cambios de color */
    --dur-media:  0.22s;   /* paneles, pestañas, popups */
    --dur-lenta:  0.3s;    /* entradas de página */
    --curva-app:  cubic-bezier(.32, .72, 0, 1);  /* se siente como app nativa (iOS) */

    /* Letra más chica que --text-xs: solo contadores y badges diminutos */
    --text-2xs: 10px;

    /* Capas (z-index) — de abajo hacia arriba. Número más alto = encima.
       Una sola escala para todo el portal: así un panel de Tareas abierto
       desde la ficha de un evento queda encima sin parches por página.
       El gesto "atrás" (sidebar.js) cierra primero la capa de número más
       alto, así que el orden de esta lista también define qué se cierra
       primero. */
    --z-topbar:       50;    /* barra de arriba */
    --z-flotante:     60;    /* desplegables dentro de la página (filtros, selector de mes) y botones flotantes */
    --z-sidebar-fondo: 90;   /* fondo oscuro del sidebar en celular */
    --z-sidebar:     100;
    --z-menu:        100;    /* menú de usuario, campanita, panel de info */
    --z-pantalla:    150;    /* pantalla completa encima del portal (popup de Comité) */
    --z-popover:     200;    /* tarjetita al pasar sobre un evento del calendario */
    --z-panel-dia:   300;    /* panel del día (Eventos) */
    --z-ficha:       400;    /* ficha del evento */
    --z-editor:      500;    /* editar negocio (encima de la ficha) */
    --z-panel:       600;    /* nueva tarea (se abre también desde la ficha) */
    --z-tooltip:     650;    /* tooltip flotante de las filas de tarea */
    --z-selector:    700;    /* selectores de personas y ventanas "con contenido" */
    --z-confirmacion: 800;   /* ventanas "pregunta": siempre encima de lo que las abrió */
    --z-toast:       900;    /* mensajes cortos */
    --z-recarga:    1000;    /* pantalla de versión nueva */
    --z-alerta:     1100;    /* "¿Salir sin guardar?": encima de absolutamente todo */

    /* Alias de compatibilidad (nombres usados por login.css / dashboard.css) */
    --color-primario:   var(--naranja);
    --color-secundario: var(--carbon);
    --color-fondo:      var(--fondo-pagina);
    --color-texto:      var(--texto-principal);
    --color-borde:      var(--borde);
    --radio-borde:      var(--radio-md);
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Base ───────────────────────────────────────────────────── */
/* overflow-x: hidden en las dos — sin esto, iOS Safari deja arrastrar toda
   la página en horizontal por el más mínimo desborde (un subpíxel alcanza),
   y como la topbar/sidebar son position:fixed, se quedan atrás mientras el
   resto de la página se corre: se ve como si las tarjetas se "descuadraran".
   Android Chrome no tiene ese rebote horizontal, por eso ahí no se notaba. */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    font-family: var(--fuente-base);
    font-size: var(--text-base);
    background: var(--fondo-pagina);
    color: var(--texto-principal);
    line-height: 1.6;
    overflow-x: hidden;
}

a { color: var(--naranja-oscuro); text-decoration: none; }  /* naranja oscuro: el normal no se lee bien en texto chico */
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ─── Tipografía ─────────────────────────────────────────────── */
h1, h2, h3 {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    line-height: 1.25;
    color: var(--carbon);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl);  }
h3 { font-size: var(--text-md);  }

h4, h5, h6 {
    font-family: var(--fuente-base);
    font-weight: 600;
    line-height: 1.3;
    color: var(--carbon);
}

h4 { font-size: var(--text-base); }

p { margin-bottom: var(--s4); }
p:last-child { margin-bottom: 0; }

/* ─── Tarjetas ───────────────────────────────────────────────── */
.tarjeta {
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
}

.tarjeta-encabezado {
    padding: var(--s5) var(--s6);
    border-bottom: 1px solid var(--borde-suave);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
}

.tarjeta-encabezado h2,
.tarjeta-encabezado h3 {
    font-size: var(--text-md);
    font-weight: 600;
    font-family: var(--fuente-titulo);
}

.tarjeta-cuerpo {
    padding: var(--s6);
}

.tarjeta-pie {
    padding: var(--s4) var(--s6);
    border-top: 1px solid var(--borde-suave);
    background: var(--fondo-pagina);
    border-radius: 0 0 var(--radio-lg) var(--radio-lg);
}

/* Tarjeta métrica (stat card) */
.tarjeta-metrica {
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde-suave);
    border-radius: var(--radio-lg);
    padding: var(--s5) var(--s6);
    box-shadow: var(--sombra-sm);
}

.metrica-etiqueta {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-secundario);
    margin-bottom: var(--s2);
}

.metrica-valor {
    font-family: var(--fuente-titulo);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--carbon);
    line-height: 1;
}

.metrica-detalle {
    font-size: var(--text-xs);
    color: var(--texto-secundario);
    margin-top: var(--s2);
}

/* Acento de color en borde superior */
.tarjeta-metrica.acento-naranja { border-top: 3px solid var(--naranja); }
.tarjeta-metrica.acento-acero   { border-top: 3px solid var(--acero);   }
.tarjeta-metrica.acento-dorado  { border-top: 3px solid var(--dorado);  }
.tarjeta-metrica.acento-lila    { border-top: 3px solid var(--lila);    }

/* ─── Secciones colapsables (usadas en Tareas y futuros módulos) ── */
.titulo-colapsable {
    display: flex;
    align-items: center;
    gap: var(--s2);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.titulo-colapsable h3 {
    margin: 0;
}

.titulo-colapsable .icono-chevron-seccion {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--texto-secundario);
    transition: transform 0.2s;
}

.titulo-colapsable[aria-expanded="false"] .icono-chevron-seccion {
    transform: rotate(-90deg);
}

.seccion-colapsable {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}

.seccion-colapsable.colapsada {
    grid-template-rows: 0fr;
    opacity: 0;
}

.seccion-colapsable-interior {
    overflow: hidden;
    min-height: 0;
}

/* ─── Grillas ────────────────────────────────────────────────── */
.grilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.grilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.grilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }

@media (max-width: 900px) {
    .grilla-3, .grilla-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .grilla-2, .grilla-3, .grilla-4 { grid-template-columns: 1fr; }
}

/* ─── Botones ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s3) var(--s5);
    border-radius: var(--radio-md);
    font-family: var(--fuente-base);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover { opacity: 0.88; text-decoration: none; }
.btn:active { opacity: 0.76; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-por-aceptar {
    background: #b0b0b0;
    color: #fff;
    border-color: #b0b0b0;
    cursor: not-allowed;
    opacity: 1 !important;
}

.btn-primario {
    background: var(--naranja);
    color: #fff;
    border-color: var(--naranja);
}

.btn-secundario {
    background: var(--fondo-tarjeta);
    color: var(--carbon);
    border-color: var(--borde);
}

.btn-secundario:hover { background: var(--crema); opacity: 1; }

.btn-carbon {
    background: var(--carbon);
    color: var(--crema);
    border-color: var(--carbon);
}

.btn-ghost {
    background: transparent;
    color: var(--texto-secundario);
    border-color: transparent;
}

.btn-ghost:hover { background: var(--fondo-pagina); opacity: 1; color: var(--carbon); }

.btn-sm { padding: var(--s2) var(--s4); font-size: var(--text-xs); }

/* Volver (Felipe, 2026-10-01): pastilla blanca con flecha, arriba de una página
   que se abre desde una lista. Siempre es un enlace normal, nunca history.back(). */
.btn-volver {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px 7px 10px;
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio-pill);
    box-shadow: 0 1px 2px rgba(64, 56, 52, .08);
    color: var(--carbon);
    font-size: var(--text-sm); font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.btn-volver:hover { border-color: var(--naranja); color: var(--naranja); }
.btn-volver svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Eliminar (2026-10-22): contorno rojo + papelera, para quitar algo (ej. un elemento de dotación).
   Va a la izquierda del pie del popup, separado de la acción principal. */
.btn-eliminar {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--fondo-tarjeta);
    color: var(--color-error);
    border: 1.5px solid var(--color-error);
    border-radius: var(--radio-pill);
}
.btn-eliminar svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-eliminar:hover { background: var(--color-error); color: #fff; opacity: 1; }

/* Desplegable en pastilla (2026-10-22): mismo alto y forma que el buscador redondo de las listas. */
.select-pill {
    flex: 0 0 auto;
    align-self: stretch; appearance: none; -webkit-appearance: none;
    padding: var(--s3) 38px var(--s3) var(--s4);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-pill);
    background: var(--fondo-tarjeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857a74' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center / 14px;
    font: inherit; font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--texto-principal);
    cursor: pointer;
}
.select-pill:focus { outline: none; border-color: var(--naranja); }

.btn-lg { padding: var(--s4) var(--s8); font-size: var(--text-base); }

/* Selector segmentado (pieza oficial): para ver la misma lista de otra
   forma o filtrarla por un estado ("Activos / Retirados / Todos").
   Mismas medidas que .cal-vistas y .topbar-segmented. */
.segmentado {
    display: inline-flex;
    background: var(--borde-suave);
    border-radius: var(--radio-md);
    padding: 3px;
    gap: 2px;
    max-width: 100%;
}
.segmentado button {
    font-family: var(--fuente-base);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--texto-secundario);
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 5px var(--s3);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-rapida), color var(--dur-rapida), box-shadow var(--dur-rapida);
}
.segmentado button:hover { color: var(--texto-principal); }
.segmentado button[aria-pressed="true"] {
    background: var(--fondo-tarjeta);
    color: var(--carbon);
    font-weight: 600;
    box-shadow: var(--sombra-sm);
}

/* Botón circular (ej. "+ agregar tarea") */
.btn-circulo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--naranja);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--sombra-sm);
    transition: filter 0.15s, transform 0.15s;
}

.btn-circulo:hover { filter: brightness(0.92); transform: scale(1.05); }
.btn-circulo svg { width: 20px; height: 20px; }

/* ─── Formularios ────────────────────────────────────────────── */
.campo {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-bottom: var(--s5);
}

.campo:last-child { margin-bottom: 0; }

.campo label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--carbon);
}

.campo input,
.campo select,
.campo textarea {
    padding: var(--s3) var(--s4);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-md);
    font-family: var(--fuente-base);
    font-size: var(--text-base);
    color: var(--texto-principal);
    background: var(--fondo-tarjeta);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    width: 100%;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--naranja);
    box-shadow: 0 0 0 3px rgba(240, 76, 36, 0.12);
}

.campo input::placeholder,
.campo textarea::placeholder { color: var(--tierra); }

.campo textarea { resize: vertical; min-height: 100px; }

.campo-ayuda {
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--texto-secundario);
}

.campo-error input,
.campo-error select,
.campo-error textarea { border-color: var(--color-error); }

.campo-error .campo-ayuda { color: var(--color-error); }

/* Texto de ayuda en rojo sin marcar el campo como inválido (ej. aviso de
   límite de caracteres alcanzado, que no es un error de validación). */
.campo-ayuda-error { color: var(--color-error); }

/* ─── Pestañas horizontales (ej. selector de sede en Comité) ──── */
.barra-pestanas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    border-bottom: 1px solid var(--borde);
    flex-wrap: nowrap;
}

/* El botón de acción de la derecha ("Cargar desde Factory",
   "+ Agregar elemento") no se encoge ni baja de línea: son las
   pestañas las que scrollean cuando no caben. */
.barra-pestanas > .btn {
    flex: 0 0 auto;
}

.pestanas {
    display: flex;
    gap: var(--s6);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Edge legacy */
}

.pestanas::-webkit-scrollbar { display: none; }

.pestanas a {
    position: relative;
    padding: var(--s3) var(--s1) var(--s4);
    color: var(--texto-secundario);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.pestanas a:hover { color: var(--texto-principal); }

.pestanas a.pestana-activa { color: var(--carbon); font-weight: 700; }

.pestanas a.pestana-activa::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--naranja);
}

@media (max-width: 640px) {
    .pestanas { gap: var(--s5); }

    /* Los rótulos largos de los botones de acción se acortan: en el
       celular "⇪ Cargar desde Factory" se come media pantalla. */
    .solo-ancho { display: none; }
}

/* ─── Tablas genéricas ───────────────────────────────────────── */
.tabla-contenedor {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

thead th {
    padding: var(--s3) var(--s4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--texto-secundario);
    background: var(--fondo-encabezado-tabla);
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

tbody td {
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--borde-suave);
    color: var(--texto-principal);
    vertical-align: middle;
}

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

/* Más oscuro que --fondo-pagina a propósito: ese es el mismo tono que
   usan las casillas de días de la lista de elementos, así que al pasar
   el mouse las casillas se borraban contra la fila. */
tbody tr:hover { background: var(--borde-suave); }

tfoot td {
    padding: var(--s3) var(--s4);
    border-top: 2px solid var(--borde);
    font-weight: 600;
    background: var(--fondo-pagina);
}

/* ─── Badges / etiquetas ─────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--s3);
    border-radius: var(--radio-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
}

.badge-naranja { background: rgba(240, 76, 36, 0.12);  color: var(--naranja-oscuro); }
.badge-acero   { background: rgba(89, 135, 148, 0.15); color: var(--acero-oscuro); }
.badge-dorado  { background: rgba(213, 195, 98, 0.20); color: var(--dorado-oscuro); }
.badge-lila    { background: rgba(113, 110, 170, 0.15);color: var(--lila-oscuro); }
.badge-tierra  { background: rgba(148, 130, 113, 0.15);color: var(--texto-secundario); }
.badge-exito   { background: var(--fondo-exito);        color: var(--color-exito); }
.badge-error   { background: var(--fondo-error);        color: var(--color-error); }
.badge-gris    { background: var(--borde-suave);        color: var(--texto-secundario); }
.badge-carbon  { background: rgba(64, 56, 52, 0.12);    color: var(--carbon); }

/* Badge clicable (ej. "Activar notificaciones" junto a la campanita) — misma
   apariencia sobria de un badge normal, con affordance de botón. */
.badge-boton {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s ease;
}
.badge-boton:hover { filter: brightness(0.95); }

/* ─── Confirmación de notificaciones push (includes/notificaciones.php) ─── */
.push-confirmacion-overlay {
    position: fixed;
    inset: 0;
    background: rgba(64, 56, 52, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: var(--z-confirmacion);
}

.push-confirmacion-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.push-confirmacion-caja {
    background: var(--fondo-tarjeta);
    border-radius: var(--radio-xl);
    padding: var(--s6);
    max-width: 360px;
    width: 92vw;
    box-shadow: var(--sombra-lg);
    text-align: center;
    transform: scale(0.96);
    transition: transform 0.15s ease;
}

.push-confirmacion-overlay.visible .push-confirmacion-caja { transform: scale(1); }

.push-confirmacion-caja h3 {
    font-family: var(--fuente-titulo);
    font-size: var(--text-lg);
    margin-bottom: var(--s2);
}

.push-confirmacion-caja p {
    color: var(--texto-secundario);
    font-size: var(--text-sm);
    margin-bottom: var(--s5);
}

.push-confirmacion-botones {
    display: flex;
    gap: var(--s3);
    justify-content: center;
}

/* ─── Ventanas (pieza oficial, 2026-09-27) ───────────────────────
   Toda ventana que aparece encima usa el mismo aspecto: esquinas
   --radio-xl, --sombra-lg, fondo oscuro al 45%, "Cancelar" con borde (btn-secundario) a la
   izquierda y la acción en naranja a la derecha. Dos variantes:
     · Pregunta (confirmar/descartar): centrada, sin X.
       Hoy la implementan .confirmacion-caja (tareas.css) y
       .push-confirmacion-caja (arriba) — mismo aspecto.
     · Con contenido (listas, buscar, elegir): .ventana-cab con X +
       .ventana-cuerpo con scroll + pie. Hoy: .modal-caja (dashboard.css),
       .popup-compartida-caja (tareas.css) y .clave-caja (sidebar.css).
   Ver documentacion.html → Componentes → Ventanas. */
.ventana-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--borde-suave);
}

.ventana-cab h3,
.ventana-cab strong {
    font-family: var(--fuente-titulo);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--carbon);
    margin: 0;
}

.ventana-cerrar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-secundario);
    cursor: pointer;
    transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease;
}

.ventana-cerrar:hover,
.ventana-cerrar:focus-visible { background: var(--fondo-pagina); color: var(--carbon); }

.ventana-cerrar svg { width: 18px; height: 18px; }

.ventana-cuerpo { padding: var(--s4) var(--s5); overflow-y: auto; flex: 1 1 auto; }

/* ─── Paneles laterales (pieza oficial, 2026-09-27) ──────────────
   Entran desde la derecha con --dur-media + --curva-app, fondo oscuro
   al 45%, sombra --sombra-panel, encabezado como el de las ventanas
   (título --text-lg + X oficial) y pie con "Cancelar" con borde.
   Dos anchos: --panel-angosto (formularios: Nueva tarea, Editar
   negocio) y --panel-ancho (listas de tarjetas: panel del día).
   Hoy lo implementan .panel-nueva-tarea (tareas.css), .editor y
   .panel-dia (eventos.css). En celular ocupan toda la pantalla. */

/* ─── Cambio de pestaña (animación compartida) ──────────────────
   El contenido entra deslizando desde el lado hacia el que se movió el
   usuario (pestaña de más a la derecha = entra desde la derecha). La
   dirección la decide el JS de cada página. Vive acá porque la usan
   Mis tareas y las páginas de Eventos, que no cargan los mismos CSS. */
@keyframes deslizarPestanaDesdeDerecha {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes deslizarPestanaDesdeIzquierda {
    from { transform: translateX(-40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.anim-pestana-desde-derecha  { animation: deslizarPestanaDesdeDerecha var(--dur-media) ease-out; }
.anim-pestana-desde-izquierda { animation: deslizarPestanaDesdeIzquierda var(--dur-media) ease-out; }

@media (prefers-reduced-motion: reduce) {
    .anim-pestana-desde-derecha,
    .anim-pestana-desde-izquierda { animation: none; }
}

/* ─── Estados vacíos (pieza oficial, 2026-09-27) ────────────────
   Dos variantes. Mismo gris, sin cursiva, centrado.
     · .vacio-linea: dentro de un bloque, una columna, un panel o una tabla.
     · .vacio-grande: cuando está vacía toda la pantalla o toda la lista;
       <strong> para un título corto + <span> opcional con qué hacer. */
.vacio-linea {
    padding: var(--s5) var(--s4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--texto-secundario);
}

.vacio-grande {
    padding: var(--s10) var(--s5);
    text-align: center;
    color: var(--texto-secundario);
    background: var(--fondo-tarjeta);
    border: 1px dashed var(--borde);
    border-radius: var(--radio-lg);
}

.vacio-grande strong {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: var(--text-md);
    color: var(--carbon);
    margin-bottom: var(--s1);
}

.vacio-grande span { font-size: var(--text-sm); }

/* ─── Alertas / mensajes ─────────────────────────────────────── */
.alerta {
    padding: var(--s4) var(--s5);
    border-radius: var(--radio-md);
    font-size: var(--text-sm);
    border-left: 4px solid currentColor;
}

.alerta-error   { background: var(--fondo-error);  color: var(--color-error); }
.alerta-exito   { background: var(--fondo-exito);  color: var(--color-exito); }
.alerta-info    { background: rgba(89, 135, 148, 0.1); color: var(--acero); }
.alerta-aviso   { background: rgba(213, 195, 98, 0.15); color: #6B6000; }

/* ─── Aviso de conexión (sin internet / reconectado) ─────────────
   Franja arriba de toda la pantalla, en cualquier página del portal
   (la inserta assets/js/main.js como primer hijo de <body>) — no se
   cierra a mano, se oculta sola cuando cambia el estado de conexión.
   Empuja el contenido hacia abajo en vez de taparlo (por eso anima
   max-height y no position:fixed, que taparía la barra superior). */
.banner-conexion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    flex-wrap: wrap;
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--s5);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
    transition: max-height 0.25s ease, padding 0.25s ease;
}
/* 72px = hasta dos renglones. Con 34px (un renglón justo) el aviso de
   "nueva versión disponible", que es el texto más largo, quedaba cortado a
   la mitad en pantallas angostas. Como es max-height y no height, una
   franja de un solo renglón sigue midiendo lo mismo que antes. */
.banner-conexion.visible { max-height: 72px; padding: var(--s2) var(--s5); }
.banner-conexion svg { width: 14px; height: 14px; }
.banner-conexion svg { flex-shrink: 0; }
.banner-conexion-offline   { background: var(--dorado); color: var(--carbon); }
.banner-conexion-online    { background: var(--color-exito); color: #fff; }
.banner-conexion-inestable { background: var(--acero); color: #fff; }
.banner-conexion-actualizacion { background: var(--naranja); color: #fff; }

.banner-conexion button[data-role="banner-accion"] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Overlay de recarga: pantalla completa con el fondo del portal y un
   spinner centrado, mientras se aplica la nueva versión (ver main.js,
   clic en "Volver a cargar" del banner-conexion-actualizacion) o mientras
   se pone al día la pantalla al volver de la app dormida (tareas.js). */
.overlay-recarga {
    position: fixed;
    inset: 0;
    background: var(--fondo-pagina);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-recarga);
    opacity: 1;
    transition: opacity 0.25s ease;
}

.overlay-recarga.ocultando {
    opacity: 0;
    pointer-events: none;
}

.overlay-recarga-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.overlay-recarga-contenido p {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.9rem;
}

.spinner-recarga {
    width: 36px;
    height: 36px;
    border: 4px solid rgba(240, 76, 36, 0.2);
    border-top-color: var(--naranja);
    border-radius: 50%;
    animation: spinner-revisando-girar 0.7s linear infinite;
}

/* ─── Separadores y utilidades ───────────────────────────────── */
hr {
    border: none;
    border-top: 1px solid var(--borde-suave);
    margin: var(--s6) 0;
}

.texto-secundario { color: var(--texto-secundario); }
.texto-xs         { font-size: var(--text-xs); }
.texto-sm         { font-size: var(--text-sm); }
.negrita          { font-weight: 600; }
.mayusculas       { text-transform: uppercase; letter-spacing: 0.06em; }

.flex             { display: flex; }
.items-center     { align-items: center; }
.justify-between  { justify-content: space-between; }
.gap-2            { gap: var(--s2); }
.gap-3            { gap: var(--s3); }
.gap-4            { gap: var(--s4); }

.mb-4  { margin-bottom: var(--s4); }
.mb-6  { margin-bottom: var(--s6); }
.mb-8  { margin-bottom: var(--s8); }
.mb-10 { margin-bottom: var(--s10); }
.mt-4  { margin-top: var(--s4); }
.mt-6  { margin-top: var(--s6); }

/* Campo de día / hora (.campo-picker, Felipe 2026-10-01): texto que abre el selector de
   toda la fecha u hora; doble clic para escribir. Lógica en assets/js/campo-picker.js. */
.campo-picker { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.campo-picker .campo-picker-texto { flex: 1; min-width: 0; cursor: pointer; padding-right: 30px; }
.campo-picker.escribiendo .campo-picker-texto { cursor: text; }
.campo-picker.invalido { animation: pickerInvalido .3s; }
.campo-picker.invalido .campo-picker-texto { color: var(--color-error); }
@keyframes pickerInvalido { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
/* El campo nativo va escondido debajo: solo sirve para guardar el valor y anclar el selector. */
.campo-picker .campo-picker-nativo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none;
}
.campo-picker.picker-nativo-encima .campo-picker-nativo { pointer-events: auto; }
.campo-picker-icono { position: absolute; right: 8px; width: 16px; height: 16px; color: var(--texto-secundario); pointer-events: none; }
/* Deshabilitado (p. ej. ficha en solo lectura): sin ícono ni cursor de mano. */
.campo-picker-texto:disabled { cursor: default; }
.campo-picker-texto:disabled ~ .campo-picker-icono { display: none; }

/* ─── Aviso de sincronización — .sync-aviso ───────────────────
   Franja corta que dice qué está pasando cuando una pantalla se pone al día
   con HubSpot en segundo plano ("Buscando lo nuevo…" → "Todo al día" /
   "Se actualizaron N"). Manejada por assets/js/sync-aviso.js. */
.sync-aviso {
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3);
    margin-bottom: var(--s3);
    border-radius: var(--radio-md);
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    color: var(--naranja);
    font-size: var(--text-sm); font-weight: 600;
}
.sync-aviso[hidden] { display: none; }
.sync-aviso-spinner {
    width: 14px; height: 14px; flex-shrink: 0;
    border: 2px solid rgba(240, 76, 36, .25);
    border-top-color: var(--naranja);
    border-radius: 50%;
    animation: sync-aviso-girar .7s linear infinite;
}
.sync-aviso-listo { color: var(--texto-secundario); font-weight: 400; }
.sync-aviso-listo .sync-aviso-spinner { display: none; }
@keyframes sync-aviso-girar { to { transform: rotate(360deg); } }

/* Spinner chico de la barra de arriba — .sync-giro: feedback de las
   actualizaciones automáticas de fondo (cada 3 min). Solo gira; si algo
   cambió dice "Se actualizaron N" un instante. Lo crea sync-aviso.js. */
.sync-giro {
    display: inline-flex; align-items: center; gap: var(--s2);
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--texto-secundario);
    white-space: nowrap;
}
.sync-giro[hidden] { display: none; }
.sync-giro .sync-aviso-spinner { width: 12px; height: 12px; border-width: 2px; }
.sync-giro-texto:empty { display: none; }