/* ═══════════════════════════════════════════════════════════════
   Módulo Tickets — estilos compartidos por las pantallas de la Mesa de Soporte.

   Van en una hoja global y no en CSS aislado porque siete pantallas comparten las
   mismas piezas (píldoras, tablas, paneles, chips de SLA) y el scope de Blazor no se
   hereda entre componentes: aisladas, habría que repetir todo esto siete veces.

   Cero colores literales: todo sale de los tokens --mt-*.
   ═══════════════════════════════════════════════════════════════ */

/* ── Contenedor de página ── */
.sop-pg {
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.sop-pg-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sop-pg-titulo {
    margin: 4px 0 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mt-heading-color);
}

.sop-pg-sub {
    margin: 6px 0 0;
    font-size: 0.84rem;
    color: var(--mt-body-color);
    max-width: 68ch;
}

/* Buscador y botón de alta comparten el extremo derecho de la cabecera. */
.sop-pg-head-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sop-pg-buscar { min-width: 220px; }

.sop-pg-filtro-select { min-width: 170px; }

/* Cabecera de detalle: título a la izquierda, estado a la derecha. La comparten Problemas y
   Cambios; el detalle del ticket tiene la suya porque además lleva el chip del reloj. */
.sop-pg-head__left {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.sop-pg-head__right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Encabezado de bloque con un enlace a la derecha ("Ver Cambios"). */
.sop-pg-bloque-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sop-pg-volver {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--mt-muted-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
}

.sop-pg-volver:hover { color: var(--mt-heading-color); }

/* ── Filtros ── */
.sop-pg-filtros {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sop-pill {
    background: transparent;
    border: 1px solid var(--mt-input-border);
    border-radius: var(--mt-radius-xxl);
    padding: 6px 14px;
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--mt-body-color);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sop-pill:hover {
    border-color: var(--mt-primary);
    color: var(--mt-heading-color);
}

.sop-pill.is-active {
    background: var(--mt-primary);
    border-color: var(--mt-primary);
    color: var(--mt-on-primary);
    font-weight: 600;
}

/* Contador dentro del chip: evita entrar a cada filtro solo para descubrir que está vacío. */
.sop-pill-num {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--mt-radius-xxl);
    background: var(--mt-gray-100);
    color: var(--mt-body-color);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.5;
}

.sop-pill.is-active .sop-pill-num {
    background: color-mix(in srgb, var(--mt-on-primary) 20%, transparent);
    color: var(--mt-on-primary);
}

/* ── Estados vacíos y carga ── */
.sop-pg-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px;
    color: var(--mt-muted-color);
    font-size: 0.86rem;
}

.sop-pg-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
    text-align: center;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
}

.sop-pg-vacio i { font-size: 1.9rem; color: var(--mt-muted-color); }

.sop-pg-vacio h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mt-heading-color);
}

.sop-pg-vacio p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--mt-body-color);
    max-width: 50ch;
}

.sop-pg-hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--mt-muted-color);
    max-width: 68ch;
}

/* ── Pie de tabla: recuento + qué significan los estados ── */
.sop-pg-pie {
    display: flex;
    align-items: baseline;
    gap: 6px 16px;
    flex-wrap: wrap;
    padding: 10px 2px 0;
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--mt-body-color);
}

.sop-pg-pie-nota {
    font-weight: 400;
    color: var(--mt-muted-color);
    max-width: 72ch;
}

/* ── Buscar y enganchar tickets a un problema ── */
.sop-pg-vincular {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--mt-border-color);
}

/* ── Tablas ── */
.sop-pg-tabla-wrap {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    overflow-x: auto;
}

.sop-pg-tabla {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.sop-pg-tabla th {
    text-align: left;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mt-muted-color);
    padding: 12px 14px;
    border-bottom: 1px solid var(--mt-border-color);
    white-space: nowrap;
}

.sop-pg-tabla td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--mt-border-color);
    font-size: 0.83rem;
    color: var(--mt-body-color);
    vertical-align: middle;
}

