/* ==========================================================================
   App: Generador de rueda de turnos para enfermería
   CSS base — Bloque 0, lote 2
   ========================================================================== */

/* ============ VARIABLES ============ */
:root {
    /* Colores marca */
    --accent: #0f766e;
    --accent-dark: #115e59;
    --accent-light: #ccfbf1;

    /* Texto */
    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    /* Fondos */
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --bg-input: #f1f5f9;

    /* Bordes */
    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    /* Estados */
    --danger: #dc2626;
    --danger-light: #fef2f2;
    --success: #16a34a;
    --success-light: #f0fdf4;
    --warning: #d97706;
    --warning-light: #fffbeb;

    /* Turnos (mismas paletas que la app actual para coherencia visual) */
    --turno-m: #c2410c;        --turno-m-bg: #ffedd5;     --turno-m-border: #fb923c;
    --turno-t: #1d4ed8;        --turno-t-bg: #dbeafe;     --turno-t-border: #60a5fa;
    --turno-n: #6d28d9;        --turno-n-bg: #ede9fe;     --turno-n-border: #a78bfa;
    --turno-s: #a16207;        --turno-s-bg: #fef3c7;     --turno-s-border: #fbbf24;
    --turno-l: #047857;        --turno-l-bg: #d1fae5;     --turno-l-border: #34d399;
    --turno-d: #9a3412;        --turno-d-bg: #fed7aa;     --turno-d-border: #fb923c;
    --descanso: #e2e8f0;
    --descanso-text: #64748b;

    /* Layout */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 5px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --shadow: 0 1px 4px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.03);
    --shadow-lg: 0 4px 20px rgba(0,0,0,.08);
    --transition: .15s ease;

    /* Tipografía */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mono: 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace;

    /* ============================================================
       SISTEMA DE DISEÑO BASE (Bloque 6.1)
       ============================================================ */

    /* Espaciados consistentes (escala de 4px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Tipografía: escala consistente */
    --text-xs:   .72rem;  /* 11.5px */
    --text-sm:   .82rem;  /* 13px */
    --text-base: .92rem;  /* 14.7px */
    --text-md:   1rem;    /* 16px */
    --text-lg:   1.1rem;  /* 17.6px */
    --text-xl:   1.3rem;  /* 20.8px */
    --text-2xl:  1.6rem;  /* 25.6px */
    --text-3xl:  2rem;    /* 32px */

    /* Pesos tipográficos */
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-extrabold:800;

    /* Z-index escala */
    --z-base:    1;
    --z-tooltip: 1000;
    --z-toast:   2000;
    --z-overlay: 3000;
    --z-modal:   4000;

    /* Tamaños táctiles (móvil) */
    --touch-target: 44px;  /* mínimo recomendado WCAG */
}

/* ============ RESET BÁSICO ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg-page);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 { line-height: 1.3; color: var(--text); }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.3rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: .75rem; }
h3 { font-size: 1.05rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: .5rem; }

/* ============ HEADER ============ */
.app-header {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(15,118,110,.2);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: .7rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand { display: flex; align-items: center; gap: .75rem; }
.brand-icon { flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.005em;
}
.brand-sub {
    font-size: .78rem;
    color: rgba(255,255,255,.85);
    margin: 0;
    line-height: 1.3;
}

.header-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* ============ MAIN ============ */
.app-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* ============ STEPPER (5 pasos) ============ */
.stepper {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 .5rem;
}
.step {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    transition: all var(--transition);
}
.step-label {
    font-size: .82rem;
    color: var(--text-muted);
    font-weight: 500;
    transition: color var(--transition);
}
.step.active .step-num {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.step.active .step-label {
    color: var(--accent);
    font-weight: 600;
}
.step.completed .step-num {
    background: var(--accent-light);
    color: var(--accent);
    border-color: var(--accent);
}
.step.completed .step-label {
    color: var(--text-secondary);
}
.step-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 .65rem;
    border-radius: 2px;
    min-width: 16px;
}

/* === A3 — Stepper clickable === */
.step.completed,
.step.active {
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 6px;
    margin: -4px -6px;
    transition: background-color var(--transition);
}
.step.completed:hover {
    background: rgba(15, 118, 110, 0.08);
}
.step.completed:hover .step-num {
    background: var(--accent);
    color: #fff;
    transform: scale(1.05);
}
.step.completed:hover .step-label {
    color: var(--accent);
}
.step.active {
    cursor: default;
}
.step.pending {
    cursor: not-allowed;
    opacity: 0.6;
}
.step:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}
.step.pending:focus-visible {
    outline-color: var(--text-muted);
}

/* === A3 — Tarjeta resumen de configuración === */
.config-summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    margin: -.5rem 0 1.25rem;
    background: var(--accent-light, rgba(15, 118, 110, 0.08));
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--text-secondary);
    overflow: hidden;
}
.config-summary-icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
}
.config-summary-label {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--accent);
    font-size: .82rem;
}
.config-summary-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .config-summary {
        font-size: .8rem;
        padding: .5rem .7rem;
    }
    .config-summary-label {
        font-size: .75rem;
    }
    .config-summary-text {
        white-space: normal;
    }
}

/* ============ CARDS ============ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .3rem;
    letter-spacing: -.01em;
    color: var(--text);
}
.card-desc {
    color: var(--text-secondary);
    font-size: .85rem;
    margin: 0 0 1.25rem;
}

/* En los pasos del wizard, jerarquía visual reforzada */
.form-step .card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    margin-bottom: .5rem;
}
.form-step .card-desc {
    font-size: .95rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

/* ============ FORM STEPS ============ */
.form-step { display: none; animation: fadeIn .25s ease; }
.form-step.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============ STEP ACTIONS ============ */
.step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ============ BOTONES — definiciones base al final del archivo (Lote 6.1) ============ */

/* Override específico: ghost dentro del header (texto blanco) */
.app-header .btn-ghost {
    color: #fff;
    border-color: rgba(255,255,255,.4);
    background: transparent;
}
.app-header .btn-ghost:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.7);
    color: #fff;
}

/* ============ FIELDS ============ */
.field { margin-bottom: 1.2rem; }

.field label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.field-help {
    font-size: .8rem;
    color: var(--text-secondary);
    margin: .35rem 0 0;
    line-height: 1.4;
}
.field label + .field-help {
    margin-top: -.15rem;
    margin-bottom: .55rem;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

input[type="date"],
input[type="number"],
input[type="text"],
input[type="time"],
select {
    width: 100%;
    padding: .55rem .7rem;
    font-family: var(--font);
    font-size: .88rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-input);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

.field-error {
    display: none;
    color: var(--danger);
    font-size: .78rem;
    margin-top: .25rem;
}
.field-error.visible { display: block; }

/* ============ PLACEHOLDER MENSAJES (mientras la app se construye) ============ */
.placeholder-msg {
    margin: 1.25rem 0;
    padding: 1.1rem 1.25rem;
    background: var(--warning-light);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-xs);
    font-size: .88rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* ============ SECCIÓN SEO ============ */
/* ============ SEO LANDING (ancho coherente con la herramienta) ============ */
.seo-content {
    max-width: 1200px;
    margin: 3rem auto 1.5rem;
    padding: 1rem 1.5rem;
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.65;
}
.seo-content h2 {
    color: var(--text);
    margin-top: 2.5rem;
    margin-bottom: .85rem;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
}
.seo-content h2:first-of-type {
    margin-top: 0;
}
.seo-content p {
    margin: 0 0 1rem;
    color: var(--text-secondary);
}

/* === FAQ ACORDEÓN === */
.seo-content .faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    margin-bottom: .75rem;
    background: white;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.seo-content .faq-item:hover {
    border-color: var(--accent, #0f766e);
}
.seo-content .faq-item[open] {
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.seo-content .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: background .15s;
    /* Quita el triángulo nativo */
    -webkit-tap-highlight-color: transparent;
}
.seo-content .faq-item summary::-webkit-details-marker {
    display: none;
}
.seo-content .faq-item summary:hover {
    background: rgba(15,118,110,.04);
}
.seo-content .faq-item summary:focus-visible {
    outline: 2px solid var(--accent, #0f766e);
    outline-offset: -2px;
}

.seo-content .faq-q {
    flex: 1;
    font-size: 1rem;
    line-height: 1.4;
}

/* Icono + / − como cuadrado */
.seo-content .faq-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    position: relative;
    transition: transform .2s;
}
.seo-content .faq-icon::before,
.seo-content .faq-icon::after {
    content: '';
    position: absolute;
    background: var(--accent, #0f766e);
    border-radius: 1px;
}
.seo-content .faq-icon::before {
    /* Línea horizontal */
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    margin-top: -1px;
}
.seo-content .faq-icon::after {
    /* Línea vertical (forma la cruz +) */
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    transition: transform .2s, opacity .2s;
}
.seo-content .faq-item[open] .faq-icon::after {
    /* Cuando está abierto, la línea vertical desaparece y queda solo el "−" */
    transform: scaleY(0);
    opacity: 0;
}

.seo-content .faq-answer {
    padding: 0 1.25rem 1.1rem;
    color: var(--text-secondary);
    line-height: 1.65;
}
.seo-content .faq-answer p {
    margin: 0;
}

/* Animación suave de apertura */
.seo-content .faq-item[open] .faq-answer {
    animation: faqFadeIn .25s ease-out;
}
@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============ FOOTER ============ */
.app-footer {
    margin-top: 3rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .82rem;
    border-top: 1px solid var(--border);
}
.app-footer p { margin: 0; }

/* ============ TABS DE RESULTADOS ============ */
.results-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}
.tab-btn {
    padding: .65rem 1.1rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: all var(--transition);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============ PRINT ============ */
@media print {
    .no-print { display: none !important; }
    body { background: white; }
    .app-main { padding: 0; max-width: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    .header-inner { padding: .65rem 1rem; flex-wrap: wrap; }
    .brand-title { font-size: .98rem; }
    .brand-sub { font-size: .72rem; }
    .app-main { padding: 1rem; }
    .field-row { grid-template-columns: 1fr; }
    .step-label { display: none; }
    .step-line { margin: 0 .35rem; }
    .stepper { padding: 0; }
    .seo-content { font-size: .9rem; padding: 1rem; }
    .seo-content h2 { font-size: 1.25rem; margin-top: 2rem; }
    .seo-content .faq-item summary { padding: .85rem 1rem; }
    .seo-content .faq-q { font-size: .95rem; }
    .seo-content .faq-answer { padding: 0 1rem 1rem; }
}

@media (max-width: 600px) {
    .header-actions { width: 100%; justify-content: stretch; }
    .header-actions .btn { flex: 1; }
    .card { padding: 1.1rem; }
    .form-step .card-title { font-size: 1.2rem; }
    .form-step .card-desc { font-size: .88rem; }
    .step-actions { flex-direction: column-reverse; gap: .55rem; }
    .step-actions .btn { width: 100%; }
}

/* ============================================================
   LOTE 1.1 — Paso 1: chips, tarjetas de servicio, errores
   ============================================================ */

/* ---- Chips de configuración rápida ---- */
.weeks-config {
    margin-top: .15rem;
}
.weeks-quick {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .4rem;
}
.btn-chip {
    padding: .35rem .85rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    line-height: 1.3;
}
.btn-chip:hover {
    background: var(--bg-input);
    border-color: var(--border-strong);
    color: var(--text);
}
.btn-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}
.quick-hint {
    margin: 0;
    font-size: .78rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ---- Tarjetas de tipo de servicio ---- */
.radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .65rem;
}
.radio-card {
    cursor: pointer;
    display: block;
    position: relative;
}
.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.radio-card-inner {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .85rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    transition: all var(--transition);
    height: 100%;
}
.radio-card-inner strong {
    font-size: .92rem;
    color: var(--text);
    line-height: 1.3;
}
.radio-card-inner span {
    font-size: .8rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
.radio-card:hover .radio-card-inner {
    border-color: var(--accent);
    background: var(--accent-light);
}
.radio-card input[type="radio"]:checked + .radio-card-inner {
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .15);
}
.radio-card input[type="radio"]:focus-visible + .radio-card-inner {
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .35);
}

/* ---- Inputs en estado de error ---- */
input.error,
select.error {
    border-color: var(--danger);
    background: var(--danger-light);
}
input.error:focus,
select.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

/* ============================================================
   LOTE 1.2 — Paso 2: lista de trabajadores
   ============================================================ */

.workers-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .35rem;
    gap: .75rem;
}
.workers-list-header label {
    margin-bottom: 0;
}

.btn-link {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--accent);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn-link:hover {
    text-decoration: underline;
    color: var(--accent-dark);
}

.workers-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .55rem;
    margin-top: .55rem;
}

.worker-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: .35rem .55rem;
    transition: border-color var(--transition);
}
.worker-row:focus-within {
    border-color: var(--accent);
}

.worker-row-num {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
}

.worker-name-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: .25rem .15rem;
    font-size: .87rem;
    color: var(--text);
    width: 100%;
    min-width: 0;
}
.worker-name-input:focus {
    outline: none;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 600px) {
    .workers-list { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LOTE 1.3 — Paso 3: tarjetas de turnos
   ============================================================ */

.shifts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: .5rem;
}

.shift-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    transition: border-color var(--transition);
}
.shift-card-M { border-color: var(--turno-m-border); }
.shift-card-T { border-color: var(--turno-t-border); }
.shift-card-N { border-color: var(--turno-n-border); }
.shift-card-D { border-color: var(--turno-d-border); }

.shift-card-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
}

.shift-badge {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 8px;
    font-weight: 800;
    font-family: var(--mono);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    letter-spacing: -.02em;
}
.shift-badge-M { background: var(--turno-m-bg); color: var(--turno-m); border: 1px solid var(--turno-m-border); }
.shift-badge-T { background: var(--turno-t-bg); color: var(--turno-t); border: 1px solid var(--turno-t-border); }
.shift-badge-N { background: var(--turno-n-bg); color: var(--turno-n); border: 1px solid var(--turno-n-border); }
.shift-badge-D { background: var(--turno-d-bg); color: var(--turno-d); border: 1px solid var(--turno-d-border); }

.shift-card-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.shift-card-title strong {
    font-size: .98rem;
    color: var(--text);
    line-height: 1.2;
}
.shift-card-duration {
    font-size: .78rem;
    color: var(--text-muted);
    font-family: var(--mono);
}

.shift-card-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    margin-bottom: .65rem;
}
.shift-time-field {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.shift-time-field label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0;
}
.shift-time-field input[type="time"] {
    padding: .4rem .55rem;
    font-size: .85rem;
    font-family: var(--mono);
}

.shift-card-toggles {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: .65rem;
    border-top: 1px solid var(--border);
    margin-top: .25rem;
}

.toggle-row {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    cursor: pointer;
    user-select: none;
}
.toggle-row input[type="checkbox"] {
    margin-top: .2rem;
    flex-shrink: 0;
    width: 16px; height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}
