@import "tokens-loQExGd.css";

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--ism-bg);
    color: var(--ism-text);
    font-family: var(--ism-font);
    font-size: 15px;
    line-height: 1.5;
}

a {
    color: var(--ism-green);
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Paso 4 y A02 (§2): pantallas pensadas para proyectarse, ancho completo */
.container-full {
    max-width: 100%;
    margin: 0;
    padding: 0 24px;
}

/* Header (§1.4) */
.ism-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 24px;
    background: var(--ism-bg);
    border-bottom: 1px solid var(--ism-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.ism-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.ism-header__brand img {
    height: 32px;
    padding: 8px 0;
}

.ism-header__titles {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ism-header__titles strong {
    font-size: 15px;
    font-weight: 600;
}

.ism-header__titles span {
    font-size: 13px;
    color: var(--ism-text-muted);
}

/* Tabs de navegación de la edición (§1.4/§4): Iniciativas, Workshop... */
.tabs {
    display: flex;
    gap: 4px;
}

.tab {
    font-size: 15px;
    font-weight: 500;
    color: var(--ism-text);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: var(--ism-radius-sm);
}

.tab.is-activo {
    background: var(--ism-green-50);
    color: var(--ism-green-700);
}

@media (max-width: 1199px) {
    .tabs {
        display: none;
    }
}

/* Botón "volver arriba" (nuevo, pedido directo del usuario): aparece
   solo cuando hay suficiente scroll, para no estorbar en pantallas
   cortas. */
.boton-volver-arriba {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ism-green);
    color: #fff;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--ism-shadow-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 200;
}

.boton-volver-arriba.es-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.boton-volver-arriba:hover {
    background: var(--ism-green-700);
}

/* Footer (nuevo, no está en las specs; pedido directo del usuario) */
.ism-footer {
    border-top: 1px solid var(--ism-border);
    padding: 16px 24px;
    margin-top: 40px;
    text-align: center;
    font-size: 13px;
    color: var(--ism-text-muted);
}

.ism-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ism-user__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ism-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}

.ism-user-dropdown {
    position: relative;
}

.ism-user-dropdown__resumen {
    display: block;
    list-style: none;
    cursor: pointer;
}

.ism-user-dropdown__resumen::-webkit-details-marker {
    display: none;
}

.ism-user-dropdown__panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--ism-surface);
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-sm);
    box-shadow: var(--ism-shadow-card);
    min-width: 220px;
    z-index: 20;
    padding: 12px;
}

.ism-user-dropdown__nombre {
    font-weight: 600;
    font-size: 14px;
    color: var(--ism-text);
}

.ism-user-dropdown__eyebrow {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ism-text-muted);
}

.ism-user-dropdown__email {
    font-size: 13px;
    color: var(--ism-text-muted);
    word-break: break-all;
}

.ism-user-dropdown__separador {
    border: none;
    border-top: 1px solid var(--ism-border);
    margin: 12px 0 8px;
}

.ism-user-dropdown__panel a {
    display: block;
    padding: 8px 4px;
    color: var(--ism-text);
    text-decoration: none;
    border-radius: var(--ism-radius-sm);
    font-size: 14px;
}

.ism-user-dropdown__panel a:hover {
    background: var(--ism-subtle-bg);
}

.ism-user-dropdown__panel a.ism-user-dropdown__logout {
    color: var(--ism-red);
}

.selector-idioma {
    position: relative;
    font-size: 12px;
}

.selector-idioma__actual {
    display: block;
    list-style: none;
    cursor: pointer;
    color: var(--ism-text-muted);
    padding: 6px 10px;
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-sm);
    user-select: none;
}

.selector-idioma__actual::-webkit-details-marker {
    display: none;
}

.selector-idioma__actual::after {
    content: '▾';
    margin-left: 4px;
}

.selector-idioma[open] .selector-idioma__actual {
    background: var(--ism-subtle-bg);
    color: var(--ism-text);
}

.selector-idioma__lista {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--ism-surface);
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-sm);
    box-shadow: var(--ism-shadow-card);
    min-width: 140px;
    z-index: 20;
    padding: 4px;
}

.selector-idioma__lista a {
    display: block;
    padding: 8px 10px;
    color: var(--ism-text);
    text-decoration: none;
    border-radius: var(--ism-radius-sm);
    font-size: 13px;
}

.selector-idioma__lista a:hover {
    background: var(--ism-subtle-bg);
}