.sop-pg-tabla tr:last-child td { border-bottom: none; }

.sop-pg-fila { cursor: pointer; }
.sop-pg-fila:hover { background: var(--mt-gray-50); }

.sop-pg-td-fuerte {
    display: block;
    font-weight: 600;
    color: var(--mt-heading-color);
}

.sop-pg-td-sub {
    display: block;
    font-size: 0.73rem;
    color: var(--mt-muted-color);
}

.sop-pg-td-accion { text-align: right; white-space: nowrap; }

.sop-pg-link {
    background: transparent;
    border: none;
    padding: 0 6px;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--mt-primary);
    cursor: pointer;
}

.sop-pg-link:hover { text-decoration: underline; }

/* ── Dos columnas ── */
.sop-pg-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.sop-pg-izq,
.sop-pg-der {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.sop-pg-bloque,
.sop-panel {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sop-panel--emergencia {
    border-color: var(--mt-error-light);
    background: var(--mt-error-subtle);
}

.sop-panel-acciones {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Formularios ── */
.sop-pg-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 400px;
}

.sop-pg-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sop-pg-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sop-input {
    width: 100%;
    min-height: var(--mt-input-height);
    border: 1px solid var(--mt-input-border);
    border-radius: var(--mt-radius);
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.86rem;
    color: var(--mt-heading-color);
    background: var(--mt-paper-bg);
}

.sop-input--mini { max-width: 96px; }

.sop-input:focus,
.sop-textarea:focus {
    outline: none;
    border-color: var(--mt-success);
    box-shadow: var(--mt-ring-shadow);
}

.sop-textarea {
    width: 100%;
    border: 1px solid var(--mt-input-border);
    border-radius: var(--mt-radius);
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--mt-heading-color);
    background: var(--mt-paper-bg);
    resize: vertical;
}

.sop-hint { font-size: 0.74rem; color: var(--mt-muted-color); }

.sop-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.81rem;
    color: var(--mt-body-color);
    cursor: pointer;
}

.sop-pg-guardar { align-self: flex-start; }

/* ── Píldoras de dato ── */
.sop-clave {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--mt-muted-color);
}

.sop-prio {
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: var(--mt-radius);
    white-space: nowrap;
}

.sop-prio--p1 { background: var(--mt-error-subtle);   color: var(--mt-error); }
.sop-prio--p2 { background: var(--mt-warning-subtle); color: var(--mt-warning); }
.sop-prio--p3 { background: var(--mt-info-subtle);    color: var(--mt-info); }
.sop-prio--p4 { background: var(--mt-gray-100);       color: var(--mt-muted-color); }

.sop-plan {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: var(--mt-radius-xxl);
    background: var(--mt-gray-100);
    color: var(--mt-body-color);
}

.sop-pg-impacto {
    font-weight: 700;
    color: var(--mt-heading-color);
}

/* ── Vínculos entre entidades ── */
.sop-pg-vinculo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--mt-border-color);
}

.sop-pg-vinculo:last-child { border-bottom: none; }

.sop-pg-vinculo-link {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    text-align: left;
}

.sop-pg-vinculo-titulo {
    font-size: 0.83rem;
    color: var(--mt-heading-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sop-pg-vinculo-origen {
    font-size: 0.73rem;
    color: var(--mt-muted-color);
    white-space: nowrap;
}

.sop-pg-cerrar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--mt-border-color);
}

/* ═══ Base de conocimiento ═══ */
.sop-kb-buscador {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-input-border);
    border-radius: var(--mt-radius-lg);
    padding: 4px 16px;
}

.sop-kb-buscador i { color: var(--mt-muted-color); }

.sop-kb-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 0;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--mt-heading-color);
}

.sop-kb-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Artículo: la anatomía de tarjeta del pipeline de vacantes ──
   Código y señal arriba, título, extracto, y los datos en filas con icono y texto entero. Antes
   eran números cifrados ("🔗 16") que solo se entendían pasando el ratón por encima. */
