/* HITO — hoja de estilos propia, sin frameworks.
   Identidad: "Todo proyecto es un hito." Paleta oficial en :root; todo lo
   demás se construye sobre esos cinco tokens + sus derivados. */

:root {
    /* --- Paleta oficial (A3) --- */
    --color-carbon: #1E2328;
    --color-verde-tecnico: #5E7F6A;
    --color-naranja-hito: #F27D4B;
    --color-arena: #C9C1B2;
    --color-blanco-calido: #F5F3EA;

    /* Derivados: claros/oscuros de cada color oficial + rojo de error */
    --color-carbon-suave: #4A5057;
    --color-carbon-tenue: #6D7378;
    --color-verde-claro: #8FA89A;
    --color-verde-fondo: #E7EEE9;
    --color-naranja-oscuro: #C85F32;
    --color-naranja-fondo: #FCE8DE;
    --color-arena-oscuro: #A89F8C;
    --color-error: #B3453A;
    --color-error-fondo: #F6E4E2;
    --color-superficie: #FFFFFF;

    /* Alias con los nombres que ya usa toda la plantilla: cambian de valor,
       no de nombre, para poder reskinar sin tocar cada archivo .html. */
    --color-fondo: var(--color-blanco-calido);
    --color-borde: var(--color-arena);
    --color-grafito: var(--color-carbon);
    --color-grafito-suave: var(--color-carbon-tenue);
    --color-acento: var(--color-naranja-hito);
    --color-acento-oscuro: var(--color-naranja-oscuro);
    --color-exito: var(--color-verde-tecnico);
    --color-exito-fondo: var(--color-verde-fondo);
    --color-alerta: var(--color-error);
    --color-alerta-fondo: var(--color-error-fondo);

    /* Estados de lote: progresión neutro → naranja (hito activo) → verde
       (completado); bloqueado usa el rojo de alerta (es una excepción). */
    --color-disponible: var(--color-arena-oscuro);
    --color-separado: var(--color-naranja-hito);
    --color-promesa: var(--color-naranja-oscuro);
    --color-vendido: var(--color-verde-claro);
    --color-escriturado: var(--color-verde-tecnico);
    --color-bloqueado: var(--color-error);

    /* Estados de vivienda Nova: paleta distinta a la de lote (misma familia
       de tokens, progresión distinta) para que la marca del mapa no se
       confunda con el color del lote debajo. */
    --color-viv-en-diseno: var(--color-arena-oscuro);
    --color-viv-vendida: var(--color-naranja-hito);
    --color-viv-en-fabricacion: var(--color-naranja-oscuro);
    --color-viv-en-montaje: var(--color-verde-claro);
    --color-viv-terminada: var(--color-verde-tecnico);
    --color-viv-entregada: var(--color-carbon);
    --color-viv-anulada: var(--color-error);

    /* Escala de espaciado */
    --espacio-1: 0.25rem;
    --espacio-2: 0.5rem;
    --espacio-3: 0.75rem;
    --espacio-4: 1rem;
    --espacio-5: 1.5rem;
    --espacio-6: 2rem;
    --espacio-7: 3rem;

    /* Escala tipográfica (A4) */
    --texto-titulo: 1.75rem;
    --texto-subtitulo: 1.125rem;
    --texto-cuerpo: 0.95rem;
    --texto-pequeno: 0.82rem;
    --texto-etiqueta: 0.72rem;

    --radio: 10px;
    --radio-chico: 6px;
    --sombra: 0 1px 2px rgba(30, 35, 40, 0.05), 0 2px 10px rgba(30, 35, 40, 0.06);
    --fuente: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ancho-menu: 248px;
    --ancho-menu-rail: 68px;
    /* Margen lateral fluido de .contenedor — el contenido ya no tiene
       ancho máximo (usa todo el espacio junto al sidebar), pero necesita
       un respiro que crezca con la pantalla en vez de un valor fijo. */
    --relleno-lateral: clamp(16px, 2.5vw, 48px);

    /* Microinteracciones (A9): una sola escala de duración, siempre
       `ease` — nunca una curva distinta por componente. */
    --duracion-rapida: 0.1s;
    --duracion-normal: 0.15s;
    --duracion-lenta: 0.2s;
}

/* Quien pide menos movimiento no debería recibir ninguna transición —
   ni siquiera las "rápidas". Se anulan acá, en un solo lugar. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* Escala de anchos (fase 8-9 del rediseño): móvil <768px (navegación
   inferior, sin sidebar), tablet 768-1199px (sidebar en riel/colapsado por
   defecto, expandible), escritorio ≥1200px (sidebar siempre expandido).
   Cada @media de este archivo usa uno de estos tres cortes — no se
   inventan valores nuevos sueltos. */

/* Montserrat vendorizada (static/fonts/, licencia OFL) — no depende de un
   CDN externo; permite marca blanca y funciona en los PDF (xhtml2pdf). */
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
    margin: 0;
    padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
    font-family: var(--fuente);
    background: var(--color-fondo);
    color: var(--color-grafito);
    font-size: var(--texto-cuerpo);
    line-height: 1.55;
    min-height: 100vh;
}

/* El fondo de una pantalla especial (ej. login) se pone en <body>, nunca en
   un .contenedor con ancho máximo — si no, quedan franjas del fondo normal
   a los lados y arriba/abajo en pantallas anchas o altas. */
body.pagina-login { background: var(--color-carbon); }

h1, h2, h3 { margin: 0 0 0.5rem; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--texto-titulo); }
h2 { font-size: var(--texto-subtitulo); font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 0.75rem; }
dt { color: var(--color-grafito-suave); font-size: var(--texto-pequeno); }
dd { margin: 0 0 0.75rem; font-weight: 600; }

.texto-muted { color: var(--color-grafito-suave); font-size: var(--texto-pequeno); }
.texto-etiqueta {
    font-size: var(--texto-etiqueta); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--color-grafito-suave);
}

*:focus-visible {
    outline: 2px solid var(--color-verde-tecnico);
    outline-offset: 2px;
}

/* Sistema de iconos HITO — {% hito_icon %} (plataforma/templatetags).
   El trazo (1.55px) vive en el propio SVG y nunca se toca desde acá; solo
   se resuelven color y estado (sección 11 del sistema de identidad). */
.hito-icon {
    display: inline-block;
    vertical-align: middle;
    color: var(--color-grafito-suave);
    flex-shrink: 0;
}
.hito-icon--activo, .hito-icon--hito { color: var(--color-verde-tecnico); }
.hito-icon--deshabilitado { opacity: 0.4; }
.hito-icon--faltante {
    display: inline-block;
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio-chico);
    vertical-align: middle;
}
a:hover .hito-icon, button:hover .hito-icon { color: var(--color-verde-tecnico); }

/* Sin ancho máximo: el contenido ocupa todo el espacio disponible junto al
   sidebar en cualquier monitor, con un margen lateral que crece con la
   pantalla (`--relleno-lateral`) en vez de quedar centrado con franjas de
   fondo vacías a los lados. Formularios y bloques de texto largo
   conservan su propio ancho legible (`.formulario`, `.pagina-angosta`) —
   ver esas reglas más abajo. */
.contenedor {
    padding: 1rem var(--relleno-lateral) 3rem;
}

/* Barra superior: clara, discreta — la identidad vive en el menú lateral. */
.topbar {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    padding: 0.65rem var(--espacio-4);
    padding-top: calc(0.65rem + env(safe-area-inset-top, 0px));
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    color: var(--color-grafito);
    position: sticky;
    top: 0;
    z-index: 30;
}

/* Solo existe en tablet: alterna el sidebar riel↔expandido
   (.menu-lateral--colapsado). En escritorio el sidebar siempre está
   expandido (no hace falta alternarlo) y en móvil lo reemplaza la
   navegación inferior — oculto por defecto, visible solo 768-1199px. */