/* Banner / hero (§1.4) */
.ism-hero {
    background: linear-gradient(135deg, var(--ism-hero-from), var(--ism-hero-to));
    border-radius: 0;
    min-height: 160px;
    padding: 32px 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ism-hero--right {
    text-align: right;
    align-items: flex-end;
}

.ism-hero__eyebrow {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.9;
}

.ism-hero__title {
    font-size: 40px;
    font-weight: 700;
    margin: 8px 0;
}

.ism-hero__subtitle {
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 20px;
}

/* Botones (§1.4) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--ism-radius-sm);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--ism-green);
    color: #fff;
}

.btn-primary:hover {
    background: var(--ism-green-700);
}

.btn-on-hero {
    background: #fff;
    color: var(--ism-green);
}

.btn-secondary {
    background: #fff;
    border: 1px solid var(--ism-border-strong);
    color: var(--ism-text);
}

.btn-block {
    width: 100%;
}

.btn-danger {
    background: var(--ism-red);
    color: #fff;
}

.btn-danger:hover {
    background: color-mix(in srgb, var(--ism-red) 85%, black);
}

/* Formularios (§1.4): input/select/textarea uniformes con los mismos
   tokens que ya usan los botones y las cards. Antes no había ninguna
   regla para estos elementos y se veían con el estilo nativo del
   navegador, sin relación visual con el resto de la UI. */
label {
    font-size: 15px;
    font-weight: 500;
    color: var(--ism-text);
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
select,
textarea {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ism-border-strong);
    border-radius: var(--ism-radius-sm);
    font-family: var(--ism-font);
    font-size: 15px;
    color: var(--ism-text);
    background: var(--ism-surface);
}

textarea {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--ism-green);
    box-shadow: 0 0 0 3px var(--ism-green-50);
}

input:disabled,
input[readonly],
select:disabled,
textarea:disabled,
textarea[readonly] {
    background: var(--ism-input-bg);
    border-color: transparent;
    color: var(--ism-text-muted);
    font-style: italic;
}

input::placeholder,
textarea::placeholder {
    color: var(--ism-text-muted);
    font-style: italic;
}

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ism-green);
    vertical-align: middle;
}

/* Cards y badges (§1.4) */
.card {
    background: var(--ism-surface);
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-md);
    box-shadow: var(--ism-shadow-card);
    padding: 20px;
}

.card__footer {
    border-top: 1px solid var(--ism-border);
    margin-top: 16px;
    padding-top: 16px;
}

/* "Mi perfil" (T-bug.4): datos de solo lectura + idioma + ediciones */
.perfil {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.perfil-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

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

.perfil-idiomas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.perfil-idioma {
    border: 1px solid var(--ism-border-strong);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ism-text);
}

.perfil-idioma--activo {
    background: var(--ism-green-50);
    border-color: var(--ism-green);
    color: var(--ism-green-700);
}

.perfil-ediciones {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.perfil-edicion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--ism-border);
    border-radius: 8px;
    padding: 12px 16px;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
}

.badge-green {
    background: var(--ism-green);
    color: #fff;
}

.badge-orange {
    background: var(--ism-orange);
    color: var(--ism-text);
}

.badge-neutral {
    background: var(--ism-subtle-bg);
    color: var(--ism-text-muted);
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.eyebrow {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ism-text-muted);
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    margin: 24px 0 4px;
}

.footnote--left {
    text-align: left;
}

.lista-simple {
    list-style: none;
    padding: 0;
}

.admin-grid-sidebar {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 24px;
    margin-top: 16px;
}

/* Grid items se estiran al ancho de contenido por default (min-width:
   auto) — con nombres de gerencia reales largos, un <select> sin este
   reset se sale del borde de la card en vez de truncarse (pedido directo
   del usuario, 29-sep: "el selector de gerencias se sale del borde"). */
.admin-grid-sidebar > * {
    min-width: 0;
}

@media (max-width: 991px) {
    .admin-grid-sidebar {
        grid-template-columns: 1fr;
    }
}

.form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.miembro-label {
    display: block;
    padding: 2px 0;
}

.acordeon-gerencia {
    margin-bottom: 12px;
}

.acordeon-gerencia > summary {
    cursor: pointer;
    font-weight: 600;
}

.tabla-datos {
    width: 100%;
    border-collapse: collapse;
}