.sop-kb-item {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-xs);
    overflow: hidden;
    transition: box-shadow .12s, border-color .12s;
}

.sop-kb-item:hover { box-shadow: var(--mt-shadow-sm); }

.sop-kb-item.is-open { border-color: var(--mt-input-border); }

.sop-kb-head {
    width: 100%;
    background: transparent;
    border: none;
    padding: .875rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.sop-kb-top {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sop-kb-code {
    font-size: .62rem;
    font-weight: 600;
    font-family: var(--mt-font-mono);
    color: var(--mt-muted-color);
}

/* La señal que decide si abrirlo: si hay solución permanente o solo un paliativo. */
.sop-kb-senal {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .58rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 6px;
    white-space: nowrap;
    color: var(--mt-heading-color);
    background: var(--mt-gray-100);
}

.sop-kb-senal__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

.sop-kb-senal.is-ok .sop-kb-senal__dot      { background: var(--mt-success); }
.sop-kb-senal.is-parcial .sop-kb-senal__dot { background: var(--mt-warning); }

.sop-kb-chevron {
    margin-left: auto;
    font-size: .7rem;
    color: var(--mt-muted-color);
}

.sop-kb-titulo {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mt-heading-color);
    overflow-wrap: anywhere;
}

/* Extracto de la causa con el artículo cerrado: permite descartar sin abrir. */
.sop-kb-extracto {
    font-size: .8rem;
    line-height: 1.55;
    color: var(--mt-body-color);
    max-width: 90ch;
}

.sop-kb-rows {
    margin-top: .35rem;
    padding-top: .5rem;
    border-top: 1px solid var(--mt-border-color);
    display: flex;
    align-items: center;
    gap: .35rem 1.25rem;
    flex-wrap: wrap;
}

.sop-kb-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--mt-body-color);
}

.sop-kb-row i {
    width: 12px;
    text-align: center;
    font-size: .68rem;
    color: var(--mt-muted-color);
    flex: none;
}

/* Qué campos mira el buscador y cuántos resultados hay. Sin esto, quien no encuentra nada no sabe
   si probar otras palabras o si la búsqueda simplemente no llega hasta ahí. */
.sop-kb-pistas {
    display: flex;
    align-items: baseline;
    gap: .35rem 1rem;
    flex-wrap: wrap;
}

.sop-kb-alcance {
    font-size: .73rem;
    color: var(--mt-muted-color);
}


.sop-kb-origen {
    margin: 0;
    font-size: 0.75rem;
    color: var(--mt-muted-color);
}

.sop-kb-cuerpo {
    padding: 0 1.125rem 1.125rem;
    display: flex;
    flex-direction: column;
    /* Sin esto los hijos se estiran a todo el ancho y el enlace del pie queda centrado. */
    align-items: flex-start;
    gap: 14px;
    border-top: 1px solid var(--mt-border-color);
    padding-top: 14px;
}

/* El texto del artículo respeta la medida de lectura aunque la tarjeta ocupe todo el ancho. */
.sop-kb-cuerpo section { max-width: 90ch; }

.sop-kb-texto {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--mt-body-color);
    white-space: pre-wrap;
}

/* ═══ Cambios / CAB ═══ */
.sop-tipo {
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: var(--mt-radius-xxl);
    white-space: nowrap;
}

/* Cada tipo con su color: son tres flujos distintos, no tres etiquetas. */
.sop-tipo--estandar   { background: var(--mt-info-subtle);    color: var(--mt-info); }
.sop-tipo--normal     { background: var(--mt-gray-100);       color: var(--mt-body-color); }
.sop-tipo--emergencia { background: var(--mt-error-subtle);   color: var(--mt-error); }

.sop-votos {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sop-voto {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--mt-radius-xxl);
}

.sop-voto--si  { background: var(--mt-success-subtle); color: var(--mt-success); }
.sop-voto--no  { background: var(--mt-error-subtle);   color: var(--mt-error); }
.sop-voto--abs { background: var(--mt-gray-100);       color: var(--mt-muted-color); }