.topbar__hamburguesa {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.topbar__hamburguesa span { display: block; width: 20px; height: 2px; background: var(--color-carbon); margin: 0 auto; }
@media (min-width: 768px) and (max-width: 1199px) { .topbar__hamburguesa { display: flex; } }

/* Marca completa del topbar: solo en el inicio (el resto de páginas ya
   la muestra en el sidebar fijo — acá sería redundante). */
.topbar__marca {
    display: none;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--color-carbon);
    flex-shrink: 0;
}
.topbar__marca img { height: 30px; width: auto; }
.topbar__marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.topbar__marca-texto strong { font-size: 1.05rem; letter-spacing: 0.02em; }
.topbar__marca-texto small { font-size: var(--texto-etiqueta); color: var(--color-grafito-suave); }
@media (min-width: 768px) { body.pagina-inicio .topbar__marca { display: flex; } }
.topbar__logo { height: 24px; width: auto; }

/* Identidad compacta del topbar en móvil (la identidad completa vive en el
   sidebar, que ahí desaparece): isotipo + sección actual. Oculta en
   tablet/escritorio, donde el sidebar ya la muestra. */
.topbar__marca-movil {
    display: none;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-carbon);
    font-weight: 700;
    font-size: var(--texto-cuerpo);
    min-width: 0;
    overflow: hidden;
}
.topbar__marca-movil img { height: 22px; width: auto; flex-shrink: 0; }
.topbar__marca-movil span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar__perfil-movil {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radio-chico);
    color: var(--color-grafito-suave);
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .topbar__marca-movil, .topbar__perfil-movil { display: flex; }
    .topbar__usuario { display: none; }
    /* Áreas táctiles ≥44px: barra superior táctil y botones. */
    .topbar__campana, .topbar__perfil-movil { width: 44px; height: 44px; }
    .btn { min-height: 44px; }
}

.topbar__buscador-envoltura {
    position: relative;
    flex: 1;
    max-width: 560px;
    margin: 0 auto;
    display: none;
}
@media (min-width: 768px) { .topbar__buscador-envoltura { display: block; } }

.topbar__buscador { width: 100%; padding-left: 2.2rem; padding-right: 2.6rem; }
.topbar__buscador-icono {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-grafito-suave);
    pointer-events: none;
}
.topbar__buscador-atajo {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: inherit;
    font-size: var(--texto-etiqueta);
    color: var(--color-grafito-suave);
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-chico);
    padding: 0.05rem 0.4rem;
    pointer-events: none;
}

.topbar__campana {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    border-radius: var(--radio-chico);
    color: var(--color-grafito-suave);
    cursor: not-allowed;
    margin-left: auto;
}

/* Menú de usuario: avatar con iniciales + nombre + rol, desplegable sin JS
   (<details>/<summary>, mismo patrón que ya usa el sidebar para sus
   secciones colapsables). */
.topbar__usuario { position: relative; flex-shrink: 0; }
.topbar__usuario summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    list-style: none;
    padding: 0.2rem 0.3rem;
    border-radius: var(--radio-chico);
}
.topbar__usuario summary::-webkit-details-marker { display: none; }
.topbar__usuario summary:hover { background: var(--color-fondo); }
.topbar__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-carbon);
    color: var(--color-blanco-calido);
    font-weight: 700;
    font-size: var(--texto-pequeno);
    flex-shrink: 0;
}
.topbar__usuario-texto { display: none; flex-direction: column; line-height: 1.2; text-align: left; }
.topbar__usuario-texto strong { font-size: var(--texto-pequeno); color: var(--color-carbon); }
.topbar__usuario-texto small { font-size: var(--texto-etiqueta); color: var(--color-grafito-suave); }
@media (min-width: 900px) { .topbar__usuario-texto { display: flex; } }
.topbar__usuario-flecha { color: var(--color-grafito-suave); flex-shrink: 0; transition: transform var(--duracion-normal) ease; }
.topbar__usuario[open] .topbar__usuario-flecha { transform: rotate(180deg); }
.topbar__usuario-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 160px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: var(--espacio-3);
}
.topbar__usuario-panel .enlace-sutil { padding: 0.2rem 0; }

.enlace-sutil {
    color: var(--color-grafito-suave);
    text-decoration: none;
    font-size: var(--texto-pequeno);
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
.enlace-sutil:hover { color: var(--color-naranja-hito); }
.enlace-boton { font-size: var(--texto-pequeno); }

.enlace-volver {
    display: inline-block;
    margin-bottom: var(--espacio-3);
    color: var(--color-grafito-suave);
    text-decoration: none;
    font-size: var(--texto-pequeno);
}
.enlace-volver:hover { color: var(--color-naranja-hito); }

/* Pestañas simples (enlaces con querystring, sin JS): usadas en pantallas
   de configuración con secciones alternas, ej. `nucleo/proyecto_configuracion.html`. */
.pestanas {
    display: flex;
    gap: var(--espacio-3);
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: var(--espacio-4);
    overflow-x: auto;
}
.pestanas__item {
    padding: 0.6rem 0.2rem;
    color: var(--color-grafito-suave);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    font-weight: 600;
}
.pestanas__item--activo {
    color: var(--color-carbon);
    border-bottom-color: var(--color-naranja-hito);
}

/* Estructura: menú lateral + contenido. Sin max-width/margin:auto a
   propósito: el menú lateral es carbón y debe llegar hasta el borde real de
   la ventana en pantallas anchas, no quedar centrado con franjas del fondo
   normal a los lados (el mismo problema que tenía el login). `.contenedor`
   tampoco tiene ancho máximo — todo el ERP usa el espacio disponible junto
   al sidebar; solo formularios/bloques angostos lo limitan puntualmente. */
.app-shell {
    display: flex;
    align-items: flex-start;
}

/* Menú lateral: carbón, con el isotipo arriba (A6) */
.menu-lateral {
    width: var(--ancho-menu);
    flex-shrink: 0;
    background: var(--color-carbon);
    color: var(--color-blanco-calido);
    padding: var(--espacio-3);
    min-height: calc(100vh - 57px);
    position: sticky;
    top: 57px;
}

.menu-lateral__marca {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: var(--espacio-3) var(--espacio-2) var(--espacio-4);
    margin-bottom: var(--espacio-2);
    border-bottom: 1px solid rgba(245, 243, 234, 0.12);
    text-decoration: none;
    color: var(--color-blanco-calido);
}
.menu-lateral__marca img { height: 28px; width: auto; }
.menu-lateral__marca span { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; }

.menu-lateral__seccion { margin-bottom: var(--espacio-2); }
.menu-lateral__seccion summary {
    cursor: pointer;
    list-style: none;
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-arena);
    padding: var(--espacio-2) var(--espacio-2);
    border-radius: var(--radio-chico);
}
.menu-lateral__seccion summary::-webkit-details-marker { display: none; }
.menu-lateral__seccion summary:hover { background: rgba(245, 243, 234, 0.06); }
.menu-lateral__seccion summary::after { content: '›'; float: right; transform: rotate(90deg); transition: transform var(--duracion-normal) ease; }
.menu-lateral__seccion[open] summary::after { transform: rotate(270deg); }

.menu-lateral ul { list-style: none; margin: 0; padding: 0; }
.menu-lateral a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem var(--espacio-2) 0.5rem calc(var(--espacio-2) + 0.35rem);
    border-radius: var(--radio-chico);
    color: var(--color-blanco-calido);
    text-decoration: none;
    font-size: 0.88rem;
}
/* Indicador vertical de la entrada activa: un detalle naranja muy sutil,
   nunca la tarjeta completa (sección 14 del sistema de identidad). El icono
   propio de HITO reemplaza al "nodo" que antes hacía de marcador. */
.menu-lateral a::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 2px;
    background: transparent;
    transition: background var(--duracion-normal) ease;
}
.menu-lateral a .hito-icon { color: var(--color-arena); flex-shrink: 0; transition: color var(--duracion-normal) ease; }
.menu-lateral a:hover { background: rgba(245, 243, 234, 0.08); }
.menu-lateral a:hover .hito-icon { color: var(--color-verde-claro); }
.menu-lateral a.activa {
    background: rgba(94, 127, 106, 0.22);
    color: var(--color-blanco-calido);
    font-weight: 600;
}
.menu-lateral a.activa .hito-icon { color: var(--color-verde-claro); }
.menu-lateral a.activa::before { background: var(--color-naranja-hito); }
.menu-lateral a.menu-lateral__enlace--atenuado { color: var(--color-arena); opacity: 0.55; }
.menu-lateral a.menu-lateral__enlace--atenuado .hito-icon { color: var(--color-arena); }