.tabla-datos th,
.tabla-datos td {
    text-align: left;
    padding: 6px;
    border-top: 1px solid var(--ism-border);
}

.tabla-datos th {
    border-top: none;
}

.empty-state {
    text-align: center;
    color: var(--ism-text-muted);
    font-size: 15px;
    padding: 48px 0;
}

.footnote {
    text-align: center;
    color: var(--ism-text-muted);
    font-size: 13px;
    padding: 16px 0;
}

@media (max-width: 1199px) {
    .grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .grid-cards {
        grid-template-columns: 1fr;
    }
}

/* P06: stepper y tarjetas (T-2.1, T-2.4) */
.workshop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}

/* Fase 4.17: aviso de "modo revisión" cuando se repasa/corrige un paso
   que no es el pasoActual del grupo. */
.workshop-aviso {
    background: var(--ism-blue-50);
    color: var(--ism-blue);
    border: 1px solid var(--ism-blue);
    border-radius: var(--ism-radius-sm);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
}

.paso-acciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
}

.guardado-indicador {
    font-size: 13px;
    color: var(--ism-text-muted);
}

/* Stepper (mejora de UI, pedido directo del usuario): círculos
   numerados conectados por una línea, en vez del punto/círculo vacío
   plano que había antes — se ve más claro cuánto falta y qué tan
   avanzado está el grupo. */
.stepper {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.stepper__paso {
    display: flex;
    align-items: center;
    flex: 1;
    font-size: 13px;
    color: var(--ism-text-muted);
}

.stepper__paso:not(:last-child)::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--ism-border);
    margin: 0 8px;
}

.stepper__paso.is-completado:not(:last-child)::after {
    background: var(--ism-green-100);
}

.stepper__circulo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--ism-subtle-bg);
    color: var(--ism-text-muted);
    font-size: 13px;
    font-weight: 600;
    border: 2px solid var(--ism-border);
}

.stepper__paso.is-actual .stepper__circulo {
    background: var(--ism-green);
    color: #fff;
    border-color: var(--ism-green);
}

.stepper__paso.is-completado .stepper__circulo {
    background: var(--ism-green-50);
    color: var(--ism-green-700);
    border-color: var(--ism-green-100);
}

.stepper__paso.is-actual {
    color: var(--ism-green-700);
    font-weight: 600;
}

.stepper__paso.is-completado {
    color: var(--ism-text);
}

.stepper__nombre {
    margin-left: 8px;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .stepper__nombre {
        display: none;
    }
}

.stepper__enlace {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.stepper__paso--resumen .stepper__circulo {
    background: var(--ism-subtle-bg);
    color: var(--ism-text-muted);
}

.stepper__paso--resumen.is-actual .stepper__circulo {
    background: var(--ism-green);
    color: #fff;
    border-color: var(--ism-green);
}

/* P06.7 Resumen del grupo: canvas de estrategia (Fase 4.12) */
.canvas-estrategia {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.canvas-fila {
    display: grid;
    gap: 16px;
}

.canvas-fila--3 {
    grid-template-columns: repeat(3, 1fr);
}

.canvas-fila--2 {
    grid-template-columns: repeat(2, 1fr);
}

.canvas-bloque {
    background: var(--ism-surface);
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-md);
    padding: 16px;
}

.canvas-lista {
    margin: 8px 0 0;
    padding-left: 18px;
}

.canvas-lista li {
    margin-bottom: 4px;
}

.canvas-lista--personas {
    margin: 4px 0 0;
    padding-left: 16px;
}

.canvas-lista--personas li {
    margin-bottom: 2px;
}

.canvas-capacidades {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.canvas-capacidades__trimestre h3 {
    font-size: 14px;
    margin: 0 0 8px;
}

@media (max-width: 991px) {
    .canvas-fila--3,
    .canvas-fila--2,
    .canvas-capacidades {
        grid-template-columns: 1fr;
    }
}

.tarjetas-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 16px;
}

.tarjeta-card {
    background: var(--ism-surface);
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-md);
    box-shadow: var(--ism-shadow-card);
    padding: 12px 16px;
    margin-bottom: 12px;
}

.tarjeta-card__precargada {
    display: inline-block;
    margin-bottom: 6px;
}

.tarjeta-card__texto {
    margin: 0 0 4px;
}

.tarjeta-card__meta {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--ism-text-muted);
}