.toggle-row input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .5;
}
.toggle-row input[type="checkbox"]:disabled + .toggle-label {
    opacity: .55;
}
.toggle-label {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    line-height: 1.35;
}
.toggle-label strong {
    font-size: .82rem;
    color: var(--text);
    font-weight: 600;
}
.toggle-label small {
    font-size: .74rem;
    color: var(--text-muted);
}

/* ============================================================
   LOTE 1.4 — Paso 4: ratios y resumen
   ============================================================ */

/* Resumen superior */
.ratios-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-bottom: 1.25rem;
}
.ratio-summary-item {
    flex: 1;
    min-width: 160px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: .65rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.ratio-summary-item.over {
    background: var(--warning-light);
    border-color: var(--warning);
}
.ratio-summary-item .rs-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
}
.ratio-summary-item .rs-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    font-family: var(--mono);
    line-height: 1.1;
}
.ratio-summary-item.over .rs-value {
    color: var(--warning);
}
.ratio-summary-item .rs-hint {
    font-size: .72rem;
    color: var(--text-muted);
}

.ratio-summary-warning {
    flex-basis: 100%;
    background: var(--warning-light);
    border-left: 3px solid var(--warning);
    padding: .55rem .85rem;
    border-radius: var(--radius-xs);
    font-size: .82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Secciones de ratios */
.ratios-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.ratios-section {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
}
.ratios-section-title {
    margin: 0 0 .85rem;
    font-size: .92rem;
    color: var(--text);
    font-weight: 700;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--border);
}

.ratios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}

.ratio-field {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: .65rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.ratio-field-label {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.ratio-field-label .shift-badge {
    width: 28px; height: 28px;
    font-size: .85rem;
    flex-shrink: 0;
}
.ratio-field-name {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    line-height: 1.2;
    min-width: 0;
}
.ratio-field-name strong {
    font-size: .82rem;
    color: var(--text);
}
.ratio-field-name span {
    font-size: .72rem;
    color: var(--text-muted);
    font-family: var(--mono);
}

.ratio-input {
    width: 100%;
    padding: .45rem .6rem;
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-input);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.ratio-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

/* ============================================================
   LOTE 1.5 — Paso 5: configuración de la rueda
   ============================================================ */

/* Banda informativa con la configuración previa */
.config-recap {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .85rem 1.1rem;
    margin-bottom: 1.5rem;
}
.recap-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1;
    min-width: 130px;
}
.recap-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
}
.recap-value {
    font-size: .9rem;
    color: var(--text);
    font-weight: 600;
    line-height: 1.25;
    font-family: var(--mono);
    letter-spacing: -.01em;
}

/* Input numérico con botón al lado */
.num-with-action {
    display: flex;
    gap: .65rem;
    align-items: center;
}
.num-with-action input[type="number"] {
    width: 110px;
    flex-shrink: 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 1.1rem;
    font-weight: 700;
    padding: .5rem .65rem;
}

/* Bloque de cálculo del ciclo */
.cycle-info {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.cycle-explainer {
    color: var(--text-secondary);
    font-size: .92rem;
    line-height: 1.55;
    margin-bottom: 1rem;
}
.cycle-explainer p { margin: 0; }
.cycle-explainer strong {
    color: var(--text);
    font-weight: 700;
}

.cycle-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .65rem;
    margin: 1rem 0;
}

.cycle-num-item {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: .8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    text-align: center;
}
.cycle-num-item.partial {
    background: var(--warning-light);
    border-color: var(--warning);
}
.cn-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--accent);
    font-family: var(--mono);
    line-height: 1.1;
    letter-spacing: -.02em;
}
.cycle-num-item.partial .cn-value {
    color: var(--warning);
}
.cn-label {
    font-size: .75rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.cycle-warning {
    background: var(--warning-light);
    border-left: 3px solid var(--warning);
    padding: .65rem .85rem;
    border-radius: var(--radius-xs);
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: .85rem;
}
.cycle-warning strong {
    color: var(--warning);
    font-weight: 700;
}

.cycle-info-good {
    background: var(--success-light);
    border-left: 3px solid var(--success);
    padding: .65rem .85rem;
    border-radius: var(--radius-xs);
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: .85rem;
}

/* ============================================================
   LOTE 1.6 — Envío al backend: spinner, errores, debug
   ============================================================ */

/* Caja de error de envío */
.submit-error {
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--danger-light);
    border: 1px solid var(--danger);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-xs);
    color: var(--danger);
    font-size: .88rem;
    line-height: 1.45;
    font-weight: 500;
}

/* Spinner inline en el botón "Generando…" */
.btn.is-loading {
    pointer-events: none;
    opacity: .85;
}
.btn .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: .35rem;
    vertical-align: text-bottom;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Bloque de debug (configuración enviada) */
.debug-details {
    margin-top: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.debug-details summary {
    padding: .55rem .85rem;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
}
.debug-details summary:hover {
    background: var(--border);
}
.debug-details[open] summary {
    border-bottom: 1px solid var(--border);
}
.debug-details pre {
    margin: 0;
    padding: 1rem;
    background: #0f172a;
    color: #e2e8f0;
    font-family: var(--mono);
    font-size: .78rem;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Sección de resultados */
.results-section {
    animation: fadeIn .25s ease;
}
.results-summary {
    margin-bottom: 1.5rem;
}

/* ============================================================
   LOTE 2.4 — Cuadrante general
   ============================================================ */

/* Resumen superior (resultsSummary) */
.result-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}
.rs-item {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: .65rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.rs-item-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
}
.rs-item-value {
    font-size: .95rem;
    color: var(--text);
    font-weight: 700;
    line-height: 1.2;
    font-family: var(--mono);
}

.result-warnings {
    margin-top: 1rem;
}
.result-warning {
    padding: .65rem .85rem;
    border-radius: var(--radius-xs);
    margin-bottom: .45rem;
    font-size: .85rem;
    line-height: 1.45;
}
.result-warning.warn-medium {
    background: var(--warning-light);
    border-left: 3px solid var(--warning);
    color: var(--text-secondary);
}
.result-warning.warn-high {
    background: var(--danger-light);
    border-left: 3px solid var(--danger);
    color: var(--text-secondary);
}
.result-warning strong { color: var(--text); }

/* Wrapper del cuadrante: scroll horizontal */
.cuadrante-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
    margin-top: 1rem;
}

/* Tabla del cuadrante */
.cuadrante-tabla {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    font-size: .85rem;
    font-family: var(--mono);
}
.cuadrante-tabla th,
.cuadrante-tabla td {
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 0;
    text-align: center;
}
.cuadrante-tabla thead th {
    background: var(--bg-input);
    font-weight: 700;
}
.cuadrante-tabla .row-week-header th {
    padding: .5rem .65rem;
    color: var(--text);
    font-size: .82rem;
    border-bottom: 2px solid var(--border-strong);
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
}
.cuadrante-tabla .row-week-header .week-dates {
    color: var(--text-muted);
    font-weight: 500;
    margin-left: .35rem;
    font-size: .76rem;
}

/* Cabecera de día */
.cuadrante-tabla .row-day-header th {
    padding: .35rem .25rem;
    min-width: 32px;
    width: 32px;
    color: var(--text-secondary);
    font-size: .75rem;
}
.cuadrante-tabla .row-day-header .day-letter {
    display: block;
    font-size: .82rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}
.cuadrante-tabla .row-day-header .day-num {
    display: block;
    font-size: .68rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 1px;
}
.cuadrante-tabla .row-day-header .day-weekend {
    background: #f1f5f9;
}
.cuadrante-tabla .row-day-header .day-weekend .day-letter,
.cuadrante-tabla .row-day-header .day-weekend .day-num {
    color: var(--accent-dark);
}

/* Filas (zebra) */
.cuadrante-tabla tbody .row-even td {
    background: white;
}
.cuadrante-tabla tbody .row-odd td {
    background: #fafbfc;
}
.cuadrante-tabla tbody .row-divider td {
    border-top: 2px solid var(--border-strong);
}
.cuadrante-tabla tbody tr:hover td {
    background: var(--accent-light);
}

/* Columna trabajador (sticky izquierda) */
.cell-worker-name {
    text-align: left !important;
    padding: .5rem .85rem !important;
    font-family: var(--font);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    background: white;
    min-width: 180px;
    border-right: 2px solid var(--border-strong);
}
.cell-worker-name .row-num {
    display: inline-flex;
    width: 20px; height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    font-size: .68rem;
    font-weight: 700;
    margin-right: .5rem;
    font-family: var(--mono);
}
.cell-worker-name .worker-name-text {
    vertical-align: middle;
}

/* Pastilla del nombre al final de la fila */
.cell-worker-name-end {
    text-align: left !important;
    padding: .5rem .85rem !important;
    background: white;
    border-left: 2px solid var(--border-strong);
    min-width: 140px;
}
.cell-worker-name-end .worker-name-pill {
    display: inline-block;
    padding: .15rem .55rem;
    background: var(--accent-light);
    color: var(--accent-dark);
    border-radius: 999px;
    font-family: var(--font);
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Sticky en columnas (1ª trabajador, última pastilla) */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 5;
}
.sticky-col-end {
    position: sticky;
    right: 0;
    z-index: 5;
}
.cuadrante-tabla thead th.sticky-col,
.cuadrante-tabla thead th.sticky-col-end {
    z-index: 6;
}

/* Celdas de turnos */
.cell-shift {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-weight: 800;
    font-size: .82rem;
    cursor: default;
    transition: filter .12s;
}
.cell-shift:hover {
    filter: brightness(.95);
}
.cell-shift .shift-letter {
    display: block;
    line-height: 1;
}
.cell-shift.cell-empty {
    background: transparent;
}
.cell-shift.cell-M { background: var(--turno-m-bg); color: var(--turno-m); }
.cell-shift.cell-T { background: var(--turno-t-bg); color: var(--turno-t); }
.cell-shift.cell-N { background: var(--turno-n-bg); color: var(--turno-n); }
.cell-shift.cell-D { background: var(--turno-d-bg); color: var(--turno-d); }
.cell-shift.cell-S { background: var(--turno-s-bg); color: var(--turno-s); }
.cell-shift.cell-L { background: var(--turno-l-bg); color: var(--turno-l); }

/* Responsive: en móvil ajustar columna trabajador */
@media (max-width: 700px) {
    .cell-worker-name { min-width: 140px; padding: .35rem .55rem !important; }
    .cell-worker-name-end { min-width: 100px; padding: .35rem .55rem !important; }
    .cuadrante-tabla { font-size: .78rem; }
    .cell-shift { width: 28px; height: 28px; min-width: 28px; }
}

/* ============================================================
   LOTE 2.5 — Vista individual + Equilibrio del reparto
   ============================================================ */

/* ============ VISTA INDIVIDUAL ============ */

.individual-controls {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.25rem;
    padding: .85rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.individual-controls label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 0;
}
.worker-selector {
    flex: 0 1 280px;
    padding: .45rem .65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: white;
    font-family: inherit;
    font-size: .9rem;
    color: var(--text);
    font-weight: 600;
}
.worker-selector:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

/* Resumen del trabajador */
.worker-summary {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.ws-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.ws-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text);
    font-weight: 700;
    line-height: 1.2;
}
.ws-hours-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    text-align: right;
}
.ws-hours-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
    font-family: var(--mono);
    letter-spacing: -.02em;
    line-height: 1;
}
.ws-hours-teorico {
    font-size: .75rem;
    color: var(--text-muted);
}
.ws-diff {
    font-size: .85rem;
    font-weight: 700;
    font-family: var(--mono);
    margin-top: .15rem;
    padding: .15rem .55rem;
    border-radius: 999px;
}
.ws-diff.diff-positive { color: var(--warning); background: var(--warning-light); }
.ws-diff.diff-negative { color: var(--danger); background: var(--danger-light); }
.ws-diff.diff-neutral  { color: var(--success); background: var(--success-light); }

.ws-turnos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .85rem;
}
.ws-turno-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .65rem;
    background: var(--bg-input);
    border-radius: var(--radius-xs);
}
.ws-turno-badge {
    width: 32px; height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: var(--mono);
    font-size: .9rem;
    flex-shrink: 0;
}
.ws-turno-badge.cell-M { background: var(--turno-m-bg); color: var(--turno-m); }
.ws-turno-badge.cell-T { background: var(--turno-t-bg); color: var(--turno-t); }
.ws-turno-badge.cell-N { background: var(--turno-n-bg); color: var(--turno-n); }
.ws-turno-badge.cell-D { background: var(--turno-d-bg); color: var(--turno-d); }
.ws-turno-badge.cell-S { background: var(--turno-s-bg); color: var(--turno-s); }
.ws-turno-badge.cell-L { background: var(--turno-l-bg); color: var(--turno-l); }
.ws-turno-badge.ws-badge-fds { background: var(--accent-light); color: var(--accent); font-size: 1rem; }
.ws-turno-count {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    font-family: var(--mono);
    line-height: 1;
}
.ws-turno-label {
    font-size: .76rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Calendarios mensuales */
.monthly-calendars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.month-calendar {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
}
.month-title {
    margin: 0 0 .85rem;
    font-size: 1rem;
    color: var(--text);
    font-weight: 700;
    text-align: center;
    text-transform: capitalize;
}
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.mc-head {
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    padding: .35rem 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mc-head.mc-head-weekend {
    color: var(--accent-dark);
}
.mc-day {
    aspect-ratio: 1;
    background: var(--bg-input);
    border-radius: 5px;
    padding: .25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 38px;
}
.mc-day.mc-day-weekend {
    background: #f1f5f9;
}
.mc-day.mc-day-othermonth {
    opacity: .25;
}
.mc-day.mc-day-outofperiod {
    opacity: .35;
    background: transparent;
}
.mc-day-num {
    font-size: .72rem;
    color: var(--text-muted);
    font-family: var(--mono);
    font-weight: 600;
}
.mc-day-shift {
    width: 22px; height: 22px;
    border-radius: 4px;
    font-weight: 800;
    font-family: var(--mono);
    font-size: .76rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-day-shift.cell-M { background: var(--turno-m-bg); color: var(--turno-m); }
.mc-day-shift.cell-T { background: var(--turno-t-bg); color: var(--turno-t); }
.mc-day-shift.cell-N { background: var(--turno-n-bg); color: var(--turno-n); }
.mc-day-shift.cell-D { background: var(--turno-d-bg); color: var(--turno-d); }
.mc-day-shift.cell-S { background: var(--turno-s-bg); color: var(--turno-s); }
.mc-day-shift.cell-L { background: var(--turno-l-bg); color: var(--turno-l); }

/* ============ EQUILIBRIO DEL REPARTO ============ */

.equilibrio-intro {
    margin-bottom: 1.25rem;
    padding: .85rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.equilibrio-intro p { margin: 0; }
.equilibrio-intro strong { color: var(--text); }

.equilibrio-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
}

.equilibrio-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    min-width: 700px;
}
.equilibrio-tabla th,
.equilibrio-tabla td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
}
.equilibrio-tabla thead th {
    background: var(--bg-input);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid var(--border-strong);
    white-space: nowrap;
}
.equilibrio-tabla tbody tr:hover {
    background: var(--accent-light);
}

.eq-col-num {
    width: 36px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-weight: 600;
}
.eq-col-name {
    text-align: left !important;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.eq-col-hours {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text);
}
.eq-col-bar {
    width: 140px;
    min-width: 100px;
}
.eq-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-input);
    border-radius: 999px;
    overflow: hidden;
}
.eq-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
    transition: width .25s ease;
}
.eq-col-diff {
    font-family: var(--mono);
    font-weight: 700;
    white-space: nowrap;
}
.eq-col-diff.diff-good {
    color: var(--success);
}
.eq-col-diff.diff-warning {
    color: var(--warning);
}
.eq-col-diff.diff-positive {
    color: var(--warning);
}
.eq-col-diff.diff-negative {
    color: var(--danger);
}
.eq-col-diff.diff-neutral {
    color: var(--text-secondary);
}
.eq-col-shift {
    padding: .35rem .45rem !important;
    width: 50px;
}
.eq-shift-count {
    display: inline-flex;
    width: 30px; height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--mono);
    font-weight: 700;
    font-size: .82rem;
}
.eq-shift-count.cell-M { background: var(--turno-m-bg); color: var(--turno-m); }
.eq-shift-count.cell-T { background: var(--turno-t-bg); color: var(--turno-t); }
.eq-shift-count.cell-N { background: var(--turno-n-bg); color: var(--turno-n); }
.eq-shift-count.cell-D { background: var(--turno-d-bg); color: var(--turno-d); }
.eq-shift-count.cell-S { background: var(--turno-s-bg); color: var(--turno-s); }
.eq-shift-count.cell-L { background: var(--turno-l-bg); color: var(--turno-l); }

