/* --- Backdrop --- */
.md3-modal__backdrop {
    position: fixed; inset: 0;
    background: rgba(13, 18, 28, .4);
    backdrop-filter: blur(2px);
    z-index: 999;
}

/* --- Modal surface --- */
.md3-modal {
    position: fixed; inset: 0;
    margin: auto;
    max-width: min(1280px, 98vw);
    width: min(1280px, 98vw);
    max-height: 92vh;
    display: flex; flex-direction: column;
    background: #ffffff;
    color: #0b1320;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
    overflow: hidden;
    z-index: 1000;
}

.md3-elevated {
    box-shadow:
            0 1px 2px rgba(0,0,0,.08),
            0 8px 24px rgba(0,0,0,.14);
}

/* --- Header --- */
.md3-modal__header {
    padding: 20px 24px 8px 24px;
    border-bottom: 1px solid #e9edf3;
    background: linear-gradient(180deg, rgba(7,114,253,0.06), rgba(7,114,253,0));
}

.md3-title-large { margin: 0 0 6px 0; font-size: 1.25rem; font-weight: 700; letter-spacing: .2px; }
.md3-body-medium { font-size: .93rem; color: #425466; }
.md3-modal__subhead { margin: 0 0 6px 0; }

/* --- Table container (sticky head) --- */
.md3-table__container {
    padding: 10px 16px 14px 16px;
    overflow: auto;
    max-height: 70vh;
}

/* --- Table layout: fija anchos para evitar superposición --- */
.md3-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.md3-table__head th {
    position: sticky; top: 0;
    background: #f7f9fc;
    z-index: 1;
    text-align: left;
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid #e6ebf2;
}

/* Anchos por columna (1..8) */
.md3-table th:nth-child(1), .md3-table td:nth-child(1) { width: 14%; }
.md3-table th:nth-child(2), .md3-table td:nth-child(2) { width: 18%; }
.md3-table th:nth-child(3), .md3-table td:nth-child(3) { width: 14%; }
.md3-table th:nth-child(4), .md3-table td:nth-child(4) { width: 8%;  }
.md3-table th:nth-child(5), .md3-table td:nth-child(5) { width: 12%; }
.md3-table th:nth-child(6), .md3-table td:nth-child(6) { width: 10%; }
.md3-table th:nth-child(7), .md3-table td:nth-child(7) { width: 12%; } /* Marq a retirar */
.md3-table th:nth-child(8), .md3-table td:nth-child(8) { width: 22%; } /* Resumen */

/* Celdas: no dejar que el contenido invada vecinos */
.md3-table td {
    padding: 12px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
    font-size: .95rem;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: anywhere;
    position: relative;
}

.td-wrap { white-space: normal; }

/* Filas con error */
.md3-row--error td { background: #fff6f2; }

/* --- Segmented chips compactas (pack) --- */
.md3-segmented {
    display: inline-flex; gap: 6px;
    padding: 4px; border-radius: 999px;
    background: #f2f5fb; border: 1px solid #e6ebf2;
}
.md3-segmented--sm { padding: 2px 4px; gap: 4px; }
.md3-chip {
    border: none; background: transparent; cursor: pointer;
    padding: 6px 10px; border-radius: 999px;
    font-size: .9rem; color: #334155;
}
.md3-chip--sm { padding: 4px 8px; font-size: .85rem; }
.md3-chip--on {
    background: #0b5cff; color: white;
    box-shadow: 0 2px 8px rgba(11,92,255,.28);
}

/* --- Textfield (MD3-ish) --- */
.md3-textfield { position: relative; min-width: 120px; }
.md3-textfield--narrow { min-width: 96px; max-width: 110px; } /* ancho controlado */
.md3-textfield__input {
    width: 100%;
    padding: 18px 12px 10px 12px;
    border-radius: 12px;
    border: 1px solid #d7ddea;
    background: #fff;
    outline: none;
    font-size: .95rem;
    box-sizing: border-box;
}
.md3-textfield__input:focus {
    border-color: #0b5cff;
    box-shadow: 0 0 0 3px rgba(11,92,255,.15);
}
.md3-textfield__label { position: absolute; left: 10px; top: 6px; font-size: .75rem; color: #5b6b82; }
.md3-textfield__helper { margin-top: 6px; font-size: .8rem; color: #6b7280; }
.md3-textfield--error .md3-textfield__input { border-color: #d92d20; background: #fff2f1; }
.md3-textfield__error { margin-top: 6px; font-size: .8rem; color: #b42318; font-weight: 600; }

/* --- Banner --- */
.md3-banner { margin: 8px 16px 0 16px; padding: 10px 12px; border-radius: 12px; font-size: .9rem; }
.md3-banner--warning { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }

/* --- Footer (sticky) --- */
.md3-modal__footer {
    position: sticky; bottom: 0;
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.4), #fff 30%);
    border-top: 1px solid #e9edf3;
}

/* --- Buttons --- */
.md3-button { border-radius: 999px; padding: 10px 16px; font-weight: 600; letter-spacing: .3px; cursor: pointer; border: none; }
.md3-button--text { background: transparent; color: #0b5cff; }
.md3-button--text:hover { background: rgba(11,92,255,.08); }
.md3-button--filled { background: #0b5cff; color: white; box-shadow: 0 4px 14px rgba(11,92,255,.24); }
.md3-button--filled:disabled { background: #a2b6ff; color: #f1f5ff; cursor: not-allowed; box-shadow: none; }

/* Botón “outline” para imprimir */
.md3-button--outline {
    background: #fff;
    color: #0b1320;
    border: 1px solid #e2e8f0;
}
.md3-button--outline:hover { background: #f8fafc; }

/* --- Resumen restante (inicial/retiras/queda) --- */
.remain-col { display: grid; gap: 6px; }
.remain-row { display: flex; align-items: center; gap: 8px; }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    border: 1px solid transparent;
}
.chip--muted { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.chip--warn  { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.chip--ok    { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }

.remain-metrics { font-variant-numeric: tabular-nums; }

/* --- Responsive tweaks --- */
@media (max-width: 980px) {
    .md3-table th:nth-child(2), .md3-table td:nth-child(2) { display:none; } /* oculta 'Cliente' */
    .md3-table th:nth-child(8), .md3-table td:nth-child(8) { width: 26%; }   /* da más espacio al resumen */
}

@media (max-width: 720px) {
    .md3-table { table-layout: auto; }
    .md3-table__container { max-height: 64vh; }
}