/* ========================================================================
   SHORT / MID TERM — estándar visual (docs/estandarizacion.md) en versión clara
   ------------------------------------------------------------------------
   Mismo lenguaje que la barra lateral, sin el tono oscuro: una familia del
   sistema, cuatro tamaños (15/13/12/11), tres pesos (400/500/600), un solo
   azul de acción, controles de 28–30px, radios 6/10, color solo cuando
   significa (en el texto, no en pastillas) y movimiento de 0.12s.
   Ámbito: :is(#shortTermContent, #midTermContent). Se carga después de styles.css y gana por
   especificidad; los !important solo donde styles.css ya los usa.
   ======================================================================== */

:is(#shortTermContent, #midTermContent) {
    /* Tokens claros equivalentes a los --to-* del tema (§3.1) */
    --st-card:     #ffffff;
    --st-card-2:   #f5f5f7;
    --st-field:    #ffffff;
    --st-line:     rgba(0, 0, 0, 0.08);
    --st-line-2:   rgba(0, 0, 0, 0.14);
    --st-text:     rgba(0, 0, 0, 0.88);
    --st-text-2:   rgba(0, 0, 0, 0.55);
    --st-text-3:   rgba(0, 0, 0, 0.35);
    --st-hover:    rgba(0, 0, 0, 0.04);
    --st-selected: rgba(0, 0, 0, 0.08);
    --st-accent:   #0a84ff;
    /* Semánticos: versiones legibles sobre blanco de los del tema */
    --st-green:    #1e8e3e;
    --st-red:      #d70015;
    --st-amber:    #b25e00;
    --st-teal:     #0f7d92;
    --st-purple:   #8944ab;
    /* Programado vs ejecutado: dos colores de texto, siempre acompañados de la fila */
    --st-plan:     #0a5fd6;
    --st-real:     #1e8e3e;
    --st-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --st-mono: 'SF Mono', Menlo, Consolas, monospace;

    font-family: var(--st-font);
    font-size: 13px;
    color: var(--st-text);
    -webkit-font-smoothing: antialiased;
    gap: 12px;
    padding: 12px 16px;
}

:is(#shortTermContent, #midTermContent) *:not(i):not(.fas):not(.far):not(.fab):not(.fa) {
    font-family: var(--st-font);
}

/* ----------------------------------------------------------------
   BARRA DE MÓDULO (§9): título + recuento + acciones, y fila de filtros
   ---------------------------------------------------------------- */
/* Una sola fila: título + cifras, navegación de semana y acciones.
   Por debajo de ~1280px la fila se parte sola. */
:is(#shortTermContent, #midTermContent) .st-barra {
    background: var(--st-card);
    border: 1px solid var(--st-line);
    border-radius: 10px;
    padding: 6px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
    min-height: 42px;
}

:is(#shortTermContent, #midTermContent) .st-filtros {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 28px;
}

/* El título toma el ancho sobrante; si las cifras no caben a su lado,
   bajan a una segunda línea dentro del propio título (la barra crece 16px,
   no 36). Navegación y acciones nunca se encogen. */
:is(#shortTermContent, #midTermContent) .st-titulo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    /* Base 0: el título se reparte el hueco que dejan filtros y acciones y sus
       cifras se parten dentro, en vez de empujar las acciones a otra fila. */
    flex: 1 1 0;
    min-width: 240px;
    font-size: 15px;
    font-weight: 600;
    color: var(--st-text);
    white-space: nowrap;
}