.eq-col-fds {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text);
}

.equilibrio-tabla tfoot th {
    background: #f1f5f9;
    border-top: 2px solid var(--border-strong);
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text);
    font-size: .85rem;
    text-transform: none;
    letter-spacing: 0;
    padding: .65rem .75rem;
}

/* Responsive */
@media (max-width: 700px) {
    .ws-header { flex-direction: column; align-items: flex-start; }
    .ws-hours-block { align-items: flex-start; text-align: left; }
    .monthly-calendars { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOQUE 3 — Editor visual de la rueda (Lote 3.1)
   ============================================================ */

.wheel-editor-section {
    animation: fadeIn .25s ease;
}

/* Resumen superior */
.editor-summary {
    margin-bottom: 1.5rem;
}
.editor-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .65rem;
}
.es-item {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: .65rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.es-item-wide {
    grid-column: 1 / -1;
}
.es-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
}
.es-value {
    font-size: .9rem;
    color: var(--text);
    font-weight: 600;
    line-height: 1.3;
    font-family: var(--mono);
}
.es-item-wide .es-value {
    font-family: var(--font);
    font-weight: 500;
}
.ratio-pill {
    display: inline-block;
    padding: .15rem .55rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .78rem;
    color: var(--text-secondary);
    margin-right: .25rem;
    margin-bottom: .25rem;
}

/* Tabla de la rueda */
.editor-wheel-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
    margin-bottom: 1rem;
}
.editor-wheel-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 460px;
    font-size: .9rem;
    font-family: var(--mono);
}
.editor-wheel-table th,
.editor-wheel-table td {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0;
    text-align: center;
}
.editor-wheel-table th:last-child,
.editor-wheel-table td:last-child {
    border-right: none;
}

/* Cabecera de días */
.editor-wheel-table thead th {
    background: var(--bg-input);
    padding: .55rem .35rem;
    font-weight: 700;
    font-size: .82rem;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-strong);
    letter-spacing: .04em;
}
.editor-wheel-table thead th.day-sab,
.editor-wheel-table thead th.day-dom {
    background: #e2e8f0;
    color: var(--accent-dark);
}
.editor-wheel-table .ewt-corner {
    width: 60px;
    background: var(--bg-input) !important;
    color: var(--text-muted);
    font-size: .76rem;
}

/* Numeración de fila */
.ewt-row-num {
    width: 60px;
    background: var(--bg-input);
    color: var(--text-muted);
    font-weight: 700;
    font-size: .82rem;
}

/* Celdas */
.ewt-cell {
    height: 42px;
    min-width: 50px;
    cursor: default;
    font-weight: 800;
    transition: filter .12s;
}
.ewt-cell-content {
    display: block;
    line-height: 1;
    font-size: .92rem;
}
.ewt-cell-empty {
    background: white;
    color: var(--text-muted);
}
.ewt-cell-empty .ewt-cell-content {
    font-size: 1rem;
    opacity: .35;
}
.ewt-cell-M { background: var(--turno-m-bg); color: var(--turno-m); }
.ewt-cell-T { background: var(--turno-t-bg); color: var(--turno-t); }
.ewt-cell-N { background: var(--turno-n-bg); color: var(--turno-n); }
.ewt-cell-D { background: var(--turno-d-bg); color: var(--turno-d); }
.ewt-cell-S { background: var(--turno-s-bg); color: var(--turno-s); }
.ewt-cell-L { background: var(--turno-l-bg); color: var(--turno-l); }

/* Días fuera del servicio (sábado/domingo en L-V).
   Aspecto tenue, no clickable, indica visualmente que no se pueden asignar turnos. */
.ewt-cell-offday {
    background: repeating-linear-gradient(
        135deg,
        #f1f5f9 0,
        #f1f5f9 6px,
        #e2e8f0 6px,
        #e2e8f0 12px
    ) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}
.ewt-cell-offday .ewt-cell-content {
    opacity: .35;
}
.ewt-cell-offday:hover {
    /* Sin hover effect: deja claro que no es clicable */
    background: repeating-linear-gradient(
        135deg,
        #f1f5f9 0,
        #f1f5f9 6px,
        #e2e8f0 6px,
        #e2e8f0 12px
    ) !important;
}

/* Pie con cobertura */
.editor-wheel-table tfoot {
    background: #fafbfc;
}
.editor-wheel-table tfoot td {
    border-top: 1px solid var(--border-strong);
    padding: .35rem .25rem;
    font-size: .8rem;
}
.ewt-foot-row:first-child td {
    border-top: 2px solid var(--border-strong);
}
.ewt-foot-label {
    background: var(--bg-input) !important;
    font-weight: 700;
    color: var(--text);
    text-align: center;
}
.ewt-foot-cell {
    text-align: center;
    font-family: var(--mono);
}
.foot-actual { font-weight: 700; }
.foot-divider { color: var(--text-muted); margin: 0 1px; }
.foot-expected { color: var(--text-muted); font-weight: 500; }

.ewt-foot-empty { background: #f8fafc; color: var(--text-muted); }
.ewt-foot-empty .foot-actual { color: var(--text-muted); }
.ewt-foot-ok { background: var(--success-light); color: var(--success); }
.ewt-foot-ok .foot-actual { color: var(--success); }
.ewt-foot-short { background: var(--warning-light); color: var(--warning); }
.ewt-foot-short .foot-actual { color: var(--warning); }
.ewt-foot-over { background: var(--danger-light); color: var(--danger); }
.ewt-foot-over .foot-actual { color: var(--danger); }

/* Columna "Horas" del editor de la rueda (paso 3) */
.ewt-hours-head {
    background: #f1f5f9;
    color: var(--text);
    text-align: center;
    font-weight: 700;
    border-left: 2px solid #cbd5e1;
}
.ewt-week-hours {
    background: #f8fafc;
    text-align: center;
    font-family: var(--mono);
    font-weight: 600;
    color: var(--text);
    border-left: 2px solid #cbd5e1;
    padding: .35rem .5rem;
    white-space: nowrap;
}
.ewt-foot-hours {
    background: #f1f5f9;
    border-left: 2px solid #cbd5e1;
}

/* Aviso de cobertura insuficiente */
.editor-coverage-warning {
    background: var(--warning-light);
    border: 1px solid var(--warning);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-xs);
    padding: .85rem 1.1rem;
    margin-bottom: 1rem;
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.editor-coverage-warning .ecw-header {
    color: var(--warning);
    margin-bottom: .35rem;
    font-size: .92rem;
}
.editor-coverage-warning .ecw-list {
    margin: .25rem 0;
    padding-left: 1.5rem;
}
.editor-coverage-warning .ecw-list li {
    margin-bottom: .15rem;
}
.editor-coverage-warning .ecw-foot {
    margin: .35rem 0 0;
    font-size: .82rem;
    color: var(--text-muted);
}
.ecw-code-pill {
    display: inline-flex;
    width: 22px; height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-family: var(--mono);
    font-weight: 700;
    font-size: .78rem;
    margin: 0 .15rem;
}
.ecw-code-pill.cell-M { background: var(--turno-m-bg); color: var(--turno-m); }
.ecw-code-pill.cell-T { background: var(--turno-t-bg); color: var(--turno-t); }
.ecw-code-pill.cell-N { background: var(--turno-n-bg); color: var(--turno-n); }
.ecw-code-pill.cell-D { background: var(--turno-d-bg); color: var(--turno-d); }

.btn.disabled,
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   BLOQUE 3 — Lote 3.2: edición de celdas
   ============================================================ */

/* Acciones del editor (botón Restaurar + hint) */
.editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 1.25rem;
    padding: .65rem .85rem;
    background: var(--accent-light);
    border-radius: var(--radius-xs);
    flex-wrap: wrap;
}
.editor-actions .btn-link {
    font-size: .85rem;
    flex-shrink: 0;
}
.editor-edit-hint {
    font-size: .8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    flex: 1;
    min-width: 200px;
    text-align: right;
}

/* Celdas clickables */
.ewt-cell.clickable {
    cursor: pointer;
    position: relative;
}
.ewt-cell.clickable:hover {
    filter: brightness(.92);
    box-shadow: inset 0 0 0 2px var(--accent);
    z-index: 1;
}

/* Celdas derivadas (S, L) — no editables */
.ewt-cell-derived {
    cursor: not-allowed;
    position: relative;
}
.ewt-cell-derived::after {
    content: '';
    position: absolute;
    top: 2px; right: 2px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: .4;
}

/* Celdas modificadas (cambiadas respecto a la rueda original) */
.ewt-cell-modified {
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* ============ MENÚ EMERGENTE DE TURNOS ============ */
.cell-menu {
    position: absolute;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    min-width: 220px;
    padding: .35rem;
    animation: menuFadeIn .12s ease;
}
@keyframes menuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cell-menu-title {
    padding: .35rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
    margin-bottom: .25rem;
}

.cell-menu-options {
    display: flex;
    flex-direction: column;
}

.cell-menu-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .55rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-xs);
    font-family: inherit;
    text-align: left;
    transition: background .12s;
}
.cell-menu-option:hover {
    background: var(--bg-input);
}
.cell-menu-option.is-selected {
    background: var(--accent-light);
}
.cell-menu-option.is-selected::after {
    content: '✓';
    margin-left: auto;
    color: var(--accent);
    font-weight: 700;
}

.cell-menu-letter {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-weight: 800;
    font-size: .9rem;
    flex-shrink: 0;
}
.cell-menu-name {
    font-size: .88rem;
    color: var(--text);
    font-weight: 500;
}

.cell-menu-M .cell-menu-letter { background: var(--turno-m-bg); color: var(--turno-m); }
.cell-menu-T .cell-menu-letter { background: var(--turno-t-bg); color: var(--turno-t); }
.cell-menu-N .cell-menu-letter { background: var(--turno-n-bg); color: var(--turno-n); }
.cell-menu-D .cell-menu-letter { background: var(--turno-d-bg); color: var(--turno-d); }
.cell-menu-libre .cell-menu-letter {
    background: var(--bg-input);
    color: var(--text-muted);
}

/* ============ TOAST DE AVISO ============ */
.editor-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 16px);
    background: var(--text);
    color: white;
    padding: .85rem 1.2rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: .88rem;
    line-height: 1.45;
    max-width: 480px;
    text-align: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity .25s, transform .25s;
}
.editor-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 600px) {
    .editor-actions { flex-direction: column; align-items: stretch; gap: .5rem; }
    .editor-edit-hint { text-align: left; }
}

/* ============================================================
   BLOQUE 3 — Lote 3.3: re-proyección + Volver al editor
   ============================================================ */

/* Overlay que aparece mientras se aplica la rueda al calendario */
.applying-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    opacity: 0;
    transition: opacity .22s;
    backdrop-filter: blur(2px);
}
.applying-overlay.visible {
    opacity: 1;
}
.applying-overlay-inner {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    box-shadow: var(--shadow-lg);
    min-width: 200px;
}
.applying-overlay-inner p {
    margin: 0;
    color: var(--text);
    font-weight: 600;
    font-size: .92rem;
}
.applying-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--bg-input);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

/* Botón "Volver al editor" (header) — usar el estilo ghost ya existente */
#btnBackToEditor svg {
    margin-right: .15rem;
}

/* ============================================================
   BLOQUE 4 — Lote 4.1: Reglas del servicio (paso 3)
   ============================================================ */

.rules-section {
    margin-top: 1.25rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: box-shadow .15s;
}
.rules-section[open] {
    box-shadow: var(--shadow-sm);
}

.rules-summary {
    cursor: pointer;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    user-select: none;
    list-style: none;
    transition: background .12s;
}
.rules-summary::-webkit-details-marker { display: none; }
.rules-summary:hover {
    background: rgba(15, 118, 110, .04);
}
.rules-section[open] .rules-summary {
    border-bottom: 1px solid var(--border);
}

.rules-summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--text-muted);
    font-size: .8rem;
    transition: transform .15s;
}
.rules-section[open] .rules-summary::after {
    transform: rotate(180deg);
}

.rules-icon {
    font-size: 1rem;
    color: var(--accent);
    line-height: 1;
}

.rules-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
}

.rules-status {
    font-size: .75rem;
    color: var(--text-muted);
    background: white;
    padding: .15rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-weight: 500;
}

.rules-body {
    padding: 1rem 1.1rem 1.1rem;
}

.rules-desc {
    margin: 0 0 1rem;
    font-size: .82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.rule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .75rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
}

.rule-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.rule-toggle input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
}
.rule-toggle-label {
    font-size: .87rem;
    color: var(--text);
    font-weight: 500;
    line-height: 1.35;
}

.rule-value {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}
.rule-value input[type="number"] {
    width: 64px;
    padding: .3rem .45rem;
    text-align: center;
    font-family: var(--mono);
    font-size: .88rem;
    font-weight: 700;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text);
}
.rule-value input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
    background: white;
    box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}
