/* =========================================================
   TESSA — Sistema de diseño
   Todo scopeado bajo #tessa (y .tessa-auth en las pantallas de
   acceso) para no afectar al sitio público de InnovADN.

   Índice:
     1. Tokens              10. Mensajes y estados vacíos
     2. Base y tipografía   11. Listas de datos y métricas
     3. Navegación          12. Rejilla de opciones
     4. Cabeceras y barras  13. Historial de eventos
     5. Tarjetas            14. Roadmap
     6. Etiquetas de estado 15. Dos columnas del HD
     7. Tablas              16. Pantallas de acceso
     8. Formularios         17. Responsive
     9. Botones
   ========================================================= */

/* ============ 1. Tokens ============ */

#tessa, .tessa-auth, .nav-tessa, .panel-busqueda {
    --tx:        #15181e;
    --tx-2:      #565d6d;
    --tx-3:      #868d9c;
    --bg:        #f2f4f7;
    --panel:     #ffffff;
    --panel-2:   #f8f9fb;
    --linea:     #e4e7ec;
    --linea-2:   #d0d5dd;

    --azul:      #3056d3;
    --azul-osc:  #101420;
    --azul-luz:  #eef2ff;
    --azul-bor:  #c7d3fb;

    --pizarra:    #475467;
    --pizarra-osc:#344054;

    --rojo:      #c0392e;
    --rojo-luz:  #fdf2f1;
    --rojo-bor:  #f1c9c5;

    --verde:     #17794c;
    --verde-luz: #eaf6f0;
    --verde-bor: #bfe3d0;

    --ambar:     #a86a00;
    --ambar-luz: #fdf5e8;
    --ambar-bor: #f0dcb6;

    --morado:    #6b3fa0;
    --morado-luz:#f4efff;
    --morado-bor:#ddcdf5;

    --r-sm: 6px;
    --r:    9px;
    --r-lg: 12px;

    --s1: 0 1px 2px rgba(16,24,40,.05);
    --s2: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
    --s3: 0 4px 12px rgba(16,24,40,.08);

    --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* ============ 2. Base y tipografía ============ */

* { scroll-behavior: smooth;}

#tessa {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 22px 60px;
    background: var(--bg);
    color: var(--tx);
    font-family: var(--fuente);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

#tessa *, #tessa *::before, #tessa *::after { box-sizing: border-box;}

#tessa h1 { font-size: 23px; font-weight: 650; letter-spacing: -.015em; margin: 0 0 4px; }
#tessa h2 { font-size: 16px; font-weight: 620; margin: 0 0 10px; letter-spacing: -.005em; }
#tessa h3 { font-size: 14.5px; font-weight: 620; margin: 0 0 8px; }

#tessa p { margin: 0 0 10px; }
#tessa p:last-child { margin-bottom: 0; }

#tessa small, #tessa .nota { color: var(--tx-2); font-size: 12.5px; line-height: 1.45; }
#tessa .nota { display: block; margin-bottom: 12px; }

#tessa a { color: var(--azul); text-decoration: none; font-weight: 500; }
#tessa a:hover { color: var(--azul-osc); text-decoration: underline; }

#tessa code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: var(--panel-2);
    border: 1px solid var(--linea);
    border-radius: 5px;
    padding: 1px 6px;
    color: var(--tx-2);
}

#tessa hr { border: none; border-top: 1px solid var(--linea); margin: 22px 0; }

/* ============ 3. Navegación ============ */

/* El navbar se incluye desde html_apertura_tessa.inc.php, dentro de <navbar>,
   por lo que queda FUERA de #tessa. De ahí que se scopee con .nav-tessa y que
   los tokens de color se declaren también sobre ese selector (sección 1). */

.nav-tessa {
    position: sticky; top: 0; z-index: 50;
    background: var(--panel);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--s1);
    font-family: var(--fuente);
    font-size: 14px;
    color: var(--tx);
    -webkit-font-smoothing: antialiased;
}
.nav-tessa *, .nav-tessa *::before, .nav-tessa *::after { box-sizing: border-box; }

/* Separación bajo el navbar. Ajuste pedido por Gabriel: mantener siempre. */
.nav-tessa { margin-bottom: 3.5em; }

.nav-tessa-interior {
    max-width: 1560px; margin: 0 auto;
    padding: 0 22px;
    display: flex; align-items: center; gap: 20px;
}

/* --- Marca --- */
.nav-tessa .nav-marca {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 0;
    color: var(--tx); text-decoration: none;
    font-weight: 700; font-size: 15px; letter-spacing: -.02em;
    flex: none;
}
.nav-tessa .nav-marca:hover { text-decoration: none; color: var(--tx); }
.nav-tessa .nav-marca.activo .nav-marca-txt { color: var(--azul); }
.nav-tessa .nav-marca-icono {
    width: 28px; height: 28px; border-radius: 8px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--azul) 0%, #5b7cf0 100%);
    color: #fff; font-size: 14px; font-weight: 800;
    box-shadow: 0 1px 3px rgba(48,86,211,.35);
}

/* --- Secciones --- */
.nav-tessa .nav-menu {
    display: flex; align-items: stretch; gap: 1px;
    flex: 1; min-width: 0;
}

.nav-tessa .nav-menu a {
    position: relative;
    display: flex; align-items: center;
    padding: 0 12px; height: 50px;
    color: var(--tx-2); font-size: 13.5px; font-weight: 550;
    text-decoration: none; white-space: nowrap;
    border-radius: 7px 7px 0 0;
    transition: color .12s, background .12s;
}
.nav-tessa .nav-menu a:hover { color: var(--tx); background: var(--panel-2); text-decoration: none; }

.nav-tessa .nav-menu a.activo { color: var(--azul); }
.nav-tessa .nav-menu a.activo::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
    height: 2px; border-radius: 2px 2px 0 0;
    background: var(--azul);
}

/* --- Lado derecho --- */
.nav-tessa .nav-lado { display: flex; align-items: center; gap: 10px; flex: none; }

.nav-tessa .nav-accion {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    background: var(--azul); color: #fff;
    border: 1px solid var(--azul); border-radius: var(--r-sm);
    font-size: 13px; font-weight: 600; text-decoration: none;
    box-shadow: var(--s1);
    transition: background .12s;
}
.nav-tessa .nav-accion:hover { background: var(--azul-osc); border-color: var(--azul-osc); color: #fff; text-decoration: none; }
.nav-tessa .nav-accion span { font-size: 15px; line-height: 1; }

/* --- Cuenta (desplegable sin JavaScript, con <details>) --- */
.nav-tessa .nav-cuenta { position: relative; }

.nav-tessa .nav-cuenta summary {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px 5px 5px;
    border: 1px solid transparent; border-radius: 999px;
    cursor: pointer; list-style: none;
    transition: background .12s, border-color .12s;
}
.nav-tessa .nav-cuenta summary::-webkit-details-marker { display: none; }
.nav-tessa .nav-cuenta summary:hover { background: var(--panel-2); border-color: var(--linea); }
.nav-tessa .nav-cuenta[open] summary { background: var(--panel-2); border-color: var(--linea-2); }

.nav-tessa .nav-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--azul-luz); color: var(--azul-osc);
    font-size: 12px; font-weight: 700;
    flex: none;
}
.nav-tessa .nav-nombre {
    font-size: 13px; font-weight: 550; color: var(--tx-2);
    max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-tessa .nav-flecha { font-size: 10px; color: var(--tx-3); }

.nav-tessa .nav-desplegable {
    position: absolute; right: 0; top: calc(100% + 7px);
    min-width: 230px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--s3);
    padding: 5px;
    z-index: 60;
}

.nav-tessa .nav-desplegable-cab {
    padding: 9px 11px 11px;
    border-bottom: 1px solid var(--linea);
    margin-bottom: 5px;
    display: flex; flex-direction: column; gap: 1px;
}
.nav-tessa .nav-desplegable-cab strong { font-size: 13.5px; }
.nav-tessa .nav-desplegable-cab span { font-size: 12px; color: var(--tx-3); word-break: break-all; }
.nav-tessa .nav-rol {
    align-self: flex-start; margin-top: 5px;
    padding: 1px 8px; border-radius: 999px;
    background: var(--azul-luz); color: var(--azul-osc) !important;
    font-size: 11px !important; font-weight: 650;
}

.nav-tessa .nav-desplegable a {
    display: block;
    padding: 7px 11px; border-radius: var(--r-sm);
    color: var(--tx-2); font-size: 13px; font-weight: 500; text-decoration: none;
}
.nav-tessa .nav-desplegable a:hover { background: var(--panel-2); color: var(--tx); text-decoration: none; }
.nav-tessa .nav-desplegable .nav-salir { color: var(--rojo); }
.nav-tessa .nav-desplegable .nav-salir:hover { background: var(--rojo-luz); color: var(--rojo); }

/* Migas de pan dentro de la página */
#tessa .migas { font-size: 13px; margin-bottom: 10px; }
#tessa .migas a { color: var(--tx-2); font-weight: 500; }

/* ============ 4. Cabeceras y barras ============ */

#tessa .pagina-cab {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
}
#tessa .pagina-cab .titulo-sub { color: var(--tx-2); font-size: 13.5px; margin: 0; }
#tessa .pagina-cab .acciones-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

#tessa .barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
#tessa .barra .crece { flex: 1; }

/* ============ 5. Tarjetas ============ */

#tessa .tarjeta, #tessa .bloque {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--s2);
    margin-bottom: 16px;
    overflow: hidden;
}

#tessa .tarjeta-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--linea);
}
#tessa .tarjeta-cab h2, #tessa .tarjeta-cab h3 { margin: 0; }
#tessa .tarjeta-cab small { display: block; margin-top: 1px; }

#tessa .tarjeta-cuerpo { padding: 16px; }
#tessa .tarjeta-cuerpo > :last-child { margin-bottom: 0; }
#tessa .tarjeta-cuerpo.sin-relleno { padding: 0; }

#tessa .tarjeta-pie {
    padding: 11px 16px;
    background: var(--panel-2);
    border-top: 1px solid var(--linea);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

#tessa .bloque { padding: 16px; }

#tessa .ficha-cab {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--s2);
    padding: 16px 18px;
    margin-bottom: 16px;
}
#tessa .ficha-cab .etiquetas { margin-top: 9px; }

/* ============ 6. Etiquetas de estado ============ */

#tessa .etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }

#tessa .etiqueta {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    background: var(--panel-2); color: var(--tx-2);
    border: 1px solid var(--linea-2);
    white-space: nowrap;
}
#tessa .etiqueta::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .8;
}
#tessa .etiqueta.sin-punto::before { display: none; }

#tessa .e-abierto     { background: var(--azul-luz);   color: var(--azul-osc); border-color: var(--azul-bor); }
#tessa .e-en_proceso  { background: var(--morado-luz); color: var(--morado);   border-color: var(--morado-bor); }
#tessa .e-en_espera   { background: var(--ambar-luz);  color: var(--ambar);    border-color: var(--ambar-bor); }
#tessa .e-cerrado     { background: var(--verde-luz);  color: var(--verde);    border-color: var(--verde-bor); }

#tessa .e-creado, #tessa .e-planificado { background: var(--panel-2); color: var(--tx-2); border-color: var(--linea-2); }
#tessa .e-en_desarrollo, #tessa .e-en_pruebas { background: var(--azul-luz); color: var(--azul-osc); border-color: var(--azul-bor); }
#tessa .e-entregado, #tessa .e-en_mantenimiento { background: var(--verde-luz); color: var(--verde); border-color: var(--verde-bor); }
#tessa .e-pausado { background: var(--ambar-luz); color: var(--ambar); border-color: var(--ambar-bor); }

#tessa .e-pendiente, #tessa .e-incompleto { background: var(--rojo-luz); color: var(--rojo); border-color: var(--rojo-bor); font-weight: 600; }
#tessa .e-en_curso   { background: var(--azul-luz); color: var(--azul-osc); border-color: var(--azul-bor); }
#tessa .e-completada, #tessa .e-completado { background: var(--verde-luz); color: var(--verde); border-color: var(--verde-bor); }
#tessa .e-interno  { background: var(--azul-luz);   color: var(--azul-osc); border-color: var(--azul-bor); }
#tessa .e-cliente  { background: var(--verde-luz);  color: var(--verde);    border-color: var(--verde-bor); }
#tessa .e-empresa  { background: var(--morado-luz); color: var(--morado);   border-color: var(--morado-bor); }
#tessa .e-aviso    { background: var(--ambar-luz);  color: var(--ambar);    border-color: var(--ambar-bor); }
#tessa .e-no_aplica  { background: var(--panel-2); color: var(--tx-3); border-color: var(--linea); }

#tessa .e-borrador   { background: var(--panel-2); color: var(--tx-2); border-color: var(--linea-2); }
#tessa .e-enviada    { background: var(--azul-luz); color: var(--azul-osc); border-color: var(--azul-bor); }
#tessa .e-aprobada, #tessa .e-confirmado, #tessa .e-activo, #tessa .e-activa,
#tessa .e-registrado { background: var(--verde-luz); color: var(--verde); border-color: var(--verde-bor); }
#tessa .e-rechazada, #tessa .e-anulado, #tessa .e-descartado,
#tessa .e-inactiva, #tessa .e-inactivo { background: var(--rojo-luz); color: var(--rojo); border-color: var(--rojo-bor); }
#tessa .e-vencida, #tessa .e-en_negociacion { background: var(--ambar-luz); color: var(--ambar); border-color: var(--ambar-bor); }
#tessa .e-convertido { background: var(--morado-luz); color: var(--morado); border-color: var(--morado-bor); }
#tessa .e-finalizado { background: var(--panel-2); color: var(--tx-2); border-color: var(--linea-2); }

/* Agenda: sub-estado calculado (nunca se guarda, se deriva de la fecha) */
#tessa .e-proximo    { background: var(--ambar-luz); color: var(--ambar); border-color: var(--ambar-bor); }
#tessa .e-vencido    { background: var(--rojo-luz);  color: var(--rojo);  border-color: var(--rojo-bor); }
#tessa .e-cumplido   { background: var(--verde-luz); color: var(--verde); border-color: var(--verde-bor); }
#tessa .e-programado { background: var(--panel-2);   color: var(--tx-2);  border-color: var(--linea-2); }
#tessa .e-cancelado  { background: var(--panel-2);   color: var(--tx-3);  border-color: var(--linea); }

#tessa .p-critica { background: var(--rojo-luz);  color: var(--rojo);  border-color: var(--rojo-bor); }
#tessa .p-alta    { background: var(--ambar-luz); color: var(--ambar); border-color: var(--ambar-bor); }
#tessa .p-media   { background: var(--panel-2);   color: var(--tx-2);  border-color: var(--linea-2); }
#tessa .p-baja    { background: var(--panel-2);   color: var(--tx-3);  border-color: var(--linea); }

/* ============ 7. Tablas ============ */

#tessa .tabla-envoltorio { overflow-x: auto; }

#tessa table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#tessa .tarjeta table { margin: 0; }

#tessa th {
    padding: 9px 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--linea-2);
    text-align: left;
    font-size: 11.5px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--tx-2);
    white-space: nowrap;
}

#tessa td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--linea);
    vertical-align: middle;
}
#tessa tbody tr:last-child td { border-bottom: none; }
#tessa tbody tr:hover { background: var(--panel-2); }

#tessa td.principal { font-weight: 550; }
#tessa td.numerico  { text-align: right; font-variant-numeric: tabular-nums; }
#tessa td.acciones  { text-align: right; white-space: nowrap; }
#tessa td .sub { display: block; color: var(--tx-3); font-size: 12px; margin-top: 1px; }

#tessa td form { display: inline-block; margin: 0 0 0 4px; }
#tessa td form p { margin: 0; }