.sop-quorum, .sop-decision {
    font-size: 0.72rem;
    color: var(--mt-muted-color);
}

.sop-decision { font-weight: 700; color: var(--mt-heading-color); }

.sop-cab-conteo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sop-cab-num {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 4px;
    border-radius: var(--mt-radius);
}

.sop-cab-num span { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.sop-cab-num small { font-size: 0.66rem; margin-top: 3px; }

.sop-cab-num--si  { background: var(--mt-success-subtle); color: var(--mt-success); }
.sop-cab-num--no  { background: var(--mt-error-subtle);   color: var(--mt-error); }
.sop-cab-num--abs { background: var(--mt-gray-100);       color: var(--mt-muted-color); }

.sop-cab-quorum {
    margin: 0;
    font-size: 0.76rem;
    color: var(--mt-muted-color);
    text-align: center;
}

/* La decisión deducida, no tecleada: se muestra como el veredicto que es. */
.sop-cab-decision {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 8px;
    border-radius: var(--mt-radius);
}

.sop-cab-decision--aprobado  { background: var(--mt-success-subtle); color: var(--mt-success); }
.sop-cab-decision--rechazado { background: var(--mt-error-subtle);   color: var(--mt-error); }
.sop-cab-decision--empate    { background: var(--mt-warning-subtle); color: var(--mt-warning); }
.sop-cab-decision--pendiente { background: var(--mt-gray-100);       color: var(--mt-muted-color); }

.sop-cab-miembros {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sop-cab-miembros li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8rem;
}

.sop-cab-nombre { color: var(--mt-body-color); }

.sop-cab-pendiente {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--mt-muted-color);
}

.sop-cab-votar,
.sop-cab-desempate {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--mt-border-color);
}

/* ═══ Colas ═══ */
.sop-col-grid {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.sop-col-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sop-col-item {
    width: 100%;
    text-align: left;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    padding: 13px 15px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sop-col-item:hover { border-color: var(--mt-input-border); }
.sop-col-item.is-active { border-color: var(--mt-primary); box-shadow: var(--mt-shadow-sm); }

/* Ámbar: una cola sin gente es una alerta operativa, no un estado válido. */
.sop-col-item.is-alerta { border-color: var(--mt-warning-light); background: var(--mt-warning-subtle); }

.sop-col-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sop-col-item-nombre { font-size: 0.88rem; font-weight: 600; color: var(--mt-heading-color); }
/* Filas con icono y texto entero: la misma anatomía que la tarjeta del tablero, la del artículo
   de la base de conocimiento y la del ítem del catálogo. */
.sop-col-item-rows {
    margin-top: .4rem;
    padding-top: .4rem;
    border-top: 1px solid var(--mt-border-color);
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.sop-col-item-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--mt-body-color);
}

.sop-col-item-row i {
    width: 12px;
    text-align: center;
    font-size: .68rem;
    color: var(--mt-muted-color);
    flex: none;
}

/* Una cola sin gente no es un estado válido: sus tickets no tienen quién los tome. */
.sop-col-item-row.is-warn,
.sop-col-item-row.is-warn i { color: var(--mt-warning); }

.sop-col-detalle { min-width: 0; }

.sop-col-detalle-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sop-col-detalle-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mt-heading-color);
}

/* Persona + rol + botón. En móvil se apilan (ver la media query del final). */
.sop-col-agregar {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.sop-col-miembros {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.sop-col-miembros li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mt-border-color);
}

.sop-col-miembros li:last-child { border-bottom: none; }

.sop-col-miembro-txt { flex: 1; min-width: 0; }

.sop-col-carga {
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--mt-muted-color);
    white-space: nowrap;
}

/* Selector de rol dentro de la cola: angosto, para que no compita con el nombre. */
.sop-col-rol { width: 160px; flex-shrink: 0; }

.sop-col-detalle-txt { min-width: 0; }