.tarjeta-card__acciones {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-voto {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ism-subtle-bg);
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-sm);
    padding: 4px 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ism-text-muted);
}

.btn-voto__icono {
    width: 14px;
    height: 14px;
}

.btn-voto.is-votado {
    background: var(--ism-green-50);
    border-color: var(--ism-green-100);
    color: var(--ism-green-700);
}

.btn-borrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    border-radius: var(--ism-radius-sm);
    cursor: pointer;
    color: var(--ism-text-muted);
}

.btn-borrar svg {
    width: 15px;
    height: 15px;
}

.btn-borrar:hover {
    background: var(--ism-red-50);
    color: var(--ism-red);
}

@media (max-width: 767px) {
    .tarjetas-columnas {
        grid-template-columns: 1fr;
    }
}

/* P06.4: tablero Q1-Q4 y semáforo (T-3.4, T-3.5) */
.board {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 320px;
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

.trimestre-panel {
    background: var(--ism-subtle-bg);
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-md);
    padding: 12px;
}

.trimestre-panel__header h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px;
}

.trimestre-panel__crear {
    margin-bottom: 12px;
}

.trimestre-panel__crear summary {
    cursor: pointer;
    list-style: none;
    text-align: center;
    padding: 8px;
    border: 1px dashed var(--ism-border-strong);
    border-radius: var(--ism-radius-sm);
    color: var(--ism-text-muted);
    font-weight: 500;
    font-size: 13px;
}

.trimestre-panel__crear summary::-webkit-details-marker {
    display: none;
}

.trimestre-panel__crear[open] summary {
    border-style: solid;
    color: var(--ism-text);
    margin-bottom: 8px;
}

.trimestre-panel__crear form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trimestre-panel__crear label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ism-text-muted);
}

.trimestre-panel__crear select,
.trimestre-panel__crear input {
    display: block;
    width: 100%;
    margin-top: 4px;
}

/* T-6: el grupo de checkboxes Q1-Q4 es un <fieldset> con <label>/<input>
   propios dentro de este mismo <form> — sin este override, las reglas
   genéricas de arriba (pensadas para el <select> de tipo y el <input
   type="text"> de nombre) estiran cada checkbox nativo a 100% de ancho
   (feo/roto en Chromium-WebKit) y apilan las 4 etiquetas Q1-Q4 una por
   línea en vez de una fila compacta. */
.trimestre-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid var(--ism-border-strong);
    border-radius: var(--ism-radius-sm);
    padding: 8px;
    margin: 0;
}

.trimestre-checkboxes legend {
    font-size: 12px;
    font-weight: 500;
    color: var(--ism-text-muted);
    padding: 0 4px;
}

.trimestre-checkbox {
    display: flex !important;
    align-items: center;
    gap: 4px;
    width: auto !important;
    margin-top: 0 !important;
    font-size: 13px;
    font-weight: 400;
    color: var(--ism-text);
}

.trimestre-checkbox input[type="checkbox"] {
    display: inline-block !important;
    width: auto !important;
    margin-top: 0 !important;
}

.badge-pkg {
    display: inline-block;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}

.badge-pkg-negocio { background: var(--pkg-negocio); }
.badge-pkg-tecnologia { background: var(--pkg-tecnologia); }
.badge-pkg-partners { background: var(--pkg-partners); }

.paquete-card {
    background: var(--ism-surface);
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-md);
    box-shadow: var(--ism-shadow-card);
    padding: 12px;
    margin-bottom: 12px;
}

.paquete-card__nombre {
    font-weight: 600;
    margin: 0 0 8px;
}

.paquete-card__capacidades {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    border-top: 1px solid var(--ism-border);
}

.paquete-card__capacidades li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid var(--ism-border);
    font-size: 12px;
}

.paquete-card__capacidad-icono {
    flex: none;
}

.paquete-card__capacidad-etiqueta {
    flex: none;
    color: var(--ism-text-muted);
    min-width: 68px;
}