#tessa table.suelta {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--s2);
    overflow: hidden;
    margin-bottom: 16px;
}

/* ============ 8. Formularios ============ */

#tessa fieldset { border: none; margin: 0; padding: 0; }

#tessa .campo { margin-bottom: 14px; }
#tessa .campo:last-child { margin-bottom: 0; }

#tessa .campo > label, #tessa .etiqueta-campo {
    display: block; margin-bottom: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--tx-2);
}
#tessa .campo .ayuda { display: block; margin-top: 4px; font-size: 12px; color: var(--tx-3); }

/* Subtítulo dentro de un grupo de casillas -- separa visualmente, por
   ejemplo, "personal interno" de "usuarios de portal" en vez de mezclarlos
   en la misma lista (2026-09-26, pedido del dueño). */
#tessa .etiqueta-subcampo {
    display: block; margin: 10px 0 5px; padding-top: 8px;
    border-top: 1px dashed var(--linea);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--tx-3);
}
#tessa .etiqueta-subcampo:first-of-type { padding-top: 0; border-top: none; }
#tessa .etiqueta-subcampo-cliente { color: var(--azul); }
#tessa .etiqueta-subcampo-agenda-realizado { color: var(--verde); }
#tessa .etiqueta-subcampo-agenda-cancelado { color: var(--rojo); }

#tessa .rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
#tessa .rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }

#tessa input[type="text"], #tessa input[type="email"], #tessa input[type="password"],
#tessa input[type="url"], #tessa input[type="number"], #tessa input[type="date"],
#tessa input[type="datetime-local"], #tessa input[type="search"],
#tessa select, #tessa textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--linea-2);
    border-radius: var(--r-sm);
    background: #fff; color: var(--tx);
    font-family: inherit; font-size: 13.5px; line-height: 1.4;
    transition: border-color .12s, box-shadow .12s;
}

#tessa input:hover, #tessa select:hover, #tessa textarea:hover { border-color: var(--tx-3); }
#tessa input:focus, #tessa select:focus, #tessa textarea:focus {
    outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-luz);
}
#tessa input::placeholder, #tessa textarea::placeholder { color: var(--tx-3); }

#tessa select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23868d9c' d='M6 8.5 2 4.5h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center;
    padding-right: 26px;
}

#tessa textarea { resize: vertical; min-height: 64px; }
#tessa input[type="file"] { font-size: 13px; padding: 6px 0; }
#tessa input[type="checkbox"] { accent-color: var(--azul); width: 15px; height: 15px; margin: 0; }
#tessa input:disabled, #tessa select:disabled, #tessa textarea:disabled {
    background: var(--panel-2); color: var(--tx-3); cursor: not-allowed;
}

#tessa .fila-campos { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
#tessa .fila-campos .campo { margin-bottom: 0; flex: 1; min-width: 150px; }
#tessa .fila-campos .estrecho { flex: 0 0 130px; min-width: 0; }
#tessa .fila-campos .ancho { flex: 2; }

#tessa .fila-accion {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 11px 16px;
    border-bottom: 1px solid var(--linea);
    margin: 0;
}
#tessa .fila-accion:last-child { border-bottom: none; }
#tessa .fila-accion > label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--tx-2); white-space: nowrap; }
#tessa .fila-accion select { width: auto; min-width: 140px; }
#tessa .fila-accion input[type="text"] { flex: 1; min-width: 170px; width: auto; }
#tessa .fila-accion textarea { flex: 1; min-width: 220px; }
#tessa .fila-accion.arriba { align-items: flex-start; }

/* ============ 9. Botones ============ */

#tessa button, #tessa .boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--linea-2);
    border-radius: var(--r-sm);
    background: #fff; color: var(--tx);
    font-family: inherit; font-size: 13.5px; font-weight: 550; line-height: 1.3;
    cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
#tessa button:hover, #tessa .boton:hover {
    background: var(--panel-2); border-color: var(--tx-3);
    text-decoration: none; color: var(--tx);
}
#tessa button:active { transform: translateY(.5px); }
#tessa button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--azul-luz); }

#tessa .btn-primario, #tessa button[type="submit"]:not([class]) {
    background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: var(--s1);
}
#tessa .btn-primario:hover, #tessa button[type="submit"]:not([class]):hover {
    background: var(--azul-osc); border-color: var(--azul-osc); color: #fff;
}

#tessa .btn-accion { background: var(--pizarra); border-color: var(--pizarra); color: #fff; }
#tessa .btn-accion:hover { background: var(--pizarra-osc); border-color: var(--pizarra-osc); color: #fff; }

#tessa .btn-peligro { background: #fff; border-color: var(--rojo-bor); color: var(--rojo); }
#tessa .btn-peligro:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }

#tessa .btn-sutil { background: #fff; color: var(--tx-2); }
#tessa .btn-sutil:hover { color: var(--azul); border-color: var(--azul); background: var(--azul-luz); }

#tessa .btn-sm { padding: 4px 10px; font-size: 12.5px; }
#tessa td button, #tessa td .boton { padding: 4px 10px; font-size: 12.5px; }

#tessa .btn-enlace { background: none; border: none; padding: 0; color: var(--azul); font-weight: 500; text-decoration: underline; }
#tessa .btn-enlace:hover { background: none; border: none; color: var(--azul-osc); }

/* ============ 10. Mensajes y estados vacíos ============ */

#tessa .mensaje-error, #tessa .mensaje-exito, #tessa .mensaje-aviso {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 14px;
    border: 1px solid; border-radius: var(--r);
    margin-bottom: 16px;
    font-size: 13.5px; font-weight: 500;
}
#tessa .mensaje-error::before, #tessa .mensaje-exito::before, #tessa .mensaje-aviso::before {
    font-weight: 700; line-height: 1.35;
}
#tessa .mensaje-error { background: var(--rojo-luz); border-color: var(--rojo-bor); color: var(--rojo); }
#tessa .mensaje-error::before { content: "!"; }
#tessa .mensaje-exito { background: var(--verde-luz); border-color: var(--verde-bor); color: var(--verde); }
#tessa .mensaje-exito::before { content: "✓"; }
#tessa .mensaje-aviso { background: var(--ambar-luz); border-color: var(--ambar-bor); color: var(--ambar); }
#tessa .mensaje-aviso::before { content: "!"; }

#tessa .aviso-linea { display: block; margin-top: 4px; color: var(--ambar); font-size: 12.5px; }

#tessa .vacio { padding: 30px 20px; text-align: center; color: var(--tx-3); font-size: 13.5px; }
#tessa .vacio strong { display: block; color: var(--tx-2); font-size: 14px; margin-bottom: 3px; font-weight: 600; }
#tessa .vacio .boton, #tessa .vacio button { margin-top: 12px; }
#tessa td.vacio { text-align: center; color: var(--tx-3); padding: 22px; }

/* ============ 11. Listas de datos y métricas ============ */

#tessa .datos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 13px 20px; margin: 0;
}
#tessa .datos > div { min-width: 0; }
#tessa .datos dt {
    font-size: 11.5px; font-weight: 650; text-transform: uppercase;
    letter-spacing: .05em; color: var(--tx-3); margin-bottom: 2px;
}
#tessa .datos dd { margin: 0; font-size: 13.5px; word-break: break-word; }
#tessa .datos dd.vacia { color: var(--tx-3); }

#tessa .texto-largo {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--linea);
    font-size: 13.5px;
}

#tessa .metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
#tessa .metrica {
    background: var(--panel-2); border: 1px solid var(--linea);
    border-radius: var(--r-sm); padding: 12px 14px;
}
#tessa .metrica dt {
    font-size: 11.5px; font-weight: 650; text-transform: uppercase;
    letter-spacing: .05em; color: var(--tx-3); margin-bottom: 4px;
}
#tessa .metrica dd {
    margin: 0; font-size: 19px; font-weight: 650;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
#tessa .metrica.pendiente dd { color: var(--ambar); }
#tessa .metrica.saldado dd { color: var(--verde); }

/* ============ 12. Rejilla de opciones ============ */

#tessa .opciones {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 7px; margin: 0 0 14px;
}
#tessa .opcion {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    background: #fff; cursor: pointer;
    font-size: 13px; font-weight: 500;
    transition: border-color .12s, background .12s;
    margin: 0;
}
#tessa .opcion:hover { border-color: var(--linea-2); background: var(--panel-2); }
#tessa .opcion input { margin-top: 1px; flex: none; }
#tessa .opcion:has(input:checked) { border-color: var(--azul-bor); background: var(--azul-luz); }
#tessa .opcion .opcion-txt { min-width: 0; }
#tessa .opcion .opcion-desc { display: block; color: var(--tx-3); font-size: 11.5px; font-weight: 400; margin-top: 1px; }
#tessa .opcion code { background: none; border: none; padding: 0; font-size: 12.5px; color: inherit; }

#tessa .opciones.compacta { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 5px; }
#tessa .opciones.compacta .opcion { padding: 6px 9px; font-size: 12.5px; }

/* ============ 13. Historial de eventos ============ */

#tessa .historial { list-style: none; margin: 0; padding: 0; }

#tessa .evento {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--linea-2);
    border-radius: var(--r-sm);
    padding: 10px 14px; margin-bottom: 7px;
    box-shadow: var(--s1);
}
#tessa .evento-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#tessa .evento-tipo { font-size: 13px; font-weight: 650; }
#tessa .evento-autor { font-weight: 500; color: var(--tx-2); }
#tessa .evento-meta { color: var(--tx-3); font-size: 12px; font-variant-numeric: tabular-nums; }
#tessa .evento-detalle { margin-top: 4px; font-size: 13.5px; }
#tessa .flecha { color: var(--tx-3); margin: 0 4px; }
#tessa .evento-comentario {
    margin-top: 7px; padding: 8px 11px;
    background: var(--panel-2); border-radius: var(--r-sm);
    font-size: 13.5px; border-left: 2px solid var(--linea-2);
}

#tessa .ev-creacion       { border-left-color: var(--tx-3); }
#tessa .ev-reasignacion   { border-left-color: var(--ambar); }
#tessa .ev-cambio_estado  { border-left-color: var(--azul); }
#tessa .ev-avance_roadmap { border-left-color: var(--verde); }
#tessa .ev-comentario     { border-left-color: var(--morado); }
#tessa .ev-cierre         { border-left-color: var(--verde); }

/* ============ 14. Roadmap ============ */

#tessa .etapa {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--linea-2);
    border-radius: var(--r);
    box-shadow: var(--s2);
    margin-bottom: 12px; overflow: hidden;
}
#tessa .etapa-cab {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 15px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--linea);
}
#tessa .etapa-cab h3 { margin: 0; flex: 1; }
#tessa .etapa-cuerpo { padding: 12px 15px; }
#tessa .etapa-cuerpo > :last-child { margin-bottom: 0; }
#tessa .etapa-pie { padding: 10px 15px; border-top: 1px dashed var(--linea-2); background: var(--panel-2); }

/* ============ 14b. Agenda: hitos de proyecto ============
   Misma mecánica visual que .etapa (arriba), pero con nombre propio:
   el portal ya usa ".hito"/".hito-cab" para la línea de tiempo de
   etapas, y no queremos que ambos conceptos se confundan en el CSS. */
#tessa .agenda-hito {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--linea-2);
    border-radius: var(--r);
    box-shadow: var(--s2);
    margin-bottom: 10px; overflow: hidden;
}
#tessa .agenda-hito > summary.agenda-hito-cab {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 15px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--linea);
}
#tessa .agenda-hito > summary.agenda-hito-cab::-webkit-details-marker { display: none; }
#tessa .agenda-hito > summary.agenda-hito-cab:hover { background: var(--linea); }
#tessa .agenda-hito-cab h3 { margin: 0; flex: 1; }
#tessa .agenda-hito-flecha {
    flex: none; color: var(--tx-3); font-size: 11px; transition: transform .15s;
}
#tessa .agenda-hito[open] > summary.agenda-hito-cab .agenda-hito-flecha { transform: rotate(180deg); }
#tessa .agenda-hito-acciones {
    padding: 9px 15px; border-bottom: 1px dashed var(--linea-2);
    display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap;
}
#tessa .agenda-hito-cuerpo { padding: 12px 15px; }
#tessa .agenda-hito-cuerpo > :last-child { margin-bottom: 0; }

#tessa .etapa.st-en_curso   { border-left-color: var(--azul); }
#tessa .etapa.st-completada { border-left-color: var(--verde); }
#tessa .etapa.st-no_aplica  { border-left-color: var(--linea-2); opacity: .68; }

#tessa .num-etapa {
    flex: none; width: 24px; height: 24px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--linea); color: var(--tx-2);
    font-size: 12px; font-weight: 700;
}
#tessa .etapa.st-en_curso   .num-etapa { background: var(--azul); color: #fff; }
#tessa .etapa.st-completada .num-etapa { background: var(--verde); color: #fff; }

#tessa .barra-guardado {
    position: sticky; bottom: 0;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--s3);
    margin-bottom: 16px; z-index: 10;
}

#tessa .rm-etapa {
    border: 1px solid var(--linea);
    border-left: 3px solid var(--linea-2);
    border-radius: var(--r-sm);
    margin-bottom: 8px; overflow: hidden; background: #fff;
}
#tessa .rm-etapa-cab {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 9px; background: var(--panel-2);
    border-bottom: 1px solid var(--linea); font-size: 12.5px;
}
#tessa .rm-orden {
    flex: none; width: 19px; height: 19px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--linea); color: var(--tx-2);
    font-size: 10.5px; font-weight: 700;
}
#tessa .rm-nombre { flex: 1; font-weight: 620; min-width: 0; }
#tessa .rm-estado { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--tx-3); }

#tessa .rm-en_curso   { border-left-color: var(--azul); }
#tessa .rm-en_curso .rm-orden { background: var(--azul); color: #fff; }
#tessa .rm-completada { border-left-color: var(--verde); }
#tessa .rm-completada .rm-orden { background: var(--verde); color: #fff; }
#tessa .rm-no_aplica  { opacity: .55; }

#tessa .rm-tareas { list-style: none; margin: 0; padding: 0; }
#tessa .rm-tarea {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 9px; border-bottom: 1px solid var(--linea); font-size: 12.5px;
}
#tessa .rm-tarea:last-child { border-bottom: none; }
#tessa .rm-tarea-txt { flex: 1; min-width: 0; }
#tessa .rm-tarea-nombre { display: block; line-height: 1.3; }
#tessa .rm-tarea-resp { display: block; color: var(--tx-3); font-size: 10.5px; }
#tessa .rm-tarea-desc { display: block; color: var(--tx-3); font-size: 10.5px; font-style: italic; }
#tessa .rm-select { flex: none; width: auto; padding: 2px 20px 2px 6px; font-size: 11.5px; background-position: right 5px center; }
#tessa .rm-solo-lectura { flex: none; font-size: 10.5px; color: var(--tx-2); }

#tessa .rm-tarea.es-mia { background: var(--azul-luz); }
#tessa .rm-tarea.es-mia .rm-tarea-nombre { font-weight: 650; }
#tessa .rm-tarea.es-mia .rm-tarea-resp { color: var(--azul-osc); font-weight: 650; }
#tessa .rm-tarea.es-ajena .rm-tarea-nombre { color: var(--tx-2); }
#tessa .rm-tarea.t-completada .rm-tarea-nombre { text-decoration: line-through; color: var(--tx-3); }
#tessa .rm-tarea.t-no_aplica .rm-tarea-nombre { color: var(--tx-3); font-style: italic; }
#tessa .rm-vacia { margin: 0; padding: 6px 9px; color: var(--tx-3); font-size: 12px; }

/* ============ 15. Dos columnas del HD ============ */