/* Móvil: el sidebar no se convierte en cajón, desaparece del todo — lo
   reemplaza .nav-inferior + #hoja-mas (fase 9). */
@media (max-width: 767px) {
    .menu-lateral { display: none; }
}

/* Tablet: el sidebar nunca se oculta, alterna entre expandido (por defecto
   en este rango, igual que en escritorio) y riel (solo iconos) cuando el
   usuario lo colapsa — preferencia que se recuerda en su sesión
   (plataforma:alternar_menu). El detalle naranja de la entrada activa se
   conserva en ambos estados. */
@media (min-width: 768px) and (max-width: 1199px) {
    .menu-lateral--colapsado { width: var(--ancho-menu-rail); padding-left: var(--espacio-2); padding-right: var(--espacio-2); }
    .menu-lateral--colapsado .menu-lateral__marca span,
    .menu-lateral--colapsado .menu-lateral__seccion summary,
    .menu-lateral--colapsado .menu-lateral a span {
        display: none;
    }
    .menu-lateral--colapsado .menu-lateral__seccion { border-top: 1px solid rgba(245, 243, 234, 0.12); padding-top: var(--espacio-2); }
    .menu-lateral--colapsado .menu-lateral__marca { justify-content: center; padding-left: 0; padding-right: 0; }
    .menu-lateral--colapsado .menu-lateral a { justify-content: center; padding-left: var(--espacio-2); padding-right: var(--espacio-2); }
}

/* Inicio de empresa: el sidebar se abre como cajón superpuesto en vez de
   vivir en el flujo (rediseño del inicio) — mismo <nav id="menu-lateral">,
   ningún marcado nuevo, solo estas reglas y la clase `pagina-inicio` en
   <body>. Solo desde tablet: en móvil el sidebar ya no existe nunca (lo
   reemplaza .nav-inferior), ahí no cambia nada.
   Cerrado/abierto se resuelve con `left` (no `transform`): así nunca
   depende de calcular el ancho del elemento en medio de la transición —
   `.menu-lateral--colapsado` (riel de tablet, 68px) competía por el ancho
   al mismo tiempo que el cajón intentaba trasladarse, dejando un borde
   asomado. -320px cierra de sobra el menú más ancho que existe
   (`--ancho-menu`, 248px) más margen. `overflow-x:hidden` en el body es
   una red de seguridad adicional. */
body.pagina-inicio { overflow-x: hidden; }
@media (min-width: 768px) {
    body.pagina-inicio .topbar__hamburguesa { display: flex; }
    body.pagina-inicio .menu-lateral,
    body.pagina-inicio .menu-lateral--colapsado {
        position: fixed;
        top: 57px;
        left: -320px;
        right: auto;
        bottom: 0;
        z-index: 50;
        width: var(--ancho-menu);
        min-height: 0;
        height: calc(100vh - 57px);
        transition: left var(--duracion-lenta) ease;
        box-shadow: 4px 0 24px rgba(30, 35, 40, 0.22);
    }
    body.pagina-inicio .menu-lateral--abierto { left: 0; }
    body.pagina-inicio .menu-lateral__fondo {
        position: fixed;
        inset: 57px 0 0 0;
        z-index: 49;
        background: rgba(30, 35, 40, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duracion-lenta) ease;
    }
    body.pagina-inicio .menu-lateral__fondo--visible { opacity: 1; pointer-events: auto; }
}

.app-shell > .contenedor { flex: 1; min-width: 0; }

/* Navegación inferior móvil (fase 9): reemplaza al sidebar por completo en
   <768px — nunca convive con él (ver .menu-lateral{display:none} arriba).
   5 destinos como máximo: hasta 4 fijos (nav_inferior) + "Más". */
.nav-inferior {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
    padding: 0.3rem 0.2rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 767px) { .nav-inferior { display: flex; } }

.nav-inferior__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 44px;
    padding: 0.3rem 0.2rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.66rem;
    color: var(--color-grafito-suave);
    text-decoration: none;
    cursor: pointer;
    position: relative;
}
.nav-inferior__item .hito-icon { color: var(--color-grafito-suave); }
.nav-inferior__item.activa { color: var(--color-verde-tecnico); font-weight: 600; }
.nav-inferior__item.activa .hito-icon { color: var(--color-verde-tecnico); }
.nav-inferior__item.activa::before {
    content: '';
    position: absolute;
    top: 2px;
    right: calc(50% - 14px);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-naranja-hito);
}

/* Contenido no debe quedar tapado por la barra inferior fija. */
@media (max-width: 767px) {
    .app-shell > .contenedor { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Hoja "Más": backdrop + panel deslizable desde abajo, sin dependencias. */
.hoja-inferior {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    align-items: flex-end;
}
.hoja-inferior[hidden] { display: none; }
.hoja-inferior__fondo {
    position: absolute;
    inset: 0;
    background: rgba(30, 35, 40, 0.5);
    opacity: 0;
    transition: opacity var(--duracion-lenta) ease;
}
.hoja-inferior__panel {
    position: relative;
    width: 100%;
    max-height: 82vh;
    overflow-y: auto;
    background: var(--color-blanco-calido);
    border-radius: 16px 16px 0 0;
    padding: var(--espacio-4) var(--espacio-4) calc(var(--espacio-5) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgba(30, 35, 40, 0.22);
    transform: translateY(100%);
    transition: transform var(--duracion-lenta) ease;
}
.hoja-inferior--abierta .hoja-inferior__fondo { opacity: 1; }
.hoja-inferior--abierta .hoja-inferior__panel { transform: translateY(0); }

.hoja-inferior__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--espacio-3); }
.hoja-inferior__cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--color-fondo);
    border-radius: 999px;
    color: var(--color-grafito-suave);
    cursor: pointer;
}

.hoja-inferior__seccion { margin-bottom: var(--espacio-4); }
.hoja-inferior__seccion .texto-etiqueta { display: block; margin-bottom: var(--espacio-2); }
.hoja-inferior__seccion ul { list-style: none; margin: 0; padding: 0; }
.hoja-inferior__seccion a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.3rem;
    color: var(--color-carbon);
    text-decoration: none;
    font-size: 0.92rem;
    min-height: 44px;
    border-bottom: 1px solid var(--color-borde);
}
.hoja-inferior__seccion a.menu-lateral__enlace--atenuado { color: var(--color-grafito-suave); opacity: 0.6; }
.hoja-inferior__seccion form { margin-top: var(--espacio-2); }

/* Mensajes / Toast: los mensajes de Django (messages framework) son la
   única fuente — nunca se inventa un pipeline aparte. `.mensajes--flotante`
   (la usa base.html) los convierte en toasts flotantes que se
   autodescartan; sin ese modificador (así los muestra /estilo como
   ejemplo) siguen siendo un bloque inline normal. */