.rule-value input[type="number"]:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: var(--bg-input);
}
.rule-unit {
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 500;
    min-width: 50px;
}

@media (max-width: 600px) {
    .rule-row { flex-direction: column; align-items: stretch; gap: .55rem; }
    .rule-value { justify-content: flex-end; }
    .rules-status { font-size: .7rem; }
}

/* ============================================================
   BLOQUE 4 — Lote 4.3: Validaciones en pantalla de resultados
   ============================================================ */

.validations-block {
    margin: 0 0 1.25rem;
}
.validations-block:empty {
    display: none;
}

/* Línea discreta de "Reglas activas" */
.rules-active-line {
    margin-bottom: .85rem;
    padding: .55rem .85rem;
    background: var(--bg-input);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-xs);
    font-size: .82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.ral-label {
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    margin-right: .35rem;
}
.ral-values {
    font-family: var(--mono);
    color: var(--text);
    font-weight: 600;
}
.ral-none {
    color: var(--text-muted);
    font-style: italic;
}

/* Tarjeta general de validaciones */
.validations-card {
    border-radius: var(--radius-sm);
    border: 1px solid;
    overflow: hidden;
    transition: box-shadow .15s;
}

/* Caso "todo OK" */
.validations-ok {
    background: var(--success-light);
    border-color: var(--success);
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .88rem;
    color: var(--success);
}
.validations-ok .vc-icon {
    width: 24px; height: 24px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .82rem;
    flex-shrink: 0;
}
.validations-ok .vc-text {
    color: var(--text);
    font-weight: 500;
}

/* Caso con incumplimientos (expandible) */
.validations-warn {
    background: var(--warning-light);
    border-color: var(--warning);
}
.validations-warn[open] {
    box-shadow: var(--shadow-sm);
}

.validations-warn .vc-summary {
    cursor: pointer;
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    list-style: none;
    user-select: none;
    transition: background .12s;
}
.validations-warn .vc-summary::-webkit-details-marker { display: none; }
.validations-warn .vc-summary:hover {
    background: rgba(217, 119, 6, .06);
}
.validations-warn[open] .vc-summary {
    border-bottom: 1px solid var(--warning);
}

.validations-warn .vc-icon {
    width: 32px; height: 32px;
    background: var(--warning);
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.validations-warn .vc-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.validations-warn .vc-title {
    font-size: .96rem;
    color: var(--text);
    line-height: 1.3;
}
.validations-warn .vc-subtitle {
    font-size: .8rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.4;
}

.validations-warn .vc-toggle {
    flex-shrink: 0;
    color: var(--warning);
    font-weight: 600;
    font-size: .82rem;
    padding: .25rem .65rem;
    background: white;
    border-radius: 999px;
    border: 1px solid var(--warning);
}
.validations-warn[open] .vc-toggle::before {
    content: '▴ ';
}
.validations-warn:not([open]) .vc-toggle::before {
    content: '▾ ';
}

/* Detalle expandido */
.validations-warn .vc-detail {
    background: white;
    padding: 1rem 1rem .25rem;
}

.vc-empty {
    margin: 0 0 .75rem;
    color: var(--text-muted);
    font-size: .85rem;
    font-style: italic;
}

.vc-worker {
    margin-bottom: .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--border);
}
.vc-worker:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.vc-worker-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.vc-worker-name {
    font-size: .92rem;
    color: var(--text);
}
.vc-worker-count {
    font-size: .72rem;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: .15rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.vc-issues {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.vc-issue {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .5rem .65rem;
    background: var(--bg-input);
    border-radius: var(--radius-xs);
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.vc-issue.vc-sev-high {
    border-left: 3px solid var(--danger);
}
.vc-issue.vc-sev-medium {
    border-left: 3px solid var(--warning);
}
.vc-issue-icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.2;
}
.vc-issue-msg {
    flex: 1;
    color: var(--text);
}

@media (max-width: 600px) {
    .validations-warn .vc-summary { flex-wrap: wrap; }
    .validations-warn .vc-toggle { width: 100%; text-align: center; margin-top: .35rem; }
    .vc-worker-head { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ============================================================
   BLOQUE 4 — Lote 4.4: Avisos de reglas en el editor
   ============================================================ */

.editor-rules-warnings {
    margin-bottom: 1rem;
}

.erw-card {
    background: #fef9e7;
    border: 1px solid #f3d784;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: box-shadow .15s;
}
.erw-card[open] {
    box-shadow: var(--shadow-sm);
}

.erw-summary {
    cursor: pointer;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    list-style: none;
    user-select: none;
    transition: background .12s;
}
.erw-summary::-webkit-details-marker { display: none; }
.erw-summary:hover {
    background: rgba(217, 119, 6, .04);
}
.erw-card[open] .erw-summary {
    border-bottom: 1px solid #f3d784;
}

.erw-icon {
    width: 28px; height: 28px;
    background: #d97706;
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
    font-family: serif;
}

.erw-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.erw-title {
    font-size: .9rem;
    color: var(--text);
    line-height: 1.3;
}
.erw-subtitle {
    font-size: .76rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.4;
}

.erw-toggle {
    flex-shrink: 0;
    color: #92400e;
    font-weight: 600;
    font-size: .78rem;
    padding: .2rem .55rem;
    background: white;
    border-radius: 999px;
    border: 1px solid #f3d784;
}
.erw-card[open] .erw-toggle::before { content: '▴ '; }
.erw-card:not([open]) .erw-toggle::before { content: '▾ '; }

.erw-list {
    background: white;
    list-style: none;
    margin: 0;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.erw-issue {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .45rem .6rem;
    background: var(--bg-input);
    border-radius: var(--radius-xs);
    font-size: .82rem;
    color: var(--text-secondary);
    line-height: 1.45;
    border-left: 3px solid;
}
.erw-issue-descanso { border-left-color: var(--danger); }
.erw-issue-noches   { border-left-color: var(--warning); }

.erw-issue-icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.2;
}
.erw-issue-msg {
    flex: 1;
    color: var(--text);
    font-family: var(--mono);
    font-size: .82rem;
}

@media (max-width: 600px) {
    .erw-summary { flex-wrap: wrap; }
    .erw-toggle { width: 100%; text-align: center; margin-top: .35rem; }
    .erw-issue-msg { font-size: .78rem; }
}

/* ============================================================
   BLOQUE 5 — Calidad del reparto
   ============================================================ */

.quality-block {
    margin: 0 0 1.25rem;
}
.quality-block:empty { display: none; }

.quality-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: box-shadow .15s;
}
.quality-card[open] {
    box-shadow: var(--shadow-sm);
}

.qc-summary {
    cursor: pointer;
    padding: 1rem 1.15rem .85rem;
    list-style: none;
    user-select: none;
    transition: background .12s;
}
.qc-summary::-webkit-details-marker { display: none; }
.qc-summary:hover { background: rgba(0,0,0,.015); }
.quality-card[open] .qc-summary { border-bottom: 1px solid var(--border); }

.qc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .35rem;
}

.qc-label-text {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    font-weight: 700;
}

.qc-toggle {
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 600;
    font-size: .78rem;
    padding: .15rem .55rem;
    background: var(--bg-input);
    border-radius: 999px;
    border: 1px solid var(--border);
}
.quality-card[open] .qc-toggle::before { content: '▴ '; }
.quality-card:not([open]) .qc-toggle::before { content: '▾ '; }

.qc-main {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin-bottom: .6rem;
    flex-wrap: wrap;
}
.qc-score {
    font-family: var(--mono);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}
.qc-score-max {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
}
.qc-status {
    font-size: 1rem;
    font-weight: 600;
    margin-left: .25rem;
}

/* Barra de progreso */
.qc-progress {
    height: 8px;
    background: var(--bg-input);
    border-radius: 999px;
    overflow: hidden;
}
.qc-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .35s ease, background-color .25s ease;
}

/* Niveles cualitativos */
.quality-level-excellent .qc-score,
.quality-level-excellent .qc-status { color: #15803d; }
.quality-level-excellent .qc-progress-fill { background: linear-gradient(90deg, #22c55e, #15803d); }

.quality-level-good .qc-score,
.quality-level-good .qc-status { color: var(--success); }
.quality-level-good .qc-progress-fill { background: linear-gradient(90deg, #34d399, var(--success)); }

.quality-level-fair .qc-score,
.quality-level-fair .qc-status { color: #ca8a04; }
.quality-level-fair .qc-progress-fill { background: linear-gradient(90deg, #facc15, #ca8a04); }

.quality-level-poor .qc-score,
.quality-level-poor .qc-status { color: var(--warning); }
.quality-level-poor .qc-progress-fill { background: linear-gradient(90deg, #fb923c, var(--warning)); }

.quality-level-bad .qc-score,
.quality-level-bad .qc-status { color: var(--danger); }
.quality-level-bad .qc-progress-fill { background: linear-gradient(90deg, #f87171, var(--danger)); }

/* Desglose */
.qc-breakdown {
    padding: 1rem 1.15rem 1.15rem;
    background: #fafbfc;
}
.qc-desc {
    margin: 0 0 .85rem;
    font-size: .82rem;
    color: var(--text-secondary);
}

.qc-factor {
    margin-bottom: .65rem;
}
.qc-factor:last-child { margin-bottom: 0; }

.qc-factor-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .25rem;
    font-size: .85rem;
}
.qc-factor-label {
    color: var(--text);
    font-weight: 500;
}
.qc-factor-weight {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 400;
}
.qc-factor-score {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text);
}

.qc-factor-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 999px;
    overflow: hidden;
}
.qc-factor-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .25s ease;
}

.qc-factor-excellent .qc-factor-bar-fill { background: #15803d; }
.qc-factor-excellent .qc-factor-score    { color: #15803d; }
.qc-factor-good      .qc-factor-bar-fill { background: var(--success); }
.qc-factor-good      .qc-factor-score    { color: var(--success); }
.qc-factor-fair      .qc-factor-bar-fill { background: #ca8a04; }
.qc-factor-fair      .qc-factor-score    { color: #ca8a04; }
.qc-factor-poor      .qc-factor-bar-fill { background: var(--warning); }
.qc-factor-poor      .qc-factor-score    { color: var(--warning); }
.qc-factor-bad       .qc-factor-bar-fill { background: var(--danger); }
.qc-factor-bad       .qc-factor-score    { color: var(--danger); }

@media (max-width: 600px) {
    .qc-score { font-size: 2rem; }
    .qc-status { font-size: .9rem; }
}

/* ============================================================
   BLOQUE 6 — Lote 6.1: Sistema de diseño base
   ============================================================
   Define los 3 tipos de botón, toasts, tooltips y loading states.
   Las clases existentes (.btn, .btn-primary, .btn-ghost) se
   ALINEAN con este sistema; no se rompen.
   ============================================================ */

/* ============================================================
   BOTONES — 3 tipos: primary, secondary, ghost
   ============================================================ */

/* Base común a los 3 tipos */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
    border: 1.5px solid transparent;
    user-select: none;
    text-align: center;
    white-space: nowrap;
    min-height: var(--touch-target);
    position: relative;
}
.btn:active:not(:disabled) {
    transform: translateY(1px);
}
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Tamaños */
.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    min-height: 32px;
}
.btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
}

/* TIPO 1 — PRIMARY (acción principal: verde lleno) */
.btn-primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* TIPO 2 — SECONDARY (acción secundaria importante: verde con borde) */
.btn-secondary {
    background: white;
    color: var(--accent-dark);
    border-color: var(--accent);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--accent-light);
    color: var(--accent-dark);
}

/* TIPO 3 — GHOST (acción poco importante: gris neutro) */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-strong);
}
.btn-ghost:hover:not(:disabled) {
    background: var(--bg-input);
    color: var(--text);
    border-color: var(--text-muted);
}

/* Estados disabled */
.btn:disabled,
.btn.disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading state — el botón muestra un spinner y el texto se oculta */
.btn.is-loading {
    color: transparent !important;
    cursor: wait;
    pointer-events: none;
}
.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btnSpin .7s linear infinite;
    color: white;
    opacity: 1 !important;
}
.btn-secondary.is-loading::after,
.btn-ghost.is-loading::after {
    border-color: var(--accent);
    border-right-color: transparent;
}
@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

/* Botón "danger" para acciones destructivas (no en jerarquía estándar pero útil) */
.btn-danger {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* Botón "link" — se ve como enlace pero es <button> */
.btn-link {
    background: transparent;
    border: none;
    color: var(--accent);
    padding: var(--space-1) var(--space-2);
    min-height: auto;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.btn-link:hover {
    color: var(--accent-dark);
}
.btn-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ============================================================
   TOASTS GLOBALES
   ============================================================ */
.toast-container {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: calc(100vw - var(--space-8));
    pointer-events: none;
}

.toast {
    background: var(--text);
    color: white;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-base);
    line-height: 1.45;
    max-width: 480px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .25s ease, transform .25s ease;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast-icon {
    flex-shrink: 0;
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    background: rgba(255,255,255,.15);
}

.toast-message {
    flex: 1;
}

/* Variantes */
.toast.toast-success {
    background: var(--success);
}
.toast.toast-error {
    background: var(--danger);
}
.toast.toast-warning {
    background: var(--warning);
}
.toast.toast-info {
    background: var(--accent-dark);
}

/* ============================================================
   TOOLTIPS
   ============================================================ */
.tooltip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.tooltip-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: var(--weight-bold);
    margin-left: var(--space-1);
    transition: background .15s, color .15s;
}
.tooltip-trigger:hover .tooltip-icon,
.tooltip-trigger:focus .tooltip-icon {
    background: var(--accent-light);
    color: var(--accent-dark);
}

.tooltip-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(.95);
    background: var(--text);
    color: white;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    line-height: 1.45;
    width: max-content;
    max-width: 240px;
    z-index: var(--z-tooltip);
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s, transform .18s;
    text-align: center;
    font-weight: var(--weight-normal);
}
.tooltip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text);
}
.tooltip-trigger:hover .tooltip-bubble,
.tooltip-trigger:focus-within .tooltip-bubble {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Tooltip que aparece DEBAJO en lugar de arriba */
.tooltip-trigger.tooltip-bottom .tooltip-bubble {
    bottom: auto;
    top: calc(100% + 8px);
}
.tooltip-trigger.tooltip-bottom .tooltip-bubble::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--text);
}

/* ============================================================
   FOCUS GLOBALES (accesibilidad básica)
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Inputs con focus mejorado (sin doble outline) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none; /* el border del propio input ya lo gestiona */
}

/* ============================================================
   BLOQUE 6 — Lote 6.2.a v2: Stepper de nº de semanas en quick config
   ============================================================ */

.weeks-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
    transition: border-color .15s, box-shadow .15s;
}
.weeks-stepper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

.weeks-stepper-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.weeks-stepper-btn:hover:not(:disabled) {
    background: var(--accent-light);
    color: var(--accent-dark);
}
.weeks-stepper-btn:active:not(:disabled) {
    transform: scale(.92);
}
.weeks-stepper-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.weeks-stepper-input {
    width: 42px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--mono);
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    padding: 0 .15rem;
    -moz-appearance: textfield;
}
.weeks-stepper-input::-webkit-outer-spin-button,
.weeks-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.weeks-stepper-input:focus {
    outline: none;
    background: transparent;
    box-shadow: none;
}