#tessa .hd-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px;
    gap: 18px; align-items: stretch;
}
#tessa .hd-principal { min-width: 0; }

/* La caja va en absolute para no aportar altura a la fila: así el panel
   nunca supera la altura de la columna izquierda y hace scroll interno. */
#tessa .hd-roadmap { position: relative; min-height: 440px; }
#tessa .hd-roadmap-caja {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--s2);
    overflow: hidden;
}
#tessa .hd-roadmap-cab { padding: 11px 14px; background: var(--panel-2); border-bottom: 1px solid var(--linea); }
#tessa .hd-roadmap-cab h2 { margin: 0 0 1px; font-size: 14px; }
#tessa .form-roadmap { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
#tessa .hd-roadmap-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
#tessa .hd-roadmap-pie {
    padding: 10px 14px; background: var(--panel-2);
    border-top: 1px solid var(--linea);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#tessa .hd-roadmap-pie small { font-size: 11px; }

#tessa .hd-roadmap-lista::-webkit-scrollbar { width: 9px; }
#tessa .hd-roadmap-lista::-webkit-scrollbar-thumb {
    background: var(--linea-2); border-radius: 9px; border: 2px solid var(--panel);
}
#tessa .hd-roadmap-lista::-webkit-scrollbar-thumb:hover { background: var(--tx-3); }

/* ============ 16. Pantallas de acceso ============ */

.tessa-auth {
    min-height: 70vh;
    display: grid; place-items: center;
    padding: 40px 18px;
    background: var(--bg);
    font-family: var(--fuente);
    color: var(--tx); font-size: 14px;
}
.tessa-auth * { box-sizing: border-box; }

.tessa-auth .auth-caja {
    width: 100%; max-width: 380px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    box-shadow: var(--s3);
    padding: 26px 26px 22px;
}
.tessa-auth h1 { font-size: 20px; font-weight: 650; margin: 0 0 4px; letter-spacing: -.015em; }
.tessa-auth .auth-sub { color: var(--tx-2); font-size: 13.5px; margin: 0 0 20px; }
.tessa-auth .campo { margin-bottom: 14px; }
.tessa-auth label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--tx-2); }
.tessa-auth input {
    width: 100%; padding: 8px 11px;
    border: 1px solid var(--linea-2); border-radius: var(--r-sm);
    font-family: inherit; font-size: 14px;
}
.tessa-auth input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-luz); }
.tessa-auth button {
    width: 100%; padding: 9px 14px; margin-top: 4px;
    background: var(--azul); border: 1px solid var(--azul); color: #fff;
    border-radius: var(--r-sm);
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tessa-auth button:hover { background: var(--azul-osc); border-color: var(--azul-osc); }
.tessa-auth .auth-pie {
    margin: 18px 0 0; padding-top: 16px;
    border-top: 1px solid var(--linea);
    text-align: center; font-size: 13px; color: var(--tx-2);
}
.tessa-auth a { color: var(--azul); text-decoration: none; font-weight: 500; }
.tessa-auth a:hover { text-decoration: underline; }
.tessa-auth .ayuda { display: block; margin-top: 4px; font-size: 12px; color: var(--tx-3); }
.tessa-auth .mensaje-error, .tessa-auth .mensaje-exito {
    padding: 10px 13px; border: 1px solid; border-radius: var(--r-sm);
    margin-bottom: 16px; font-size: 13px; font-weight: 500;
}
.tessa-auth .mensaje-error { background: var(--rojo-luz); border-color: var(--rojo-bor); color: var(--rojo); }
.tessa-auth .mensaje-exito { background: var(--verde-luz); border-color: var(--verde-bor); color: var(--verde); }

/* "Ver contraseña" (backlog/notas.txt, 2026-09-22): el input se envuelve
   en .campo-password para poder anclar el botón sin tocar el ancho 100%
   que .tessa-auth input ya trae. */
.tessa-auth .campo-password { position: relative; }
.tessa-auth .campo-password input { padding-right: 38px; }
.tessa-auth .alternar-password {
    position: absolute; top: 50%; right: 3px; transform: translateY(-50%);
    width: auto; margin: 0; padding: 6px 8px;
    background: transparent; border: none; color: var(--tx-3);
    line-height: 1; cursor: pointer;
    display: flex; align-items: center;
}
.tessa-auth .alternar-password:hover { color: var(--tx-2); background: transparent; border-color: transparent; }
/* Ícono de ojo (svg inline en la vista): la línea diagonal solo se ve
   mientras la contraseña está visible en texto plano -- ícono neutro
   tipo "ver/ocultar", sin emoji (pedido del dueño, 2026-09-23: el
   emoji anterior "podía parecer poco profesional"). */
.tessa-auth .alternar-password .alternar-password-tachado { display: none; }
.tessa-auth .alternar-password.mostrando .alternar-password-tachado { display: inline; }

/* ============ 17. Responsive ============ */

@media (max-width: 1150px) {
    #tessa .hd-layout { grid-template-columns: 1fr; }
    #tessa .hd-roadmap { position: static; min-height: 0; margin-bottom: 16px; }
    #tessa .hd-roadmap-caja { position: static; max-height: 540px; }
}

@media (max-width: 860px) {
    #tessa .rejilla-2 { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    /* Las secciones pasan a una fila propia; se envuelven en vez de
       recortarse (overflow:auto rompería los desplegables de grupo). */
    .nav-tessa .nav-tessa-interior { flex-wrap: wrap; gap: 0 14px; }
    .nav-tessa .nav-menu { order: 3; width: 100%; border-top: 1px solid var(--linea); flex-wrap: wrap; }
    .nav-tessa .nav-menu a { height: 42px; }
    .nav-tessa .nav-lado { margin-left: auto; }
    .nav-tessa .nav-nombre { display: none; }
}

@media (max-width: 720px) {
    #tessa { padding: 0 12px 44px; }
    .nav-tessa .nav-tessa-interior { padding: 0 12px; }
    .nav-tessa .nav-accion { padding: 6px 10px; }
    #tessa h1 { font-size: 19px; }
    #tessa .pagina-cab { flex-direction: column; align-items: stretch; }
    #tessa .datos { grid-template-columns: 1fr; }
    #tessa .fila-accion { flex-direction: column; align-items: stretch; }
    #tessa .fila-accion select, #tessa .fila-accion input[type="text"] { width: 100%; }
    #tessa .opciones { grid-template-columns: 1fr; }
}

@media print {
    #tessa .nav, #tessa .barra-guardado, #tessa button, #tessa form { display: none !important; }
    #tessa { background: #fff; padding: 0; }
    #tessa .tarjeta, #tessa .etapa, #tessa .evento { box-shadow: none; break-inside: avoid; }

    navbar, footer, .no-print { display: none !important; }
}

/* ============ 18. Pantalla de roles y permisos ============ */

#tessa .leyenda {
    display: flex; gap: 20px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 16px;
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: var(--r); box-shadow: var(--s1);
    font-size: 12.5px; color: var(--tx-2);
}
#tessa .leyenda-item { display: inline-flex; align-items: center; gap: 7px; }

#tessa .punto-sensible {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ambar); flex: none;
}
#tessa .punto-alcance {
    display: inline-block; width: 7px; height: 7px; border-radius: 2px;
    background: var(--morado); flex: none;
}

/* --- Bloque de módulo --- */
#tessa .modulo-permisos {
    border: 1px solid var(--linea);
    border-left: 3px solid var(--linea-2);
    border-radius: var(--r);
    margin-bottom: 12px;
    background: var(--panel-2);
    transition: border-color .15s, background .15s;
}
#tessa .modulo-permisos.modulo-activo   { border-left-color: var(--azul); background: #fff; }
#tessa .modulo-permisos.modulo-completo { border-left-color: var(--verde); }

#tessa .modulo-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 13px;
    border-bottom: 1px solid var(--linea);
}

#tessa .modulo-maestro {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0; cursor: pointer; flex: 1;
}
#tessa .modulo-maestro input { margin-top: 2px; width: 16px; height: 16px; flex: none; }
#tessa .modulo-maestro strong { display: block; font-size: 14px; }
#tessa .modulo-desc { display: block; color: var(--tx-3); font-size: 12px; font-weight: 400; margin-top: 1px; }

#tessa .modulo-contador {
    flex: none; padding: 2px 9px; border-radius: 999px;
    background: var(--panel); border: 1px solid var(--linea-2);
    font-size: 11.5px; font-weight: 650; color: var(--tx-2);
    font-variant-numeric: tabular-nums;
}
#tessa .modulo-completo .modulo-contador {
    background: var(--verde-luz); border-color: var(--verde-bor); color: var(--verde);
}

#tessa .modulo-permisos .opciones {
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 7px; margin: 0; padding: 11px 13px;
}

#tessa .opcion-accion {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 620;
}
#tessa .opcion-clave {
    display: block; margin-top: 4px;
    font-size: 10.5px; color: var(--tx-3);
    background: none; border: none; padding: 0;
}
#tessa .opcion-sensible { border-color: #eddcbc; }
#tessa .opcion-sensible:has(input:checked) { border-color: var(--ambar-bor); background: var(--ambar-luz); }

/* --- Selector de alcance --- */
#tessa .modulo-alcance {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 9px 13px;
    border-top: 1px dashed var(--linea-2);
    background: var(--morado-luz);
    border-radius: 0 0 var(--r) var(--r);
}
#tessa .modulo-alcance label {
    margin: 0; font-size: 12px; font-weight: 650;
    text-transform: uppercase; letter-spacing: .04em; color: var(--morado);
}
#tessa .modulo-alcance select {
    flex: 1; min-width: 250px; width: auto;
    border-color: var(--morado-bor); font-size: 12.5px;
}

@media (max-width: 720px) {
    #tessa .modulo-permisos .opciones { grid-template-columns: 1fr; }
    #tessa .modulo-alcance select { min-width: 0; width: 100%; }
}

/* ============ 19. Portal de cliente ============ */

/* Tono ligeramente distinto al sistema interno: quien entra debe notar que
   está en otro sitio, no en una versión recortada de Tessa. */
#tessa.portal { --azul: #1f6f8b; --azul-osc: #175667; --azul-luz: #edf6f9; --azul-bor: #bcdde7; }

.nav-tessa.nav-portal { border-bottom-color: #cfe0e6; }
.nav-tessa.nav-portal .nav-marca-icono {
    background: linear-gradient(140deg, #1f6f8b 0%, #3a97b5 100%);
    box-shadow: 0 1px 3px rgba(31,111,139,.35);
}
.nav-tessa.nav-portal .nav-menu a.activo { color: #1f6f8b; }
.nav-tessa.nav-portal .nav-menu a.activo::after { background: #1f6f8b; }
.nav-tessa.nav-portal .nav-avatar { background: #edf6f9; color: #175667; }

/* Contador de solicitudes sin atender en el menú interno */
.nav-tessa .nav-badge {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    margin-left: 6px; border-radius: 999px;
    background: var(--rojo); color: #fff;
    font-size: 11px; font-weight: 700;
}

/* Tarjeta que reclama atención */
#tessa .tarjeta.destacada { border-color: var(--azul-bor); box-shadow: var(--s3); }
#tessa .tarjeta.destacada > .tarjeta-cab { background: var(--azul-luz); border-bottom-color: var(--azul-bor); }

#tessa .tarjeta-enlace { display: block; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
#tessa .tarjeta-enlace:hover { text-decoration: none; border-color: var(--azul-bor); box-shadow: var(--s3); }

/* Tarjeta de proyecto en el panel del portal (2026-09-27, pedido del
   dueño, cambio general -- no solo para demo): la tarjeta blanca con
   borde muy sutil no dejaba claro que era clickeable y abría el
   proyecto. Ahora lleva mas color (franja + fondo con tinte del tema del
   portal) y mas contraste en hover, para que un visitante no se la
   salte por accidente. */
#tessa.portal .rejilla .tarjeta-enlace {
    background: var(--azul-luz);
    border: 1px solid var(--azul-bor);
    border-left: 4px solid var(--azul);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
#tessa.portal .rejilla .tarjeta-enlace:hover {
    border-color: var(--azul);
    box-shadow: var(--s3);
    transform: translateY(-2px);
}
#tessa.portal .rejilla .tarjeta-enlace h3 { color: var(--azul-osc); }

/* Grid compacto de links del tablero (2026-09-26, pedido del dueño: los
   hitos se quedan igual, solo se compactan los enlaces de abajo). Antes
   cada uno era una fila de ancho completo con título + párrafo + botón
   "Abrir"; ahora son tarjetas pequeñas en grilla, sin el botón (la
   tarjeta entera ya es el enlace). */
#tessa .enlaces-tablero {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px; margin-top: 4px;
}
#tessa .enlace-compacto .tarjeta-cuerpo {
    padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
#tessa .enlace-compacto h2 { margin: 0; font-size: .92rem; line-height: 1.25; }
#tessa .enlace-compacto .nota { margin: 0; font-size: .78rem; line-height: 1.35; color: var(--tx-3); }
@media (max-width: 560px) {
    #tessa .enlaces-tablero { grid-template-columns: 1fr 1fr; }
}

/* --- Barra de progreso --- */
#tessa .progreso { margin-top: 14px; }
#tessa .progreso-barra {
    height: 8px; border-radius: 999px;
    background: var(--linea); overflow: hidden;
}
#tessa .progreso-barra span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--azul) 0%, #3a97b5 100%);
    border-radius: 999px; transition: width .3s;
}
#tessa .progreso-txt { display: block; margin-top: 6px; font-size: 12.5px; color: var(--tx-2); }

/* --- Roadmap de etapas -- grid de tarjetas (portal de cliente/invitado,
   2026-09-26: antes era una línea de tiempo vertical de ancho completo que
   dejaba demasiado espacio vacío en pantallas anchas -- pasa a grid de 3
   columnas fijas sin importar cuántas etapas tenga el proyecto; si la
   última fila queda incompleta no pasa nada, se ve bien igual). --- */
#tessa .linea-tiempo {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch;
}
#tessa .hito { position: relative; padding: 0; }
/* 2026-09-27 (pedido del dueño, refinamiento visual sobre el fix de hoy
   de "Fase N de 9"): el numerito de fase vivía como una columna aparte a
   la IZQUIERDA de la tarjeta -- se veía "afuera", pegado a la esquina
   superior, sin centrar. Ahora vive DENTRO de la tarjeta (.hito-cuerpo
   pasa a ser el único elemento en flujo dentro de .hito, con
   padding-left extra para dejarle espacio), centrado verticalmente en
   toda su altura -- mismo círculo, solo se reposiciona. */
#tessa .hito-punto {
    position: absolute; z-index: 2;
    top: 50%; left: 12px; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--panel); border: 2px solid var(--linea-2);
    color: var(--tx-3); font-size: 11.5px; font-weight: 700;
}
#tessa .hito-cuerpo {
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: var(--r); box-shadow: var(--s1);
    padding: 11px 14px 11px 46px;
}
#tessa .hito-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#tessa .hito-cab h3 { margin: 0; font-size: 14.5px; }
/* 2026-09-27 (pedido del dueño): "Fase 1"/"Fase 2"/... explícito arriba
   del título -- antes solo el numerito en el círculo (.hito-punto)
   indicaba el orden, y no quedaba claro que era el número de fase hasta
   observar con calma. */
#tessa .hito-fase {
    display: block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase;
    color: var(--tx-3); margin-bottom: 2px;
}
#tessa .hito-completada .hito-fase { color: var(--verde); }
#tessa .hito-en_curso .hito-fase { color: var(--azul); }

#tessa .hito-completada .hito-punto { background: var(--verde); border-color: var(--verde); color: #fff; }
#tessa .hito-en_curso .hito-punto { background: var(--azul); border-color: var(--azul); color: #fff; }
#tessa .hito-en_curso .hito-cuerpo { border-color: var(--azul-bor); }