.mensajes { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.mensaje {
    padding: 0.65rem 0.9rem;
    border-radius: var(--radio);
    font-size: var(--texto-pequeno);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
}
.mensaje--success { border-color: var(--color-verde-tecnico); color: var(--color-verde-tecnico); background: var(--color-verde-fondo); }
.mensaje--error { border-color: var(--color-error); color: var(--color-error); background: var(--color-error-fondo); }
.mensaje--warning, .mensaje--advertencia { border-color: var(--color-naranja-oscuro); color: var(--color-naranja-oscuro); background: var(--color-naranja-fondo); }

.mensajes--flotante {
    position: fixed;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    right: 0.75rem;
    left: 0.75rem;
    z-index: 60;
    margin: 0;
    align-items: flex-end;
}
@media (min-width: 640px) { .mensajes--flotante { left: auto; width: 320px; } }
.mensajes--flotante .mensaje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    box-shadow: var(--sombra);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--duracion-lenta) ease, transform var(--duracion-lenta) ease;
}
.mensajes--flotante .mensaje--visible { opacity: 1; transform: translateY(0); }
.mensaje__cerrar {
    border: none;
    background: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
.mensaje__cerrar:hover { opacity: 1; }

/* Tarjetas: bordes muy sutiles, sombra suave, esquinas moderadas (A5) */
.tarjeta {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.35rem;
    margin-bottom: 1.25rem;
}

/* Tablero */
.tablero-encabezado { margin-bottom: 1.25rem; }

.indicadores {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-5);
}
@media (min-width: 768px) {
    /* auto-fit: agrega columnas en pantallas grandes en vez de dejar
       espacio vacío o una tarjeta huérfana en su propia fila (ej. 6
       indicadores no calzan parejo en una grilla de 5 fijas). */
    .indicadores { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.indicador {
    display: block;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 0.9rem 1rem;
    box-shadow: var(--sombra);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--duracion-rapida) ease, transform var(--duracion-rapida) ease, border-color var(--duracion-rapida) ease;
}
a.indicador:hover { box-shadow: 0 4px 14px rgba(30, 35, 40, 0.1); transform: translateY(-1px); }
.indicador__valor { display: block; font-size: 1.4rem; font-weight: 700; }
.indicador__etiqueta { display: block; font-size: var(--texto-pequeno); color: var(--color-grafito-suave); margin-top: 0.15rem; }
.indicador--acento { border-color: var(--color-naranja-hito); }
.indicador--acento .indicador__valor { color: var(--color-naranja-oscuro); }
.indicador--activo { border-color: var(--color-verde-tecnico); box-shadow: 0 0 0 2px var(--color-verde-fondo); }

/* Tarjeta de KPI del dashboard: icono + cuerpo (valor/etiqueta/variación).
   Modificador aparte para no tocar `.indicador` simple del tablero (Lotes),
   que apila valor y etiqueta sin icono. */
.indicador--kpi { display: flex; align-items: center; gap: 0.85rem; }
.indicador__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radio-chico);
    background: var(--color-fondo);
    flex-shrink: 0;
}
.indicador--kpi .indicador__cuerpo { min-width: 0; }
.indicador__variacion { display: block; font-size: 0.68rem; margin-top: 0.15rem; }
.indicador__variacion--positiva { color: var(--color-verde-tecnico); }
.indicador__variacion--negativa { color: var(--color-error); }

.indicadores-vivienda-vacio {
    color: var(--color-grafito-suave);
    font-size: var(--texto-pequeno);
    margin: -0.75rem 0 1.5rem;
}

.leyenda { margin: -0.5rem 0 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.leyenda__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.15rem; }
.leyenda__titulo { font-size: var(--texto-etiqueta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-grafito-suave); }
.leyenda__item { display: flex; align-items: center; gap: 0.4rem; font-size: var(--texto-pequeno); color: var(--color-grafito-suave); list-style: none; }
.leyenda__punto {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.leyenda__punto--disponible { background: var(--color-disponible); }
.leyenda__punto--separado { background: var(--color-separado); }
.leyenda__punto--promesa { background: var(--color-promesa); }
.leyenda__punto--vendido { background: var(--color-vendido); }
.leyenda__punto--escriturado { background: var(--color-escriturado); }
.leyenda__punto--bloqueado { background: var(--color-bloqueado); }

/* Marca de vivienda en la leyenda: cuadrado (el "hito"), no círculo — así se
   distingue de un vistazo del punto de estado de lote. */
.leyenda__nodo {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 1px;
    flex-shrink: 0;
}
.leyenda__nodo--en_diseno { background: var(--color-viv-en-diseno); }
.leyenda__nodo--vendida { background: var(--color-viv-vendida); }
.leyenda__nodo--en_fabricacion { background: var(--color-viv-en-fabricacion); }
.leyenda__nodo--en_montaje { background: var(--color-viv-en-montaje); }
.leyenda__nodo--terminada { background: var(--color-viv-terminada); }
.leyenda__nodo--entregada { background: var(--color-viv-entregada); }

.layout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
@media (min-width: 1200px) {
    .layout { display: grid; grid-template-columns: 1fr 340px; align-items: start; }
}

.mapa { display: flex; flex-direction: column; gap: 1.25rem; }

.manzana__titulo { font-size: var(--texto-cuerpo); color: var(--color-grafito-suave); text-transform: uppercase; letter-spacing: 0.04em; }

.manzana__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 0.4rem;
}

.lote {
    position: relative;
    aspect-ratio: 1;
    border: none;
    border-radius: 8px;
    color: var(--color-blanco-calido);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14);
    transition: transform var(--duracion-rapida) ease, box-shadow var(--duracion-rapida) ease;
}
.lote:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(30, 35, 40, 0.2); }
.lote:focus-visible { outline: 2px solid var(--color-carbon); outline-offset: 2px; }

.lote--disponible { background: var(--color-disponible); }
.lote--separado { background: var(--color-separado); }
.lote--promesa { background: var(--color-promesa); }
.lote--vendido { background: var(--color-vendido); }
.lote--escriturado { background: var(--color-escriturado); }
.lote--bloqueado { background: var(--color-bloqueado); }

/* Marca de vivienda sobre el lote: cuadrado pequeño, inicial del tipo,
   esquina superior derecha. En pantallas muy chicas se reduce a un punto. */
.lote__marca-vivienda {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-blanco-calido);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(30, 35, 40, 0.35);
}
.lote__marca-vivienda--en_diseno { background: var(--color-viv-en-diseno); }
.lote__marca-vivienda--vendida { background: var(--color-viv-vendida); }
.lote__marca-vivienda--en_fabricacion { background: var(--color-viv-en-fabricacion); }
.lote__marca-vivienda--en_montaje { background: var(--color-viv-en-montaje); }
.lote__marca-vivienda--terminada { background: var(--color-viv-terminada); }
.lote__marca-vivienda--entregada { background: var(--color-viv-entregada); }

@media (max-width: 400px) {
    .lote__marca-vivienda { font-size: 0; width: 10px; height: 10px; top: 2px; right: 2px; }
}

/* Panel lateral */
.panel {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
}
@media (min-width: 1200px) { .panel { position: sticky; top: 1rem; } }

.panel__vacio { color: var(--color-grafito-suave); margin: 0; }
.panel__titulo { margin-top: var(--espacio-2); }
.panel__datos { margin: 0.75rem 0; }
.panel__negocio { border-top: 1px solid var(--color-borde); margin-top: var(--espacio-3); padding-top: var(--espacio-3); }
.panel__accion-estado {
    border-top: 1px solid var(--color-borde);
    margin-top: var(--espacio-3);
    padding-top: var(--espacio-3);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.panel__bloque {
    border-top: 3px solid var(--color-borde);
    margin-top: var(--espacio-4);
    padding-top: var(--espacio-4);
}
.panel__bloque:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.panel__bloque-titulo {
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-grafito-suave);
    margin-bottom: var(--espacio-2);
}

@media (max-width: 767px) {
    /* Hoja inferior deslizable: el panel deja de ser una columna lateral y
       se convierte en un panel fijo al fondo, ancho completo. */
    .layout { position: relative; }
    #panel-lateral.panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 78vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(30, 35, 40, 0.22);
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        z-index: 25;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    /* Tablet: el mapa queda a ancho completo (nunca 2 columnas) y el panel
       de la unidad se superpone desde la derecha en vez de empujar el
       contenido — mismo recurso (position:fixed) que ya usa la hoja
       inferior de móvil, solo que anclado al lado. */
    .layout { position: relative; }
    #panel-lateral.panel {
        position: fixed;
        top: 65px;
        right: 0;
        bottom: 0;
        width: min(360px, 90vw);
        max-width: 360px;
        overflow-y: auto;
        border-radius: 16px 0 0 0;
        box-shadow: -4px 0 24px rgba(30, 35, 40, 0.18);
        z-index: 25;
    }
}