.paquete-card__capacidad-valor {
    color: var(--ism-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paquete-card__capacidad-valor em {
    color: var(--ism-text-muted);
    font-style: italic;
}

.paquete-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.chip-persona {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    border: 1px solid var(--ism-border);
}

.chip-persona.is-verde { background: var(--cap-verde-soft); border-color: var(--ism-green-100); color: var(--cap-verde-soft-content); }
.chip-persona.is-ambar { background: var(--cap-ambar-soft); color: var(--cap-ambar-soft-content); }
.chip-persona.is-rojo { background: var(--cap-rojo-soft); color: var(--cap-rojo-soft-content); }

.semaforo-panel {
    background: var(--ism-surface);
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-md);
    padding: 16px;
}

.semaforo-panel input[type="search"] {
    width: 100%;
    height: 36px;
    border: 1px solid var(--ism-border-strong);
    border-radius: var(--ism-radius-sm);
    padding: 0 10px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.semaforo-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.semaforo-tabla th,
.semaforo-tabla td {
    text-align: left;
    padding: 6px 4px;
    border-bottom: 1px solid var(--ism-border);
}

.semaforo-tabla th {
    font-weight: 600;
    color: var(--ism-text-muted);
    font-size: 11px;
}

.semaforo-icono {
    display: inline-block;
    white-space: nowrap;
}

.semaforo-icono.is-verde { color: var(--cap-verde); }
.semaforo-icono.is-ambar { color: var(--cap-ambar-soft-content); }
.semaforo-icono.is-rojo { color: var(--cap-rojo); }

dialog.modal-paquete {
    border: none;
    border-radius: var(--ism-radius-lg);
    width: 720px;
    max-width: 92vw;
    padding: 24px;
    box-shadow: var(--ism-shadow-card);
}

dialog.modal-paquete::backdrop {
    background: rgba(0, 0, 0, .45);
}

/* Modal de alerta (pedido directo del usuario): reemplaza los
   window.alert()/window.confirm() del navegador. Sistema de color +
   ícono por tipo (T-ui.1): éxito (verde), alerta (ámbar, default —
   info incompleta o requiere confirmación), crítico (rojo,
   irreversible o error grave), información (azul, aviso neutro). */
dialog.modal-alerta {
    border: none;
    border-top: 6px solid var(--ism-orange);
    border-radius: var(--ism-radius-lg);
    width: 420px;
    max-width: 92vw;
    padding: 24px;
    box-shadow: var(--ism-shadow-card);
}

dialog.modal-alerta.es-exito { border-top-color: var(--ism-green); }
dialog.modal-alerta.es-alerta { border-top-color: var(--ism-orange); }
dialog.modal-alerta.es-critico { border-top-color: var(--ism-red); }
dialog.modal-alerta.es-info { border-top-color: var(--ism-blue); }

dialog.modal-alerta::backdrop {
    background: rgba(0, 0, 0, .45);
}

.modal-alerta__cuerpo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    max-height: 50vh;
    overflow-y: auto;
}

.modal-alerta__icono {
    font-size: 22px;
    line-height: 1;
}

dialog.modal-alerta p {
    margin: 0;
    font-size: 15px;
    white-space: pre-line;
}

.modal-alerta__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

.autocomplete-resultados {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    position: absolute;
    background: var(--ism-surface);
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-sm);
    box-shadow: var(--ism-shadow-card);
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}

.autocomplete-resultados li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}

.autocomplete-resultados li:hover {
    background: var(--ism-subtle-bg);
}

.autocomplete-resultados__tipo {
    display: inline-block;
    background: var(--ism-subtle-bg);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 11px;
    color: var(--ism-text-muted);
}

.modal-paquete__buscador {
    position: relative;
}

.modal-paquete__seccion {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ism-border);
}

.modal-paquete__seccion h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
}

.modal-paquete__form {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.modal-paquete__form input {
    flex: 1;
}

.modal-paquete__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}

.modal-paquete__total {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0 0;
    margin-top: 4px;
    border-top: 1px solid var(--ism-border);
    font-size: 13px;
    font-weight: 600;
}

.modal-paquete__acciones {
    margin-top: 20px;
    text-align: right;
}

/* T-9: Gantt de proyectos (P06.4 y P07) — CSS/HTML a mano, sin librería de
   gráficos (spec 2026-09-28). Barras posicionadas por left/width en % vía
   estilo inline (GanttProyectosBuilder::calcularPosicion). */
.gantt-proyectos {
    width: 100%;
    margin-top: 24px;
}