@media (max-width: 860px) { #tessa .linea-tiempo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #tessa .linea-tiempo { grid-template-columns: 1fr; } }

/* --- Aprobaciones --- */
#tessa .aprobacion {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 14px 0; border-bottom: 1px solid var(--linea);
}
#tessa .aprobacion:last-child { border-bottom: none; padding-bottom: 0; }
#tessa .aprobacion:first-child { padding-top: 0; }
#tessa .aprobacion-txt { flex: 1; min-width: 240px; }
#tessa .aprobacion-txt h3 { margin: 0 0 2px; }
#tessa .aprobacion-acciones { flex: 0 0 300px; display: flex; flex-direction: column; gap: 8px; }
#tessa .aprobacion-botones { display: flex; gap: 8px; }
#tessa .aprobacion-botones button { flex: 1; }

#tessa .btn-aprobar {
    background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600;
}
#tessa .btn-aprobar:hover { background: #12613c; border-color: #12613c; color: #fff; }

/* Escala roja/celeste/verde para "Avanzar estado" en la ficha de un
   candidato del Programa Piloto (piloto_candidato_detalle.php, 2026-10-02):
   mismos tokens de color que ya usa el resto de Tessa (ver la leyenda del
   backlog interno, mas arriba), mismo patron visual que .btn-peligro
   (outline, solido al pasar el mouse), solo que aplicado a una progresion
   de etapa en vez de a una accion destructiva. */
#tessa .btn-fase-roja { background: #fff; border-color: var(--rojo-bor); color: var(--rojo); }
#tessa .btn-fase-roja:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }

#tessa .btn-fase-celeste { background: #fff; border-color: var(--azul-bor); color: var(--azul); }
#tessa .btn-fase-celeste:hover { background: var(--azul); border-color: var(--azul); color: #fff; }

#tessa .btn-fase-verde { background: #fff; border-color: var(--verde-bor); color: var(--verde); }
#tessa .btn-fase-verde:hover { background: var(--verde); border-color: var(--verde); color: #fff; }

/* --- Conversación del portal --- */
#tessa .mensaje-mio { border-left-color: var(--azul); background: var(--azul-luz); }
#tessa .mensaje-mio .evento-comentario { background: #fff; }
#tessa .ev-respuesta { border-left-color: var(--tx-3); }

/* ============ 20. Triage de solicitudes ============ */

#tessa .solicitud-triage {
    border: 1px solid var(--linea);
    border-left: 3px solid var(--linea-2);
    border-radius: var(--r);
    padding: 14px 16px; margin-bottom: 12px;
    background: var(--panel);
}
/* Una solicitud que envejece sin respuesta debe verse. Es la señal de
   gestión que antes no existía en ninguna parte. */
#tessa .solicitud-triage.envejecida { border-left-color: var(--rojo); background: var(--rojo-luz); }

#tessa .solicitud-cab {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
#tessa .solicitud-cab h3 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

#tessa .solicitud-texto {
    padding: 10px 12px; margin: 0 0 12px;
    background: var(--panel-2); border-radius: var(--r-sm);
    font-size: 13.5px; border-left: 2px solid var(--linea-2);
}

#tessa .triage-acciones { display: flex; flex-direction: column; gap: 7px; }
#tessa .triage-acciones form { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin: 0; }
#tessa .triage-acciones input[type="text"] { flex: 1; min-width: 190px; width: auto; }
#tessa .triage-acciones select { width: auto; min-width: 150px; }
#tessa .triage-acciones button { flex: none; min-width: 120px; }

/* --- Visibilidad de un HD en su ficha --- */
#tessa .visibilidad {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 16px; border-bottom: 1px solid var(--linea);
}
#tessa .visibilidad.es-visible { background: var(--ambar-luz); }
#tessa .visibilidad-txt { flex: 1; min-width: 200px; font-size: 13px; }
#tessa .visibilidad-txt strong { display: block; }

@media (max-width: 720px) {
    #tessa .aprobacion-acciones { flex: 1 1 100%; }
    #tessa .triage-acciones input[type="text"],
    #tessa .triage-acciones select,
    #tessa .triage-acciones button { width: 100%; min-width: 0; }
}

/* ============ 21. Notificaciones ============ */

.nav-tessa .nav-campana {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    text-decoration: none; font-size: 16px; line-height: 1;
    transition: background .12s;
}
.nav-tessa .nav-campana:hover { background: var(--panel-2); text-decoration: none; }
.nav-tessa .nav-campana .nav-badge {
    position: absolute; top: 1px; right: 0; margin: 0;
    min-width: 16px; height: 16px; font-size: 10px;
}

#tessa .evento.no-leida { border-color: var(--azul-bor); background: var(--azul-luz); }
#tessa .evento.no-leida .evento-comentario { background: #fff; }

#tessa .punto-nuevo {
    display: inline-block; width: 7px; height: 7px;
    margin-left: 6px; border-radius: 50%;
    background: var(--azul);
}

/* ============ 22. Cuenta, invitaciones y equipo ============ */

#tessa .pasos-cuenta { list-style: none; margin: 18px 0; padding: 0; }
#tessa .pasos-cuenta li {
    position: relative; padding: 0 0 16px 32px; margin: 0;
}
#tessa .pasos-cuenta li::before {
    content: ""; position: absolute; left: 0; top: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--linea-2); background: #fff;
}
#tessa .pasos-cuenta li::after {
    content: ""; position: absolute; left: 9px; top: 22px; bottom: 0;
    width: 2px; background: var(--linea);
}
#tessa .pasos-cuenta li:last-child::after { display: none; }
#tessa .pasos-cuenta li.hecho::before {
    background: var(--verde); border-color: var(--verde);
}
#tessa .pasos-cuenta li.actual::before {
    border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-luz);
}
#tessa .pasos-cuenta strong { display: block; font-size: 14px; }
#tessa .pasos-cuenta span { display: block; color: var(--tx-2); font-size: 13px; margin-top: 1px; }

/* Salida de un miembro: desplegable sin JavaScript */
#tessa .salida-miembro { display: inline-block; position: relative; }
#tessa .salida-miembro summary { list-style: none; cursor: pointer; }
#tessa .salida-miembro summary::-webkit-details-marker { display: none; }
#tessa .salida-caja {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    width: 300px; text-align: left;
    background: var(--panel); border: 1px solid var(--linea-2);
    border-radius: var(--r); box-shadow: var(--s3);
    padding: 14px;
}
#tessa .salida-caja .campo { margin-bottom: 10px; }
#tessa .salida-caja button { width: 100%; }

@media (max-width: 720px) {
    #tessa .salida-caja { position: static; width: 100%; box-shadow: none; }
}

/* ============ 23. Aprobaciones con contexto ============ */

#tessa .aprobacion {
    border: 1px solid var(--linea);
    border-radius: var(--r);
    padding: 16px 18px;
    margin-bottom: 14px;
    background: var(--panel);
    display: block;
}
#tessa .aprobacion.pendiente { border-left: 3px solid var(--azul); }
#tessa .aprobacion.resuelta { opacity: .82; }

#tessa .aprobacion-cab {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
#tessa .aprobacion-cab h3 { margin: 5px 0 0; }
#tessa .aprobacion-detalle { font-size: 13.5px; margin: 0 0 12px; }

#tessa .aprobacion-datos {
    display: flex; gap: 26px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 11px 14px;
    background: var(--panel-2); border-radius: var(--r-sm);
}
#tessa .aprobacion-datos dt {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--tx-3); font-weight: 650; margin-bottom: 2px;
}
#tessa .aprobacion-datos dd { margin: 0; font-size: 14px; font-weight: 550; }
#tessa .aprobacion-datos .monto {
    font-size: 17px; font-weight: 700; color: var(--azul);
    font-variant-numeric: tabular-nums;
}

/* Documento adjunto: lo que faltaba para poder decidir sin salir de aquí */
#tessa .documento-adjunto {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; margin-bottom: 14px;
    border: 1px solid var(--azul-bor); border-radius: var(--r-sm);
    background: var(--azul-luz);
    text-decoration: none; color: var(--tx);
    transition: box-shadow .12s;
}
#tessa .documento-adjunto:hover { text-decoration: none; box-shadow: var(--s2); }
#tessa .documento-icono {
    flex: none; width: 40px; height: 40px; border-radius: var(--r-sm);
    display: grid; place-items: center;
    background: var(--azul); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
#tessa .documento-txt { display: flex; flex-direction: column; min-width: 0; }
#tessa .documento-txt strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
#tessa .documento-txt span { font-size: 12px; color: var(--tx-2); }

#tessa .aprobacion-form { margin: 0; }
#tessa .aprobacion-form .campo { margin-bottom: 10px; }
#tessa .aprobacion-botones { display: flex; gap: 9px; flex-wrap: wrap; }
#tessa .aprobacion-botones button { flex: 1; min-width: 150px; }

#tessa .aprobacion-respuesta {
    padding: 11px 14px; border-radius: var(--r-sm);
    background: var(--panel-2); border-left: 2px solid var(--linea-2);
    font-size: 13.5px;
}
#tessa .aprobacion-respuesta strong { display: block; margin-bottom: 3px; }
#tessa .aprobacion-respuesta .nota { display: block; margin-top: 5px; }

/* ============ 23b. Reagendar -- Agenda Fase 2 ============ */

#tessa .reagendar-caja {
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin: 10px 0;
    background: var(--panel-2);
}
#tessa .reagendar-caja.pendiente-otro { border-left: 3px solid var(--azul); }
#tessa .reagendar-caja.pendiente-mia { border-left: 3px solid var(--ambar); }
#tessa .reagendar-caja h4 { margin: 0 0 6px; font-size: 14px; }
#tessa .reagendar-datos { font-size: 13.5px; margin: 0 0 10px; }
#tessa .reagendar-datos strong { font-variant-numeric: tabular-nums; }

#tessa .reagendar-form { margin: 0; }
#tessa .reagendar-form .campo { margin-bottom: 8px; }
#tessa .reagendar-botones { display: flex; gap: 8px; flex-wrap: wrap; }
#tessa .reagendar-botones button { flex: 1; min-width: 130px; }

#tessa .reagendar-contra { margin-top: 10px; }
#tessa .reagendar-contra summary { font-size: 13px; color: var(--tx-2); list-style: none; }
#tessa .reagendar-contra summary::-webkit-details-marker { display: none; }
#tessa .reagendar-contra[open] summary { margin-bottom: 8px; }

/* Cancelar reunión (2026-09-27, pedido del dueño): disponible para
   cualquier lado, siempre como acción de menor jerarquía visual -- por
   eso reusa .reagendar-contra (texto discreto) en vez de un botón rojo
   prominente, y hover en rojo para distinguirla de "proponer otra fecha". */
#tessa .agenda-cancelar-caja summary:hover { color: var(--rojo); }

/* "Unirse a la reunión" + "Proponer otra fecha" juntos en línea, con la
   primera como acción primaria (verde) para que no pase desapercibida --
   antes "proponer otra fecha" era puro texto subrayado y era fácil no
   verlo (2026-09-26, pedido del dueño). */
#tessa .agenda-hito-acciones { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#tessa .agenda-hito-acciones .reagendar-contra { margin: 0; }
#tessa .agenda-hito-acciones .reagendar-contra[open] { flex-basis: 100%; }
#tessa .agenda-hito-acciones .reagendar-contra summary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border: 1px solid var(--linea-2); border-radius: var(--r-sm);
    background: #fff; color: var(--tx-2); font-size: 13.5px; font-weight: 550;
    cursor: pointer; white-space: nowrap; list-style: none;
}
#tessa .agenda-hito-acciones .reagendar-contra summary:hover { color: var(--azul); border-color: var(--azul); background: var(--azul-luz); }
#tessa .agenda-hito-acciones .reagendar-contra[open] summary { margin-bottom: 8px; }

/* Mismo criterio, para la caja de aceptar/rechazar/contraproponer una
   propuesta de InnovADN -- 3 acciones en una fila, jerarquía pareja
   (2026-09-26, pedido del dueño: antes "Proponer otra fecha" quedaba casi
   invisible como texto suelto debajo de Aceptar/No me sirve).
   2026-09-27 (bug reportado por el dueño, con captura): al abrir "Proponer
   otra fecha", `flex-basis: 100%` hacía que ese item saltara a su propia
   fila y empujara "Aceptar" -- en ciertos anchos lo dejaba prácticamente
   oculto/tapado. Ahora el formulario abierto se despliega como un panel
   flotante DEBAJO de toda la caja (position:absolute), así abrir/cerrar
   nunca mueve ni tapa Rechazar/Aceptar -- su posición ya no depende del
   estado [open]. */
#tessa .reagendar-caja { position: relative; }
#tessa .reagendar-botones-fila { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
#tessa .reagendar-botones-fila > button { flex: 1; min-width: 110px; }
#tessa .reagendar-botones-fila .reagendar-contra { margin: 0; flex: 1; min-width: 130px; }
#tessa .reagendar-botones-fila .reagendar-contra summary {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%;
    padding: 7px 14px; border: 1px solid var(--linea-2); border-radius: var(--r-sm);
    background: #fff; color: var(--tx-2); font-size: 13.5px; font-weight: 550;
    cursor: pointer; white-space: nowrap; list-style: none;
}
#tessa .reagendar-botones-fila .reagendar-contra summary:hover { color: var(--azul); border-color: var(--azul); background: var(--azul-luz); }
#tessa .reagendar-botones-fila .reagendar-contra[open] > form {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    z-index: 5;
    background: #fff;
    border: 1px solid var(--linea-2);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* ============ 23b2. Fecha de entrega al cliente -- Agenda Fase 3 ============ */

#tessa .entrega-caja {
    border: 1px solid var(--linea);
    border-left: 3px solid var(--verde);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin: 10px 0;
    background: var(--panel-2);
}
#tessa .entrega-caja h4 { margin: 0 0 6px; font-size: 14px; }

/* ============ 23c. Tarjeta de hito de agenda -- portal de cliente ============ */

#tessa .agenda-hito-portal {
    border: 1px solid var(--linea);
    border-radius: var(--r);
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--panel);
}
#tessa .agenda-hito-portal-cab {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
#tessa .agenda-hito-portal-cab h3 { margin: 0 0 2px; }
#tessa .agenda-hito-portal-cab .sub { font-size: 12.5px; color: var(--tx-2); }

#tessa .etiqueta-visible {
    border-color: var(--ambar-bor) !important;
    background: var(--ambar-luz) !important;
    color: var(--ambar) !important;
}

@media (max-width: 720px) {
    #tessa .aprobacion-datos { gap: 16px; }
    #tessa .aprobacion-botones button { min-width: 0; }
}

/* ============ 24. Usuarios: lista compacta y roles por jerarquía ============ */

#tessa .paginador {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; margin-top: 14px;
}
#tessa .paginador-info { color: var(--tx-2); font-size: .9rem; }
#tessa .paginador .deshabilitado { opacity: .45; pointer-events: none; }

#tessa .usuarios-lista {
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: var(--r); box-shadow: var(--s1); overflow: hidden;
}
#tessa .usuario-fila { border-bottom: 1px solid var(--linea); }
#tessa .usuario-fila:last-child { border-bottom: none; }

#tessa .usuario-fila summary {
    display: grid;
    grid-template-columns: 32px minmax(180px, 1.2fr) 2fr auto auto;
    align-items: center; gap: 12px;
    padding: 9px 14px; cursor: pointer; list-style: none;
    transition: background .12s;
}
#tessa .usuario-fila summary::-webkit-details-marker { display: none; }
#tessa .usuario-fila summary:hover { background: var(--panel-2); }
#tessa .usuario-fila[open] summary { background: var(--panel-2); border-bottom: 1px solid var(--linea); }