/* Insignias de estado */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    color: var(--color-blanco-calido);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.badge--disponible, .badge--activo { background: var(--color-disponible); }
.badge--separado, .badge--separacion { background: var(--color-separado); }
.badge--promesa, .badge--pendiente { background: var(--color-promesa); }
.badge--vendido, .badge--completado { background: var(--color-vendido); }
.badge--escriturado, .badge--pagada, .badge--aprobada { background: var(--color-escriturado); }
.badge--bloqueado, .badge--cancelado, .badge--vencida, .badge--desistido,
.badge--eliminado,
.badge--pagada_con_devolucion_pendiente { background: var(--color-bloqueado); }
.badge--reprogramada { background: var(--color-arena-oscuro); }

/* Temperatura de lead (CRM) */
.badge--frio { background: var(--color-disponible); }
.badge--tibio { background: var(--color-arena-oscuro); }
.badge--caliente { background: var(--color-naranja-hito); }
.badge--enfriandose { background: var(--color-grafito-suave); }

.badge--en_diseno { background: var(--color-viv-en-diseno); }
.badge--vendida { background: var(--color-viv-vendida); }
.badge--en_fabricacion { background: var(--color-viv-en-fabricacion); }
.badge--en_montaje { background: var(--color-viv-en-montaje); }
.badge--terminada { background: var(--color-viv-terminada); }
.badge--entregada { background: var(--color-viv-entregada); }
.badge--anulada { background: var(--color-viv-anulada); }

.etiqueta-paquete {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    border: 1px solid var(--color-borde);
    color: var(--color-grafito-suave);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.etiqueta-paquete--promotor { border-color: var(--color-verde-tecnico); color: var(--color-verde-tecnico); }
.etiqueta-paquete--constructor { border-color: var(--color-naranja-hito); color: var(--color-naranja-oscuro); }
.etiqueta-paquete--estudio { border-color: var(--color-carbon-suave); color: var(--color-carbon-suave); }
.etiqueta-paquete--interventoria { border-color: var(--color-grafito-suave); color: var(--color-grafito-suave); }
.etiqueta-paquete--integral { border-color: var(--color-carbon); color: var(--color-carbon); }
.etiqueta-paquete--independiente { border-color: var(--color-arena-oscuro); color: var(--color-arena-oscuro); }

.badge--planeacion { background: var(--color-arena-oscuro); }
.badge--en_ventas { background: var(--color-verde-tecnico); }
.badge--en_construccion { background: var(--color-naranja-hito); }
.badge--entregado { background: var(--color-carbon); }

/* Botones (A5): principal = carbón, secundario = superficie clara con borde
   arena, cta = naranja Hito (reservado para el hito/acción principal),
   positivo = verde técnico, peligro = rojo de error. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radio-chico);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter var(--duracion-rapida) ease, transform var(--duracion-rapida) ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.btn-primary { background: var(--color-carbon); color: var(--color-blanco-calido); }
.btn-secundario { background: var(--color-blanco-calido); color: var(--color-carbon); border-color: var(--color-borde); }
/* Texto carbón, no blanco cálido: blanco sobre el naranja oficial da 2.4:1
   de contraste (falla AA); carbón da 5.9:1, sin tocar el naranja de marca. */
.btn-cta { background: var(--color-naranja-hito); color: var(--color-carbon); }
.btn-positivo { background: var(--color-verde-tecnico); color: var(--color-blanco-calido); }
.btn-peligro { background: var(--color-error); color: var(--color-blanco-calido); }
.btn-ancho { width: 100%; }

/* Formularios */
/* Ancho legible fijo, alineado a la izquierda — sin `.contenedor` limitando
   el ancho de página, un formulario de una sola columna se estiraría de
   borde a borde en monitores anchos si no lo capa acá. */
.formulario { display: flex; flex-direction: column; gap: 0.9rem; max-width: 720px; }
.formulario--en-linea {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem 1rem;
    max-width: none;
}
.formulario--en-linea .campo { flex: 1 1 160px; }

/* Formularios largos (separación, vivienda Nova, alta de usuario): en
   tablet aprovechan el ancho en 2 columnas en vez de una sola columna
   rígida; en escritorio y móvil siguen siendo una columna (a ese ancho
   forzar 2 columnas comprime los campos, lo contrario de lo que pide el
   rediseño). El botón de envío ocupa siempre el ancho completo. */
@media (min-width: 768px) and (max-width: 1199px) {
    .formulario--dos-columnas {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 0.9rem 1rem;
        align-items: start;
    }
    .formulario--dos-columnas > .btn { grid-column: 1 / -1; }
}

/* En móvil estos mismos formularios largos fijan su botón principal justo
   arriba de la navegación inferior — solo tiene efecto visible si el
   formulario de verdad no cabe en pantalla, que es cuando hace falta. */
@media (max-width: 767px) {
    .formulario--dos-columnas > .btn {
        position: sticky;
        bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 10px rgba(30, 35, 40, 0.12);
    }
}

.campo { display: flex; flex-direction: column; gap: 0.3rem; }
.campo label { font-size: var(--texto-pequeno); font-weight: 600; color: var(--color-grafito-suave); }
.campo__error { color: var(--color-error); font-size: 0.78rem; margin: 0; }

.input {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-chico);
    background: var(--color-superficie);
    color: var(--color-carbon);
}
.input:focus { outline: none; border-color: var(--color-verde-tecnico); box-shadow: 0 0 0 3px var(--color-verde-fondo); }

/* Select: mismo .input, con la flecha propia del sistema (geometría de
   icons/hito/chevron.svg) en vez de la nativa del navegador — un data URI
   no puede usar var(), por eso el color va fijo aquí en hex, pero es el
   mismo --color-carbon-tenue de siempre. */
select.input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D7378' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 18px;
    cursor: pointer;
}

/* Formularios de Django sin clase propia (ej. PasswordChangeForm) dentro de .formulario */
.formulario input:not([type="checkbox"]):not([type="radio"]) { font-family: inherit; font-size: 0.9rem; padding: 0.55rem 0.7rem; border: 1px solid var(--color-borde); border-radius: var(--radio-chico); background: var(--color-superficie); color: var(--color-carbon); width: 100%; }
.formulario input:focus { outline: none; border-color: var(--color-verde-tecnico); box-shadow: 0 0 0 3px var(--color-verde-fondo); }

/* Tablas */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tabla th, .tabla td { padding: 0.6rem 0.6rem; text-align: left; border-bottom: 1px solid var(--color-borde); white-space: nowrap; }
.tabla th { color: var(--color-grafito-suave); font-weight: 700; font-size: var(--texto-etiqueta); text-transform: uppercase; letter-spacing: 0.03em; }
.tabla tbody tr:hover { background: var(--color-fondo); }

.tabla th a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
}
.tabla th a:hover { color: var(--color-carbon); }
.tabla th a::after { content: '↕'; opacity: 0.4; font-size: 0.7rem; }
.tabla th a[aria-sort="ascending"]::after { content: '↑'; opacity: 1; color: var(--color-naranja-hito); }
.tabla th a[aria-sort="descending"]::after { content: '↓'; opacity: 1; color: var(--color-naranja-hito); }

/* Tablet: las tablas siguen siendo tablas (en móvil se vuelven tarjetas,
   ver más abajo) pero con la primera columna fija al desplazar — así no se
   pierde de vista a quién pertenece la fila. La matriz de permisos ya
   tiene su propia solución (.tabla-matriz__esquina/__permiso) y queda
   fuera de esta regla. */
@media (min-width: 768px) and (max-width: 1199px) {
    .tabla-scroll .tabla:not(.tabla-matriz) th:first-child,
    .tabla-scroll .tabla:not(.tabla-matriz) td:first-child {
        position: sticky;
        left: 0;
        background: var(--color-superficie);
        z-index: 1;
    }
}