.gantt-proyectos__fila {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.gantt-proyectos__etiqueta {
    flex: 0 0 260px;
    font-size: 13px;
}

.gantt-proyectos__pista {
    flex: 1;
    position: relative;
    height: 20px;
    background-color: var(--ism-subtle-bg);
    /* I1 (revisión final de rama, 2026-09-28): 3 líneas de cuadrícula a
       25/50/75% — límites de Q1/Q2/Q3/Q4 del año de anioObjetivo, las
       mismas 4 columnas que ya usa el board del Paso 4. CSS puro (3
       gradientes de 1px, sin JS), consistente con el resto del Gantt. */
    background-image:
        linear-gradient(var(--ism-border), var(--ism-border)),
        linear-gradient(var(--ism-border), var(--ism-border)),
        linear-gradient(var(--ism-border), var(--ism-border));
    background-position: 25% 0, 50% 0, 75% 0;
    background-size: 1px 100%;
    background-repeat: no-repeat;
    border: 1px solid var(--ism-border);
    border-radius: var(--ism-radius-sm);
}

.gantt-proyectos__barra {
    position: absolute;
    top: 2px;
    height: 16px;
    border-radius: var(--ism-radius-sm);
    background: var(--ism-green);
}

/* I1: fila del eje temporal, arriba de las barras — mismo layout
   (espaciador + pista) que .gantt-proyectos__fila para que las etiquetas
   de inicio/fin queden alineadas con la pista real. Visible siempre (no
   solo en el tooltip), porque este parcial se imprime en P07. */
.gantt-proyectos__eje {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.gantt-proyectos__eje-espaciador {
    flex: 0 0 260px;
}

.gantt-proyectos__eje-pista {
    flex: 1;
    position: relative;
    height: 16px;
}

.gantt-proyectos__eje-etiqueta {
    position: absolute;
    top: 0;
    font-size: 11px;
    color: var(--ism-text-muted);
}

.gantt-proyectos__eje-etiqueta--inicio {
    left: 0;
}

.gantt-proyectos__eje-etiqueta--fin {
    right: 0;
}

@media (max-width: 1199px) {
    .board {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .board {
        grid-template-columns: 1fr;
    }
}

/* A02: dashboard en vivo (T-4.4) */
.dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}

.dashboard__error {
    background: var(--ism-red-50);
    color: var(--ism-red);
    border: 1px solid var(--ism-red);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-weight: 500;
}

/* Fase 4.29 (pedido directo del usuario): prioridad de lectura de arriba
   a abajo — grupos y avance, participantes (ahora a todo el ancho, ya
   no comparte fila con "Top sobrecargados"), y por último el detalle
   secundario en pestañas. Antes era una grilla de 2 columnas con el
   feed como sidebar fijo; se vuelve una pila simple. */
.dashboard__layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.dashboard__card {
    padding: 12px 16px;
}

/* Fase 4.28 (pedido directo del usuario): el heatmap ya no recorta a un
   top 30 — con headcount real (100+ personas) necesita scroll propio
   para no estirar la página mucho más que el resto del dashboard. */
.dashboard__heatmap-scroll {
    max-height: 480px;
    overflow-y: auto;
}

.dashboard__heatmap {
    width: 100%;
    border-collapse: collapse;
}

.dashboard__heatmap th,
.dashboard__heatmap td {
    text-align: left;
    padding: 6px 10px;
    font-size: 13px;
    border-bottom: 1px solid var(--ism-border);
}

.dashboard__heatmap thead th {
    position: sticky;
    top: 0;
    background: var(--ism-surface);
}

.dashboard-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ism-border);
}

.dashboard-tabs__tab {
    padding: 8px 14px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--ism-text-muted);
    cursor: pointer;
}

.dashboard-tabs__tab:hover {
    color: var(--ism-text);
}

.dashboard-tabs__tab.is-activo {
    color: var(--ism-green);
    border-bottom-color: var(--ism-green);
}

/* "Actividad" del dashboard con look de log (Fase 4.29, pedido directo
   del usuario: "el feed ponlo en una pestaña que se vea como una
   especie de log") — monoespaciado (token ya existente, ninguno nuevo),
   fondo oscuro tipo terminal, cada línea con su propia hora. */
.dashboard__log {
    list-style: none;
    margin: 0;
    padding: 12px;
    max-height: 480px;
    overflow-y: auto;
    background: var(--ism-text);
    border-radius: var(--ism-radius-sm);
    font-family: var(--ism-font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--ism-surface);
}

.dashboard__log li::before {
    content: "▸ ";
    color: var(--ism-green);
}

/* Toast de cambio de paso (RF-40) */
.toast-paso {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ism-text);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--ism-radius-sm);
    box-shadow: var(--ism-shadow-card);
    font-size: 14px;
    z-index: 1000;
}