/* La ficha de la cola reusa la rejilla global; dentro del panel no lleva superficie propia. */
.sop-col-ficha {
    padding-bottom: .75rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--mt-border-color);
}

/* ═══ Feriados ═══ */
.sop-pg-alta-feriado {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* .sop-input es width:100% para los formularios en columna; aquí los tres controles van en una
   línea —fecha, nombre, botón— y sin esto cada uno se llevaba un renglón entero. */
.sop-pg-alta-feriado .sop-input { width: auto; }
.sop-pg-alta-feriado input[type="date"] { flex: 0 0 auto; }
.sop-pg-alta-feriado input:not([type="date"]) { flex: 1 1 240px; min-width: 0; }

.sop-feriados {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.sop-feriados li > i {
    font-size: .78rem;
    color: var(--mt-muted-color);
    flex: none;
}

.sop-feriados li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mt-border-color);
    font-size: 0.82rem;
}

.sop-feriados li:last-child { border-bottom: none; }

.sop-feriado-fecha {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem;
    color: var(--mt-muted-color);
    min-width: 88px;
}

.sop-feriado-desc { flex: 1; color: var(--mt-heading-color); }

/* ═══ Reportes ═══ */
.sop-rep-filtros {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.sop-rep-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 10px;
}

.sop-kpi {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sop-kpi--destacado { border-color: var(--mt-success-light); background: var(--mt-success-subtle); }

.sop-kpi-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mt-muted-color);
}

.sop-kpi-valor {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mt-heading-color);
}

.sop-kpi-nota { font-size: 0.7rem; color: var(--mt-muted-color); }

.sop-kpi-delta { font-size: 0.72rem; font-weight: 600; }
.sop-kpi-delta--bien  { color: var(--mt-success); }
.sop-kpi-delta--mal   { color: var(--mt-error); }
.sop-kpi-delta--igual { color: var(--mt-muted-color); }

.sop-rep-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Gráficos planos, sin decoración: el dato es el protagonista. */
.sop-barras {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 152px;
    padding-top: 8px;
}

.sop-barra-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 5px;
    min-width: 0;
}

.sop-barra {
    width: 100%;
    min-height: 2px;
    background: var(--mt-primary);
    border-radius: 3px 3px 0 0;
}

.sop-barra--ok    { background: var(--mt-success); }
.sop-barra--medio { background: var(--mt-warning); }
.sop-barra--mal   { background: var(--mt-error); }

/* La meta se dibuja SOBRE las barras: sin la referencia, un 88% parece bueno. */
.sop-barras--meta { position: relative; }

.sop-meta-linea {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--mt-muted-color);
    pointer-events: none;
}

.sop-meta-txt {
    position: absolute;
    right: 0;
    top: -14px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mt-muted-color);
    background: var(--mt-paper-bg);
    padding: 0 4px;
}

.sop-barra-etiqueta {
    font-size: 0.62rem;
    color: var(--mt-muted-color);
    white-space: nowrap;
}

.sop-cumpl {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--mt-radius-xxl);
}

.sop-cumpl--ok    { background: var(--mt-success-subtle); color: var(--mt-success); }
.sop-cumpl--medio { background: var(--mt-warning-subtle); color: var(--mt-warning); }
.sop-cumpl--mal   { background: var(--mt-error-subtle);   color: var(--mt-error); }