/* Matriz de permisos × roles */
.tabla-matriz { font-size: 0.8rem; }
.tabla-matriz th, .tabla-matriz td { white-space: normal; }
.tabla-matriz__esquina, .tabla-matriz__permiso {
    position: sticky;
    left: 0;
    background: var(--color-superficie);
    min-width: 220px;
    max-width: 260px;
    z-index: 1;
}
.tabla-matriz__permiso { color: var(--color-carbon); font-weight: 500; white-space: normal; }
.tabla-matriz__rol { text-align: center; min-width: 108px; }
.tabla-matriz__nombre-rol { margin-bottom: 0.3rem; }
.tabla-matriz__activo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.68rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-grafito-suave);
}
.tabla-matriz__celda { text-align: center; }
.tabla-matriz input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-verde-tecnico); cursor: pointer; }
.tabla-matriz input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }
.tabla-matriz__separador th {
    text-align: left;
    background: var(--color-arena);
    color: var(--color-carbon);
    font-size: var(--texto-etiqueta);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    position: sticky;
    left: 0;
}

/* Tablas → tarjetas en móvil (fase 9): cada <tr> se vuelve una tarjeta y
   cada <td> muestra su columna como etiqueta (content: attr()), a partir
   de un `data-etiqueta="..."` que ya trae la plantilla — nunca se duplica
   el dato, solo se repite el nombre de columna que ya existía en el
   <th>. La matriz de permisos se excluye a propósito (no tiene sentido
   como tarjetas): conserva scroll horizontal con columna fija. */
@media (max-width: 767px) {
    .tabla:not(.tabla-matriz) thead { display: none; }
    .tabla:not(.tabla-matriz), .tabla:not(.tabla-matriz) tbody { display: block; width: 100%; }
    .tabla:not(.tabla-matriz) tbody tr {
        display: block;
        background: var(--color-superficie);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio);
        box-shadow: var(--sombra);
        padding: 0.25rem 0.85rem;
        margin-bottom: var(--espacio-3);
    }
    .tabla:not(.tabla-matriz) td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        white-space: normal;
        text-align: right;
        padding: 0.55rem 0;
        border-bottom: 1px solid var(--color-fondo);
    }
    .tabla:not(.tabla-matriz) td:last-child { border-bottom: none; }
    .tabla:not(.tabla-matriz) td::before {
        content: attr(data-etiqueta);
        font-weight: 700;
        font-size: var(--texto-etiqueta);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-grafito-suave);
        text-align: left;
        flex-shrink: 0;
    }
    /* Celdas con contenido ancho (textarea, varios botones): la etiqueta va
       arriba y el contenido ocupa todo el ancho, en vez de forzarlo a la
       derecha de una fila angosta. */
    .tabla:not(.tabla-matriz) td.tabla__celda-bloque { display: block; text-align: left; }
    .tabla:not(.tabla-matriz) td.tabla__celda-bloque::before { display: block; margin-bottom: 0.35rem; }
    .tabla:not(.tabla-matriz) td.tabla__celda-bloque textarea { width: 100%; margin-bottom: 0.4rem; }
}

/* Paginación */
.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    list-style: none;
    margin: var(--espacio-4) 0 0;
    padding: 0;
    font-size: 0.85rem;
}
.paginacion a, .paginacion span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    border-radius: var(--radio-chico);
    text-decoration: none;
    color: var(--color-carbon);
}
.paginacion a:hover { background: var(--color-fondo); }
.paginacion .paginacion__activa { background: var(--color-carbon); color: var(--color-blanco-calido); font-weight: 600; }
.paginacion .paginacion__deshabilitada { color: var(--color-grafito-suave); opacity: 0.5; }

/* Modal de confirmación */
.modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(30, 35, 40, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-4);
    z-index: 100;
}
.modal {
    background: var(--color-superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: var(--espacio-5);
    width: 100%;
    max-width: 420px;
}
.modal__acciones {
    display: flex;
    justify-content: flex-end;
    gap: var(--espacio-2);
    margin-top: var(--espacio-4);
}

/* Componente "Hito": línea de avance por etapas (A8) */
.hito-linea { --hito-linea-color: var(--color-arena); }
.hito-linea--horizontal {
    display: flex;
    list-style: none;
    margin: var(--espacio-4) 0;
    padding: 0;
}
.hito-linea--horizontal .hito-linea__paso {
    flex: 1;
    position: relative;
    text-align: center;
    padding-top: 2.1rem;
}
.hito-linea--horizontal .hito-linea__paso::before {
    /* la línea conectora */
    content: '';
    position: absolute;
    top: 0.85rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--color-borde);
}
.hito-linea--horizontal .hito-linea__paso:first-child::before { display: none; }
.hito-linea--horizontal .hito-linea__paso--completado::before,
.hito-linea--horizontal .hito-linea__paso--actual::before { background: var(--color-verde-tecnico); }

.hito-linea__marca {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--color-superficie);
    border: 2px solid var(--color-borde);
    color: var(--color-grafito-suave);
}
.hito-linea__paso--completado .hito-linea__marca { background: var(--color-verde-tecnico); border-color: var(--color-verde-tecnico); color: var(--color-blanco-calido); }
.hito-linea__paso--actual .hito-linea__marca { background: var(--color-naranja-hito); border-color: var(--color-naranja-hito); color: var(--color-blanco-calido); box-shadow: 0 0 0 4px var(--color-naranja-fondo); }
.hito-linea__paso--pendiente .hito-linea__marca { background: var(--color-superficie); border-color: var(--color-borde); color: var(--color-arena-oscuro); }

.hito-linea__texto { display: block; }
.hito-linea__nombre { display: block; font-size: 0.78rem; font-weight: 600; color: var(--color-carbon); }
.hito-linea__paso--pendiente .hito-linea__nombre { color: var(--color-grafito-suave); }
.hito-linea__porcentaje { display: block; font-size: 0.7rem; color: var(--color-grafito-suave); margin-top: 0.1rem; }

.hito-linea--vertical {
    list-style: none;
    margin: var(--espacio-4) 0;
    padding: 0;
}
.hito-linea--vertical .hito-linea__paso {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding: 0 0 var(--espacio-4) 2.3rem;
}
.hito-linea--vertical .hito-linea__paso::after {
    content: '';
    position: absolute;
    left: 0.85rem;
    top: 1.7rem;
    bottom: 0;
    width: 2px;
    background: var(--color-borde);
}
.hito-linea--vertical .hito-linea__paso:last-child::after { display: none; }
.hito-linea--vertical .hito-linea__paso--completado::after { background: var(--color-verde-tecnico); }
.hito-linea--vertical .hito-linea__marca { position: absolute; left: 0; top: 0; transform: none; }
.hito-linea--vertical .hito-linea__texto { padding-top: 0.15rem; }

@media (max-width: 640px) {
    .hito-linea--horizontal { flex-direction: column; }
    .hito-linea--horizontal .hito-linea__paso { text-align: left; padding: 0 0 var(--espacio-4) 2.3rem; }
    .hito-linea--horizontal .hito-linea__paso::before { top: 0; left: 0.85rem; width: 2px; height: 100%; }
    .hito-linea--horizontal .hito-linea__marca { top: 0; left: 0; transform: none; }
}

/* Páginas de formulario / negocio */
.pagina-angosta { max-width: 520px; }
.pagina-negocio { max-width: 760px; margin: 0 auto; }
.negocio__encabezado { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.fila-acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.resumen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1rem;
    margin: 1rem 0 0;
}
@media (min-width: 640px) { .resumen-grid { grid-template-columns: repeat(3, 1fr); } }

/* Login: el fondo carbón lo pone body.pagina-login (100% del viewport); acá
   solo se cancela el padding de .contenedor (no el safe-area de <body>, ese
   ya queda bien con el color de fondo de body) para que la tarjeta quede
   centrada de verdad en el alto real de la pantalla, no en 100vh + padding. */