.weeks-stepper-suffix {
    font-size: .78rem;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 0 .55rem 0 .15rem;
}

/* ----- Móvil: stepper encima de los chips ----- */
@media (max-width: 600px) {
    .weeks-quick {
        flex-direction: row;
        flex-wrap: wrap;
    }
    /* En móvil el stepper ocupa toda su línea (encima de los chips) */
    .weeks-stepper {
        order: -1;          /* va antes que los chips */
        flex-basis: 100%;
        justify-content: center;
        margin-bottom: .35rem;
    }
}

/* ============================================================
   BLOQUE 6 — Fase 1: Reestructuración HTML del wizard
   Estilos base de los nuevos elementos de los 5 pasos.
   ============================================================ */

/* ============ SECTION TITLES (◉ ◐ comunes a todos los pasos) ============ */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
    margin: var(--space-5) 0 var(--space-2);
    letter-spacing: -.005em;
}
.form-step .section-title:first-of-type {
    margin-top: var(--space-2);
}
.section-title-icon {
    color: var(--accent);
    font-size: 1.2rem;
    line-height: 1;
}
.section-help {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
    line-height: 1.45;
}

/* ============ PASO 1 — TIPOS DE SERVICIO ============ */
.service-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.service-row-label {
    grid-column: 1 / -1;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    margin: var(--space-2) 0 0;
}
.service-row-label:first-child {
    margin-top: 0;
}
.service-card {
    cursor: pointer;
    display: block;
    position: relative;
}
.service-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.service-card-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    transition: border-color .15s, background .15s, box-shadow .15s;
    height: 100%;
    text-align: left;
}
.service-card-inner strong {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}
.service-card-inner span {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.3;
}
.service-card:hover .service-card-inner {
    border-color: var(--accent);
    background: var(--accent-light);
}
.service-card input:checked + .service-card-inner {
    border-color: var(--accent);
    background: var(--accent-light);
    box-shadow: 0 0 0 3px rgba(15,118,110,.15);
}

/* ============ PASO 2 — TRABAJADORES + COBERTURA ============ */
.workers-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.workers-stepper {
    display: inline-flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
}
.workers-stepper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}
.workers-stepper-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.workers-stepper-btn:hover:not(:disabled) {
    background: var(--accent-light);
    color: var(--accent-dark);
}
.workers-stepper-input {
    width: 48px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--mono);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    -moz-appearance: textfield;
}
.workers-stepper-input::-webkit-outer-spin-button,
.workers-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.workers-stepper-input:focus { outline: none; }
.workers-stepper-suffix {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: 0 var(--space-3) 0 var(--space-2);
}

.ratios-table-wrapper {
    overflow-x: auto;
    margin-top: var(--space-2);
}
.ratios-table {
    border-collapse: collapse;
    width: 100%;
}
.ratios-summary-line {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.45;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-input);
    border-radius: var(--radius-xs);
    border-left: 3px solid var(--accent);
}
.ratios-summary-line:empty { display: none; }

.ratios-error-banner {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--danger-light);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.45;
}

/* ============ PASO 3 — RUEDA: distribución + presets + editor ============ */
.wheel-distribution {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}
.wheel-distribution-line {
    margin: 0 0 var(--space-3);
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.wheel-weeks-stepper {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
    margin: 0 2px;
}
.wheel-weeks-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.wheel-weeks-input {
    width: 42px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--mono);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    -moz-appearance: textfield;
}
.wheel-weeks-input::-webkit-outer-spin-button,
.wheel-weeks-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wheel-weeks-input:focus { outline: none; }

.wheel-warnings:empty { display: none; }

/* ============ PASO 4 — CALENDARIO: ciclos + chips + stepper ============ */
.calendar-quick-section { margin-bottom: var(--space-4); }
.calendar-quick-label {
    margin: var(--space-3) 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.calendar-cycles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.weeks-stepper {
    display: inline-flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
}
.weeks-stepper-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.weeks-stepper-input {
    width: 42px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--mono);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    -moz-appearance: textfield;
}
.weeks-stepper-input::-webkit-outer-spin-button,
.weeks-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.weeks-stepper-input:focus { outline: none; }
.weeks-stepper-suffix {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: 0 var(--space-3) 0 var(--space-2);
}
.period-coherence:empty { display: none; }

/* ============ RESPONSIVE GENERAL DEL WIZARD NUEVO ============ */
@media (max-width: 700px) {
    .service-types { grid-template-columns: 1fr; }
    .service-row-label { grid-column: 1; }
    .workers-controls { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   BLOQUE 6 — Fase 2.b: Edición de turnos en línea (sin modal)
   Cada tarjeta tiene inputs editables directamente.
   ============================================================ */

/* Reset del padding de la tarjeta de turno con la nueva estructura */
.shift-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
}

/* Inputs de hora dentro de la tarjeta */
.shift-time-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.shift-time-field label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}
.shift-time-field input[type="time"] {
    padding: var(--space-2) var(--space-3);
    font-family: var(--mono);
    font-size: var(--text-base);
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-input);
    color: var(--text);
    width: 100%;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.shift-time-field input[type="time"]:hover {
    border-color: var(--border-strong);
}
.shift-time-field input[type="time"]:focus {
    outline: none;
    border-color: var(--accent);
    background: white;
    box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

/* Duración: roja si es inválida */
.shift-card-duration.is-invalid {
    color: var(--danger);
    font-weight: 700;
}

/* Toggles dentro de la tarjeta (saliente, día libre) */
.shift-card-toggles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.shift-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
    transition: opacity .15s;
    padding: 4px 0;
}
.shift-toggle.is-disabled {
    opacity: .45;
    pointer-events: none;
}
.shift-toggle-label {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.4;
}

/* ============ TOGGLE SWITCH (estilo iOS) ============ */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}
.toggle-switch input[type="checkbox"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}
.toggle-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--border-strong);
    border-radius: 999px;
    transition: background-color .2s ease;
    cursor: pointer;
}
.toggle-switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s ease;
}
.toggle-switch input[type="checkbox"]:checked + .toggle-switch-slider {
    background: var(--accent);
}
.toggle-switch input[type="checkbox"]:checked + .toggle-switch-slider::before {
    transform: translateX(16px);
}
.toggle-switch input[type="checkbox"]:focus-visible + .toggle-switch-slider {
    box-shadow: 0 0 0 3px rgba(15,118,110,.25);
}
.toggle-switch input[type="checkbox"]:disabled {
    cursor: not-allowed;
}
.toggle-switch input[type="checkbox"]:disabled + .toggle-switch-slider {
    cursor: not-allowed;
    opacity: .6;
}

/* ============================================================
   BLOQUE 6 — Fase 2.c: Reglas del servicio
   Renderizado dinámico con toggle switch + stepper.
   ============================================================ */

/* Override de la regla vieja (Lote 4.1) para soportar la nueva estructura */
.rule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    transition: opacity .15s, background .15s;
    flex-direction: row;  /* override del responsive viejo */
}
.rule-row.is-not-applicable {
    opacity: .6;
    background: var(--bg-input);
}
.rule-row-label {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rule-label-text {
    font-size: var(--text-sm);
    color: var(--text);
    font-weight: 500;
    line-height: 1.4;
}
.rule-na-tag {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.3;
}
.rule-row-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Stepper de la regla [- N +] */
.rule-stepper {
    display: inline-flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
}
.rule-stepper-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background .12s, color .12s;
}
.rule-stepper-btn:hover:not(:disabled) {
    background: var(--accent-light);
    color: var(--accent-dark);
}
.rule-stepper-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.rule-stepper-input {
    width: 38px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--mono);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    -moz-appearance: textfield;
    padding: 0 2px;
}
.rule-stepper-input::-webkit-outer-spin-button,
.rule-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.rule-stepper-input:focus { outline: none; }
.rule-stepper-input:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Cuando la regla no aplica, deshabilitar el stepper completo */
.rule-row.is-not-applicable .rule-stepper {
    pointer-events: none;
    opacity: .5;
}
.rule-row.is-not-applicable .toggle-switch {
    pointer-events: none;
    opacity: .5;
}

.rule-unit {
    font-size: var(--text-sm);
    color: var(--text-muted);
    min-width: 50px;
}

/* Responsive: en móvil las reglas pasan a 2 filas */
@media (max-width: 600px) {
    .rule-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--space-2);
    }
    .rule-row-controls {
        justify-content: space-between;
    }
}

/* ============================================================
   BLOQUE 6 — Fase 3.a: Paso 2 (Trabajadores)
   Tarjetas con edición inline de nombre.
   ============================================================ */

/* Lista de trabajadores: grid responsive 5/3/2 cols */
.workers-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* Tarjeta de trabajador */
.worker-card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    min-width: 0;
}
.worker-card:hover:not(.is-editing) {
    border-color: var(--accent);
    background: var(--accent-light);
}
.worker-card.is-editing {
    border-color: var(--accent);
    background: white;
    box-shadow: 0 0 0 3px rgba(15,118,110,.12);
    cursor: text;
}

/* Número del trabajador (círculo) */
.worker-card-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent-dark);
    font-size: var(--text-xs);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
}

/* Nombre del trabajador */
.worker-card-name {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--text);
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icono de editar */
.worker-card-edit-icon {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: .85rem;
    transition: color .12s;
}
.worker-card:hover .worker-card-edit-icon {
    color: var(--accent);
}
.worker-card.is-editing .worker-card-edit-icon {
    display: none;
}

/* Input de edición (sustituye al span del nombre) */
.worker-name-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text);
    outline: none;
    width: 100%;
}

/* Responsive */
@media (max-width: 1100px) {
    .workers-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .workers-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    .workers-list { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOQUE 6 — Fase 3.b: Cobertura por día (paso 2)
   Tabla compacta con steppers en celda + aviso de exceso.
   ============================================================ */

/* Aviso de ratios excesivos (banner arriba del paso) */
.ratios-error-banner {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--danger-light);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.ratios-error-banner strong {
    color: var(--danger);
}

/* Tabla de ratios */
.ratios-table {
    border-collapse: collapse;
    width: 100%;
    background: white;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}
.ratios-table th,
.ratios-table td {
    padding: var(--space-2) var(--space-3);
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.ratios-table th:last-child,
.ratios-table td:last-child {
    border-right: none;
}
.ratios-table tbody tr:last-child td {
    border-bottom: none;
}

/* Celda de día (primera columna) */
.rt-day-th {
    background: var(--bg-input);
}
.rt-day {
    text-align: left;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-input);
    font-size: var(--text-sm);
    width: 25%;
    min-width: 130px;
}

/* Cabecera de turnos */
.rt-shift-th {
    background: var(--bg-input);
    font-weight: 700;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rt-shift-th-inner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.rt-shift-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-weight: 700;
    border: 1px solid var(--border-strong);
}
.rt-shift-badge.rt-shift-M { background: var(--turno-m-bg); color: var(--turno-m); border-color: var(--turno-m-border); }
.rt-shift-badge.rt-shift-T { background: var(--turno-t-bg); color: var(--turno-t); border-color: var(--turno-t-border); }
.rt-shift-badge.rt-shift-N { background: var(--turno-n-bg); color: var(--turno-n); border-color: var(--turno-n-border); }
.rt-shift-badge.rt-shift-D { background: var(--turno-d-bg); color: var(--turno-d); border-color: var(--turno-d-border); }
.rt-shift-label {
    font-size: var(--text-xs);
}

/* Celda con stepper */
.rt-cell {
    padding: var(--space-2);
}
.rt-cell.is-excess {
    /* En la fila completa también se aplica una marca */
}
.rt-stepper {
    display: inline-flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
}
.rt-stepper-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background .12s, color .12s;
}
.rt-stepper-btn:hover:not(:disabled) {
    background: var(--accent-light);
    color: var(--accent-dark);
}
.rt-stepper-btn:disabled { opacity: .4; cursor: not-allowed; }
.rt-stepper-input {
    width: 32px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--mono);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    -moz-appearance: textfield;
    padding: 0;
}
.rt-stepper-input::-webkit-outer-spin-button,
.rt-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rt-stepper-input:focus { outline: none; }

/* Marca de exceso (fila roja) */
.ratios-table tbody tr.is-excess td {
    background: var(--danger-light);
}
.ratios-table tbody tr.is-excess .rt-day {
    background: var(--danger-light);
    color: var(--danger);
    font-weight: 700;
}
.ratios-table tbody tr.is-excess .rt-stepper {
    border-color: var(--danger);
}
.ratios-table tbody tr.is-excess .rt-stepper-input {
    color: var(--danger);
}

/* Línea de resumen */
.ratios-summary-line {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.45;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-input);
    border-radius: var(--radius-xs);
    border-left: 3px solid var(--accent);
}
.ratios-summary-line:empty { display: none; }

/* Botón "Siguiente" deshabilitado */
.btn.disabled,
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Responsive: tabla scroll horizontal en móvil */
@media (max-width: 600px) {
    .ratios-table-wrapper {
        margin-left: calc(var(--space-4) * -1);
        margin-right: calc(var(--space-4) * -1);
        padding: 0 var(--space-4);
    }
    .rt-day { min-width: 100px; }
    .rt-stepper-btn { width: 20px; height: 20px; }
    .rt-stepper-input { width: 26px; }
}

/* ============================================================
   BLOQUE 6 — Fase 5.a: Paso 3 (generación + distribución)
   ============================================================ */

/* === Presets de la rueda (3 chips clickables) === */
/* === Loading state de la rueda === */
.wheel-loading {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-md);
}
.wheel-loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: wheel-spin .8s linear infinite;
    vertical-align: middle;
    margin-right: var(--space-2);
}
@keyframes wheel-spin {
    to { transform: rotate(360deg); }
}

.wheel-error {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--danger);
    background: var(--danger-light);
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* === Tabla del editor en el paso 3 (F5.b) ===
   Las clases .ewt-* del editor.js gestionan el aspecto de las celdas;
   aquí solo definimos el contenedor y el margen superior. */
#editorWheelTableInline {
    width: 100%;
    margin-top: var(--space-3);
}
/* Estado de carga / error mantenido (cuando no hay tabla del editor todavía) */
#editorWheelTableInline tbody tr td.wheel-loading,
#editorWheelTableInline tbody tr td.wheel-error,
#editorWheelTableInline > tr > td.wheel-loading,
#editorWheelTableInline > tr > td.wheel-error {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* === Wheel weeks stepper (paso 3, línea de distribución) === */
.wheel-weeks-stepper {
    background: white;
    border-color: var(--accent);
}
.wheel-weeks-btn:hover:not(:disabled) {
    background: var(--accent-light);
    color: var(--accent-dark);
}
.wheel-weeks-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ============================================================
   BLOQUE 6 — Fase 5.c: Avisos del paso 3 (rueda)
   Banners plegables: error, warning, info.
   ============================================================ */