:is(#shortTermContent, #midTermContent) .st-filtros,
:is(#shortTermContent, #midTermContent) .st-acciones { flex-shrink: 0; }

/* Por debajo de 1600px el rango escrito se oculta: el selector ya muestra la
   semana y lleva el rango como tooltip. */
@media (max-width: 1600px) {
    :is(#shortTermContent, #midTermContent) .st-filtros .to-sep,
    :is(#shortTermContent, #midTermContent) .st-rango { display: none; }
}

:is(#shortTermContent, #midTermContent) .st-titulo > i {
    color: var(--st-accent);
    font-size: 14px;
    align-self: center;
}

/* Cifras vivas en el subtítulo (§5.4): recuento, plan, ejecutado, CFPC y PPC.
   #shortPlanningCCPSummary lo muestra el JS con display:block; como es hijo
   de un flex, se comporta igual como ítem en línea. */
:is(#shortTermContent, #midTermContent) .st-sub,
:is(#shortTermContent, #midTermContent) #shortPlanningCCPSummary {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--st-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:is(#shortTermContent, #midTermContent) .st-sub > span + span::before,
:is(#shortTermContent, #midTermContent) #shortPlanningCCPSummary > span + span::before {
    content: '·';
    margin-right: 10px;
    color: var(--st-text-3);
}

:is(#shortTermContent, #midTermContent) .st-sub b {
    font-weight: 500;
    color: var(--st-text);
}

:is(#shortTermContent, #midTermContent) .st-sub em {
    font-style: normal;
    color: var(--st-text-3);
}

:is(#shortTermContent, #midTermContent) .ccp-percentage.ccp-bajo { color: var(--st-red) !important; }
:is(#shortTermContent, #midTermContent) .ccp-percentage.ccp-alto { color: var(--st-green) !important; }

:is(#shortTermContent, #midTermContent) .st-acciones {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Con cambios pendientes, «Guardar» es la acción: «Agregar» deja de ser primario */
:is(#shortTermContent, #midTermContent) .st-acciones:has(#shortPlanningSaveChanges:not([style*="none"])) #shortPlanningAddActivity {
    background: rgba(0, 0, 0, 0.06);
    color: var(--st-text);
}

:is(#shortTermContent, #midTermContent) .st-rango {
    font-size: 12px;
    color: var(--st-text-2);
    white-space: nowrap;
}

:is(#shortTermContent, #midTermContent) .to-sep {
    width: 1px;
    height: 18px;
    background: var(--st-line-2);
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   BOTONES (§6)
   ---------------------------------------------------------------- */
:is(#shortTermContent, #midTermContent) .to-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--st-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

:is(#shortTermContent, #midTermContent) .to-btn:hover { background: rgba(0, 0, 0, 0.1); transform: none; }

:is(#shortTermContent, #midTermContent) .to-btn.pri {
    background: var(--st-accent);
    color: #fff;
}

:is(#shortTermContent, #midTermContent) .to-btn.pri:hover { background: #0071e3; }

:is(#shortTermContent, #midTermContent) .to-btn.peligro {
    background: transparent;
    color: var(--st-red);
}

:is(#shortTermContent, #midTermContent) .to-btn.peligro:hover { background: rgba(215, 0, 21, 0.1); }

:is(#shortTermContent, #midTermContent) .to-btn i { font-size: 12px; }

:is(#shortTermContent, #midTermContent) .to-icono-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--st-text);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.12s ease, color 0.12s ease;
}

:is(#shortTermContent, #midTermContent) .to-icono-btn:hover { background: rgba(0, 0, 0, 0.1); transform: none; opacity: 1; }
:is(#shortTermContent, #midTermContent) .to-icono-btn.sm { width: 24px; height: 24px; font-size: 11px; }
:is(#shortTermContent, #midTermContent) .to-icono-btn.pri { background: var(--st-accent); color: #fff; }
:is(#shortTermContent, #midTermContent) .to-icono-btn.pri:hover { background: #0071e3; }
:is(#shortTermContent, #midTermContent) .to-icono-btn.peligro { background: transparent; color: var(--st-red); }
:is(#shortTermContent, #midTermContent) .to-icono-btn.peligro:hover { background: rgba(215, 0, 21, 0.1); }

:is(#shortTermContent, #midTermContent) .to-btn:disabled,
:is(#shortTermContent, #midTermContent) .to-icono-btn:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

:is(#shortTermContent, #midTermContent) .st-sin-permiso {
    color: var(--st-text-3);
    font-size: 11px;
}

/* ----------------------------------------------------------------
   CAMPOS (§7)
   ---------------------------------------------------------------- */
:is(#shortTermContent, #midTermContent) .week-input,
:is(#shortTermContent, #midTermContent) .edit-row .form-control,
:is(#shortTermContent, #midTermContent) .form-group input,
:is(#shortTermContent, #midTermContent) .form-group select,
:is(#shortTermContent, #midTermContent) .day-input-compact input {
    height: 30px;
    padding: 0 8px;
    background: var(--st-field);
    border: 1px solid var(--st-line);
    border-radius: 6px;
    color: var(--st-text);
    font-size: 12px;
    box-sizing: border-box;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

:is(#shortTermContent, #midTermContent) .week-input:focus,
:is(#shortTermContent, #midTermContent) .edit-row .form-control:focus,
:is(#shortTermContent, #midTermContent) .form-group input:focus,
:is(#shortTermContent, #midTermContent) .form-group select:focus,
:is(#shortTermContent, #midTermContent) .day-input-compact input:focus,
:is(#shortTermContent, #midTermContent) .plan-inline-input:focus,
:is(#shortTermContent, #midTermContent) .real-inline-input:focus {
    outline: none;
    border-color: var(--st-accent);
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.25);
}

:is(#shortTermContent, #midTermContent) .edit-row .form-control { height: 28px; }
:is(#shortTermContent, #midTermContent) .edit-row .day-input { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
:is(#shortTermContent, #midTermContent) .edit-row .bloque-input { width: 100%; }
:is(#shortTermContent, #midTermContent) .edit-row td { padding: 4px 6px; }

:is(#shortTermContent, #midTermContent) .partida-dropdown {
    background: var(--st-card);
    border: 1px solid var(--st-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 5000;
    font-size: 12px;
}

/* Editor de celda (cantidad programada / ejecutada) */
:is(#shortTermContent, #midTermContent) .plan-inline-input,
:is(#shortTermContent, #midTermContent) .real-inline-input {
    width: 64px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--st-accent);
    border-radius: 6px;
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--st-text);
    background: var(--st-field);
}

/* ----------------------------------------------------------------
   TABLA (§8)
   ---------------------------------------------------------------- */
:is(#shortTermContent, #midTermContent) .short-planning-table-container {
    background: var(--st-card);
    border: 1px solid var(--st-line);
    border-radius: 10px;
    box-shadow: none;
    overflow: auto;
    /* Altura de ventana: barra (42) + relleno (12+12) + separación (12) + margen (12). La
       cabecera es pegajosa y la tabla desplaza por dentro; Pareto queda debajo. */
    max-height: calc(100vh - 92px);
    flex-shrink: 0;
    margin-bottom: 0;
}

:is(#shortTermContent, #midTermContent) .short-planning-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

:is(#shortTermContent, #midTermContent) .short-planning-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

:is(#shortTermContent, #midTermContent) .short-planning-table th {
    height: 26px;
    padding: 0 8px;
    background: var(--st-card-2);
    color: var(--st-text-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    border-right: none;
    border-bottom: 1px solid var(--st-line);
    box-shadow: none;
}

:is(#shortTermContent, #midTermContent) .short-planning-table th.col-partida { text-align: left; min-width: 200px; }
:is(#shortTermContent, #midTermContent) .short-planning-table th.col-restante,
:is(#shortTermContent, #midTermContent) .short-planning-table th.col-total,
:is(#shortTermContent, #midTermContent) .short-planning-table th.col-cumplimiento,
:is(#shortTermContent, #midTermContent) .short-planning-table th.dia { text-align: right; }
/* El calendario va encerrado entre dos líneas verticales: antes de Lun y antes de Total */
:is(#shortTermContent, #midTermContent) .short-planning-table th.col-retraso + th.dia,
:is(#shortTermContent, #midTermContent) .short-planning-table th.dia + th.col-total,
:is(#shortTermContent, #midTermContent) .short-planning-table .retraso-cell + .day-cell,
:is(#shortTermContent, #midTermContent) .short-planning-table .real-row > td:first-child,
:is(#shortTermContent, #midTermContent) .short-planning-table .day-cell + .total-cell { border-left: 1px solid var(--st-line-2); }
:is(#shortTermContent, #midTermContent) .short-planning-table th.col-acciones { text-align: center; }
:is(#shortTermContent, #midTermContent) .short-planning-table th.dia { min-width: 64px; }

/* Día y fecha en la misma línea: «Lun 28» */
:is(#shortTermContent, #midTermContent) .short-planning-table th.dia small {
    display: inline;
    font-size: 11px;
    font-weight: 400;
    color: var(--st-text-3);
    opacity: 1;
    margin-left: 3px;
}

:is(#shortTermContent, #midTermContent) .short-planning-table td {
    height: 26px;
    padding: 2px 8px;
    font-size: 12px;
    color: var(--st-text);
    text-align: left;
    vertical-align: middle;
    border-right: none;
    border-bottom: 1px solid var(--st-line);
    font-variant-numeric: tabular-nums;
}

/* Sin cebreado: el separador basta. Hover como en el menú. */
:is(#shortTermContent, #midTermContent) .plan-row,
:is(#shortTermContent, #midTermContent) .real-row { background: transparent; }
:is(#shortTermContent, #midTermContent) .short-planning-table tbody tr:hover td { background: var(--st-hover); }

/* Cada actividad son dos filas (plan / real): la fila plan no lleva
   separador propio y la fila real cierra el grupo con uno más visible. */
:is(#shortTermContent, #midTermContent) .plan-row > td:not([rowspan]) { border-bottom: none; }
:is(#shortTermContent, #midTermContent) .real-row td,
:is(#shortTermContent, #midTermContent) .plan-row > td[rowspan] { border-bottom: 1px solid var(--st-line-2); }
:is(#shortTermContent, #midTermContent) .short-planning-table tbody tr:last-child td { border-bottom: none; }

/* Números a la derecha */
:is(#shortTermContent, #midTermContent) .day-cell,
:is(#shortTermContent, #midTermContent) .total-cell,
:is(#shortTermContent, #midTermContent) .restante-cell,
:is(#shortTermContent, #midTermContent) .cumplimiento-cell { text-align: right; }

/* Fila plan: texto normal, peso 500. Fila real: en verde, es el dato vivo. */
:is(#shortTermContent, #midTermContent) .day-cell.plan,
:is(#shortTermContent, #midTermContent) .plan-row .total-cell {
    background: transparent;
    color: var(--st-plan);
    font-weight: 500;
    box-shadow: none;
}

:is(#shortTermContent, #midTermContent) .day-cell.plan.editable-plan { cursor: pointer; transition: background-color 0.12s ease; }
:is(#shortTermContent, #midTermContent) .day-cell.plan.editable-plan:hover { background: rgba(10, 132, 255, 0.08); border-color: var(--st-line); box-shadow: none; transform: none; }
:is(#shortTermContent, #midTermContent) .day-cell.plan.locked { cursor: not-allowed; opacity: 0.5; }
:is(#shortTermContent, #midTermContent) .day-cell.plan.locked:hover { background: transparent; }

:is(#shortTermContent, #midTermContent) .day-cell.plan.editing-active-short,
:is(#shortTermContent, #midTermContent) .day-cell.plan.editing-active-short:hover {
    background: rgba(178, 94, 0, 0.12) !important;
    box-shadow: inset 0 0 0 1px var(--st-amber);
}

:is(#shortTermContent, #midTermContent) .day-cell.plan[data-modified="true"] {
    border: none !important;
    border-bottom: 1px solid var(--st-line) !important;
    background: rgba(10, 132, 255, 0.1) !important;
    box-shadow: inset 0 0 0 1px var(--st-accent);
}

:is(#shortTermContent, #midTermContent) .day-cell.plan[data-modified="true"]::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--st-accent);
}

:is(#shortTermContent, #midTermContent) .day-cell.real,
:is(#shortTermContent, #midTermContent) .day-cell.real.has-value,
:is(#shortTermContent, #midTermContent) .day-cell.real.sin-plan {
    background: transparent;
    color: var(--st-real);
    font-weight: 500;
    font-style: normal;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

:is(#shortTermContent, #midTermContent) .day-cell.real.sin-plan { color: var(--st-text-3); }
:is(#shortTermContent, #midTermContent) .day-cell.real:hover,
:is(#shortTermContent, #midTermContent) .day-cell.real.sin-plan:hover { background: rgba(30, 142, 62, 0.08); border-color: var(--st-line); }
:is(#shortTermContent, #midTermContent) .real-row .total-cell { color: var(--st-real); }

:is(#shortTermContent, #midTermContent) .total-cell {
    background: transparent !important;
    font-size: 12px;
    font-weight: 600;
}

/* Estado en el texto, no en pastilla (§3.2) */
:is(#shortTermContent, #midTermContent) .cumplimiento-cell { font-size: 12px; font-weight: 600; }
:is(#shortTermContent, #midTermContent) .cumplimiento-alto  { background: transparent; color: var(--st-green); }
:is(#shortTermContent, #midTermContent) .cumplimiento-medio { background: transparent; color: var(--st-amber); }
:is(#shortTermContent, #midTermContent) .cumplimiento-bajo  { background: transparent; color: var(--st-red); }

/* La celda de partida abarca las dos filas (plan y real): aprovecha las dos
   líneas, código arriba y nombre abajo con puntos suspensivos y title. */
:is(#shortTermContent, #midTermContent) .partida-cell { text-align: left; max-width: 320px; }
:is(#shortTermContent, #midTermContent) .partida-info { flex-direction: column; align-items: stretch; gap: 1px; min-width: 0; }
:is(#shortTermContent, #midTermContent) .partida-info .codigo {
    font-family: var(--st-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--st-text-2);
    flex-shrink: 0;
}
:is(#shortTermContent, #midTermContent) .partida-info .nombre {
    display: block;
    font-size: 12px;
    color: var(--st-text);
    line-height: 1.25;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:is(#shortTermContent, #midTermContent) .partida-info .tipo-partida { font-size: 11px; font-weight: 500; color: var(--st-text-3); }

:is(#shortTermContent, #midTermContent) .lote-cell { font-size: 12px; color: var(--st-text-2); text-align: left; }
:is(#shortTermContent, #midTermContent) .lote-info { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; white-space: nowrap; }
:is(#shortTermContent, #midTermContent) .lote-cell .lote-badge {
    display: inline;
    background: transparent;
    color: var(--st-text-2);
    padding: 0;
    border-radius: 0;
    font-family: var(--st-mono);
    font-size: 11px;
    font-weight: 500;
    margin: 0;
}
:is(#shortTermContent, #midTermContent) .lote-nombre { font-size: 11px; color: var(--st-text-3); overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

:is(#shortTermContent, #midTermContent) .bloque-cell { font-weight: 400; color: var(--st-text-2); }
:is(#shortTermContent, #midTermContent) .restante-cell { font-weight: 500; color: var(--st-text); white-space: nowrap; }
:is(#shortTermContent, #midTermContent) .actions-cell,
:is(#shortTermContent, #midTermContent) .short-planning-table td.actions-cell { text-align: center; white-space: nowrap; padding: 3px 6px; }
:is(#shortTermContent, #midTermContent) .actions-cell .to-icono-btn + .to-icono-btn { margin-left: 2px; }

/* Títulos de la jerarquía de partidas (por prefijo de código, como Long Term).
   Fila de 24px en gris, sangría de 12px por nivel; los niveles hondos, más suaves. */
:is(#shortTermContent, #midTermContent) .short-planning-table tr.st-titulo-row td {
    height: 24px;
    padding: 2px 8px;
    background: var(--st-card-2);
    color: var(--st-text);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--st-line);
    border-left: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:is(#shortTermContent, #midTermContent) .short-planning-table tbody tr.st-titulo-row:hover td { background: var(--st-card-2); }

:is(#shortTermContent, #midTermContent) .st-titulo-row .codigo {
    font-family: var(--st-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--st-text-2);
    margin-right: 8px;
}

:is(#shortTermContent, #midTermContent) .st-titulo-row.nivel-2 td { padding-left: 20px; }
:is(#shortTermContent, #midTermContent) .st-titulo-row.nivel-3 td { padding-left: 32px; font-weight: 500; }
:is(#shortTermContent, #midTermContent) .st-titulo-row.nivel-4 td { padding-left: 44px; font-weight: 500; color: var(--st-text-2); }
:is(#shortTermContent, #midTermContent) .st-titulo-row.nivel-5 td { padding-left: 56px; font-weight: 500; color: var(--st-text-2); }

/* Vacío que explica (§8) */
:is(#shortTermContent, #midTermContent) .to-vacio,
:is(#shortTermContent, #midTermContent) .empty-state td {
    padding: 40px 16px !important;
    text-align: center;
    color: var(--st-text-2);
    font-size: 12px;
}

:is(#shortTermContent, #midTermContent) .to-vacio i,
:is(#shortTermContent, #midTermContent) .empty-state td i {
    display: block;
    font-size: 22px;
    color: var(--st-text-3);
    margin-bottom: 8px;
}

/* ----------------------------------------------------------------
   PARETO
   ---------------------------------------------------------------- */
:is(#shortTermContent, #midTermContent) .pareto-chart-container {
    background: var(--st-card);
    border: 1px solid var(--st-line);
    border-radius: 10px;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
}

:is(#shortTermContent, #midTermContent) .pareto-chart-container .resumen-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text) !important;
}

:is(#shortTermContent, #midTermContent) .pareto-chart-container .resumen-header {
    background: transparent;
    padding: 8px 12px;
    border-bottom: 1px solid var(--st-line);
    border-radius: 10px 10px 0 0;
}
:is(#shortTermContent, #midTermContent) .pareto-chart-container .resumen-content { padding: 8px 12px 10px; }

:is(#shortTermContent, #midTermContent) .pareto-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

:is(#shortTermContent, #midTermContent) .pareto-chart-column { height: 260px; }

:is(#shortTermContent, #midTermContent) .pareto-chart-column canvas {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* Tabla de causas: cabecera gris, filas de 26px, sin bordes de color ni movimiento */
:is(#shortTermContent, #midTermContent) .pareto-stats-header,
:is(#shortTermContent, #midTermContent) .pareto-stat-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 0.9fr 1.3fr 0.7fr;
    gap: 8px;
    align-items: center;
    padding: 0 8px;
}

:is(#shortTermContent, #midTermContent) .pareto-stats-header {
    height: 26px;
    background: var(--st-card-2);
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--st-line);
    font-size: 11px;
    font-weight: 600;
    color: var(--st-text-2);
    text-transform: none;
}

:is(#shortTermContent, #midTermContent) .pareto-stats-header span:nth-child(n+2),
:is(#shortTermContent, #midTermContent) .pareto-stat-row .stat-value,
:is(#shortTermContent, #midTermContent) .pareto-stat-row .stat-monto,
:is(#shortTermContent, #midTermContent) .pareto-stat-row .stat-porcentaje { text-align: right; }

:is(#shortTermContent, #midTermContent) .pareto-stats { background: transparent; border-radius: 0; }

:is(#shortTermContent, #midTermContent) .pareto-stat-row {
    min-height: 26px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--st-line);
    font-size: 12px;
    transition: background-color 0.12s ease;
}

:is(#shortTermContent, #midTermContent) .pareto-stat-row:hover { background: var(--st-hover); transform: none; }
:is(#shortTermContent, #midTermContent) .pareto-stat-row:last-child { border-bottom: none; }

:is(#shortTermContent, #midTermContent) .pareto-stat-row .categoria-name {
    font-size: 12px;
    font-weight: 400;
    color: var(--st-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:is(#shortTermContent, #midTermContent) .pareto-stat-row .stat-value,
:is(#shortTermContent, #midTermContent) .pareto-stat-row .stat-monto { font-size: 12px; color: var(--st-text-2); font-weight: 400; }
:is(#shortTermContent, #midTermContent) .pareto-stat-row .stat-porcentaje { font-size: 12px; font-weight: 500; color: var(--st-text); }

:is(#shortTermContent, #midTermContent) .pareto-loading-placeholder,
:is(#shortTermContent, #midTermContent) .pareto-placeholder,
:is(#shortTermContent, #midTermContent) .pareto-message,
:is(#shortTermContent, #midTermContent) .chart-empty-state {
    padding: 40px 16px !important;
    background: transparent;
    color: var(--st-text-2) !important;
    font-size: 12px;
}

:is(#shortTermContent, #midTermContent) .pareto-loading-placeholder i,
:is(#shortTermContent, #midTermContent) .pareto-placeholder-icon,
:is(#shortTermContent, #midTermContent) .chart-empty-state-icon {
    font-size: 22px !important;
    color: var(--st-text-3);
    margin-bottom: 8px !important;
}

:is(#shortTermContent, #midTermContent) .pareto-loading-placeholder p,
:is(#shortTermContent, #midTermContent) .pareto-placeholder-text { font-size: 12px; margin: 0; }
:is(#shortTermContent, #midTermContent) .pareto-placeholder-hint,
:is(#shortTermContent, #midTermContent) .chart-empty-state-subtitle { font-size: 11px; color: var(--st-text-3); }

:is(#shortTermContent, #midTermContent) .pareto-stat-row > span { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------
   FORMULARIO «NUEVA ACTIVIDAD» (§7)
   ---------------------------------------------------------------- */
:is(#shortTermContent, #midTermContent) .planning-form-container {
    background: var(--st-card);
    border: 1px solid var(--st-line);
    border-radius: 10px;
    box-shadow: none;
    animation: none;
    margin-bottom: 0;
}

:is(#shortTermContent, #midTermContent) .planning-form-header {
    background: transparent;
    color: var(--st-text);
    padding: 8px 12px;
    border-bottom: 1px solid var(--st-line);
    border-radius: 10px 10px 0 0;
}

:is(#shortTermContent, #midTermContent) .planning-form-header h4 { font-size: 13px; font-weight: 600; }
:is(#shortTermContent, #midTermContent) .planning-form-header h4 i { color: var(--st-accent); margin-right: 6px; }

:is(#shortTermContent, #midTermContent) .btn-close-form {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--st-text-2);
    transition: background-color 0.12s ease, color 0.12s ease;
}

:is(#shortTermContent, #midTermContent) .btn-close-form:hover { background: var(--st-hover); color: var(--st-text); }
:is(#shortTermContent, #midTermContent) .planning-form { padding: 12px; }

:is(#shortTermContent, #midTermContent) .form-group label,
:is(#shortTermContent, #midTermContent) .day-input-compact label {
    font-size: 12px;
    font-weight: 500;
    color: var(--st-text-2);
    margin-bottom: 4px;
}

:is(#shortTermContent, #midTermContent) .form-group label i { color: var(--st-accent); margin-right: 5px; }
:is(#shortTermContent, #midTermContent) .day-input-compact small { font-size: 11px; color: var(--st-text-3); }
:is(#shortTermContent, #midTermContent) .day-input-compact input { text-align: right; font-variant-numeric: tabular-nums; }

:is(#shortTermContent, #midTermContent) .partida-info-inline {
    background: var(--st-card-2);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--st-text-2);
}

:is(#shortTermContent, #midTermContent) .partida-info-inline strong { color: var(--st-text); font-weight: 500; }
:is(#shortTermContent, #midTermContent) .form-section-compact h5 { font-size: 13px; font-weight: 600; color: var(--st-text); margin-bottom: 8px; }
:is(#shortTermContent, #midTermContent) .form-section-compact h5 i { color: var(--st-accent); }

:is(#shortTermContent, #midTermContent) .form-actions {
    padding-top: 10px;
    border-top: 1px solid var(--st-line);
    gap: 6px;
}

:is(#shortTermContent, #midTermContent) .form-actions .btn {
    height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: none;
    transition: background-color 0.12s ease;
}

:is(#shortTermContent, #midTermContent) .form-actions .btn:hover { transform: none; box-shadow: none; }
:is(#shortTermContent, #midTermContent) .form-actions .btn-secondary { background: rgba(0, 0, 0, 0.06); color: var(--st-text); }
:is(#shortTermContent, #midTermContent) .form-actions .btn-secondary:hover { background: rgba(0, 0, 0, 0.1); }
:is(#shortTermContent, #midTermContent) .form-actions .btn-primary { background: var(--st-accent); color: #fff; }
:is(#shortTermContent, #midTermContent) .form-actions .btn-primary:hover { background: #0071e3; }

/* ========================================================================
   MID TERM — particularidades: buscador, tabla de 28 días con columnas
   fijas, filas partida → lotes, paneles de resumen y gráficos
   ======================================================================== */
#midTermContent .st-buscar {
    position: relative;
    display: inline-flex;
    align-items: center;
}

#midTermContent .st-buscar i {
    position: absolute;
    left: 8px;
    font-size: 11px;
    color: var(--st-text-3);
    pointer-events: none;
}

#midTermContent .st-buscar input {
    height: 28px;
    width: 180px;
    padding: 0 8px 0 24px;
    background: var(--st-field);
    border: 1px solid var(--st-line);
    border-radius: 6px;
    font-size: 12px;
    color: var(--st-text);
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

#midTermContent .st-buscar input:focus {
    border-color: var(--st-accent);
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.25);
}

#midTermContent .st-rango-fijo { min-width: 190px; text-align: center; color: var(--st-text); }
#midTermContent .st-sub .st-alerta { color: var(--st-red); }

/* Tabla */
#midTermContent .mid-planning-table-container {
    background: var(--st-card);
    border: 1px solid var(--st-line);
    border-radius: 10px;
    box-shadow: none;
    margin: 0;
    max-height: calc(100vh - 92px);
    flex-shrink: 0;
}

#midTermContent .mid-planning-table {
    font-size: 12px;
    color: var(--st-text);
    min-width: 1700px;
}

#midTermContent .mid-planning-table th,
#midTermContent .mid-planning-table thead th,
#midTermContent .mid-planning-table thead th.sticky-col,
#midTermContent .mid-planning-table thead th.sticky-col-2,
#midTermContent .mid-planning-table thead th.sticky-col-3,
#midTermContent .mid-planning-table th.semana,
#midTermContent .mid-planning-table th.col-total {
    height: 26px;
    padding: 0 6px;
    background: var(--st-card-2) !important;
    color: var(--st-text-2) !important;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid var(--st-line);
}

#midTermContent .mid-planning-table th.semana { text-align: center; border-left: 1px solid var(--st-line-2); }
#midTermContent .mid-planning-table th.col-total,
#midTermContent .mid-planning-table th.col-restante { text-align: right; }
#midTermContent .mid-planning-table th.col-total { border-left: 1px solid var(--st-line-2); }
#midTermContent .mid-planning-table th.col-retraso,
#midTermContent .mid-planning-table th.col-restricciones,
#midTermContent .mid-planning-table th.col-acciones { text-align: center; }

#midTermContent .mid-planning-table th.dia {
    min-width: 42px;
    padding: 0 4px;
    text-align: right;
    font-weight: 600;
}

#midTermContent .mid-planning-table th.dia small {
    display: inline;
    font-size: 11px;
    font-weight: 400;
    color: var(--st-text-3);
    opacity: 1;
    margin: 0 0 0 2px;
}

/* Cada semana empieza con una línea vertical (cabecera de días y cuerpo) */
#midTermContent .mid-planning-table tr.dias-semana th.dia:nth-child(7n+1) { border-left: 1px solid var(--st-line-2); }
#midTermContent .mid-planning-table tbody tr:not(.st-titulo-row) td:nth-child(7),
#midTermContent .mid-planning-table tbody tr:not(.st-titulo-row) td:nth-child(14),
#midTermContent .mid-planning-table tbody tr:not(.st-titulo-row) td:nth-child(21),
#midTermContent .mid-planning-table tbody tr:not(.st-titulo-row) td:nth-child(28),
#midTermContent .mid-planning-table tbody tr:not(.st-titulo-row) td:nth-child(35) { border-left: 1px solid var(--st-line-2); }

#midTermContent .mid-planning-table tbody td {
    height: 26px;
    padding: 2px 6px;
    font-size: 12px;
    color: var(--st-text);
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--st-line);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

#midTermContent .mid-planning-table tbody tr:last-child td { border-bottom: none; }
#midTermContent .mid-planning-table tbody tr:hover td { background: var(--st-hover); }
#midTermContent .mid-planning-table tbody td small,
#midTermContent .mid-planning-table tbody td .text-muted { font-size: 11px; color: var(--st-text-3); }

/* Columnas fijas: mismo fondo que la fila, separador al final de las tres */
#midTermContent .mid-planning-table th.sticky-col,
#midTermContent .mid-planning-table td.sticky-col { min-width: 90px; font-weight: 400; border-right: none; }
#midTermContent .mid-planning-table th.sticky-col-2,
#midTermContent .mid-planning-table td.sticky-col-2 { left: 90px; min-width: 240px; max-width: 280px; border-right: none; }
#midTermContent .mid-planning-table th.sticky-col-3,
#midTermContent .mid-planning-table td.sticky-col-3 { left: 330px; min-width: 56px; max-width: 70px; border-right: 1px solid var(--st-line-2); }
#midTermContent .mid-planning-table td.sticky-col,
#midTermContent .mid-planning-table td.sticky-col-2,
#midTermContent .mid-planning-table td.sticky-col-3 { background: var(--st-card); }
#midTermContent .mid-planning-table tbody tr:hover td.sticky-col,
#midTermContent .mid-planning-table tbody tr:hover td.sticky-col-2,
#midTermContent .mid-planning-table tbody tr:hover td.sticky-col-3 { background: #f7f7f8; }

#midTermContent .mid-planning-table td.sticky-col {
    font-family: var(--st-mono);
    font-size: 11px;
    color: var(--st-text-2);
}

/* Números a la derecha */
#midTermContent .mid-planning-table td.editable-cell,
#midTermContent .mid-planning-table td.mid-sum-cell,
#midTermContent .mid-planning-table td.total-cell,
#midTermContent .mid-planning-table td.restante-cell,
#midTermContent .mid-planning-table td.text-end { text-align: right; }
#midTermContent .mid-planning-table td.text-center,
#midTermContent .mid-planning-table td.restriccion-cell,
#midTermContent .mid-planning-table td.actions-cell { text-align: center; }

/* Celdas de día: estado en el texto, tinte solo con restricción */
#midTermContent .mid-planning-table td.editable-cell,
#midTermContent .mid-planning-table td.editable-cell:empty {
    background: transparent;
    min-width: 42px;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

#midTermContent .mid-planning-table td.editable-cell:hover,
#midTermContent .mid-planning-table td.editable-cell:empty:hover {
    background: rgba(10, 132, 255, 0.08);
    box-shadow: none;
    transform: none;
}

#midTermContent .mid-planning-table td.editable-cell.has-value { background: transparent; color: var(--st-plan); font-weight: 500; }
#midTermContent .mid-planning-table td.editable-cell.has-value:hover { background: rgba(10, 132, 255, 0.08); }
#midTermContent .mid-planning-table td.editable-cell.has-partial-restriction { background: rgba(178, 94, 0, 0.1); color: var(--st-amber); font-weight: 500; }
#midTermContent .mid-planning-table td.editable-cell.has-partial-restriction:hover { background: rgba(178, 94, 0, 0.16); }
#midTermContent .mid-planning-table td.editable-cell.has-total-restriction { background: rgba(215, 0, 21, 0.1); color: var(--st-red); font-weight: 500; }
#midTermContent .mid-planning-table td.editable-cell.has-total-restriction:hover { background: rgba(215, 0, 21, 0.16); }

/* Fila de partida (cabecera del grupo) y filas de lote */
#midTermContent .mid-planning-table tbody tr.mid-partida-row td,
#midTermContent .mid-planning-table tbody tr.mid-partida-row td.sticky-col,
#midTermContent .mid-planning-table tbody tr.mid-partida-row td.sticky-col-2,
#midTermContent .mid-planning-table tbody tr.mid-partida-row td.sticky-col-3 {
    background: var(--st-card-2);
    color: var(--st-text);
    font-weight: 500;
    border-top: none;
}

#midTermContent .mid-planning-table tbody tr.mid-partida-row:hover td { background: var(--st-card-2); }
/* El total de la fila de partida hereda el "transparent !important" de Short Term: se fija en gris */
#midTermContent .mid-planning-table tbody tr.mid-partida-row td.total-cell { background: var(--st-card-2) !important; }
#midTermContent .mid-planning-table tbody tr.mid-partida-row td.sticky-col-2 { font-weight: 600; }
#midTermContent .mid-planning-table tbody tr.mid-partida-row td.mid-sum-cell { color: var(--st-plan); font-weight: 500; }
#midTermContent .mid-planning-table .mid-expand-btn { color: var(--st-text-2); font-size: 12px; padding: 0 6px 0 0; }
#midTermContent .mid-planning-table .mid-lotes-badge {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--st-text-3);
    font-size: 11px;
    font-weight: 400;
    margin-left: 6px;
}

#midTermContent .mid-planning-table tbody tr.mid-lote-row td.sticky-col-2 { padding-left: 26px; font-weight: 400; color: var(--st-text); }
#midTermContent .mid-planning-table .lote-connector { display: none; }
#midTermContent .mid-planning-table .lote-cell,
#midTermContent .mid-planning-table .col-lote { font-family: var(--st-mono); font-size: 11px; font-weight: 500; color: var(--st-text-2); }
#midTermContent .mid-planning-table .bloque-cell,
#midTermContent .mid-planning-table .col-bloque { font-size: 12px; color: var(--st-text-2); }
#midTermContent .mid-planning-table .restante-cell,
#midTermContent .mid-planning-table .total-cell { font-size: 12px; }
#midTermContent .mid-planning-table td.total-cell { font-weight: 600; border-left: 1px solid var(--st-line-2); }
#midTermContent .mid-planning-table tr.mid-lote-row td.total-cell { color: var(--st-plan); }
#midTermContent .mid-planning-table .restriccion-cell { padding: 2px !important; }
#midTermContent .mid-planning-table .restriccion-cell i { font-size: 12px; }

/* % de retraso: color de texto, sin tinte (styles.css lo pinta con !important) */
#midTermContent .mid-planning-table tbody tr td.retraso-no-iniciado { color: var(--st-red); font-weight: 500; background: var(--st-card-2) !important; }
#midTermContent .mid-planning-table tbody tr td.retraso-atrasado { color: var(--st-amber); font-weight: 500; background: var(--st-card-2) !important; }
#midTermContent .mid-planning-table tbody tr td.retraso-bien { color: var(--st-green); font-weight: 500; background: var(--st-card-2) !important; }

/* Título de jerarquía: la celda del texto queda fija al desplazar */
#midTermContent .mid-planning-table tr.st-titulo-row td.st-titulo-fija {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--st-card-2);
    font-family: var(--st-font);
    font-size: 12px;
    color: var(--st-text);
}

#midTermContent .mid-planning-table tr.st-titulo-row td { background: var(--st-card-2); }

/* Paneles de resumen y gráficos: superficies planas */
#midTermContent .st-grid-2 {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 12px;
    margin: 0;
}

:is(#shortTermContent, #midTermContent) .st-panel {
    background: var(--st-card);
    border: 1px solid var(--st-line);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: none;
    margin: 0;
}

:is(#shortTermContent, #midTermContent) .st-panel-titulo {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
}

:is(#shortTermContent, #midTermContent) .st-panel-titulo i { color: var(--st-accent); margin-right: 6px; }
#midTermContent [data-chart] canvas { max-height: 280px !important; }

#midTermContent .restrictions-summary-card { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
#midTermContent .restrictions-summary-item { padding: 5px 0; border-bottom: 1px solid var(--st-line); font-size: 12px; }
#midTermContent .restrictions-summary-item.highlight { padding: 5px 6px; margin: 0 -6px; border-radius: 6px; }
#midTermContent .restrictions-summary-item.highlight.success { background: rgba(30, 142, 62, 0.08); }
#midTermContent .restrictions-summary-item.highlight.danger { background: rgba(215, 0, 21, 0.08); }
#midTermContent .restrictions-summary-label { font-size: 12px; font-weight: 400; color: var(--st-text-2); }
#midTermContent .restrictions-summary-value { font-size: 12px; font-weight: 500; color: var(--st-text); font-variant-numeric: tabular-nums; }
#midTermContent .restrictions-summary-value.primary,
#midTermContent .restrictions-summary-value.info { color: var(--st-accent); }
#midTermContent .restrictions-summary-value.warning { color: var(--st-amber); }
#midTermContent .restrictions-summary-value.success { color: var(--st-green); }
#midTermContent .restrictions-summary-value.danger { color: var(--st-red); }
#midTermContent .restrictions-category-breakdown { margin-top: 8px; padding: 8px 10px; background: var(--st-card-2); border-radius: 6px; border-left: none; }
#midTermContent .restrictions-category-title { font-size: 11px; font-weight: 600; color: var(--st-text-2); margin-bottom: 4px; }
#midTermContent .restrictions-category-item { padding: 3px 0; border-bottom: 1px solid var(--st-line); }
#midTermContent .restrictions-category-name { font-size: 12px; color: var(--st-text); }
#midTermContent .restrictions-category-value { font-size: 12px; color: var(--st-red); font-weight: 500; font-variant-numeric: tabular-nums; }
#midTermContent .restrictions-empty-message { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--st-line); color: var(--st-green); }
#midTermContent .restrictions-empty-message p { font-size: 12px; font-weight: 500; }

/* ----------------------------------------------------------------
   Columna de acciones: rejilla de dos huecos de 24px para que los botones
   de todas las filas queden alineados (una fila con un solo botón deja el
   segundo hueco vacío). Vale para Short y Mid Term.
   ---------------------------------------------------------------- */
:is(#shortTermContent, #midTermContent) td.actions-cell {
    display: grid;
    grid-template-columns: 24px 24px;
    gap: 2px;
    justify-content: center;
    align-items: center;
}

:is(#shortTermContent, #midTermContent) td.actions-cell .to-icono-btn + .to-icono-btn { margin-left: 0; }
:is(#shortTermContent, #midTermContent) th.col-acciones { min-width: 62px; width: 62px; }

/* Mid Term: fila en edición y celda modificada (sin estilos en línea) */
#midTermContent .mid-planning-table td.editable-cell.editing-active {
    box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.35);
}

#midTermContent .mid-planning-table td.editable-cell[data-modified="true"] {
    background: rgba(10, 132, 255, 0.1) !important;
    border: none !important;
    border-bottom: 1px solid var(--st-line) !important;
    box-shadow: inset 0 0 0 1px var(--st-accent);
    color: var(--st-plan);
    font-weight: 500;
    position: relative;
}

/* styles.css pinta un carácter mal codificado como marca: se sustituye por un punto */
#midTermContent .mid-planning-table td.editable-cell[data-modified="true"]::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--st-accent);
    font-size: 0;
}

#midTermContent .mid-planning-table td.editable-cell input {
    width: 100%;
    min-width: 44px;
    height: 22px;
    padding: 0 4px;
    border: 1px solid var(--st-accent);
    border-radius: 4px;
    font-size: 12px !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: var(--st-field);
    color: var(--st-text);
}

/* Botón de guardar de la fila con cambios pendientes: en el acento */
#midTermContent .to-icono-btn.active { background: var(--st-accent); color: #fff; }
#midTermContent .to-icono-btn.active.con-cambios { background: #0071e3; }

/* ----------------------------------------------------------------
   Modal ligero (estándar §10, versión clara) usado por el pegado desde Excel.
   Cuelga de <body>, por eso lleva sus propios tokens.
   ---------------------------------------------------------------- */
.st-modal-overlay {
    --st-card: #fff; --st-line: rgba(0,0,0,.08); --st-text: rgba(0,0,0,.88);
    --st-text-2: rgba(0,0,0,.55); --st-accent: #0a84ff; --st-cab: #1a1a2e;
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

.st-modal {
    width: min(480px, 100%);
    max-height: 90vh;
    background: var(--st-card);
    border-radius: 12px;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.st-modal-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--st-cab); color: #fff;
    font-size: 13px; font-weight: 600;
}

.st-modal-cerrar {
    width: 28px; height: 28px; border: none; border-radius: 6px;
    background: transparent; color: rgba(255,255,255,.7);
    font-size: 18px; line-height: 1; cursor: pointer;
}

.st-modal-cerrar:hover { background: rgba(255,255,255,.12); color: #fff; }
.st-modal-cuerpo { padding: 14px 16px; font-size: 13px; color: var(--st-text); line-height: 1.45; overflow: auto; flex: 1; }
.st-modal-cuerpo b { font-weight: 600; }

.st-modal-pie {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--st-line);
}

.st-modal-resumen { margin-right: auto; font-size: 12px; color: var(--st-text-2); font-variant-numeric: tabular-nums; }

.st-modal .to-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 10px; border: none; border-radius: 6px;
    background: rgba(0,0,0,.06); color: var(--st-text);
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: background-color 0.12s ease;
}

.st-modal .to-btn:hover { background: rgba(0,0,0,.1); }
.st-modal .to-btn.pri { background: var(--st-accent); color: #fff; }
.st-modal .to-btn.pri:hover { background: #0071e3; }
.st-modal .to-btn:disabled { opacity: .45; cursor: default; }