/* ── Móvil ── */
@media (max-width: 900px) {
    .sop-pg { padding: 18px 14px; }

    .sop-pg-cols,
    .sop-col-grid,
    .sop-rep-cols {
        grid-template-columns: 1fr;
    }

    /* El panel de acciones NO sube al apilarse. En estas pantallas la columna derecha decide
       ("Cerrar el problema", el voto del comité) y la izquierda es el expediente en el que se basa
       esa decisión: ponerla arriba invita a resolver antes de leer. El detalle del ticket sí lo
       hace al revés, y con razón: ahí el especialista ya conoce el caso y viene a operarlo. */

    /* Los diálogos no fijan min-width en móvil. */
    .sop-pg-form { min-width: 0; }

    .sop-col-agregar { flex-direction: column; align-items: stretch; }
    .sop-col-rol { width: 100%; }
    .sop-pg-buscar { min-width: 0; width: 100%; }
    .sop-pg-head-acciones { width: 100%; }

    .sop-pg-duo { grid-template-columns: 1fr; }

    /* ── Tablas de la mesa en pantalla angosta ──
       Se conservan COMO TABLAS y se desplazan en horizontal, con la primera columna fija. Son
       rejillas de operación —comparar filas entre sí es el trabajo— y apilarlas en tarjetas pierde
       justo eso. La columna fija evita el problema real del scroll: perder de vista de qué fila es
       el dato que estás mirando.

       La excepción es "Mis tickets", que SÍ va en tarjetas: ahí quien mira es un colaborador desde
       su teléfono, no un especialista operando la mesa. */
    .sop-pg-tabla { min-width: max-content; }

    .sop-pg-tabla th:first-child,
    .sop-pg-tabla td:first-child {
        position: sticky;
        left: 0;
        background: var(--mt-paper-bg);
    }

    /* El borde marca dónde termina la columna fija cuando hay contenido desplazado debajo. */
    .sop-pg-tabla th:first-child::after,
    .sop-pg-tabla td:first-child::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background: var(--mt-border-color);
    }

    .sop-pg-tabla td:first-child { position: sticky; }

    .sop-pg-tabla-wrap { -webkit-overflow-scrolling: touch; }

    /* Objetivo táctil: un enlace de 18 px de alto no se acierta con el pulgar. */
    .sop-pg-link {
        min-height: 40px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
    }

    .sop-pg-td-accion {
        display: flex;
        gap: 4px;
        justify-content: flex-end;
    }

    /* Los filtros de las bandejas ocupan la fila entera antes que partirse a la mitad. */
    .sop-pg-filtro-select { min-width: 0; width: 100%; }

    .sop-rep-filtros > * { flex: 1 1 100%; }

    /* El diálogo no fija ancho mínimo; ya está arriba, pero el formulario de dos campos sí. */
    .sop-pg-duo { gap: 8px; }
}

/* ── Teléfono ── */
@media (max-width: 640px) {
    /* La fila de un ticket vinculado son cuatro datos en línea; a 390 px el título se recorta a
       "No emite c…", que es justo el dato por el que se mira la lista. El título toma su propia
       línea y el origen y la acción quedan debajo. */
    .sop-pg-vinculo {
        flex-wrap: wrap;
        gap: 4px 10px;
        padding: 10px 0;
    }

    .sop-pg-vinculo-link {
        flex: 1 0 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .sop-pg-vinculo-titulo { white-space: normal; }

    .sop-pg-vinculo-origen { margin-right: auto; }
}

/* ═══ Evidencia de código: commits enlazados a una incidencia ═══
   La misma sección en el detalle del ticket, del cambio y del problema. El mensaje del commit se
   muestra completo a propósito: el repositorio es privado y quien audita puede no tener GitHub, así
   que esto tiene que informar por sí solo. */
.sop-commits {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sop-commit {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 11px 0;
    border-bottom: 1px solid var(--mt-border-color);
}

.sop-commit:last-of-type { border-bottom: none; }

.sop-commit-head {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

/* El sha en monoespaciada: es un identificador que se copia y se compara carácter a carácter. */
.sop-commit-sha {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--mt-heading-color);
    background: var(--mt-gray-100);
    padding: 2px 8px;
    border-radius: var(--mt-radius);
}

.sop-commit-quitar { margin-left: auto; }

.sop-commit-mensaje {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--mt-body-color);
    white-space: pre-wrap;
}

.sop-commit-pie {
    display: flex;
    align-items: center;
    gap: 6px 14px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--mt-muted-color);
}

.sop-commit-pie a {
    color: var(--mt-info);
    font-weight: 600;
    text-decoration: none;
}

.sop-commit-pie a:hover { text-decoration: underline; }