.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -1rem -1rem -3rem;
    padding: var(--espacio-6) var(--espacio-4);
}
.login__marco { width: 100%; max-width: 380px; text-align: center; }
.login__isotipo { width: 64px; height: 64px; margin: 0 auto var(--espacio-4); display: block; }
.login__nombre { color: var(--color-blanco-calido); font-size: 1.9rem; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 0.2rem; }
.login__tagline { color: var(--color-arena); font-size: 0.92rem; margin-bottom: var(--espacio-6); }
.login__tarjeta {
    background: var(--color-blanco-calido);
    border-radius: var(--radio);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: var(--espacio-6) var(--espacio-5);
    text-align: left;
}
.login__tarjeta h1 { display: none; }

.estado-vacio { text-align: center; padding: 2.5rem 1.25rem; }
.estado-vacio__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--color-fondo);
}
.estado-vacio__icono .hito-icon { color: var(--color-arena-oscuro); }
.estado-vacio__funciones {
    display: inline-block;
    text-align: left;
    margin: var(--espacio-4) auto 0;
    padding: 0;
    list-style: none;
    max-width: 360px;
}
.estado-vacio__funciones li {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-borde);
    color: var(--color-grafito-suave);
}
.estado-vacio__funciones li:last-child { border-bottom: none; }

/* Inicio: saludo, tarjetas de proyecto, pendientes */
.saludo { margin-bottom: var(--espacio-5); }

/* Hero de bienvenida del inicio: franja a todo el ancho, sin tarjeta ni
   borde. La foto (arquitectónica, la sube quien administra la instalación
   a static/images/hero-inicio.jpg — ver ventas.views.inicio:
   hero_tiene_imagen, que evita referenciar el archivo en la plantilla si
   no existe, para no romper bajo ManifestStaticFilesStorage en
   producción) ocupa la mitad derecha y se funde con el fondo claro con un
   degradado — nunca detrás del texto de la izquierda. Sin imagen, se ve
   el color arena de la paleta solo — nunca un color/imagen inventados ni
   un <svg> a mano (ver plataforma.tests.IdentidadVisualTests). */
.hero-inicio {
    position: relative;
    overflow: hidden;
    background-color: var(--color-superficie);
    /* Cancela el relleno lateral fluido de .contenedor (mismo valor,
       `--relleno-lateral`) para llegar de borde a borde, sin márgenes —
       si el relleno cambia con el ancho de pantalla, esto lo sigue. */
    margin: calc(-1 * var(--espacio-4)) calc(-1 * var(--relleno-lateral)) var(--espacio-5);
    padding: var(--espacio-6) var(--relleno-lateral);
}
.hero-inicio__foto {
    display: none;
    position: absolute;
    inset: 0 0 0 45%;
    background-color: var(--color-arena);
    background-size: cover;
    background-position: center;
}
.hero-inicio__foto::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--color-superficie) 0%, rgba(245, 243, 234, 0) 35%);
}
@media (min-width: 900px) { .hero-inicio__foto { display: block; } }
.hero-inicio__fila {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-5);
}
.hero-inicio__cuerpo { min-width: 0; }
.hero-inicio__etiqueta {
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-verde-tecnico);
}
.hero-inicio h1 { margin: 0.2rem 0 0.3rem; font-size: 2rem; }
.hero-inicio__lema {
    display: none;
    flex-shrink: 0;
    text-align: right;
    /* Fondo propio, translúcido pero opaco de sobra para leer encima de
       cualquier foto — nunca solo texto directo sobre la imagen. */
    background: rgba(245, 243, 234, 0.88);
    border-radius: var(--radio);
    padding: var(--espacio-4) var(--espacio-5);
    backdrop-filter: blur(4px);
}
@media (min-width: 900px) { .hero-inicio__lema { display: block; } }
.hero-inicio__lema-linea {
    font-size: var(--texto-pequeno);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-carbon);
    line-height: 1.7;
}
.hero-inicio__lema hr {
    border: none;
    border-top: 1px solid var(--color-borde);
    margin: 0.6rem 0;
}
.hero-inicio__lema p {
    font-style: italic;
    color: var(--color-grafito-suave);
    margin: 0;
}

/* Acceso rápido: los 3 grupos numerados del referente (distintos de
   `SECCIONES`, que sigue mandando en el sidebar) de ModuleCard (superficie
   carbón completa — nunca solo el icono con recuadro oscuro). Un único
   componente para las tarjetas, sin variantes por grupo. Solo entran
   módulos activos — lo atenuado/"Próximamente" se ve en el sidebar, no
   acá (`accesos_rapidos_para`). Líneas verticales entre los 3 grupos,
   como en el referente. */
.accesos-rapidos {
    display: grid;
    gap: var(--espacio-5);
    margin-bottom: var(--espacio-6);
}
@media (min-width: 1024px) {
    /* auto-fit, no un número fijo: la mayoría de roles ven 3 grupos
       (Gestiona tu empresa/Construye/Administra), Gerencia ve 5 (+Estudio,
       +Interventoría, mientras sigan inactivos) — se acomodan solos. */
    .accesos-rapidos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .accesos-rapidos__columna { padding-left: var(--espacio-5); border-left: 1px solid var(--color-borde); }
    .accesos-rapidos__columna:first-child { padding-left: 0; border-left: none; }
}
.accesos-rapidos__columna h3 {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--texto-pequeno);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-grafito-suave);
    margin: 0 0 var(--espacio-3);
}
.accesos-rapidos__numero { color: var(--color-naranja-hito); font-weight: 700; }
.accesos-rapidos__tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.6rem;
}

.tarjeta-modulo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--color-carbon);
    color: var(--color-blanco-calido);
    border-radius: var(--radio);
    padding: 0.85rem 1rem;
    text-decoration: none;
    transition: background var(--duracion-normal) ease;
}
.tarjeta-modulo:hover, .tarjeta-modulo:focus-visible { background: var(--color-carbon-suave); }
.tarjeta-modulo .hito-icon { color: var(--color-blanco-calido); flex-shrink: 0; }
/* Único elemento flexible del renglón — título y descripción viven adentro,
   apilados, así nunca compiten por ancho con el icono ni la flecha (esa
   pelea era la causa del texto partido palabra por palabra y del badge
   "Próximamente" superpuesto al título). */
.tarjeta-modulo__texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.tarjeta-modulo__titulo {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.tarjeta-modulo__descripcion {
    font-size: var(--texto-pequeno);
    color: var(--color-blanco-calido);
    opacity: 0.65;
}
.tarjeta-modulo__proximamente {
    flex-shrink: 0;
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-naranja-hito);
    border: 1px solid var(--color-naranja-hito);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}
.tarjeta-modulo--proximamente { opacity: 0.85; }
.tarjeta-modulo__flecha { flex-shrink: 0; opacity: 0.6; transition: transform var(--duracion-normal) ease; }
.tarjeta-modulo:hover .tarjeta-modulo__flecha { transform: translateX(2px); }

/* Banner de cierre + pie de página (rediseño del inicio + base.html). */
.banner-cierre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--color-carbon);
    color: var(--color-arena);
    border-radius: var(--radio);
    padding: var(--espacio-4);
    text-align: center;
}
.banner-cierre .hito-icon { color: var(--color-blanco-calido); }
.banner-cierre p { font-style: italic; margin: 0; }

.pie-pagina {
    text-align: center;
    padding: var(--espacio-5) var(--espacio-4);
    color: var(--color-grafito-suave);
    font-size: var(--texto-pequeno);
}
.pie-pagina__enlaces { display: flex; justify-content: center; gap: var(--espacio-3); margin-top: 0.4rem; }
.pie-pagina__enlaces a { color: var(--color-grafito-suave); }

.grid-proyectos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-6);
}

.tarjeta-proyecto {
    display: block;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--duracion-rapida) ease, transform var(--duracion-rapida) ease;
}
.tarjeta-proyecto:hover { box-shadow: 0 4px 14px rgba(30, 35, 40, 0.12); transform: translateY(-1px); }

.tarjeta-proyecto__encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}
.tarjeta-proyecto__encabezado h3 { margin: 0; display: flex; align-items: center; gap: 0.4rem; }