.wheel-warnings { margin: var(--space-3) 0; }
.wheel-warnings:empty { display: none; }

.rw-banner {
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border-left: 4px solid;
}
.rw-banner[open] { padding-bottom: var(--space-2); }

.rw-banner-error   { background: var(--danger-light);  border-left-color: var(--danger); }
.rw-banner-warning { background: var(--warning-light); border-left-color: var(--warning); }
.rw-banner-info    { background: var(--accent-light);  border-left-color: var(--accent); }

.rw-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.rw-summary::-webkit-details-marker { display: none; }
.rw-summary::marker { display: none; }

.rw-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
}
.rw-banner-error .rw-icon   { color: var(--danger); }
.rw-banner-warning .rw-icon { color: var(--warning); }
.rw-banner-info .rw-icon    { color: var(--accent-dark); }

.rw-title {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.45;
}
.rw-toggle {
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    transition: background .12s;
}
.rw-banner[open] .rw-toggle::after { content: ' ▾'; }
.rw-banner:not([open]) .rw-toggle::after { content: ' ▸'; }

.rw-body {
    padding: 0 var(--space-3) var(--space-2) calc(var(--space-3) + 1.1rem + var(--space-2));
}

.rw-explain {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.45;
}

.rw-list {
    margin: 0;
    padding: 0 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.5;
}
.rw-list li { margin-bottom: 4px; }

/* Pills de turno dentro de los avisos */
.rw-pill {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-weight: 700;
    border: 1px solid var(--border-strong);
    margin: 0 2px;
}
.rw-pill-M { background: var(--turno-m-bg); color: var(--turno-m); border-color: var(--turno-m-border); }
.rw-pill-T { background: var(--turno-t-bg); color: var(--turno-t); border-color: var(--turno-t-border); }
.rw-pill-N { background: var(--turno-n-bg); color: var(--turno-n); border-color: var(--turno-n-border); }
.rw-pill-D { background: var(--turno-d-bg); color: var(--turno-d); border-color: var(--turno-d-border); }

/* ============================================================
   BLOQUE 6 — Fase 6.a: Paso 4 (selectores del calendario)
   Tarjetas de ciclos + chips + fechas + stepper.
   ============================================================ */

/* === Pildoras de ciclos (unificadas con btn-pill) === */
.cycle-pill,
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    transition: border-color .12s, background .12s, color .12s, box-shadow .12s;
    white-space: nowrap;
}
.cycle-pill:hover,
.btn-pill:hover {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--accent-dark);
}
.cycle-pill.is-active,
.btn-pill.is-active {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--accent-dark);
    box-shadow: 0 0 0 3px rgba(15,118,110,.15);
}
.cycle-pill-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-family: var(--mono);
    font-size: var(--text-xs);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cycle-pill-text {
    font-size: var(--text-sm);
    color: var(--text);
    font-weight: 600;
}

/* Contenedor de las pildoras de ciclos: mismo flex-wrap que .weeks-quick */
.calendar-cycles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Chips de duración */
.weeks-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* === Inputs de fecha (paso 4) === */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.field-row .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.field-row .field label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}
.field-row .field input[type="date"] {
    padding: var(--space-2) var(--space-3);
    font-family: var(--mono);
    font-size: var(--text-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-input);
    color: var(--text);
    width: 100%;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.field-row .field input[type="date"]:focus {
    outline: none;
    border-color: var(--accent);
    background: white;
    box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

/* === Aviso de coherencia (descuadre) === */
.period-coherence {
    margin: var(--space-4) 0 0;
}
.period-coherence-ok {
    padding: var(--space-3) var(--space-4);
    background: var(--accent-light);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.5;
}
.period-coherence-ok .pc-icon {
    color: var(--accent-dark);
    font-weight: 700;
    margin-right: var(--space-1);
}
.period-coherence-warn {
    padding: var(--space-3) var(--space-4);
    background: var(--warning-light);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-xs);
}
.period-coherence-warn .pc-msg {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.5;
}
.period-coherence-warn .pc-icon-warn {
    color: var(--warning);
    font-weight: 700;
    margin-right: var(--space-1);
}
.pc-ack-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
}
.pc-ack-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
}

/* ============================================================
   BLOQUE 6 — Fase 6.b: Generación del cuadrante (paso 4 → 5)
   - Mensaje de error en paso 4
   - Vista PROVISIONAL del paso 5 (sustituida en F7)
   ============================================================ */

/* Mensaje de error de envío al backend (paso 4) */
.submit-error {
    margin: var(--space-3) 0 0;
    padding: var(--space-3) var(--space-4);
    background: var(--danger-light);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.submit-error .se-icon {
    color: var(--danger);
    font-weight: 700;
    margin-right: var(--space-1);
}

/* Vista provisional del paso 5 (F6.b) */
.result-prov-success {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--accent-light);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
}
.rps-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rps-text strong {
    display: block;
    font-size: var(--text-md);
    color: var(--text);
    line-height: 1.4;
}
.result-prov-summary {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
}
.result-prov-summary li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.5;
}
.result-prov-summary li:last-child {
    border-bottom: none;
}
.result-prov-note {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-input);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
}

/* ============================================================
   BLOQUE 6 — Sub-fase F7-prev: Sub-secciones con contraste
   Cada sección dentro de una card se envuelve en un .subsection
   con fondo ligeramente diferenciado.
   ============================================================ */

.subsection {
    background: #f8fafc;        /* gris muy claro, entre blanco y bg-input */
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.subsection:last-of-type {
    margin-bottom: 0;
}

/* El primer h3.section-title dentro de subsection no debe tener margen
   superior (el padding de la subsection ya da el espacio). */
.subsection .section-title:first-child {
    margin-top: 0;
}
.subsection > .section-title:first-child {
    margin-top: 0;
}

/* Las subsections de pasos en mobile: menos padding lateral */
@media (max-width: 600px) {
    .subsection {
        padding: var(--space-3);
    }
}

/* ============================================================
   BLOQUE 6 — Fase 7.a: Cabecera de paso con botones de navegación
   El título queda a la izquierda y los botones (Atrás/Siguiente)
   a la derecha, en línea, sin afectar al above-the-fold.
   ============================================================ */

.step-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.step-header .card-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.step-header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
.step-header-nav .btn {
    /* Asegurar que los botones son discretos (ghost) */
    font-size: var(--text-sm);
    padding: 6px 12px;
}

/* En el paso 5 hay 3 botones y pueden ser un poco más densos */
.step-header-nav-result .btn {
    font-size: var(--text-sm);
    padding: 6px 10px;
    white-space: nowrap;
}

/* Responsive: si no caben los botones a la derecha, se van debajo */
@media (max-width: 700px) {
    .step-header {
        flex-direction: column;
        align-items: stretch;
    }
    .step-header-nav {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

/* ============================================================
   BLOQUE 6 — Fase 7.b: 3 cards de stats del paso 5
   - Fondo verdoso del card del paso 5
   - Fila 1: Resumen (~70%) + Calidad (~30%)
   - Fila 2: Validaciones (100%, plegable)
   ============================================================ */

/* === Diferenciación visual del card del paso 5 === */
#step5 > .card {
    background: rgba(15, 118, 110, 0.04);  /* accent al 4% */
    border-color: rgba(15, 118, 110, 0.15);
}

/* === Filas de stat-cards === */
.stat-cards-row {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.stat-cards-row-1 {
    grid-template-columns: 7fr 3fr;  /* ~70% / ~30% */
}
.stat-cards-row-2 {
    grid-template-columns: 1fr;  /* Validaciones a ancho completo */
}

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

/* === Tarjeta interna (común) === */
.stat-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}
.stat-card-resumen {
    padding: var(--space-3) var(--space-4);  /* más compacta verticalmente */
}
.stat-card-resumen .stat-card-title {
    margin-bottom: var(--space-2);
}
.stat-card-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.stat-card-body {
    /* sin estilos especiales; se diferencian por contexto */
}
.stat-empty {
    margin: 0;
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--text-sm);
}

/* === Card 1: Resumen === */
.stat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 4px 0;
    font-size: var(--text-sm);
    line-height: 1.35;
}
.stat-row:last-child {
    /* sin reglas adicionales, el padding ya es uniforme */
}
.stat-label {
    color: var(--text-secondary);
    flex-shrink: 0;
}
.stat-value {
    color: var(--text);
    font-weight: 600;
    text-align: right;
}

/* === Card 2: Calidad === */
.qual-score-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}
.qual-score {
    font-family: var(--mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.qual-score-of {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 600;
}
.qual-bar {
    background: var(--bg-input);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}
.qual-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
}
.qual-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: var(--space-3);
}