.sop-commit-alta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--mt-border-color);
}

/* Aviso al resolver sin commit: advierte, no bloquea. */
.sop-det-aviso {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 14px;
    border-radius: var(--mt-radius);
    background: var(--mt-warning-subtle);
    border: 1px solid var(--mt-warning-light);
    font-size: 0.81rem;
    line-height: 1.45;
    color: var(--mt-body-color);
}

.sop-det-aviso i { color: var(--mt-warning); margin-top: 2px; }

/* ═══ Ficha de detalle, con la receta de /personal/vacantes ═══
   Ver DetalleVacantePage.razor.css §dvac-*: botón circular de vuelta y los hechos del registro en
   una rejilla rotulada, en vez de repartidos entre la cabecera, el panel lateral y una lista al
   pie. Vive aquí y no en un .razor.css porque la comparten las tres pantallas de detalle de la
   mesa —ticket, problema y cambio— y tres copias serían tres sitios donde el vocabulario se separa. */
.sop-back-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--mt-border-color);
    background: transparent;
    color: var(--mt-body-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

.sop-back-btn:hover {
    background: var(--mt-primary);
    border-color: var(--mt-primary);
    color: var(--mt-paper-bg);
}

.sop-sum {
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    padding: 1rem 1.25rem;
}

.sop-sum__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .875rem 1.5rem;
    margin-bottom: .75rem;
}

.sop-sum__item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.sop-sum__label {
    font-size: .68rem;
    color: var(--mt-muted-color);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sop-sum__val {
    font-size: .85rem;
    color: var(--mt-heading-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

/* Una línea de contexto bajo un dato de la ficha: "frenan cambios que ya están decididos". */
.sop-sum__nota {
    font-size: .68rem;
    line-height: 1.4;
    color: var(--mt-muted-color);
}

/* Un dato que pide acción se distingue del que solo informa. */
.sop-sum__val.is-warn { color: var(--mt-warning); }

/* Persona con su avatar. Nace en la tarjeta del tablero; aquí vive la copia que usan el reporte de
   carga por especialista y cualquier otra pantalla del módulo fuera de ese componente. */
.sop-cand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.sop-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mt-primary);
    color: var(--mt-paper-bg);
    font-size: .5rem;
    font-weight: 700;
    flex: none;
}

.sop-sum__desc {
    border-top: 1px solid var(--mt-border-color);
    padding-top: .75rem;
    font-size: .82rem;
    color: var(--mt-body-color);
    line-height: 1.55;
    white-space: pre-wrap;
    /* La ficha ocupa todo el ancho, pero un párrafo de 1400 px no se lee: el ojo pierde el
       renglón al volver. Se corta en la medida de lectura. */
    max-width: 78ch;
}

.sop-sum__actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding-top: .75rem;
    border-top: 1px solid var(--mt-border-color);
    margin-top: .75rem;
}

/* Acción de contorno: pesa menos que un botón sólido, que es lo correcto para algo que no es
   el paso siguiente del flujo sino una salida lateral. */
.sop-action {
    padding: .4rem .9rem;
    border-radius: var(--mt-radius);
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--mt-gray-50);
    border: 1px solid var(--mt-border-color);
    color: var(--mt-body-color);
    transition: background-color .15s, border-color .15s, color .15s;
}

.sop-action:hover:not(:disabled) {
    border-color: var(--mt-primary);
    color: var(--mt-heading-color);
}

.sop-action:disabled { opacity: .55; cursor: default; }

/* Escalar sube la prioridad: se anuncia en ámbar, no en gris. */
.sop-action--warn {
    background: var(--mt-warning-subtle);
    border-color: var(--mt-warning-light);
    color: var(--mt-warning);
}

.sop-action--warn:hover:not(:disabled) {
    border-color: var(--mt-warning);
    color: var(--mt-warning);
}

.sop-sum__inline {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
    padding-top: .75rem;
    margin-top: .75rem;
    border-top: 1px dashed var(--mt-border-color);
}