/* A01: rediseño de "Grupos y asignación" (pedido directo del usuario,
   27-sep) — seleccionar varias personas y asignarlas a un grupo en un
   solo paso, en vez de repetir la lista completa de "sin grupo" dentro
   de cada card. */
.asignacion-buscador {
    width: 100%;
    margin-bottom: 8px;
}

.asignacion-filtro {
    width: 100%;
    max-width: 100%;
    margin-bottom: 12px;
}

.lista-seleccionable {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 360px;
    overflow-y: auto;
}

.persona-seleccionable {
    padding: 2px 0;
}

.asignacion-barra {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ism-border);
}

.asignacion-barra select {
    min-width: 0;
    width: 100%;
}

/* Form de "crear grupo" (mismo problema, mismos nombres de gerencia
   reales): sin esto el <select> de gerencia se ensancha a su contenido
   y empuja al resto de los campos fuera de fila. */
.form-inline select[name="gerenciaId"] {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 220px;
}

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

.lista-miembros {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.miembro-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.miembro-fila__nombre {
    flex: 1;
}

.btn-facilitador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    border-radius: var(--ism-radius-sm);
    cursor: pointer;
    color: var(--ism-border-strong);
    font-size: 16px;
    line-height: 1;
}

.btn-facilitador:hover {
    background: var(--ism-subtle-bg);
}

.btn-facilitador.is-facilitador {
    color: var(--ism-orange);
}

.btn-quitar-miembro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    border-radius: var(--ism-radius-sm);
    cursor: pointer;
    color: var(--ism-text-muted);
    font-size: 13px;
    line-height: 1;
}

.btn-quitar-miembro:hover {
    background: var(--ism-red-50);
    color: var(--ism-red);
}

/* Carga masiva (Fase 4.14) */
.importar-resultado {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--ism-radius-sm);
    font-size: 14px;
}

.importar-resultado--exito {
    background: var(--ism-green-50);
    color: var(--ism-green-700);
}

.importar-resultado--error {
    background: var(--ism-red-50);
    color: var(--ism-red);
}

.importar-resultado--error .canvas-lista {
    margin-top: 6px;
}

/* Fase 4.24 (pedido directo del usuario): jefe directo faltante no bloquea
   el resto del archivo — se guarda igual y se avisa, distinto de un error. */
.importar-resultado--advertencia {
    margin-top: 8px;
    background: var(--cap-ambar-soft);
    color: var(--cap-ambar-soft-content);
}

.importar-resultado--advertencia .canvas-lista {
    margin-top: 6px;
}

/* RF-44, Fase 4.21/4.22 (pedido directo del usuario): exportar P06.7/P07
   a PDF vía window.print() + @media print — cero dependencias nuevas,
   decisión ya tomada en specs/plan.md §7 ("dompdf/wkhtmltopdf queda en
   R2 si el resultado no convence"). Rediseñado en 4.22 ("el PDF parece
   de un practicante, hace falta calidad de empresa"): masthead con
   jerarquía tipográfica real, barra de acento ISM, secciones con borde
   de color en vez de cajas grises planas, y pie de página con fecha de
   generación — tratamiento de informe corporativo, no una reutilización
   literal de la vista de pantalla. */
.canvas-print-header,
.canvas-print-participantes,
.canvas-print-footer {
    display: none;
}