#tessa .usuario-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--azul-luz); color: var(--azul-osc);
    font-size: 13px; font-weight: 700;
}
#tessa .usuario-id { display: flex; flex-direction: column; min-width: 0; }
#tessa .usuario-id strong { font-size: 13.5px; }
#tessa .usuario-id small {
    font-size: 12px; color: var(--tx-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tessa .usuario-roles { display: flex; flex-wrap: wrap; gap: 4px; }
#tessa .usuario-meta { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
#tessa .usuario-abrir { font-size: 12px; font-weight: 600; color: var(--azul); white-space: nowrap; }
#tessa .usuario-fila[open] .usuario-abrir { color: var(--tx-3); }

#tessa .chip {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    background: var(--panel-2); border: 1px solid var(--linea-2);
    font-size: 11.5px; font-weight: 550; color: var(--tx-2);
}
#tessa .chip-vacio { border-style: dashed; color: var(--tx-3); }

#tessa .usuario-panel { padding: 12px 14px 14px 58px; background: #fcfcfd; }
#tessa .usuario-bloque { margin: 0 0 10px; }
#tessa .usuario-bloque:last-child { margin-bottom: 0; }
#tessa .usuario-linea {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding-top: 10px; border-top: 1px dashed var(--linea);
}
#tessa .usuario-linea .etiqueta-campo { margin: 0; }
#tessa .usuario-linea select { width: auto; min-width: 200px; }
#tessa .usuario-linea small { color: var(--tx-3); margin-right: auto; }

/* Grupos de roles: la jerarquía se lee de izquierda a derecha */
#tessa .grupos-roles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 8px; margin-bottom: 10px;
}
#tessa .grupo-rol {
    margin: 0; padding: 6px 9px 8px;
    border: 1px solid var(--linea); border-radius: var(--r-sm);
    background: var(--panel);
}
#tessa .grupo-rol legend {
    padding: 0 4px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--tx-3);
}
#tessa .chip-check {
    display: flex; align-items: center; gap: 7px;
    margin: 0; padding: 3px 2px; cursor: pointer;
    font-size: 13px; font-weight: 500;
}
#tessa .chip-check input { width: 14px; height: 14px; margin: 0; }
#tessa .chip-check:has(input:checked) span { font-weight: 650; color: var(--azul-osc); }

@media (max-width: 900px) {
    #tessa .usuario-fila summary { grid-template-columns: 32px 1fr auto; }
    #tessa .usuario-roles { grid-column: 2 / -1; }
    #tessa .usuario-meta { grid-column: 2 / 3; justify-content: flex-start; }
    #tessa .usuario-panel { padding-left: 14px; }
}

/* ============ 25. Diagnóstico y respaldos ============ */

#tessa .diag-resumen {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; margin-bottom: 16px;
    border-radius: var(--r); border: 1px solid; font-size: 14px;
}
#tessa .diag-resumen.hay-criticos { background: var(--rojo-luz); border-color: var(--rojo-bor); color: var(--rojo); }
#tessa .diag-resumen.hay-avisos  { background: var(--ambar-luz); border-color: var(--ambar-bor); color: var(--ambar); }
#tessa .diag-resumen.todo-ok     { background: var(--verde-luz); border-color: var(--verde-bor); color: var(--verde); }
#tessa .diag-cuentas { margin-left: auto; display: flex; gap: 6px; }
#tessa .diag-n {
    min-width: 28px; padding: 2px 8px; border-radius: 999px; text-align: center;
    font-size: 12px; font-weight: 700; color: #fff;
}
#tessa .diag-n.critico { background: var(--rojo); }
#tessa .diag-n.aviso   { background: var(--ambar); }
#tessa .diag-n.ok      { background: var(--verde); }

#tessa .diag-lista { list-style: none; margin: 0; padding: 0; }
#tessa .diag-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid var(--linea);
}
#tessa .diag-item:last-child { border-bottom: none; }
#tessa .diag-item strong { display: block; font-size: 13.5px; }
#tessa .diag-item span:not(.diag-marca) { display: block; font-size: 12.5px; color: var(--tx-2); margin-top: 2px; }
#tessa .diag-marca {
    flex: none; width: 70px; text-align: center; margin-top: 1px;
    padding: 2px 0; border-radius: var(--r-sm);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
#tessa .nivel-critico { background: var(--rojo-luz); }
#tessa .nivel-critico .diag-marca { background: var(--rojo); color: #fff; }
#tessa .nivel-aviso .diag-marca   { background: var(--ambar-luz); color: var(--ambar); border: 1px solid var(--ambar-bor); }
#tessa .nivel-ok .diag-marca      { background: var(--verde-luz); color: var(--verde); border: 1px solid var(--verde-bor); }
#tessa .nivel-info .diag-marca    { background: var(--panel-2); color: var(--tx-3); border: 1px solid var(--linea-2); }

#tessa .pasos-texto { margin: 0; padding-left: 20px; font-size: 13.5px; }
#tessa .pasos-texto li { margin-bottom: 7px; }

/* ============ 26. Búsqueda global ============ */

/* Disparador: mismo tamaño y comportamiento que la campana de notificaciones,
   a su izquierda, para que el bloque de la derecha del navbar lea como un
   solo grupo de acciones. */
.nav-tessa .nav-buscar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: none; border-radius: 8px; background: none; cursor: pointer;
    font-size: 16px; line-height: 1;
    transition: background .12s;
}
.nav-tessa .nav-buscar:hover { background: var(--panel-2); }
.nav-tessa .nav-buscar[aria-expanded="true"] { background: var(--azul-luz); }

.panel-busqueda-fondo {
    position: fixed; inset: 0; z-index: 59;
    background: rgba(15, 18, 25, .32);
}
.panel-busqueda-fondo[hidden] { display: none; }

.panel-busqueda {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
    width: 400px; max-width: 92vw;
    display: flex; flex-direction: column;
    background: var(--panel);
    border-left: 1px solid var(--linea);
    box-shadow: var(--s3);
    font-family: var(--fuente);
    color: var(--tx);
    -webkit-font-smoothing: antialiased;
}
.panel-busqueda[hidden] { display: none; }

.panel-busqueda-cab {
    flex: none; display: flex; align-items: center; gap: 8px;
    padding: 14px 14px 12px; border-bottom: 1px solid var(--linea);
}
.panel-busqueda-campo {
    flex: 1; min-width: 0;
    padding: 9px 12px; border: 1px solid var(--linea-2); border-radius: var(--r);
    font-family: var(--fuente); font-size: 14px; color: var(--tx);
    background: var(--panel-2);
}
.panel-busqueda-campo:focus {
    outline: none; border-color: var(--azul-bor); background: var(--panel);
    box-shadow: 0 0 0 3px var(--azul-luz);
}
.panel-busqueda-cerrar {
    flex: none; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 7px; background: none; cursor: pointer;
    font-size: 14px; color: var(--tx-2);
}
.panel-busqueda-cerrar:hover { background: var(--panel-2); color: var(--tx); }

.panel-busqueda-tipos {
    flex: none; display: flex; flex-wrap: wrap; gap: 5px;
    padding: 10px 14px; border-bottom: 1px solid var(--linea);
}
.panel-busqueda .chip-check {
    display: flex; align-items: center; gap: 5px;
    margin: 0; padding: 3px 9px; cursor: pointer;
    border-radius: 999px; border: 1px solid var(--linea-2); background: var(--panel-2);
    font-size: 12px; font-weight: 500; color: var(--tx-2);
}
.panel-busqueda .chip-check input { width: 12px; height: 12px; margin: 0; }
.panel-busqueda .chip-check:has(input:checked) {
    border-color: var(--azul-bor); background: var(--azul-luz); color: var(--azul-osc); font-weight: 650;
}

.panel-busqueda-resultados { flex: 1; overflow-y: auto; padding: 8px 0 14px; }
.panel-busqueda-aviso { margin: 14px; color: var(--tx-3); font-size: 12.5px; line-height: 1.45; }

.busqueda-grupo { margin-bottom: 6px; }
.busqueda-grupo h3 {
    margin: 10px 14px 2px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--tx-3);
}
.busqueda-resultado {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 14px; text-decoration: none; color: inherit;
    border-left: 2px solid transparent;
}
.busqueda-resultado:hover {
    background: var(--panel-2); border-left-color: var(--azul); text-decoration: none;
}
.busqueda-resultado-titulo { font-size: 13.5px; font-weight: 560; color: var(--tx); }
.busqueda-resultado-sub { font-size: 11.5px; color: var(--tx-3); }

@media (max-width: 720px) {
    .panel-busqueda { width: 100vw; max-width: 100vw; }
}

/* ============ 27. Vistas expansibles (norma: compacto por defecto) ============ */

/* Roles y permisos: cada módulo es un <details>; se abre solo el que se
   toca. El maestro sigue funcionando sin expandir (ver tessa_roles.js). */
#tessa .modulo-permisos > summary.modulo-cab {
    list-style: none; cursor: pointer;
}
#tessa .modulo-permisos > summary.modulo-cab::-webkit-details-marker { display: none; }
#tessa .modulo-permisos > summary.modulo-cab:hover { background: var(--panel); }
#tessa .modulo-flecha {
    flex: none; color: var(--tx-3); font-size: 11px; transition: transform .15s;
}
#tessa .modulo-permisos[open] > summary.modulo-cab .modulo-flecha { transform: rotate(180deg); }

/* Plantillas de roadmap: cada etapa es un <details>; solo se despliegan
   las tareas de la que se está revisando o editando. */
#tessa .etapa > summary.etapa-cab {
    list-style: none; cursor: pointer;
}
#tessa .etapa > summary.etapa-cab::-webkit-details-marker { display: none; }
#tessa .etapa > summary.etapa-cab:hover { background: var(--linea); }
#tessa .etapa-flecha {
    flex: none; color: var(--tx-3); font-size: 11px; transition: transform .15s;
}
#tessa .etapa[open] > summary.etapa-cab .etapa-flecha { transform: rotate(180deg); }
#tessa .etapa-acciones {
    padding: 9px 15px; border-bottom: 1px dashed var(--linea-2);
    display: flex; justify-content: flex-end; align-items: center;
    gap: 8px; flex-wrap: wrap;
}
/* Asignacion recursiva de etapa (pedido del dueno, 2026-09-24): agrupada
   visualmente aparte de Guardar/Eliminar etapa, ya que es una accion
   distinta (bulk sobre las tareas) y aditiva -- no toca el select por
   tarea que ya existia. */
#tessa .etapa-asignar-recursivo {
    display: flex; align-items: center; gap: 6px;
    padding-left: 8px; margin-left: 4px;
    border-left: 1px solid var(--linea-2);
}

/* Plantillas de roadmap: la tarjeta completa de cada plantilla también es
   un <details>, para anticipar el caso de varias plantillas a la vez. */
#tessa .plantilla > summary.plantilla-cab {
    list-style: none; cursor: pointer;
}
#tessa .plantilla > summary.plantilla-cab::-webkit-details-marker { display: none; }
#tessa .plantilla > summary.plantilla-cab:hover { background: var(--linea); }
#tessa .plantilla-flecha {
    flex: none; color: var(--tx-3); font-size: 11px; transition: transform .15s;
    align-self: center;
}
#tessa .plantilla[open] > summary.plantilla-cab .plantilla-flecha { transform: rotate(180deg); }

/* Roles: la tarjeta completa de cada rol también es un <details> (mismo
   criterio que .plantilla arriba) -- con 8 roles del sistema, tenerlos
   todos abiertos de una vez era la parte menos compacta de la pantalla,
   aunque sus módulos ya se compactaran uno por uno. */
#tessa .rol-tarjeta > summary.rol-cab {
    list-style: none; cursor: pointer;
}
#tessa .rol-tarjeta > summary.rol-cab::-webkit-details-marker { display: none; }
#tessa .rol-tarjeta > summary.rol-cab:hover { background: var(--panel-2); }
#tessa .rol-flecha {
    flex: none; color: var(--tx-3); font-size: 11px; transition: transform .15s;
    align-self: center;
}
#tessa .rol-tarjeta[open] > summary.rol-cab .rol-flecha { transform: rotate(180deg); }

/* Resultado de búsqueda recién abierto: un resalte breve para orientar,
   no una marca permanente. */
#tessa .usuario-fila:target summary,
#tessa tr:target {
    background: var(--azul-luz);
}

/* ============ 28. Menú principal agrupado (Cartera / Proyectos / HDs) ============ */
/* Cada grupo es un <details> que imita la altura y el trazo activo de un
   enlace suelto de .nav-menu; su contenido reutiliza .nav-desplegable pero
   alineado a la izquierda, porque .nav-desplegable normal (cuenta) cuelga
   del lado derecho de la barra. */
.nav-tessa .nav-menu-grupo { position: relative; }

.nav-tessa .nav-menu-grupo summary {
    position: relative;
    display: flex; align-items: center; gap: 5px;
    padding: 0 12px; height: 50px;
    color: var(--tx-2); font-size: 13.5px; font-weight: 550;
    white-space: nowrap; cursor: pointer; list-style: none;
    border-radius: 7px 7px 0 0;
    transition: color .12s, background .12s;
}
.nav-tessa .nav-menu-grupo summary::-webkit-details-marker { display: none; }
.nav-tessa .nav-menu-grupo summary:hover { color: var(--tx); background: var(--panel-2); }

.nav-tessa .nav-menu-grupo summary.activo { color: var(--azul); }
.nav-tessa .nav-menu-grupo summary.activo::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
    height: 2px; border-radius: 2px 2px 0 0;
    background: var(--azul);
}

.nav-tessa .nav-menu-flecha {
    font-size: 10px; color: var(--tx-3); transition: transform .15s;
}
.nav-tessa .nav-menu-grupo[open] > summary .nav-menu-flecha { transform: rotate(180deg); }
.nav-tessa .nav-menu-grupo[open] > summary { background: var(--panel-2); }

.nav-tessa .nav-desplegable-izq { left: 0; right: auto; }

@media (max-width: 980px) {
    .nav-tessa .nav-menu-grupo summary { height: 42px; }
}

/* ============ 29. Administración: agrupación visual ============ */
#tessa .admin-grupo { margin-bottom: 26px; }
#tessa .admin-grupo:last-child { margin-bottom: 0; }
#tessa .admin-grupo-titulo {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--tx-3);
    margin: 0 0 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--linea);
}

/* ============ 30. Historial paginado (portal: Mis solicitudes) ============ */
#tessa .historial > summary.historial-cab {
    list-style: none; cursor: pointer;
}
#tessa .historial > summary.historial-cab::-webkit-details-marker { display: none; }
#tessa .historial > summary.historial-cab:hover { background: var(--panel); }
#tessa .historial-flecha {
    flex: none; color: var(--tx-3); font-size: 11px; transition: transform .15s;
}
#tessa .historial[open] > summary.historial-cab .historial-flecha { transform: rotate(180deg); }

#tessa .paginacion {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 14px 0 2px;
}
#tessa .paginacion-estado { color: var(--tx-3); font-size: 13px; }
#tessa .paginacion .boton.deshabilitado {
    opacity: .4; pointer-events: none;
}