/* Niveles cualitativos (5) */
.qual-excellent { color: #059669; }                              /* verde fuerte */
.qual-bar-fill.qual-excellent,
.qual-factor-fill.qual-excellent { background: #059669; }
.qual-good { color: #10b981; }                                   /* verde */
.qual-bar-fill.qual-good,
.qual-factor-fill.qual-good { background: #10b981; }
.qual-fair { color: #d97706; }                                   /* ámbar */
.qual-bar-fill.qual-fair,
.qual-factor-fill.qual-fair { background: #d97706; }
.qual-poor { color: #ea580c; }                                   /* naranja */
.qual-bar-fill.qual-poor,
.qual-factor-fill.qual-poor { background: #ea580c; }
.qual-bad { color: #dc2626; }                                    /* rojo */
.qual-bar-fill.qual-bad,
.qual-factor-fill.qual-bad { background: #dc2626; }

/* Factores de calidad (mini-barras horizontales) */
.qual-factors {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.qual-factor {
    display: grid;
    grid-template-columns: 60px 1fr 30px;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 6px;
    font-size: var(--text-xs);
}
.qual-factor:last-child { margin-bottom: 0; }
.qual-factor-label {
    color: var(--text-secondary);
    font-weight: 600;
}
.qual-factor-bar {
    background: var(--bg-input);
    border-radius: 999px;
    height: 5px;
    overflow: hidden;
}
.qual-factor-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}
.qual-factor-val {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text);
    text-align: right;
    font-size: var(--text-xs);
}

/* === Card 3: Validaciones === */
.stat-card-validaciones.is-ok {
    border-color: rgba(16, 185, 129, 0.3);
}
.stat-card-validaciones.is-warn {
    border-color: rgba(217, 119, 6, 0.4);
}

.validations-ok {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.vo-icon {
    flex-shrink: 0;
    color: #10b981;
    font-weight: 700;
    font-size: 1.1rem;
}

.validations-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.vs-icon {
    flex-shrink: 0;
    color: #d97706;
    font-weight: 700;
    font-size: 1.1rem;
}
.vs-text {
    flex: 1 1 auto;
    color: var(--text);
    font-size: var(--text-sm);
}
.validations-toggle {
    flex-shrink: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    transition: border-color .12s, background .12s, color .12s;
}
.validations-toggle:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
}
.vt-arrow {
    font-size: .9em;
}

.validations-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.val-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.val-pill-descanso { color: #6366f1; border-color: rgba(99,102,241,.3); background: rgba(99,102,241,.08); }
.val-pill-noches   { color: #b45309; border-color: rgba(180,83,9,.3); background: rgba(180,83,9,.08); }
.val-pill-fds      { color: #be185d; border-color: rgba(190,24,93,.3); background: rgba(190,24,93,.08); }

/* Detalles plegables */
.validations-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.validations-details.is-open {
    max-height: 9999px;  /* sin límite real */
}
.vd-inner {
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--border);
    margin-top: var(--space-3);
}
.vd-group {
    margin-bottom: var(--space-3);
}
.vd-group:last-child {
    margin-bottom: 0;
}
.vd-group-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
}
.vd-list {
    margin: 0;
    padding-left: var(--space-4);
    list-style: disc;
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.6;
}
.vd-list li {
    margin-bottom: 4px;
}
.vd-list strong {
    font-weight: 700;
    color: var(--text);
}

/* ============================================================
   BLOQUE 6 — Fase 7.c: Tabs + Cuadrante general (bloques mensuales)
   ============================================================ */

/* === Tabs del paso 5 === */
.result-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-top: var(--space-4);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.result-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    transition: color .12s, border-color .12s, background .12s;
    margin-bottom: -2px;
    white-space: nowrap;
}
.result-tab:hover {
    color: var(--text);
    background: rgba(15, 118, 110, 0.04);
}
.result-tab.is-active {
    color: var(--accent-dark);
    border-bottom-color: var(--accent);
    background: rgba(15, 118, 110, 0.06);
}

/* === Contenido del tab === */
.result-tab-content {
    margin-top: var(--space-2);
}

/* === Placeholder de tabs futuras === */
.tab-placeholder {
    background: white;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-5) var(--space-4);
    text-align: center;
}
.tab-placeholder-title {
    margin: 0 0 var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-md);
    font-weight: 700;
}
.tab-placeholder-msg {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* === Bloque semanal === */
.week-block {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}
.week-block:last-child { margin-bottom: 0; }

.week-block-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    line-height: 1.3;
}
.wbt-num {
    font-weight: 700;
    color: var(--accent-dark);
    background: var(--accent-light);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    letter-spacing: .02em;
}
.wbt-range {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--text-xs);
}

.week-block-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.week-block-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    min-width: 720px;
    font-family: var(--mono);
    font-size: 11px;
}
.week-block-table th,
.week-block-table td {
    border: 1px solid var(--border);
    padding: 0;
    text-align: center;
    vertical-align: middle;
    height: 24px;
    line-height: 24px;
}

/* Borde divisorio entre viernes y sábado (más grueso para separar visualmente
   semana laboral / fin de semana). Aplica al borde IZQUIERDO de la columna sábado. */
.wb-th-dow.is-weekend-start,
.wb-th-num.is-weekend-start,
.wb-cell.is-weekend-start {
    border-left: 2px solid var(--border-strong, #94a3b8);
}

/* Cabecera */
.wb-corner {
    background: var(--bg-input);
    width: 110px;
    min-width: 110px;
    max-width: 140px;
}
.wb-th-dow,
.wb-th-num {
    background: var(--bg-input);
    color: var(--text);
    font-weight: 700;
    width: auto;
    font-family: inherit;
}
.wb-th-dow {
    font-size: 11px;
    padding: 0 4px;
}
.wb-th-num {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Trabajador (primera columna) */
.wb-th-worker {
    background: white;
    color: var(--text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    padding: 0 var(--space-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Columna "Horas" del bloque semanal (paso 5) */
.wb-th-hours {
    background: #f1f5f9;
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-left: 2px solid #cbd5e1;
    padding: 0 6px;
    white-space: nowrap;
}
.wb-cell-hours {
    background: #f8fafc;
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    border-left: 2px solid #cbd5e1;
    padding: 0 6px;
    white-space: nowrap;
}

/* Celdas de turno */
.wb-cell {
    font-weight: 700;
    color: var(--text);
    font-size: 11px;
}
.wb-cell-empty {
    color: var(--text-muted);
    background: white;
}
.wb-cell-M { background: var(--turno-m-bg); color: var(--turno-m); }
.wb-cell-T { background: var(--turno-t-bg); color: var(--turno-t); }
.wb-cell-N { background: var(--turno-n-bg); color: var(--turno-n); }
.wb-cell-D { background: var(--turno-d-bg); color: var(--turno-d); }
.wb-cell-S { background: #fef3c7; color: #92400e; font-style: italic; font-weight: 500; }
.wb-cell-L { background: #ecfeff; color: #0e7490; font-style: italic; font-weight: 500; }

/* Días fuera del periodo (semanas parciales): atenuados */
.wb-th-dow.is-out,
.wb-th-num.is-out {
    color: var(--text-muted);
    opacity: .55;
}
.wb-cell.is-out {
    background: repeating-linear-gradient(
        45deg,
        #f1f5f9 0,
        #f1f5f9 4px,
        #ffffff 4px,
        #ffffff 8px
    );
    color: transparent;
}

/* Hover en celda */
.week-block-table tbody tr:hover .wb-cell:not(.is-out) {
    filter: brightness(0.97);
}

/* ============================================================
   Tweak F7.b: Card de validaciones — header con título + botón
   ============================================================ */
.stat-card-validaciones .stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.stat-card-validaciones .stat-card-header .stat-card-title {
    margin: 0;
}

/* Título cuando todo cumple: verde */
.stat-card-title.is-ok-title {
    color: #047857;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-md);
    margin: 0;
}

/* Título cuando hay incumplimientos: ámbar y conserva el estilo de stat-card-title */
.stat-card-title.is-warn-title {
    color: #b45309;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-md);
}

/* Cuando is-ok el card es más compacto, sin body */
.stat-card-validaciones.is-ok {
    padding: var(--space-3) var(--space-4);
}

/* ============================================================
   BLOQUE 6 — Fase 7.d: Vistas Por trabajador y Equilibrio
   ============================================================ */

/* === Vista "Por trabajador" — toolbar con select === */
.ind-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}
.ind-toolbar-label {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ind-toolbar-select {
    flex: 1 1 200px;
    max-width: 320px;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.ind-toolbar-select:hover,
.ind-toolbar-select:focus {
    border-color: var(--accent);
    background: white;
    outline: none;
}
.ind-toolbar-stats {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}
.its-hours {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text);
    font-size: var(--text-sm);
}

/* Insignia de balance: barra + label (reusa estilos de iwh-*) */
.iwh-balance {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}
.iwh-bar {
    position: relative;
    width: 80px;
    height: 6px;
    background: var(--bg-input);
    border-radius: 999px;
    overflow: hidden;
}
.iwh-bar-center {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-strong, #94a3b8);
    transform: translateX(-50%);
}
.iwh-bar-needle {
    position: absolute;
    top: -2px;
    width: 6px;
    height: 10px;
    border-radius: 2px;
    transform: translateX(-50%);
}
.iwh-balance-label {
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    min-width: 110px;
    text-align: right;
}
.balance-ok .iwh-bar-needle      { background: #10b981; }
.balance-ok .iwh-balance-label   { color: #047857; }
.balance-mild .iwh-bar-needle    { background: #d97706; }
.balance-mild .iwh-balance-label { color: #b45309; }
.balance-high .iwh-bar-needle    { background: #dc2626; }
.balance-high .iwh-balance-label { color: #b91c1c; }

/* ===== Tarjeta "Distribución por semanas" en vista por trabajador (paso 5) ===== */
.wwh-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}
.wwh-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light, #e5e7eb);
}

/* Grid de mini-tarjetas: 5 por fila en desktop, responsive */
.wwh-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
}
@media (max-width: 1100px) {
    .wwh-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .wwh-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .wwh-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    .wwh-grid { grid-template-columns: 1fr; }
}

/* Mini-tarjeta de una semana: 3 filas (título, barra, horas) */
.wwh-cell {
    background: #f8fafc;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-xs);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.wwh-cell-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    line-height: 1.2;
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wwh-cell-num {
    font-weight: 700;
    color: var(--accent);
    font-size: 12px;
}
.wwh-cell-range {
    color: var(--text-secondary);
    font-weight: 500;
}
.wwh-cell-bar-wrap {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.wwh-cell-bar {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    min-width: 2px;
    transition: width .2s ease;
}
.wwh-cell-value {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text);
    font-size: 13px;
    line-height: 1;
}

/* Footer con total y media */
.wwh-footer {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light, #e5e7eb);
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.wwh-foot-sep {
    color: var(--text-muted, #94a3b8);
}
.wwh-foot-item strong {
    color: var(--text);
    font-weight: 700;
}

/* Wrap del calendario individual */
.ind-cal-wrap {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}

/* Grid de mini-calendarios: 3 por fila en desktop, responsive */
.ind-cal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
@media (max-width: 900px) {
    .ind-cal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .ind-cal-grid { grid-template-columns: 1fr; }
}

/* Mini-calendario */
.mini-cal {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: var(--space-2);
}
.mini-cal-title {
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-2);
    text-transform: capitalize;
}
.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.mini-cal-dow {
    background: var(--bg-input);
    color: var(--text-secondary);
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 0;
    border-radius: 2px;
    text-transform: uppercase;
}
.mini-cal-dow.is-weekend-start {
    border-left: 2px solid var(--border-strong, #94a3b8);
}

.mini-cal-day {
    position: relative;
    background: white;
    border: 1px solid var(--border);
    border-radius: 2px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 1px 2px;
    overflow: hidden;
    font-family: var(--mono);
}
.mini-cal-day.is-empty {
    background: transparent;
    border-color: transparent;
}
.mini-cal-day.is-weekend-start {
    border-left: 2px solid var(--border-strong, #94a3b8);
}
.mini-cal-day.is-out {
    background: repeating-linear-gradient(
        45deg,
        #f1f5f9 0,
        #f1f5f9 3px,
        #ffffff 3px,
        #ffffff 6px
    );
    border-color: var(--border);
}
.mini-cal-day.is-out .mcd-num {
    color: var(--text-muted);
    opacity: .55;
}

.mcd-num {
    font-size: 9px;
    color: var(--text-secondary);
    text-align: left;
    font-weight: 600;
    line-height: 1;
}
.mcd-code {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    margin-top: 1px;
}
.mcd-empty .mcd-code { color: var(--text-muted); }
.mcd-M { background: var(--turno-m-bg); }
.mcd-M .mcd-code { color: var(--turno-m); }
.mcd-T { background: var(--turno-t-bg); }
.mcd-T .mcd-code { color: var(--turno-t); }
.mcd-N { background: var(--turno-n-bg); }
.mcd-N .mcd-code { color: var(--turno-n); }
.mcd-D { background: var(--turno-d-bg); }
.mcd-D .mcd-code { color: var(--turno-d); }
.mcd-S { background: #fef3c7; }
.mcd-S .mcd-code { color: #92400e; font-style: italic; font-weight: 500; }
.mcd-L { background: #ecfeff; }
.mcd-L .mcd-code { color: #0e7490; font-style: italic; font-weight: 500; }

/* === Vista "Equilibrio" === */
.eq-table-wrap {
    overflow-x: auto;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.eq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.eq-table th,
.eq-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;  /* No acortar palabras */
}
.eq-table tbody tr:last-child td {
    border-bottom: none;
}
.eq-table tbody tr:hover {
    background: rgba(15, 118, 110, 0.04);
}

/* Cabeceras */
.eq-th-sortable {
    background: var(--bg-input);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background .12s;
}
.eq-th-sortable:hover {
    background: var(--accent-light);
    color: var(--accent-dark);
}
.eq-th-left  { text-align: left; }
.eq-th-right { text-align: right; }

.eq-th-sortable .eq-th-label {
    /* Inline para que la flecha pueda ir al lado */
}
.eq-th-arrow {
    margin-left: 6px;
    color: var(--accent);
    font-size: 10px;
    display: inline-block;
}

/* Celdas */
.eq-td-name {
    font-weight: 600;
    color: var(--text);
    text-align: left;
}
.eq-td-num {
    text-align: right;
    font-family: var(--mono);
    font-weight: 600;
    color: var(--text);
}

/* Colores del exceso de horas */
.eq-diff-ok   { color: #047857; }
.eq-diff-mild { color: #b45309; }
.eq-diff-high { color: #b91c1c; }

/* ============================================================
   B1 — ONBOARDING TOUR
   ============================================================ */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
    animation: onboarding-fade-in 0.2s ease-out;
}
.onboarding-overlay[hidden] {
    display: none;
}
@keyframes onboarding-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.onboarding-modal {
    background: white;
    border-radius: 14px;
    border: 0.5px solid var(--border);
    max-width: 720px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 32px 36px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    animation: onboarding-slide-in 0.25s ease-out;
}
@keyframes onboarding-slide-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.onboarding-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.onboarding-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.onboarding-icon svg {
    width: 36px;
    height: 36px;
}
.onboarding-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.25;
}
.onboarding-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 22px;
}
.onboarding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}
.onboarding-step {
    padding: 14px 16px;
    background: var(--bg-input, #f8f9fa);
    border-radius: 8px;
    border-left: 3px solid var(--accent);
}
.onboarding-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.onboarding-step-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.onboarding-step-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.onboarding-step-intro {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    font-style: italic;
    margin: 0 0 8px;
}
.onboarding-step-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.onboarding-step-bullets li::before {
    content: '• ';
    color: var(--accent);
    margin-right: 3px;
}
.onboarding-cta {
    width: 100%;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 600;
}

@media (max-width: 600px) {
    .onboarding-modal {
        padding: 22px 22px 20px;
        max-height: 95vh;
    }
    .onboarding-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .onboarding-title {
        font-size: 18px;
    }
    .onboarding-desc {
        font-size: 14px;
    }
}

/* ============================================================
   B1 — Enlace "Ver introducción" entre wizard y SEO
   ============================================================ */
.show-intro-bar {
    text-align: center;
    margin: 1rem auto 1.5rem;
    max-width: 1200px;
}
.show-intro-bar .btn-link {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: .85rem;
    cursor: pointer;
    padding: .5rem 1rem;
    border-radius: 6px;
    transition: all var(--transition);
}
.show-intro-bar .btn-link:hover {
    color: var(--accent);
    background: rgba(15, 118, 110, 0.06);
}
.show-intro-bar .btn-link span[aria-hidden] {
    margin-right: 4px;
    color: var(--accent);
}

/* ============================================================
   A4 — TOOLTIPS (botones de ayuda con ?)
   ============================================================ */
.help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: .35rem;
    border-radius: 50%;
    background: var(--text-muted);
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    user-select: none;
    transition: all var(--transition);
    vertical-align: middle;
    border: none;
    padding: 0;
    font-family: inherit;
}
.help-tip:hover,
.help-tip:focus-visible {
    background: var(--accent);
    transform: scale(1.1);
    outline: none;
}
.help-tip:focus-visible {
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.3);
}

/* ============================================================
   X3 — FOCUS VISIBLE MEJORADO (accesibilidad teclado)
   ============================================================ */
*:focus {
    outline: none; /* desactivamos outline por defecto */
}
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline-offset: 3px;
}

/* Reducir movimiento si el usuario lo prefiere — accesibilidad */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   AUDITORÍA MÓVIL — fixes consolidados
   ============================================================ */

/* En móviles iOS, los inputs con font-size < 16px provocan zoom
   automático al hacer focus. Subimos el tamaño en pantallas pequeñas. */
@media (max-width: 700px) {
    input[type="date"],
    input[type="number"],
    input[type="text"],
    input[type="time"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* Touch targets mínimos en móvil (WCAG 2.5.5 = 44×44 px recomendado).
   Aumentamos los botones pequeños sin alterar el aspecto desktop. */
@media (max-width: 700px) {
    .rt-stepper-btn,
    .weeks-stepper-btn,
    .wheel-weeks-btn,
    .workers-stepper-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    .rt-stepper-input {
        width: 44px !important;
        height: 36px;
        font-size: 15px;
    }
    .btn-pill,
    .btn.btn-sm {
        min-height: 40px;
    }
    .step.completed,
    .step.active {
        min-height: 44px;
        padding: 6px 8px;
        margin: -6px -8px;
    }
}

/* Step 5: 4 botones en cabecera. En móvil no entran cómodamente,
   los apilamos en grid 2x2 para que mantengan tamaño usable. */
@media (max-width: 700px) {
    .step-header-nav-result {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        width: 100%;
    }
    .step-header-nav-result .btn {
        font-size: 13px;
        padding: 9px 8px;
        min-height: 40px;
    }
}
@media (max-width: 380px) {
    /* En muy pequeño, una columna */
    .step-header-nav-result {
        grid-template-columns: 1fr;
    }
}

/* Header de la app: en móvil, el header-actions (Volver, Nueva config,
   Exportar PDF) que se muestra durante la impresión también debe ser
   apilable y con touch targets aceptables. */
@media (max-width: 600px) {
    .app-header { padding: 0.5rem 0.75rem; }
    .header-inner {
        gap: 0.5rem;
        align-items: center;
    }
    .brand { gap: 0.5rem; }
    .brand-icon {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
    }
    .header-actions { gap: 0.5rem; }
    .header-actions .btn {
        min-height: 40px;
        font-size: 13px;
        padding: 8px 10px;
    }
}

/* Stepper de pasos: que sea fácilmente tocable, no se solapen
   los círculos en pantallas muy pequeñas. */
@media (max-width: 600px) {
    .stepper {
        padding: 0;
        margin-bottom: 1.25rem;
        gap: 0;
    }
    .step-num {
        width: 30px;
        height: 30px;
        font-size: .85rem;
    }
}
@media (max-width: 380px) {
    .step-num {
        width: 26px;
        height: 26px;
        font-size: .78rem;
    }
    .step-line {
        margin: 0 .15rem !important;
    }
}

/* Tarjeta de resumen (config-summary): mejor padding en móvil */
@media (max-width: 600px) {
    .config-summary {
        flex-wrap: wrap;
        align-items: flex-start;
        line-height: 1.45;
    }
    .config-summary-text {
        flex: 1 1 100%;
        margin-top: 2px;
    }
}

/* Editor de la rueda: scroll horizontal con indicador y celdas táctiles */
@media (max-width: 700px) {
    .editor-wheel-wrapper {
        /* Indicador visual de que hay más contenido a la derecha */
        background:
            linear-gradient(to right, white, white) left center / 20px 100% no-repeat,
            linear-gradient(to right, rgba(0,0,0,0), white) right center / 20px 100% no-repeat,
            linear-gradient(to right, rgba(0,0,0,0.07), rgba(0,0,0,0)) left center / 20px 100% no-repeat,
            linear-gradient(to left, rgba(0,0,0,0.07), rgba(0,0,0,0)) right center / 20px 100% no-repeat,
            white;
        background-attachment: local, local, scroll, scroll;
    }
    .editor-wheel-table {
        font-size: 14px;
    }
    .editor-wheel-table th,
    .editor-wheel-table td {
        min-width: 40px;
    }
    .editor-cell-content {
        min-height: 36px;
        padding: 6px 4px;
    }
}

/* Cuadrante general (paso 5): scroll horizontal pero más legible */
@media (max-width: 700px) {
    .cuadrante-tabla {
        font-size: 13px;
    }
}

/* Onboarding modal: en móviles muy pequeños ajustamos el padding */
@media (max-width: 380px) {
    .onboarding-modal {
        padding: 16px 14px 14px;
    }
    .onboarding-title {
        font-size: 16px;
    }
    .onboarding-desc {
        font-size: 13px;
    }
    .onboarding-step {
        padding: 10px 12px;
    }
}

/* Tarjetas de turno (paso 1): no ser muy estrechas en mini */
@media (max-width: 380px) {
    .shifts-container {
        gap: 0.7rem;
    }
    .shift-card {
        padding: 0.75rem 0.8rem;
    }
}

/* Acordeón FAQ: padding más cómodo en móvil */
@media (max-width: 500px) {
    .seo-content .faq-item summary {
        padding: 0.85rem 0.85rem;
    }
    .seo-content .faq-q {
        font-size: 0.92rem;
        line-height: 1.35;
    }
    .seo-content .faq-answer {
        padding: 0 0.85rem 0.9rem;
        font-size: 0.92rem;
    }
}

/* Help-tip (botón ?): touch target de 24px en móvil para no fallar el toque */
@media (max-width: 700px) {
    .help-tip {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }
}

/* Evitar overflow horizontal global en mobile */
@media (max-width: 700px) {
    html, body {
        overflow-x: hidden;
    }
}

/* ============================================================
   MODAL DE CONFIRMACIÓN PERSONALIZADO
   Reemplaza el nativo `window.confirm()` para que no muestre
   el dominio "www.mariosanchezhevia.com dice" del navegador.
   ============================================================ */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1100;
    animation: confirm-fade-in 0.18s ease-out;
}
.confirm-overlay[hidden] { display: none; }
@keyframes confirm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.confirm-modal {
    background: white;
    border-radius: 12px;
    border: 0.5px solid var(--border);
    max-width: 460px;
    width: 100%;
    padding: 22px 26px 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    animation: confirm-slide-in 0.2s ease-out;
}
@keyframes confirm-slide-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.confirm-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.3;
}
.confirm-message {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
}
.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.confirm-actions .btn {
    min-width: 90px;
    padding: 9px 16px;
    font-size: 14px;
}

@media (max-width: 600px) {
    .confirm-modal {
        padding: 20px 22px 16px;
    }
    .confirm-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .confirm-actions .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* ============================================================
   MODAL DE EXPORTACIÓN (sub-lote 7.3)
   ============================================================ */
.export-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1100;
    animation: export-fade-in 0.18s ease-out;
    overflow-y: auto;
}
.export-overlay[hidden] { display: none; }
@keyframes export-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.export-modal {
    background: white;
    border-radius: 12px;
    border: 0.5px solid var(--border);
    max-width: 520px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 26px 30px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    animation: export-slide-in 0.2s ease-out;
}
@keyframes export-slide-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.export-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.export-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.3;
}
.export-close {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: background var(--transition), color var(--transition);
}
.export-close:hover {
    background: var(--bg-input);
    color: var(--text);
}
.export-subtitle {
    margin: 0 0 22px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.export-section {
    border: 0.5px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.export-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.export-section-icon {
    font-size: 16px;
    line-height: 1;
}
.export-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.export-section-desc {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.export-section-tip {
    margin: 0 0 12px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.45;
    padding: 6px 10px;
    background: var(--bg-input);
    border-radius: 5px;
    border-left: 2px solid var(--border-strong);
}
.export-checkboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    margin-bottom: 12px;
    font-size: 13px;
}
.export-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}
.export-checkbox input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.export-section-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.export-btn-primary {
    width: 100%;
    background: var(--accent);
    color: white;
    border: none;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    font-family: inherit;
}
.export-btn-primary:hover {
    background: var(--accent-dark);
}
.export-btn-primary:active {
    transform: scale(0.99);
}
.export-btn-outline {
    background: white;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    font-family: inherit;
}
.export-btn-outline:hover {
    background: var(--accent-light);
}
.export-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    transition: background var(--transition), color var(--transition);
}
.export-btn-ghost:hover {
    background: var(--bg-input);
    color: var(--text);
}
.export-footer {
    text-align: right;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .export-modal {
        padding: 22px 20px 18px;
    }
    .export-checkboxes {
        grid-template-columns: 1fr;
    }
    .export-section-actions {
        grid-template-columns: 1fr;
    }
    .export-btn-primary,
    .export-btn-outline {
        min-height: 44px;
    }
}

/* ============================================================
   IMPRESIÓN / EXPORTACIÓN PDF (sub-lote 7.4 + iframe fix)

   El PDF se genera en un iframe oculto (ver js/print.js). El iframe
   carga este mismo CSS y aplica las reglas de impresión a su propio
   documento, dejando intacta la página principal.
   ============================================================ */

/* En la página principal (sin .is-printing en body), si por algún
   motivo apareciese un #printContainer, queda oculto. */
body:not(.is-printing) #printContainer {
    display: none;
}

/* Dentro del iframe, body siempre tiene la clase .is-printing y el
   #printContainer es su único hijo: se muestra a tamaño completo. */
body.is-printing {
    background: white;
    margin: 0;
    padding: 0;
}
body.is-printing #printContainer {
    display: block;
    background: white;
}

/* === @page por defecto === */
@page {
    size: A4 portrait;
    margin: 1.2cm 1cm;
}

/* === @page nombrada para el cuadrante general (landscape) === */
@page cuadrante-landscape {
    size: A4 landscape;
    margin: 0.7cm;
}
.print-cuadrante-general {
    page: cuadrante-landscape;
}

/* === Reglas SOLO durante impresión real (PDF) === */
@media print {

    body {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Tipografía base impresa */
    #printContainer {
        font-family: var(--font, sans-serif);
        font-size: 10.5pt;
        color: #000;
        line-height: 1.4;
    }
    #printContainer h1,
    #printContainer h2,
    #printContainer h3 {
        margin: 0;
        color: #0f766e;
        font-weight: 600;
    }

    /* Cabecera del documento (solo en primera sección) */
    .print-page-header {
        margin-bottom: 16pt;
        padding-bottom: 8pt;
        border-bottom: 0.5pt solid #ccc;
    }
    .print-doc-title {
        font-size: 18pt;
        margin: 0;
    }
    .print-doc-subtitle {
        font-size: 10pt;
        color: #666;
        margin: 3pt 0 0;
    }

    /* Sección y títulos */
    .print-section {
        margin-bottom: 14pt;
    }
    .print-section-title {
        font-size: 14pt;
        margin-bottom: 6pt;
        padding-bottom: 4pt;
        border-bottom: 0.5pt solid #ccc;
    }
    .print-section-desc {
        font-size: 10pt;
        color: #555;
        margin: 0 0 8pt;
    }

    /* Salto de página entre secciones grandes */
    .print-cuadrante-general,
    .print-rueda-section,
    .print-equilibrio-section,
    .print-trabajador-section {
        page-break-before: always;
    }
    /* La primera sección (resumen) no fuerza salto */
    .print-summary {
        page-break-before: avoid;
    }

    /* No partir tablas a mitad de fila */
    table tr {
        page-break-inside: avoid;
    }

    /* === Resumen: bloques con título === */
    .print-summary-block {
        margin-bottom: 10pt;
        page-break-inside: avoid;
    }
    .print-summary-block h3 {
        font-size: 11pt;
        margin-bottom: 4pt;
        color: #0f766e;
    }
    .print-summary-block p {
        margin: 2pt 0;
    }
    .print-list {
        margin: 3pt 0 0;
        padding-left: 16pt;
    }
    .print-list li {
        margin-bottom: 2pt;
    }

    /* Tablas mini (resumen) */
    .print-mini-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 4pt;
        font-size: 9.5pt;
    }
    .print-mini-table th,
    .print-mini-table td {
        border: 0.5pt solid #ccc;
        padding: 3pt 6pt;
        text-align: left;
    }
    .print-mini-table th {
        background: #f1f5f9;
        font-weight: 600;
    }

    /* === Rueda base === */
    .print-rueda-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 10pt;
        text-align: center;
    }
    .print-rueda-table th,
    .print-rueda-table td {
        border: 0.5pt solid #888;
        padding: 4pt 6pt;
        text-align: center;
    }
    .print-rueda-table th {
        background: #f1f5f9;
        font-weight: 600;
    }
    .print-rueda-week {
        background: #f1f5f9;
        font-weight: 600;
        text-align: left !important;
        padding-left: 8pt !important;
    }
    /* Columna "Horas" en la rueda base y en el cuadrante general (PDF) */
    .print-rueda-hours-head,
    .print-rueda-hours,
    .print-cell-hours {
        background: #f8fafc !important;
        font-family: var(--mono);
        font-weight: 600;
        text-align: center !important;
        border-left: 1.5pt solid #cbd5e1 !important;
    }
    .print-rueda-hours-head,
    th.print-cell-hours {
        background: #f1f5f9 !important;
        font-weight: 700;
    }

    /* === Cuadrante general (landscape, una semana por página) === */
    .print-cuadrante-general > .print-section-title,
    .print-cuadrante-general > .print-section-desc {
        /* La cabecera del cuadrante solo aparece en la primera página */
    }
    .print-cuadrante-week-block {
        page-break-before: always;
        margin-top: 0;
    }
    .print-cuadrante-week-block:first-of-type {
        /* La primera semana sale en la misma página que el título */
        page-break-before: avoid;
        margin-top: 8pt;
    }
    .print-cuadrante-week-title {
        font-size: 13pt;
        margin: 0 0 8pt;
        color: #0f766e;
        font-weight: 600;
    }
    .print-cuadrante-general-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11.5pt;
        text-align: center;
    }
    .print-cuadrante-general-table th,
    .print-cuadrante-general-table td {
        border: 0.5pt solid #888;
        padding: 6pt 4pt;
        text-align: center;
        line-height: 1.25;
    }
    .print-cuadrante-general-table .print-cell-name {
        text-align: left;
        padding-left: 8pt !important;
        font-weight: 500;
        background: #f8fafc;
        width: 22%;
        font-size: 11pt;
    }
    .print-cuadrante-general-table th {
        background: #e2e8f0;
        font-weight: 600;
        padding: 4pt 4pt;
    }
    .print-cuadrante-general-table th .print-day-name {
        font-size: 10pt;
        font-weight: 600;
    }
    .print-cuadrante-general-table th .print-day-date {
        font-size: 9pt;
        font-weight: 400;
        color: #555;
        margin-top: 1pt;
    }
    .print-cuadrante-general-table th.day-sab,
    .print-cuadrante-general-table td.day-sab,
    .print-cuadrante-general-table th.day-dom,
    .print-cuadrante-general-table td.day-dom {
        background: #f1f5f9;
    }
    /* Cuando se parte la tabla entre páginas, repetir thead automáticamente */
    .print-cuadrante-general-table thead {
        display: table-header-group;
    }
    .print-cuadrante-general-table tr {
        page-break-inside: avoid;
    }

    /* === Por trabajador === */
    .print-trabajador-section {
        page-break-inside: avoid;
        margin-bottom: 18pt;
    }
    .print-trabajador-name {
        font-size: 13pt;
        color: #0f766e;
        margin-bottom: 6pt;
    }
    .print-trabajador-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9.5pt;
    }
    .print-trabajador-table th,
    .print-trabajador-table td {
        border: 0.3pt solid #999;
        padding: 3pt 4pt;
        text-align: center;
    }
    .print-trabajador-table th {
        background: #e2e8f0;
        font-weight: 600;
    }
    .print-trabajador-week {
        background: #f8fafc;
        font-weight: 600;
        text-align: left !important;
        padding-left: 6pt !important;
        font-size: 8.5pt;
    }
    .print-trabajador-week small {
        font-weight: normal;
        color: #666;
    }
    .print-trabajador-table td.day-sab,
    .print-trabajador-table td.day-dom {
        background: #f1f5f9;
    }

    /* === Equilibrio === */
    .print-equilibrio-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9.5pt;
    }
    .print-equilibrio-table th,
    .print-equilibrio-table td {
        border: 0.5pt solid #888;
        padding: 3pt 6pt;
    }
    .print-equilibrio-table th {
        background: #e2e8f0;
        font-weight: 600;
        text-align: center;
    }
    .print-equilibrio-table .print-cell-name {
        text-align: left;
        font-weight: 500;
    }
    .print-equilibrio-table .print-num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    .print-equilibrio-table .diff-pos {
        color: #b45309;
    }
    .print-equilibrio-table .diff-neg {
        color: #1d4ed8;
    }

    /* === Colores de turno (suaves para impresión) === */
    .print-rueda-table .cell-M,
    .print-trabajador-table .cell-M,
    .print-cuadrante-general-table .cell-M {
        background: #ffedd5; color: #7c2d12;
    }
    .print-rueda-table .cell-T,
    .print-trabajador-table .cell-T,
    .print-cuadrante-general-table .cell-T {
        background: #dbeafe; color: #1e3a8a;
    }
    .print-rueda-table .cell-N,
    .print-trabajador-table .cell-N,
    .print-cuadrante-general-table .cell-N {
        background: #ede9fe; color: #4c1d95;
    }
    .print-rueda-table .cell-D,
    .print-trabajador-table .cell-D,
    .print-cuadrante-general-table .cell-D {
        background: #fed7aa; color: #7c2d12;
    }
    .print-rueda-table .cell-S,
    .print-trabajador-table .cell-S,
    .print-cuadrante-general-table .cell-S {
        background: #fef3c7; color: #78350f;
    }
    .print-rueda-table .cell-L,
    .print-trabajador-table .cell-L,
    .print-cuadrante-general-table .cell-L {
        background: #d1fae5; color: #064e3b;
    }

    /* Forzar a la impresora a respetar los colores de fondo */
    table, table * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* === Pie final del documento === */
    .print-final-footer {
        margin-top: 20pt;
        padding-top: 8pt;
        border-top: 0.5pt solid #ccc;
        font-size: 8pt;
        color: #666;
        text-align: center;
        font-style: italic;
    }
}