@media print {
    @page {
        size: A4;
        margin: 16mm 14mm 22mm;
    }

    html, body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: #FFFFFF;
    }

    body {
        font-size: 11px;
    }

    .ism-header,
    .ism-footer,
    .boton-volver-arriba,
    .no-print,
    dialog {
        display: none !important;
    }

    /* Masthead: logo + identidad del evento a la izquierda, mesa +
       gerencia a la derecha, separados por una barra de acento ISM en
       vez del borde gris genérico que tenía la v1. */
    .canvas-print-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
        padding-bottom: 14px;
        margin-bottom: 0;
        border-bottom: 3px solid var(--ism-green);
    }

    .canvas-print-header__marca {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .canvas-print-header__logo {
        height: 42px;
        width: auto;
    }

    .canvas-print-header__evento {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .canvas-print-header__eyebrow {
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: var(--ism-text-muted);
    }

    .canvas-print-header__titulo {
        font-size: 19px;
        font-weight: 700;
        color: var(--ism-text);
        line-height: 1.15;
    }

    .canvas-print-header__fechas {
        font-size: 10.5px;
        color: var(--ism-text-muted);
    }

    .canvas-print-header__grupo {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
        text-align: right;
        flex-shrink: 0;
        padding-top: 2px;
    }

    .canvas-print-header__grupo strong {
        font-size: 14px;
        font-weight: 700;
        color: var(--ism-green-700);
    }

    .canvas-print-header__subgrupo {
        font-size: 10px;
        color: var(--ism-text-muted);
    }

    /* Franja de participantes, separada del masthead para que respire —
       ya no compartida a presión en una esquina. */
    .canvas-print-participantes {
        display: flex;
        align-items: baseline;
        gap: 10px;
        flex-wrap: wrap;
        padding: 10px 0 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid var(--ism-border);
        font-size: 10px;
    }

    .canvas-print-participantes__label {
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--ism-text-muted);
        flex-shrink: 0;
    }

    .canvas-print-participantes__lista {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 0;
        column-gap: 6px;
    }

    .canvas-print-participantes__item {
        color: var(--ism-text);
    }

    .canvas-print-participantes__item:not(:last-child)::after {
        content: '·';
        margin-left: 6px;
        color: var(--ism-border-strong);
    }

    .canvas-print-participantes__item.es-facilitador {
        font-weight: 700;
        color: var(--ism-green-700);
    }

    .canvas-estrategia {
        gap: 12px;
        margin-bottom: 0;
    }

    /* El breakpoint de pantalla angosta (@media max-width:991px, pensado
       para celular/tablet) también evalúa contra el ancho de página A4
       de Chromium al imprimir — sin este override, las columnas colapsan
       a 1-por-fila y el informe se vuelve 3-4 hojas casi vacías en vez
       de una compacta. El tamaño de página lo controlamos nosotros con
       @page, así que en impresión siempre va la grilla completa. */
    .canvas-fila,
    .canvas-fila--3,
    .canvas-fila--2,
    .canvas-capacidades {
        gap: 10px;
        break-inside: avoid;
    }

    .canvas-fila--3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .canvas-fila--2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .canvas-capacidades {
        grid-template-columns: repeat(4, 1fr) !important;
        margin-top: 6px;
    }

    /* Cada bloque del canvas se distingue con una barra superior de
       color ISM y un fondo tenue en vez de la caja blanca de borde gris
       fino que tenía la v1 — es la diferencia visual entre "una vista de
       pantalla impresa" y "un informe diseñado". */
    .canvas-bloque {
        border: none;
        border-top: 3px solid var(--ism-green);
        background: var(--ism-subtle-bg);
        border-radius: 0 0 6px 6px;
        padding: 10px 14px 12px;
        break-inside: avoid;
    }

    .canvas-bloque .eyebrow {
        color: var(--ism-green-700);
        font-size: 9.5px;
    }

    .canvas-lista {
        font-size: 10.5px;
        line-height: 1.5;
    }

    .badge-pkg {
        font-size: 8px;
        padding: 1px 6px;
    }

    .gantt-proyectos {
        break-inside: avoid;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--ism-border);
    }

    .gantt-proyectos > .eyebrow {
        color: var(--ism-green-700);
        font-size: 9.5px;
    }

    /* El visor de resúmenes del admin envuelve todo en un `.card`
       (borde+sombra+padding, pensado para pantalla) — en impresión se ve
       como un marco redundante alrededor del informe real. */
    .resumen-tabs.card {
        border: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }

    .gantt-proyectos__pista {
        break-inside: avoid;
    }

    /* Pie de página fijo — Chromium lo repite en cada hoja al imprimir.
       Lleva el nombre del evento/grupo (por si se separan las hojas), un
       aviso de confidencialidad y la fecha/hora exacta de generación. */
    .canvas-print-footer {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: 6px;
        border-top: 1px solid var(--ism-border);
        font-size: 8px;
        color: var(--ism-text-muted);
    }
}

.resumen-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ism-border);
}

.resumen-tabs__tab {
    padding: 8px 14px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--ism-text-muted);
    cursor: pointer;
}

.resumen-tabs__tab:hover {
    color: var(--ism-text);
}

.resumen-tabs__tab.is-activo {
    color: var(--ism-green);
    border-bottom-color: var(--ism-green);
}

.resumen-tabs__panel .canvas-estrategia {
    margin-top: 0;
}