/* ============ 31. Modal de bitácora (listado completo, "ver más") ============ */
#tessa dialog.modal-bitacora {
    width: min(860px, 92vw);
    max-height: 82vh;
    padding: 0;
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--panel);
    color: var(--tx);
}
#tessa dialog.modal-bitacora::backdrop {
    background: rgba(10, 12, 16, .55);
}
#tessa dialog.modal-bitacora .modal-cab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--linea);
    position: sticky; top: 0;
    background: var(--panel);
}
#tessa dialog.modal-bitacora .modal-cab h3 { margin: 0; }
#tessa dialog.modal-bitacora .modal-cerrar {
    border: none; background: none; cursor: pointer;
    color: var(--tx-3); font-size: 15px; line-height: 1;
    padding: 4px 6px; border-radius: 6px;
}
#tessa dialog.modal-bitacora .modal-cerrar:hover { background: var(--panel-2); color: var(--tx); }
#tessa dialog.modal-bitacora .modal-cuerpo {
    padding: 14px 18px 18px;
    overflow-y: auto;
    max-height: calc(82vh - 54px);
}

/* ============ 32. Avisos ============ */

/* "Nuevo aviso" es un <details> que imita la cabecera clicable ya usada
   en roles/plantillas (sección 27), envolviendo una tarjeta entera en vez
   de una fila. */
/* .tarjeta-plegable: alias genérico de .aviso-detalle para cualquier
   tarjeta-con-<details> que no sea un aviso (p.ej. el buscador de
   admin/usuarios, 2026-09-26) -- mismo comportamiento, nombre neutral. */
#tessa details.aviso-detalle, #tessa details.tarjeta-plegable { padding: 0; }
#tessa details.aviso-detalle > summary.tarjeta-cab, #tessa details.tarjeta-plegable > summary.tarjeta-cab {
    cursor: pointer; list-style: none;
}
#tessa details.aviso-detalle > summary.tarjeta-cab::-webkit-details-marker,
#tessa details.tarjeta-plegable > summary.tarjeta-cab::-webkit-details-marker { display: none; }
#tessa details.aviso-detalle > summary.tarjeta-cab:hover,
#tessa details.tarjeta-plegable > summary.tarjeta-cab:hover { background: var(--panel-2); }
#tessa details.aviso-detalle[open] > summary.tarjeta-cab,
#tessa details.tarjeta-plegable[open] > summary.tarjeta-cab { border-bottom: 1px solid var(--linea); }
#tessa details.aviso-detalle .tarjeta-cuerpo, #tessa details.tarjeta-plegable .tarjeta-cuerpo { padding: 16px; }

/* Cada aviso de Bandeja/Guardados/Búsqueda es también un <details>: el
   contenido (cuerpo) debe poder leerse siempre, esté leído o no — nunca
   queda "atrapado" detrás de un estado, que era el bug reportado. */
#tessa details.aviso-item {
    border-radius: var(--r);
    padding: 0; margin-bottom: 10px;
    overflow: hidden;
}
#tessa details.aviso-item:last-child { margin-bottom: 0; }

/* No leído: mismo tratamiento fuerte que .solicitud-triage (sección 20) —
   un aviso nuevo debe notarse igual de bien que una solicitud sin atender. */
#tessa details.aviso-item.aviso-no-leido {
    border: 1px solid var(--azul-bor);
    border-left: 3px solid var(--azul);
    background: var(--azul-luz);
}

/* Leído pero fijado, o guardado: fila discreta, sin marca de "nuevo". */
#tessa details.aviso-item.aviso-fijado-discreto {
    border: 1px solid var(--linea);
    background: var(--panel);
}

#tessa .aviso-item-cab {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    padding: 12px 15px; margin: 0;
    cursor: pointer; list-style: none;
}
#tessa .aviso-item-cab::-webkit-details-marker { display: none; }
#tessa details.aviso-item[open] > summary.aviso-item-cab { border-bottom: 1px solid var(--linea-2); }
#tessa .aviso-item-cab h3 {
    margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 14.5px;
}
#tessa .aviso-item-cuerpo { padding: 12px 15px 15px; }

/* Aviso destacado: el que se abrió puntualmente desde una notificación
   (?ver=ID). Siempre visible, siempre expandido — no es un <details>. */
#tessa .aviso-destacado-tarjeta {
    border: 1px solid var(--azul-bor);
    border-left: 3px solid var(--azul);
    background: var(--azul-luz);
    border-radius: var(--r);
    margin-bottom: 16px;
}
#tessa .aviso-destacado-tarjeta .tarjeta-cab { background: transparent; border-bottom: 1px solid var(--azul-bor); }

/* Tarjeta "Avisos del proyecto" en la ficha del proyecto: lista compacta,
   sin el tratamiento fuerte de la Bandeja (ahí ya alcanza con el punto). */
#tessa .lista-avisos-proyecto { display: flex; flex-direction: column; }
#tessa .aviso-fila {
    padding: 9px 0; border-bottom: 1px dashed var(--linea-2);
    display: flex; flex-direction: column; gap: 2px;
}
#tessa .aviso-fila:last-child { border-bottom: none; }
#tessa .aviso-fila-txt { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#tessa .aviso-fila.no-leida .aviso-fila-txt strong { color: var(--azul-osc); }

/* ============ 33. Listas dobles (componente genérico) ============ */

/* Primer uso: gestionar miembros de una empresa (clientes.empresa_id) —
   dos <select multiple> + botones para mover opciones entre ellos, ver
   inicializarListasDoble() en tessa.js. Pensado para reusarse en
   cualquier otro "elige un grupo de estos" que aparezca después. */
#tessa .listas-doble {
    display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap;
}
#tessa .listas-doble-col {
    flex: 1 1 240px; min-width: 220px;
    display: flex; flex-direction: column; gap: 6px;
}
#tessa .listas-doble-col label {
    font-size: 13px; font-weight: 600; color: var(--tx-2);
}
#tessa .listas-doble-col select {
    flex: 1;
    border: 1px solid var(--linea); border-radius: var(--r);
    padding: 6px; font-size: 14px; background: var(--panel);
}
#tessa .listas-doble-botones {
    flex: 0 0 auto; align-self: center;
    display: flex; flex-direction: column; gap: 8px;
}
#tessa .listas-doble-botones .boton { white-space: nowrap; }


/* ============ 34. Constructor de cotización (imprimible) ============ */

#tessa .constructor-cotizacion {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    align-items: start;
}
#tessa .constructor-cotizacion > * { min-width: 0; }
@media (max-width: 900px) {
    #tessa .constructor-cotizacion { grid-template-columns: 1fr; }
    #tessa .cc-controles { position: static; max-height: none; }
}

/* El panel de controles se queda a la vista mientras se hace scroll en la
   vista previa, y nunca crece más que el alto de la pantalla -- con muchas
   etapas/tareas, la lista se desplaza SOLA dentro de la tarjeta. */
#tessa .cc-controles {
    /* top = altura real del navbar sticky (~50px, .nav-menu a) + 12px de
       aire -- con solo 12px el panel quedaba tapado por el navbar al
       hacer scroll, cortando visualmente la parte de arriba. */
    position: sticky; top: 62px;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
}

#tessa .cc-resumen-fijo {
    position: sticky; top: 0; z-index: 1;
    margin: -16px -16px 12px; padding: 10px 16px;
    background: var(--panel-2); border-bottom: 1px solid var(--linea);
    font-size: 13px;
}
#tessa .cc-resumen-fijo strong { font-size: 14.5px; }

#tessa .cc-fila {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 4px; border-bottom: 1px solid var(--linea);
    font-size: 13px; cursor: pointer;
}
#tessa .cc-fila:last-child { border-bottom: none; }
#tessa .cc-fila-etapa { font-weight: 600; }
#tessa .cc-fila-tarea { padding-left: 20px; color: var(--tx-2); font-weight: 400; }
#tessa .cc-fila input[type="checkbox"] { flex: none; width: 15px; height: 15px; }
/* Especificidad reforzada (#tessa .cc-fila .clase) a propósito: la regla
   general "#tessa input[type=number] { width:100% }" (sección de
   formularios, arriba en este archivo) tiene MÁS especificidad que un
   simple "#tessa .cc-precio" (ID + atributo de tipo gana a ID + una sola
   clase), así que sin este refuerzo el navegador ignora el width:80px de
   abajo y el input de precio se estira a 100% del ancho de la fila,
   aplastando la descripción a una columna de un carácter (bug reportado
   2026-09-22 en "Generar cotización desde el roadmap"). */
#tessa .cc-fila .cc-desc { flex: 1; min-width: 0; overflow-wrap: break-word; }
#tessa .cc-fila .cc-desc-input {
    flex: 1; min-width: 0; border: 1px solid var(--linea-2); border-radius: 6px;
    padding: 5px 8px; font-size: 13px;
}
#tessa .cc-fila .cc-precio {
    flex: none; width: 80px; text-align: right;
    border: 1px solid var(--linea-2); border-radius: 6px;
    padding: 5px 6px; font-size: 13px;
}
#tessa .cc-etapa { margin-bottom: 4px; }
#tessa .cc-extra { margin-top: 6px; }
#tessa .cc-quitar {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--linea-2); background: var(--panel);
    color: var(--tx-3); cursor: pointer; font-size: 14px; line-height: 1;
}
#tessa .cc-quitar:hover { color: var(--rojo); border-color: var(--rojo); }

/* --cc-acento: color de marca de InnovADN para el PDF de cotización.
   PENDIENTE DE CONFIRMAR con el dueño (logo + tono exacto de rojo);
   por ahora es un rojo neutro de arranque, fácil de cambiar en un solo
   lugar en cuanto haya una referencia oficial. Todo lo demás del diseño
   (jerarquía, tipografía, agrupado por etapa) ya no depende de ese valor
   exacto. */
#tessa .cc-preview {
    --cc-acento: #B3122E;
    --cc-acento-suave: #FBE9EC;
    background: #fff; border: 1px solid var(--linea);
    border-top: 5px solid var(--cc-acento);
    border-radius: var(--r); box-shadow: var(--s2);
    padding: 26px 26px 20px;
}
#tessa .cc-preview-cab {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; border-bottom: 2px solid var(--cc-acento);
    padding-bottom: 14px; margin-bottom: 18px;
}
#tessa .cc-marca { display: flex; flex-direction: column; gap: 4px; }
#tessa .cc-logo { max-height: 46px; max-width: 220px; object-fit: contain; }
#tessa .cc-logo-texto {
    font-size: 21px; font-weight: 800; letter-spacing: -.01em;
    color: var(--cc-acento);
}
#tessa .cc-preview-sub { color: var(--tx-2); font-size: 12.5px; font-weight: 600; margin-top: 1px; }
#tessa .cc-preview-meta { text-align: right; font-size: 12.5px; color: var(--tx-2); line-height: 1.7; }
#tessa .cc-preview-meta div:first-child { font-weight: 650; color: var(--tx); }

#tessa .cc-preview-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
#tessa .cc-preview-tabla th {
    padding: 7px 6px; text-align: left;
    border-bottom: 2px solid var(--cc-acento);
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--tx-2);
}
#tessa .cc-preview-tabla td { padding: 7px 6px; border-bottom: 1px solid var(--linea); text-align: left; }
#tessa .cc-preview-tabla .numerico { text-align: right; font-variant-numeric: tabular-nums; }
#tessa .cc-preview-tabla tfoot td {
    border-top: 2px solid var(--cc-acento); border-bottom: none;
    font-weight: 800; font-size: 15px; padding-top: 10px;
}

/* Cabecera de cada etapa dentro de la tabla impresa: la jerarquía visual
   que pidió el dueño explícitamente ("si genero una cotización con pasos,
   quisiera que tenga buena jerarquía visual"). */
#tessa .cc-fila-etapa-cab td {
    background: var(--cc-acento-suave);
    border-bottom: 1px solid var(--cc-acento);
    font-weight: 700; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .02em;
    padding-top: 10px; padding-bottom: 10px;
}
#tessa .cc-num-etapa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-right: 7px;
    border-radius: 50%; background: var(--cc-acento); color: #fff;
    font-size: 10.5px; font-weight: 800;
}
#tessa .cc-fila-subtotal td {
    font-size: 11.5px; color: var(--tx-2); font-style: italic;
    border-bottom: 1px dashed var(--linea-2);
    padding-top: 3px; padding-bottom: 10px;
}

#tessa .cc-vacio { color: var(--tx-3); font-style: italic; }
#tessa .cc-preview-nota { margin-top: 16px; font-size: 11.5px; color: var(--tx-3); line-height: 1.5; }
#tessa .cc-preview-pie {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--linea);
    font-size: 11px; color: var(--tx-3);
}

#tessa .cc-acciones {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 16px;
}
#tessa .cc-total-flotante { font-weight: 700; font-size: 14px; }

/* Barra superior sticky: mismo botón de imprimir que el de abajo (los dos
   quedan enlazados por JS a la misma acción), para no tener que bajar
   hasta el final con roadmaps largos. */
#tessa .cc-barra-superior {
    position: sticky; top: 62px; z-index: 5;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; padding: 10px 16px;
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: var(--r); box-shadow: var(--s1);
}
@media print {
    #tessa .cc-barra-superior { display: none !important; }
}

@media print {
    #tessa .constructor-cotizacion { display: block; }
    /* Sin esto, Chrome/Firefox imprimen SIN colores de fondo por defecto
       -- se perdería el acento de marca, el tinte de las cabeceras de
       etapa y el circulito numerado. Es imprescindible para que el PDF se
       vea como se diseñó, no solo en pantalla. */
    #tessa .cc-preview, #tessa .cc-preview * {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    #tessa .cc-preview {
        border: none; border-top: 5px solid var(--cc-acento);
        box-shadow: none; padding: 14px 0 0;
    }
}
/* ============ 35. Manual del administrador ============ */

#tessa .manual-diseno {
    display: grid; grid-template-columns: 240px 1fr; gap: 18px;
    align-items: start;
}
@media (max-width: 780px) {
    #tessa .manual-diseno { grid-template-columns: 1fr; }
    #tessa .manual-indice { position: static; max-height: none; }
}

#tessa .manual-indice {
    /* mismo ajuste que .cc-controles: top tenía que despejar el navbar
       sticky (~50px), no solo 12px. */
    position: sticky; top: 62px;
    display: flex; flex-direction: column; gap: 2px;
    max-height: calc(100vh - 74px); overflow-y: auto;
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: var(--r); box-shadow: var(--s1);
    padding: 8px;
}
#tessa .manual-indice-item {
    display: block; padding: 8px 10px; border-radius: 6px;
    font-size: 13px; color: var(--tx-2); text-decoration: none;
    transition: background .12s, color .12s;
}
#tessa .manual-indice-item:hover { background: var(--panel-2); color: var(--tx); }
#tessa .manual-indice-item.activo { background: var(--azul-luz); color: var(--azul); font-weight: 600; }

#tessa .manual-contenido h2 { font-size: 17px; margin: 22px 0 8px; }
#tessa .manual-contenido h2:first-child { margin-top: 0; }
#tessa .manual-contenido h3 { font-size: 14.5px; margin: 16px 0 6px; }
#tessa .manual-contenido p { line-height: 1.6; margin: 0 0 10px; color: var(--tx-2); }
#tessa .manual-contenido ul, #tessa .manual-contenido ol { line-height: 1.6; color: var(--tx-2); margin: 0 0 12px; padding-left: 20px; }
#tessa .manual-contenido li { margin-bottom: 4px; }
#tessa .manual-contenido code {
    background: var(--panel-2); border: 1px solid var(--linea);
    border-radius: 4px; padding: 1px 5px; font-size: 12.5px;
    font-family: 'SFMono-Regular', Consolas, monospace;
}

/* Caja "idea clave" -- mismo lenguaje visual que .mensaje-aviso/exito
   (fondo + borde de color), en azul porque este manual la usa para
   resaltar el concepto de "pedirle una decision al cliente" (mismo
   azul = decision que ya usa el resto de Tessa). Pedido del dueno,
   2026-09-23: que el manual de cotizaciones "se alimente en serio". */