/* Hito actual del proyecto: la misma línea de _hito_linea.html, en versión
   compacta para caber en el ancho de la tarjeta. */
.tarjeta-proyecto__hito { margin: 0.75rem 0 0.35rem; }
.tarjeta-proyecto__hito .hito-linea__marca { width: 1.3rem; height: 1.3rem; font-size: 0.66rem; }
.tarjeta-proyecto__hito .hito-linea__nombre { font-size: 0.62rem; }
.tarjeta-proyecto__hito .hito-linea__porcentaje { display: none; }

.barra-avance {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin: var(--espacio-3) 0 0.35rem;
}
.barra-avance__relleno { height: 100%; background: var(--color-verde-tecnico); border-radius: inherit; }

.tarjeta-proyecto__conteos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: var(--espacio-3) 0;
    text-align: center;
}
.tarjeta-proyecto__conteos dt { font-size: 0.68rem; }
.tarjeta-proyecto__conteos dd { margin: 0; font-size: 1rem; }

.saludo__tagline { font-style: italic; color: var(--color-arena-oscuro); }

/* Fila de datos del inicio: "Mis proyectos" (ancha) + Distribución/Avance +
   Actividad reciente/banner de cierre, en 3 columnas — así entra en una
   sola pantalla a 1536px de ancho, como el referente. Colapsa a una sola
   columna en pantallas angostas. */
.fila-datos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espacio-5);
    margin-bottom: var(--espacio-6);
    align-items: start;
}
@media (min-width: 1100px) {
    .fila-datos { grid-template-columns: 1.7fr 1fr 1fr; }
}
.fila-datos__columna { display: flex; flex-direction: column; gap: var(--espacio-4); min-width: 0; }
.fila-datos__columna--ancha { min-width: 0; }
.fila-datos__actividad { flex: 1; }
.tabla__miniatura {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: var(--radio-chico);
    object-fit: cover;
}
.tabla__miniatura--vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fondo);
    color: var(--color-arena-oscuro);
}
.distribucion { display: flex; align-items: center; gap: var(--espacio-4); flex-wrap: wrap; }
.distribucion__leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--texto-pequeno); flex: 1; min-width: 140px; }
.distribucion__leyenda li { display: flex; align-items: center; gap: 0.5rem; }
.distribucion__leyenda .texto-muted { margin-left: auto; }
.distribucion__punto { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

@media (max-width: 480px) {
    .distribucion { justify-content: center; }
    .distribucion .hito-donut { width: 100%; height: auto; max-width: 220px; }
}

.avance-comercial__cifra { font-size: 2.2rem; font-weight: 700; margin: 0 0 0.25rem; color: var(--color-verde-tecnico); }
.barra-avance--grande { height: 12px; }

/* Actividad reciente: lista vertical, icono sutil + cuerpo + fecha. */
.actividad { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.actividad__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.1rem;
    border-bottom: 1px solid var(--color-borde);
}
.actividad__item:last-child { border-bottom: none; }
.actividad__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radio-chico);
    background: var(--color-fondo);
    flex-shrink: 0;
}
.actividad__cuerpo { display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 0; flex: 1; }
.actividad__titulo { font-weight: 600; font-size: 0.88rem; }
.actividad__fecha { flex-shrink: 0; font-size: var(--texto-etiqueta); white-space: nowrap; }

.pendientes { display: flex; flex-direction: column; gap: var(--espacio-5); }
.pendientes__grupo h3 { display: flex; align-items: center; gap: 0.4rem; }
.menu-lateral__contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    margin-left: auto;
    border-radius: 999px;
    background: var(--color-naranja-hito);
    color: var(--color-blanco-calido);
    font-size: var(--texto-etiqueta);
    font-weight: 700;
}
.menu-lateral__proximamente {
    margin-left: auto;
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-naranja-hito);
    border: 1px solid var(--color-naranja-hito);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    white-space: nowrap;
}
.pendientes__contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--color-error-fondo);
    color: var(--color-error);
    font-size: var(--texto-etiqueta);
    font-weight: 700;
}
.pendientes__lista { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pendientes__item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radio-chico);
    text-decoration: none;
    color: var(--color-carbon);
    font-size: 0.85rem;
}
.pendientes__item:hover { background: var(--color-fondo); }
.pendientes__mas { font-size: 0.78rem; color: var(--color-grafito-suave); margin: 0.4rem 0 0; }

/* Cabecera de proyecto: nombre grande + línea secundaria + selector.
   Se vuelve compacta y fija al hacer scroll con position:sticky puro. */
.proyecto-hero { padding: var(--espacio-2) 0 var(--espacio-4); }
.proyecto-hero__nombre { font-size: 1.9rem; margin-bottom: 0.2rem; }
.proyecto-hero__meta { color: var(--color-grafito-suave); font-size: 0.9rem; }

.proyecto-barra-compacta {
    position: sticky;
    top: 57px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    padding: 0.6rem var(--espacio-4);
    margin: 0 -1rem var(--espacio-4);
}
.proyecto-barra-compacta__nombre { font-weight: 700; font-size: var(--texto-cuerpo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.selector-proyecto select {
    font-family: inherit;
    font-size: var(--texto-pequeno);
    padding: 0.35rem 0.5rem;
    border-radius: var(--radio-chico);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-carbon);
    max-width: 200px;
}

/* Selector de proyecto cuando vive sobre fondo oscuro (mantenido por si se
   usa en el menú lateral en pantallas angostas). */
.selector-proyecto--oscuro select {
    border-color: rgba(245, 243, 234, 0.25);
    background: rgba(245, 243, 234, 0.08);
    color: var(--color-blanco-calido);
}
.selector-proyecto--oscuro select option { color: var(--color-carbon); }

@media (max-width: 1199px) {
    .proyecto-hero__nombre { font-size: 1.5rem; }
}

/* CRM: embudo (kanban), tarjeta de lead, modal de alta rápida */
.embudo { display: flex; gap: var(--espacio-3); overflow-x: auto; padding-bottom: var(--espacio-2); }
.embudo__columna {
    flex: 0 0 260px;
    background: var(--color-fondo);
    border-radius: var(--radio);
    padding: var(--espacio-3);
    scroll-margin-top: var(--espacio-4);
}
.embudo__columna.arrastrando-encima { outline: 2px dashed var(--color-naranja-hito); outline-offset: -4px; }
.embudo__columna-titulo {
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--texto-etiqueta); text-transform: uppercase; letter-spacing: 0.02em;
    margin-bottom: var(--espacio-2); padding-bottom: 0.4rem; border-bottom: 2px solid var(--color-borde);
}
.tarjeta-lead {
    background: var(--color-superficie); border-radius: var(--radio-chico);
    box-shadow: var(--sombra); padding: var(--espacio-2); margin-bottom: var(--espacio-2); cursor: grab;
}
.tarjeta-lead__nombre { font-weight: 600; display: block; color: inherit; }
.tarjeta-lead__meta { font-size: var(--texto-pequeno); color: var(--color-grafito-suave); }
.tarjeta-lead__proxima-accion { font-size: var(--texto-pequeno); margin-top: 0.3rem; }
.tarjeta-lead__proxima-accion--vencida { color: var(--color-naranja-hito); font-weight: 600; }
.tarjeta-lead__menu { margin-top: 0.4rem; }
.tarjeta-lead__menu select { width: 100%; font-size: var(--texto-pequeno); }

.embudo-selector-movil { display: none; }

@media (max-width: 767px) {
    .embudo { flex-direction: column; }
    .embudo__columna { flex: 1 1 auto; }
    .embudo-selector-movil { display: block; margin-bottom: var(--espacio-3); }
}

/* `<dialog>` nativo: el navegador ya lo centra y le da su propio backdrop
   al abrirlo con `.showModal()` — solo se resetea la caja para que la
   tarjeta `.modal` de adentro sea la que se ve. */
dialog.modal-fondo { border: none; padding: 0; background: transparent; width: 420px; max-width: 90vw; }
dialog.modal-fondo::backdrop { background: rgba(30, 35, 40, 0.5); }