#tessa .manual-contenido .idea-clave {
    padding: 12px 16px;
    background: var(--azul-luz); border: 1px solid var(--azul-bor);
    border-radius: var(--r);
    margin: 2px 0 18px;
    font-size: 13.5px; line-height: 1.6; color: var(--tx);
}
#tessa .manual-contenido .idea-clave p { color: var(--tx); margin: 0; }
#tessa .manual-contenido .idea-clave strong { color: var(--azul-osc); }

/* Lista de guia rapida ("que camino uso"): mas compacta que un <ul>
   normal del manual, pensada para escanear en 2 segundos. */
#tessa .manual-contenido .guia-rapida {
    background: var(--panel-2); border: 1px solid var(--linea);
    border-radius: var(--r); padding: 12px 16px; margin: 0 0 18px;
}
#tessa .manual-contenido .guia-rapida ul { margin: 0; }
#tessa .manual-contenido .guia-rapida li { margin-bottom: 6px; }
#tessa .manual-contenido .guia-rapida li:last-child { margin-bottom: 0; }

#tessa .manual-mapa { margin: 14px 0 18px; }
#tessa .manual-mapa-marco {
    display: flex; align-items: center; justify-content: center;
    min-height: 160px; padding: 24px;
    background: var(--panel-2); border: 1.5px dashed var(--linea-2);
    border-radius: var(--r); text-align: center;
}
#tessa .manual-mapa-vacio { color: var(--tx-3); font-size: 13px; line-height: 1.6; }
#tessa .manual-mapa-img { max-width: 100%; border-radius: var(--r); }
#tessa .manual-mapa-prompt { margin-top: 8px; font-size: 12.5px; }
#tessa .manual-mapa-prompt summary { cursor: pointer; color: var(--azul); }
#tessa .manual-mapa-prompt pre {
    white-space: pre-wrap; background: var(--panel-2);
    border: 1px solid var(--linea); border-radius: 6px;
    padding: 10px 12px; margin-top: 8px; font-size: 12px;
    line-height: 1.5; color: var(--tx-2);
}


/* ============ 36. QA Práctico -- checklist interactivo ============ */

#tessa .qa-progreso-barra {
    height: 8px; border-radius: 999px; background: var(--linea);
    overflow: hidden; margin: 10px 0 4px;
}
#tessa .qa-progreso-relleno {
    height: 100%; background: var(--verde); width: 0%;
    transition: width .2s;
}
#tessa .qa-progreso-texto { font-size: 12.5px; color: var(--tx-3); margin: 0 0 16px; }

#tessa .qa-clave-compartida {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
    border: 1px solid var(--ambar-bor); background: var(--ambar-luz);
    border-radius: var(--r-sm); padding: 12px 16px; margin: 0 0 14px;
}
#tessa .qa-clave-compartida code {
    background: var(--panel); border-radius: 4px; padding: 5px 12px;
    font-size: 14px; font-weight: 700; letter-spacing: .01em;
}

#tessa .qa-usuarios {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
#tessa .qa-grupo-titulo {
    grid-column: 1 / -1; margin: 4px 0 -2px; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--tx-3);
}
#tessa .qa-grupo-titulo:first-child { margin-top: 0; }
#tessa .qa-usuario {
    border: 1px solid var(--linea); border-radius: var(--r-sm);
    padding: 12px 14px; background: var(--panel-2);
}
#tessa .qa-usuario-colaborador { border: 1px solid var(--azul-bor); border-left: 3px solid var(--azul); background: var(--azul-luz); }
#tessa .qa-usuario-cliente { border: 1px solid var(--verde-bor); border-left: 3px solid var(--verde); background: var(--verde-luz); }
#tessa .qa-usuario h4 { margin: 0 0 8px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
#tessa .qa-campo { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
#tessa .qa-campo:last-child { margin-bottom: 0; }
#tessa .qa-campo label { flex: none; width: 50px; color: var(--tx-3); }
#tessa .qa-campo code {
    flex: 1; min-width: 0; overflow-wrap: anywhere;
    background: var(--panel); border-radius: 4px; padding: 2px 6px; font-size: 12.5px;
}
#tessa .qa-campo .boton { flex: none; padding: 3px 8px; font-size: 12px; }

#tessa .tarjeta-acento-morado { border-top: 3px solid var(--morado); }
#tessa .qa-empresas {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
#tessa .qa-empresa {
    border: 1px solid var(--morado-bor); border-left: 3px solid var(--morado);
    border-radius: var(--r-sm); padding: 12px 14px; background: var(--morado-luz);
}
#tessa .qa-empresa h4 { margin: 0 0 8px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
#tessa .qa-empresa .qa-campo label { width: 66px; }
#tessa .qa-campo-nota { align-items: flex-start; }
#tessa .qa-campo-nota label { margin-top: 3px; }
#tessa .qa-campo-nota .boton { flex: none; margin-top: 1px; }
#tessa .qa-campo-nota .qa-nota-texto {
    flex: 1; min-width: 0; overflow-wrap: anywhere;
    background: var(--panel); border-radius: 4px; padding: 4px 8px;
    font-size: 12.5px; line-height: 1.45; color: var(--tx-2);
}

#tessa .qa-seccion > summary.qa-cab {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
}
#tessa .qa-seccion > summary.qa-cab::-webkit-details-marker { display: none; }
#tessa .qa-seccion > summary.qa-cab:hover { background: var(--panel-2); }
#tessa .qa-flecha { flex: none; color: var(--tx-3); font-size: 11px; transition: transform .15s; }
#tessa .qa-seccion[open] > summary.qa-cab .qa-flecha { transform: rotate(180deg); }

#tessa .qa-lista { list-style: none; margin: 0; padding: 0; }
#tessa .qa-lista li { border-bottom: 1px dashed var(--linea-2); padding: 9px 0; }
#tessa .qa-lista li:last-child { border-bottom: none; }
#tessa .qa-lista label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; }
#tessa .qa-lista input[type="checkbox"] { margin-top: 2px; }
#tessa .qa-lista label:has(input:checked) { color: var(--tx-3); text-decoration: line-through; }

/* ============ 37. Sugerencias de roadmap ============ */

#tessa .sugerencias-lista { margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
#tessa .sugerencia-caja {
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    background: var(--panel-2);
}
#tessa .sugerencia-caja.pendiente { border-left: 3px solid var(--ambar); }
#tessa .sugerencia-caja.aprobada { border-left: 3px solid var(--verde); }

/* ===================================================================
   36. Navegación flotante de la ficha de proyecto
   Menú flotante para saltar entre las secciones de proyectos_ver.php.
   Los anclajes (id="sec-...") llevan scroll-margin-top para no quedar
   tapados bajo el navbar sticky (.nav-tessa).
   =================================================================== */
#tessa [id^="sec-"] { scroll-margin-top: 84px; }

/* Jerarquia visual entre los ~18 bloques de un proyecto, agrupados en
   4 zonas (Seguimiento / Soporte / Finanzas / Detalles tecnicos).
   Pedido del dueno, 2026-09-23: "deberian tener una marcada jerarquia
   visual, levemente mas espacio, permitir ubicarse visualmente" --
   antes cada .tarjeta tenia el mismo peso y el mismo margen de 16px
   sin importar si era un modulo grande (Roadmap) o un detalle chico
   (Licencias), lo que hacia sentir la pagina como una lista plana. */
#tessa .proyecto-secciones .tarjeta,
#tessa .proyecto-secciones .bloque,
#tessa .proyecto-secciones > .pagina-cab {
    margin-bottom: 22px;
}
#tessa .grupo-divisor {
    margin: 40px 0 18px;
    padding-top: 14px;
    border-top: 2px solid var(--linea-2);
}
#tessa .proyecto-secciones .grupo-divisor:first-child { margin-top: 0; padding-top: 0; border-top: none; }
#tessa .grupo-etiqueta {
    display: block;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--tx-3);
}

#tessa .nav-proyecto-flotante {
    position: fixed;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
}
/* Más llamativo a propósito (pedido explícito): antes era una píldora
   blanca discreta y pasaba desapercibida -- ahora usa el mismo acento
   sólido que .btn-primario para que se note de un vistazo. */
#tessa .npf-boton {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 16px;
    background: var(--azul); border: 1px solid var(--azul);
    border-radius: 999px; box-shadow: var(--s2);
    font-family: var(--fuente); font-size: 13.5px; font-weight: 650; color: #fff;
    cursor: pointer;
}
#tessa .npf-boton:hover { background: var(--azul-osc); border-color: var(--azul-osc); }
#tessa .npf-boton-icono { font-size: 14px; line-height: 1; color: #fff; }

/* Aviso flotante de cuenta demo -- solo se muestra a la cuenta compartida
   de la demo pública (2026-09-26, pedido del dueño) para que un visitante
   no crea que le escribe a un equipo real sin saberlo. */
.aviso-demo-flotante {
    position: fixed; left: 0; right: 0; bottom: 0; width: 100%; z-index: 45;
    display: flex; gap: 12px; align-items: center; justify-content: center;
    padding: 12px 20px;
    background: #1c1a17; border: none; border-top: 3px solid var(--ambar);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
}
.aviso-demo-flotante-icono { flex: none; font-size: 18px; line-height: 1; }
.aviso-demo-flotante > div { max-width: 720px; }
.aviso-demo-flotante strong { display: inline; font-size: 13px; color: #fff; margin-right: 6px; }
.aviso-demo-flotante p { display: inline; margin: 0; font-size: 12.5px; color: #e8e3da; line-height: 1.4; }
@media (max-width: 700px) {
    .aviso-demo-flotante { align-items: flex-start; text-align: left; padding: 12px 16px; }
    .aviso-demo-flotante strong { display: block; margin-bottom: 3px; }
    .aviso-demo-flotante p { display: block; }
}
#tessa .npf-panel {
    display: none;
    margin-top: 8px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    width: 220px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--s1);
    padding: 10px 0;
}
#tessa .nav-proyecto-flotante.npf-abierto .npf-panel { display: block; }
#tessa .npf-titulo {
    margin: 0; padding: 4px 14px 8px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--tx-3);
}
#tessa .npf-panel a {
    display: block;
    padding: 7px 14px;
    font-size: 13px; color: var(--tx-2);
    border-left: 2px solid transparent;
}
#tessa .npf-panel a:hover { color: var(--tx); background: var(--panel-2); text-decoration: none; }
#tessa .npf-panel a.activo { color: var(--azul); border-left-color: var(--azul); background: var(--azul-luz); }

/* Sub-encabezados de grupo dentro del panel (pedido del dueno,
   2026-09-23: "incluso con el menu flotante, me toma unos segundos
   encontrar la seccion" -- una lista plana de 18 links no ayudaba a
   ubicarse). Mismos 4 grupos que .grupo-divisor en el cuerpo de la
   pagina, para que el mapa mental sea el mismo en los dos lugares. */
#tessa .npf-grupo {
    margin: 10px 0 2px; padding: 6px 14px 2px;
    font-size: 10.5px; font-weight: 650; text-transform: uppercase;
    letter-spacing: .05em; color: var(--tx-3);
    border-top: 1px solid var(--linea);
}
#tessa .npf-grupo:first-of-type { margin-top: 0; border-top: none; }

@media (max-width: 1180px) {
    #tessa .nav-proyecto-flotante { display: none; }
}
@media print {
    #tessa .nav-proyecto-flotante { display: none !important; }
}

/* ============ 38. Mantenimiento y pruebas ============ */

#tessa .zona-peligro { border-color: var(--rojo-bor); }
#tessa .zona-peligro > .tarjeta-cab { background: var(--rojo-luz); border-bottom-color: var(--rojo-bor); }
#tessa .form-confirmar-zona-peligro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 10px; }
#tessa .form-confirmar-zona-peligro label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13px; color: var(--tx-2);
}
#tessa .form-confirmar-zona-peligro input[type="text"],
#tessa .form-confirmar-zona-peligro input[type="email"] {
    min-width: 220px;
}
#tessa .btn-peligro:disabled { opacity: .45; cursor: not-allowed; }

/* ============ 39. Plantillas de texto (chips sugeridos) ============ */

#tessa .plantillas-sugeridas {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 6px;
}
#tessa .chip-plantilla {
    font-size: 12px; font-weight: 500;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px dashed var(--linea-2);
    background: var(--panel-2); color: var(--tx-2);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
#tessa .chip-plantilla:hover {
    background: var(--azul-luz); color: var(--azul-osc); border-color: var(--azul-bor);
}

/* ============ 40. Mapa visual de Tessa (mapa.php) ============ */

#tessa .mapa-lienzo {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Filas "auto" (antes 1fr 1fr 1fr): con filas iguales, una tarjeta
       alta (Administración) estiraba TODAS las filas y dejaba un vacío
       enorme alrededor del hub. Ahora cada fila mide lo que su contenido,
       y las líneas se trazan por JS midiendo las tarjetas (ver mapa.php). */
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "cartera . proyectos"
        ". hub ."
        "comunicaciones . administracion";
    align-items: center;
    justify-items: center;
    gap: 8px 16px;
    max-width: 980px;
    margin: 32px auto 0;
}
#tessa .mapa-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
#tessa .mapa-linea {
    stroke: var(--linea-2);
    stroke-width: 2.5;
    stroke-dasharray: 7 7;
}
/* Las tarjetas de arriba se apoyan contra el hub desde arriba y las de
   abajo desde abajo: el mapa queda compacto en vez de repartido. */
#tessa .mapa-pos-arriba { align-self: end; }
#tessa .mapa-pos-abajo  { align-self: start; }
#tessa .mapa-hub { margin: 28px 0; }
#tessa .mapa-linea-azul    { stroke: var(--azul-bor); }
#tessa .mapa-linea-verde   { stroke: var(--verde-bor); }
#tessa .mapa-linea-ambar   { stroke: var(--ambar-bor); }
#tessa .mapa-linea-morado  { stroke: var(--morado-bor); }

#tessa .mapa-nodo,
#tessa .mapa-area {
    position: relative;
    z-index: 1;
}
#tessa .mapa-hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: var(--azul-osc);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--s3);
    transition: transform .15s ease, box-shadow .15s ease;
}
#tessa .mapa-hub:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(16, 20, 32, .28);
}
#tessa .mapa-hub .mapa-area-icono { width: 26px; height: 26px; }
#tessa .mapa-hub-txt { font-size: 13px; font-weight: 600; letter-spacing: .02em; }

#tessa .mapa-area {
    width: 100%;
    max-width: 260px;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    box-shadow: var(--s2);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#tessa .mapa-area-cab {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--r);
    padding: 4px;
    margin: -4px;
    transition: background .12s ease;
}
a.mapa-area-cab:hover { background: var(--panel-2); }
#tessa .mapa-area-cab-sin-ruta { cursor: default; }
#tessa .mapa-area-icono {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    padding: 5px;
    box-sizing: border-box;
}
#tessa .mapa-area-nombre { font-size: 15px; font-weight: 600; color: var(--tx); }

#tessa .mapa-area-azul    .mapa-area-icono { background: var(--azul-luz);   color: var(--azul-osc); }
#tessa .mapa-area-verde   .mapa-area-icono { background: var(--verde-luz);  color: var(--verde); }
#tessa .mapa-area-ambar   .mapa-area-icono { background: var(--ambar-luz);  color: var(--ambar); }
#tessa .mapa-area-morado  .mapa-area-icono { background: var(--morado-luz); color: var(--morado); }

#tessa .mapa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 2px;
    border-top: 1px solid var(--linea);
}
#tessa .mapa-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tx-2);
    background: var(--panel-2);
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: 5px 11px;
    text-decoration: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
#tessa .mapa-area-azul   .mapa-chip:hover { background: var(--azul-luz);   color: var(--azul-osc); border-color: var(--azul-bor); }
#tessa .mapa-area-verde  .mapa-chip:hover { background: var(--verde-luz);  color: var(--verde);    border-color: var(--verde-bor); }
#tessa .mapa-area-ambar  .mapa-chip:hover { background: var(--ambar-luz);  color: var(--ambar);    border-color: var(--ambar-bor); }
#tessa .mapa-area-morado .mapa-chip:hover { background: var(--morado-luz); color: var(--morado);   border-color: var(--morado-bor); }

#tessa .mapa-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--rojo);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
#tessa .mapa-badge-cab { position: absolute; top: 12px; right: 12px; }

/* Áreas con muchos atajos (hoy: Administración) -- más anchas, y sus
   chips agrupados bajo un subtítulo pequeño en vez de una sola nube. */
#tessa .mapa-area-amplia { max-width: 330px; }
#tessa .mapa-grupo { border-top: 1px solid var(--linea); padding-top: 6px; }
#tessa .mapa-grupo + .mapa-grupo { border-top-style: dashed; }
#tessa .mapa-grupo .mapa-chips { border-top: none; padding-top: 0; }
#tessa .mapa-grupo-titulo {
    display: block;
    margin: 0 0 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tx-3);
}
#tessa .mapa-area-morado .mapa-grupo-titulo { color: var(--morado); }

@media (max-width: 860px) {
    #tessa .mapa-svg { display: none; }
    #tessa .mapa-lienzo {
        display: flex;
        flex-direction: column;
        min-height: 0;
        gap: 14px;
    }
    #tessa .mapa-area { max-width: none; }
    #tessa .mapa-hub { width: 84px; height: 84px; margin: 0 auto; }
}

/* ============ 41. Bandeja de eventos importantes (tablero) ============ */

#tessa .tarjeta-eventos-importantes { border-color: var(--azul-bor); }
#tessa .tarjeta-eventos-importantes > .tarjeta-cab {
    background: var(--azul-luz);
    border-bottom-color: var(--azul-bor);
}
#tessa .tarjeta-eventos-importantes > .tarjeta-cab .nota { margin: 0; color: var(--azul-osc); }

#tessa .lista-eventos-importantes {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}
#tessa .lista-eventos-importantes li {
    padding: 8px 16px;
    font-size: 13.5px;
    color: var(--tx);
    border-bottom: 1px solid var(--linea);
}
#tessa .lista-eventos-importantes li:last-child { border-bottom: none; }
#tessa .lista-eventos-importantes li::before {
    content: "•";
    color: var(--azul);
    margin-right: 8px;
    font-weight: 700;
}
#tessa .lista-eventos-importantes a { color: var(--tx); text-decoration: none; }
#tessa .lista-eventos-importantes a:hover { color: var(--azul); text-decoration: underline; }

/* ============ 42. Entrevistas: asistente y cola de revisión ============ */
/* La cola de revisión (entrevistas_cola.php, entrevistas_detalle.php) no
   necesita nada nuevo: reutiliza .tarjeta, .etiqueta, tabla, .vacio, tal
   como ya existen. Lo de acá es solo para el asistente paso a paso
   (entrevistas_wizard.php) y el informe imprimible (entrevistas_informe.php).

   El asistente es un reskin del prototipo aislado
   innovadn-entrevistador (backlog), integrado el 2026-09-24: misma
   estructura de panel partido, íconos, barra de progreso, tarjeta-radio
   y resumen de revisión -- pero con los tokens de color/tipografía de
   Tessa en vez de los propios del prototipo (crema/navy/púrpura y
   Fraunces+Work Sans). Los inputs/selects/textareas dentro del
   asistente NO llevan estilo propio: heredan el de Tessa (sección de
   formularios, arriba) con solo .campo-ent-* controlando el layout que
   los envuelve -- el prefijo "campo-ent" evita chocar con el .campo
   genérico que ya usa el resto del sistema. */

#tessa .asistente-entrevista { margin: 0 -22px; }

#tessa .asistente__barra {
    position: sticky; top: 0; z-index: 40;
    background: var(--panel); border-bottom: 1px solid var(--linea);
    display: flex; align-items: center; gap: 24px; padding: 14px 28px;
}
#tessa .asistente__marca { font-weight: 700; font-size: 14px; color: var(--tx); flex: none; }
#tessa .asistente__progreso { flex: 1; }
#tessa .asistente__progreso-texto { font-size: 12px; color: var(--tx-3); margin-bottom: 5px; }
#tessa .asistente__progreso-barra { height: 5px; border-radius: 999px; background: var(--linea-2); overflow: hidden; }
#tessa .asistente__progreso-relleno { height: 100%; width: 14.28%; background: var(--azul); border-radius: 999px; transition: width .35s ease; }
#tessa .asistente__salir { flex: none; font-size: 12.5px; color: var(--tx-3); text-decoration: none; border: 1px solid var(--linea); border-radius: 999px; padding: 7px 14px; }
#tessa .asistente__salir:hover { border-color: var(--tx); color: var(--tx); }

#tessa .paso { display: none; min-height: 62vh; }
#tessa .paso.esta-activo { display: grid; grid-template-columns: 340px 1fr; }

#tessa .paso__visual { color: #fff; padding: 44px 36px; display: flex; flex-direction: column; justify-content: space-between; }
#tessa .paso__visual--azul { background: linear-gradient(160deg, var(--azul) 0%, var(--azul-osc) 100%); }
#tessa .paso__visual--morado { background: linear-gradient(160deg, var(--morado) 0%, #3c1f52 100%); }
#tessa .paso__visual--pizarra { background: linear-gradient(160deg, var(--pizarra) 0%, var(--pizarra-osc) 100%); }

#tessa .paso__icono { width: 46px; height: 46px; margin-bottom: 22px; }
#tessa .paso__icono svg { width: 100%; height: 100%; }
#tessa .paso__numero { font-size: 12px; letter-spacing: 1.5px; color: rgba(255,255,255,.6); margin-bottom: 8px; }
#tessa .paso__titulo { color: #fff; font-size: 23px; line-height: 1.25; margin-bottom: 10px; font-weight: 700; }
#tessa .paso__subtitulo { font-size: 13.5px; color: rgba(255,255,255,.8); line-height: 1.55; }

#tessa .paso__pasos-mini { display: flex; gap: 6px; }
#tessa .paso__pasos-mini span { width: 20px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.25); }
#tessa .paso__pasos-mini span.esta-hecho { background: #fff; }

#tessa .paso__formulario { padding: 44px 52px 90px; overflow-y: auto; }
#tessa .paso__formulario-interior { max-width: 620px; }
#tessa .paso__grupo-titulo { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); margin: 26px 0 6px; }
#tessa .paso__grupo-titulo:first-child { margin-top: 0; }

#tessa .campo-ent { margin-bottom: 22px; }
#tessa .campo-ent__encabezado { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
#tessa .campo-ent__etiqueta { font-weight: 600; font-size: 14px; color: var(--tx); }
#tessa .campo-ent__requerido { color: var(--azul); }
#tessa .campo-ent__nivel { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
#tessa .campo-ent__nivel--opcional { background: var(--linea-2); color: var(--tx-3); }
#tessa .campo-ent__nivel--complementaria { background: var(--azul-luz); color: var(--azul); }
#tessa .campo-ent__ayuda { font-size: 12.5px; color: var(--tx-3); margin: 0 0 8px; line-height: 1.5; }
#tessa .campo-ent__ejemplo { font-style: italic; }
#tessa .campo-ent--con-error { outline: 2px solid var(--rojo-bor); border-radius: var(--r-sm); }

#tessa .opciones-radio, #tessa .opciones-checkbox { display: flex; flex-wrap: wrap; gap: 9px; }
#tessa .opcion-radio, #tessa .opcion-checkbox {
    display: flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--linea); background: var(--panel);
    border-radius: 999px; padding: 9px 16px; cursor: pointer; font-size: 13.5px;
}
#tessa .opcion-radio:has(input:checked), #tessa .opcion-checkbox:has(input:checked) {
    border-color: var(--azul); background: var(--azul-luz); font-weight: 600; color: var(--azul-osc);
}
#tessa .opcion-radio input, #tessa .opcion-checkbox input { accent-color: var(--azul); width: 15px; height: 15px; }

#tessa .opciones-radiocard { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
#tessa .tarjeta-radio {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    border: 1.5px solid var(--linea); background: var(--panel);
    border-radius: var(--r); padding: 16px 18px; cursor: pointer;
}
#tessa .tarjeta-radio input { position: absolute; opacity: 0; }
#tessa .tarjeta-radio:has(input:checked) { border-color: var(--azul); background: var(--azul-luz); box-shadow: var(--s1); }
#tessa .tarjeta-radio__titulo { font-weight: 700; font-size: 14px; color: var(--tx); }
#tessa .tarjeta-radio__ayuda { font-size: 12px; color: var(--tx-3); }

#tessa .campo-ent--condicional { overflow: hidden; max-height: 0; opacity: 0; margin-bottom: 0; transition: max-height .25s ease, opacity .2s ease, margin .25s ease; }
#tessa .campo-ent--condicional.esta-visible { max-height: 200px; opacity: 1; margin-bottom: 22px; }

#tessa .resumen-revision { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
#tessa .resumen-revision__vacio { font-size: 13px; color: var(--tx-3); font-style: italic; padding: 14px 0; }
#tessa .resumen-revision__grupo { border: 1px solid var(--linea); border-radius: var(--r); background: var(--panel); padding: 16px 18px; }
#tessa .resumen-revision__grupo-titulo { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--azul); margin-bottom: 8px; }
#tessa .resumen-revision__item { display: flex; gap: 8px; font-size: 13px; padding: 4px 0; border-top: 1px dashed var(--linea-2); }
#tessa .resumen-revision__item:first-of-type { border-top: none; }
#tessa .resumen-revision__item-etiqueta { color: var(--tx-3); flex: none; width: 42%; }
#tessa .resumen-revision__item-valor { color: var(--tx); font-weight: 500; }

#tessa .asistente__navegacion { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; max-width: 620px; }
#tessa .asistente__navegacion-derecha { display: flex; align-items: center; gap: 12px; }

@media (max-width: 980px) {
    #tessa .paso.esta-activo { grid-template-columns: 1fr; }
    #tessa .paso__visual { padding: 30px 24px; }
    #tessa .paso__formulario { padding: 30px 22px 80px; }
    #tessa .asistente__barra { padding: 12px 18px; flex-wrap: wrap; }
}

@media print {
    #tessa .asistente-entrevista { display: none; }
}

/* -- Informe de entrevista (vista imprimible): mismo criterio visual que
   .cc-preview (cotizaciones), con su propio acento para distinguirse de
   un documento de cotización a simple vista. -- */
#tessa .ent-informe {
    --ent-acento: var(--azul);
    background: #fff; border: 1px solid var(--linea);
    border-top: 5px solid var(--ent-acento);
    border-radius: var(--r); box-shadow: var(--s2);
    padding: 26px 26px 20px; max-width: 900px;
}
#tessa .ent-informe-cab { border-bottom: 2px solid var(--ent-acento); padding-bottom: 14px; margin-bottom: 18px; }
#tessa .ent-informe-marca { display: flex; flex-direction: column; gap: 4px; }
#tessa .ent-informe-logo { max-height: 46px; max-width: 220px; object-fit: contain; }
#tessa .ent-informe-logo-texto { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--ent-acento); }
#tessa .ent-informe-sub { color: var(--tx-2); font-size: 12.5px; font-weight: 600; margin-top: 1px; }

#tessa .ent-informe-meta { width: 100%; font-size: 12.5px; color: var(--tx-2); margin-bottom: 4px; }
#tessa .ent-informe-meta td { padding: 4px 18px 4px 0; vertical-align: top; }
#tessa .ent-informe-meta-etq { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--tx-3); }

#tessa .ent-informe-linea { border: none; border-top: 1px solid var(--linea); margin: 16px 0; }

#tessa .ent-informe-seccion { margin-bottom: 20px; }
#tessa .ent-informe-seccion-titulo { font-size: 14px; font-weight: 700; color: var(--ent-acento); margin-bottom: 10px; }
#tessa .ent-informe-bloque { margin-bottom: 10px; }
#tessa .ent-informe-bloque-etq { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--tx-3); margin-bottom: 3px; }
#tessa .ent-informe-bloque-txt { font-size: 13.5px; color: var(--tx); line-height: 1.6; }

#tessa .ent-informe-tabla-corta { width: 100%; border-collapse: collapse; font-size: 13px; }
#tessa .ent-informe-celda { padding: 6px 10px 6px 0; vertical-align: top; width: 50%; }
#tessa .ent-informe-celda-etq { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--tx-3); }
#tessa .ent-informe-celda-val { display: block; color: var(--tx); font-weight: 500; }

#tessa .ent-informe-pie { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--linea); font-size: 11px; color: var(--tx-3); }


/* --- Backlog interno (/tessa/admin/backlog) -- 2026-09-27/28, pedido del
   dueño: dos backlogs distintos en la misma página, separados
   visualmente (tarjetas propias, ver admin_backlog.php); dentro de cada
   uno, cada ítem es una tarjeta EXPANSIBLE (<details>, sin JS) en una
   grid de 4 columnas -- el título (asunto) siempre visible, el detalle
   solo al hacer click. Color pastel según importancia: rojo = necesita
   una decisión, ámbar = concreto pero no urgente, azul claro ("celeste")
   = no se va a resolver pronto. Mismos tokens de color que ya usa el
   resto de Tessa (--rojo/--ambar/--azul + sus variantes "-luz"/"-bor"),
   nada nuevo que mantener. --- */
#tessa .backlog-sub {
    margin: 22px 0 10px; font-size: 14.5px;
    padding-top: 14px; border-top: 1px dashed var(--linea-2);
}
#tessa .backlog-leyenda-punto {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin: 0 2px 0 6px; vertical-align: middle;
}
#tessa .backlog-leyenda-alta  { background: var(--rojo); }
#tessa .backlog-leyenda-media { background: var(--ambar); }
#tessa .backlog-leyenda-baja  { background: var(--azul); }

#tessa .backlog-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin: 0 0 8px; align-items: start;
}
#tessa .backlog-card {
    border-radius: var(--r); border: 1px solid var(--linea);
    overflow: hidden;
}
#tessa .backlog-card > summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 11px 30px 11px 13px; font-weight: 700; font-size: 13px; line-height: 1.4;
}
#tessa .backlog-card > summary::-webkit-details-marker { display: none; }
#tessa .backlog-card > summary::after {
    content: "+"; position: absolute; top: 9px; right: 12px;
    font-weight: 700; font-size: 16px; opacity: .65;
}
#tessa .backlog-card[open] > summary::after { content: "–"; }
#tessa .backlog-card-cuerpo {
    padding: 0 13px 13px; font-size: 12.5px; color: var(--tx-2); line-height: 1.55;
}
#tessa .backlog-card-cuerpo p { margin: 0; }
#tessa .backlog-card-cuerpo ul { margin: 6px 0 0; padding-left: 18px; }
#tessa .backlog-card-cuerpo li { margin-bottom: 6px; }

#tessa .backlog-card-alta  { background: var(--rojo-luz);  border-color: var(--rojo-bor); }
#tessa .backlog-card-alta  > summary { color: var(--rojo); }
#tessa .backlog-card-media { background: var(--ambar-luz); border-color: var(--ambar-bor); }
#tessa .backlog-card-media > summary { color: var(--ambar); }
#tessa .backlog-card-baja  { background: var(--azul-luz);  border-color: var(--azul-bor); }
#tessa .backlog-card-baja  > summary { color: var(--azul); }

@media (max-width: 1100px) { #tessa .backlog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { #tessa .backlog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { #tessa .backlog-grid { grid-template-columns: 1fr; } }