/* =====================================================
   MASTERDATA.CSS  —  CSS compartido para todos los
   módulos de mantenimiento (Master Data)
   
   Prefijo: md-
   Uso: agregar en wwwroot/css/ e importar en app.css
   ===================================================== */


/* ══════════════════════════════════════════════════════
   1. PAGE & LAYOUT
   ══════════════════════════════════════════════════════ */
.md-page {
    padding: 1.75rem 2rem;
    background: #f8fafc;
    min-height: 100vh;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.md-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}


/* ══════════════════════════════════════════════════════
   2. BREADCRUMB
   ══════════════════════════════════════════════════════ */
.md-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #64748b;
}

    .md-breadcrumb a {
        color: #2563eb;
        text-decoration: none;
        font-weight: 500;
    }

        .md-breadcrumb a:hover {
            text-decoration: underline;
        }

    .md-breadcrumb .sep {
        color: #cbd5e1;
    }


/* ══════════════════════════════════════════════════════
   3. BOTONES PRINCIPALES
   ══════════════════════════════════════════════════════ */

/* Botón primario — "Nuevo registro" en el topbar */
.md-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.2rem;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

    .md-btn-primary svg {
        width: 17px;
        height: 17px;
    }

    .md-btn-primary:hover {
        background: #1d4ed8;
        transform: translateY(-1px);
    }

    .md-btn-primary:disabled {
        background: #94a3b8;
        box-shadow: none;
        transform: none;
        cursor: not-allowed;
    }

/* Botón ghost — "Cancelar" en modales */
.md-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: white;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

    .md-btn-ghost:hover {
        border-color: #2563eb;
        color: #2563eb;
        background: #eff6ff;
    }

/* Botón guardar — "Guardar" en modal crear/editar */
.md-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.2rem;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

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

    .md-btn-save:hover {
        background: #1d4ed8;
        transform: translateY(-1px);
    }

    .md-btn-save:disabled {
        background: #93c5fd;
        box-shadow: none;
        transform: none;
        cursor: not-allowed;
    }

/* Botón advertencia — "Desactivar" */
.md-btn-warn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

    .md-btn-warn:hover {
        background: #d97706;
    }

    .md-btn-warn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Botón peligro — "Eliminar" */
.md-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

    .md-btn-danger svg {
        width: 14px;
        height: 14px;
    }

    .md-btn-danger:hover {
        background: #dc2626;
    }

    .md-btn-danger:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }


/* ══════════════════════════════════════════════════════
   4. ALERTA (éxito / error)
   ══════════════════════════════════════════════════════ */
.md-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    font-size: 0.84rem;
    border: 1px solid transparent;
    animation: fadeInDown 0.3s ease;
}

    .md-alert.saliendo {
        animation: fadeOutUp 0.35s ease forwards;
    }

    .md-alert svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }

    .md-alert.success {
        background: #f0fdf4;
        color: #15803d;
        border-color: #bbf7d0;
    }

    .md-alert.danger {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

.md-alert-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    padding: 0;
    display: flex;
    align-items: center;
}

    .md-alert-close svg {
        width: 14px;
        height: 14px;
    }

    .md-alert-close:hover {
        opacity: 1;
    }

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}


/* ══════════════════════════════════════════════════════
   5. CARD
   ══════════════════════════════════════════════════════ */
.md-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
    overflow: hidden;
}


/* ══════════════════════════════════════════════════════
   6. HEADER DE LA CARD
   ══════════════════════════════════════════════════════ */
.md-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    gap: 1rem;
    flex-wrap: wrap;
}

.md-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Ícono cuadrado en el header */
.md-hicon {
    width: 38px;
    height: 38px;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
}

    .md-hicon svg {
        width: 20px;
        height: 20px;
    }

.md-htitle {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 0.1rem;
}

.md-hsub {
    font-size: 0.74rem;
    color: #94a3b8;
}

/* Pills activos/inactivos en el header */
.md-hpills {
    display: flex;
    gap: 0.5rem;
}

.md-hpill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

    .md-hpill.active {
        background: #dcfce7;
        color: #16a34a;
        border: 1px solid #bbf7d0;
    }

    .md-hpill.inactive {
        background: #f1f5f9;
        color: #64748b;
        border: 1px solid #e2e8f0;
    }

    .md-hpill .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
    }

    .md-hpill.active .dot {
        background: #16a34a;
    }

    .md-hpill.inactive .dot {
        background: #94a3b8;
    }


/* ══════════════════════════════════════════════════════
   7. BARRA DE BÚSQUEDA
   ══════════════════════════════════════════════════════ */
.md-searchbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
    gap: 1rem;
    flex-wrap: wrap;
}

.md-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 420px;
}

.md-search-ico {
    position: absolute;
    left: 0.75rem;
    width: 16px;
    height: 16px;
    color: #94a3b8;
    pointer-events: none;
}

.md-search {
    width: 100%;
    padding: 0.55rem 2.2rem 0.55rem 2.25rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.875rem;
    background: #fff;
    color: #0f172a;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

    .md-search:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

.md-search-clear {
    position: absolute;
    right: 0.6rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 0.75rem;
    padding: 0.2rem;
    border-radius: 4px;
}

    .md-search-clear:hover {
        background: #f1f5f9;
        color: #475569;
    }

.md-result-lbl {
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
}


/* ══════════════════════════════════════════════════════
   8. TABLA
   ══════════════════════════════════════════════════════ */
.md-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    /* Altura máxima = viewport menos el espacio que ocupan
       topbar + header + searchbar + footer + márgenes (~300px).
       Ajusta este valor si tus pantallas tienen más o menos elementos. */
    max-height: calc(100vh - 300px);
}

.md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .md-table thead tr {
        background: #f8fafc;
    }

    .md-table thead th {
        padding: 0.75rem 1.1rem;
        font-size: 0.72rem;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        border-bottom: 1px solid #e2e8f0;
        white-space: nowrap;
        /* Encabezado fijo al hacer scroll interno (como GridView) */
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f8fafc;
    }

    .md-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s;
    }

        .md-table tbody tr:hover {
            background: #f0f9ff;
        }

        .md-table tbody tr.row-off {
            opacity: 0.55;
        }

    .md-table td {
        padding: 0.8rem 1.1rem;
        color: #334155;
        vertical-align: middle;
    }

.md-center {
    text-align: center !important;
}

.md-muted {
    color: #94a3b8 !important;
    font-size: 0.82rem;
}

/* ── Columnas predefinidas ──────────────────────────────
   Úsalas según las que necesite cada razor.
   No pasa nada si no usas alguna, el CSS no hace daño.
   ──────────────────────────────────────────────────── */
.md-col-num {
    width: 44px;
}
/* # correlativo */
.md-col-codigo {
    width: 110px;
}
/* código */
.md-col-nombre {
}
/* nombre — sin ancho fijo, ocupa el espacio */
.md-col-desc {
}
/* descripción — sin ancho fijo */
.md-col-ipress {
    width: 180px;
}
/* ipress */
.md-col-estado {
    width: 115px;
}
/* activo/inactivo */
.md-col-acc {
    width: 130px;
}
/* acciones */

/* ── Si quieres agregar una columna nueva en el futuro:
   .md-col-turno    { width: 120px; }
   .md-col-tipo     { width: 140px; }
   .md-col-fecha    { width: 150px; }
   Solo agrégala aquí y úsala en el razor. ── */


/* ══════════════════════════════════════════════════════
   9. ELEMENTOS DENTRO DE LA TABLA
   ══════════════════════════════════════════════════════ */

/* Badge de código (azul claro) */
.md-code {
    display: inline-block;
    padding: 0.2em 0.55em;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0369a1;
}

/* Avatar inicial + nombre */
.md-name-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.md-avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: #2563eb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Badge de estado activo/inactivo */
.md-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 600;
}

    .md-badge .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

    .md-badge.activo {
        background: #dcfce7;
        color: #15803d;
    }

        .md-badge.activo .dot {
            background: #16a34a;
        }

    .md-badge.inactivo {
        background: #f1f5f9;
        color: #64748b;
    }

        .md-badge.inactivo .dot {
            background: #94a3b8;
        }

/* Descripción en tabla (texto largo truncado) */
.md-desc {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #475569;
    font-size: 0.84rem;
}


/* ══════════════════════════════════════════════════════
   10. BOTONES DE ACCIÓN EN FILAS
   ══════════════════════════════════════════════════════ */
.md-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    justify-content: center;
}

.md-act-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

    .md-act-btn svg {
        width: 14px;
        height: 14px;
    }

    .md-act-btn.edit {
        background: #dbeafe;
        color: #2563eb;
    }

        .md-act-btn.edit:hover {
            background: #2563eb;
            color: white;
        }

    .md-act-btn.toggle {
        background: #fef9c3;
        color: #a16207;
    }

        .md-act-btn.toggle:hover {
            background: #f59e0b;
            color: white;
        }

    .md-act-btn.activate {
        background: #dcfce7;
        color: #15803d;
    }

        .md-act-btn.activate:hover {
            background: #10b981;
            color: white;
        }

    .md-act-btn.danger {
        background: #fee2e2;
        color: #dc2626;
    }

        .md-act-btn.danger:hover {
            background: #ef4444;
            color: white;
        }


/* ══════════════════════════════════════════════════════
   11. ESTADO VACÍO / CARGANDO
   ══════════════════════════════════════════════════════ */
.md-state-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: #94a3b8;
}

    .md-state-box svg {
        width: 38px;
        height: 38px;
        opacity: 0.25;
    }

    .md-state-box p {
        font-size: 0.9rem;
        margin: 0;
    }

.md-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #f1f5f9;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: mdSpin 0.7s linear infinite;
}

@keyframes mdSpin {
    to {
        transform: rotate(360deg);
    }
}


/* ══════════════════════════════════════════════════════
   12. FOOTER DE LA CARD + PAGINACIÓN
   ══════════════════════════════════════════════════════ */
.md-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.md-footer-info {
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
}

/* ── Paginador ────────────────────────────────────────── */
.md-pager {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.md-pager-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

    .md-pager-btn svg {
        width: 1rem;
        height: 1rem;
    }

    .md-pager-btn:hover:not(:disabled) {
        border-color: #2563eb;
        color: #2563eb;
        background: #eff6ff;
    }

    .md-pager-btn:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

.md-pager-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

    .md-pager-num:hover:not(.activa) {
        border-color: #2563eb;
        color: #2563eb;
        background: #eff6ff;
    }

    .md-pager-num.activa {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
        cursor: default;
        font-weight: 600;
    }

.md-pager-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
    color: #94a3b8;
    user-select: none;
}

/* Responsive paginador en móvil */
@media (max-width: 480px) {
    .md-footer {
        padding: 0.65rem 1rem;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
    }

    .md-footer-info {
        font-size: 0.74rem;
    }

    .md-pager-btn,
    .md-pager-num {
        width: 2.2rem;
        height: 2.2rem;
    }
}


/* ══════════════════════════════════════════════════════
   13. TOAST FLOTANTE
   ══════════════════════════════════════════════════════ */
.md-toast {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    font-size: 0.83rem;
    font-weight: 500;
    border: 1px solid transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    max-width: calc(100vw - 2rem);
    font-family: 'Segoe UI', system-ui, sans-serif;
    animation: mdToastEntra 0.25s ease forwards;
}

    .md-toast.saliendo {
        animation: mdToastSale 0.3s ease forwards;
    }

    .md-toast svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }

    .md-toast.success {
        background: #f0fdf4;
        color: #15803d;
        border-color: #bbf7d0;
    }

    .md-toast.danger {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

.md-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    padding: 0;
    margin-left: 0.25rem;
    display: flex;
    align-items: center;
}

    .md-toast-close svg {
        width: 13px;
        height: 13px;
    }

    .md-toast-close:hover {
        opacity: 1;
    }

@keyframes mdToastEntra {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes mdToastSale {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
    }
}


/* ══════════════════════════════════════════════════════
   14. MODALES
   ══════════════════════════════════════════════════════ */
.md-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 21, 53, 0.45);
    backdrop-filter: blur(3px);
    z-index: 1050;
    animation: mdFade 0.15s ease;
}

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 18px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    z-index: 1055;
    overflow: hidden;
    animation: mdSlide 0.2s ease;
    font-family: 'Segoe UI', system-ui, sans-serif;
    /* ← permite que el body haga scroll sin que el footer desaparezca */
    display: flex;
    flex-direction: column;
    max-height: 90dvh; /* dvh = viewport real en iOS (excluye barra del browser) */
}

.md-modal-sm {
    max-width: 380px;
}
/* para modales de confirmación */

@keyframes mdFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mdSlide {
    from {
        transform: translate(-50%,-48%);
        opacity: 0;
    }

    to {
        transform: translate(-50%,-50%);
        opacity: 1;
    }
}

/* Header del modal */
.md-modal-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.15rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

    /* Variantes de color según tipo de acción */
    .md-modal-head.head-warn {
        background: #fffbeb;
        border-bottom-color: #fde68a;
    }

    .md-modal-head.head-ok {
        background: #f0fdf4;
        border-bottom-color: #bbf7d0;
    }

    .md-modal-head.head-danger {
        background: #fef2f2;
        border-bottom-color: #fecaca;
    }

/* Ícono del modal */
.md-modal-icon {
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #2563eb;
    border: 1px solid #e2e8f0;
}

.md-modal-head.head-warn .md-modal-icon {
    background: #fef9c3;
    color: #a16207;
    border-color: #fde68a;
}

.md-modal-head.head-ok .md-modal-icon {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.md-modal-head.head-danger .md-modal-icon {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

.md-modal-icon svg {
    width: 20px;
    height: 20px;
}

.md-modal-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.1rem;
    color: #0f172a;
}

.md-modal-sub {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
}

.md-modal-head.head-warn .md-modal-title {
    color: #92400e;
}

.md-modal-head.head-warn .md-modal-sub {
    color: #b45309;
}

.md-modal-head.head-ok .md-modal-title {
    color: #15803d;
}

.md-modal-head.head-ok .md-modal-sub {
    color: #16a34a;
}

.md-modal-head.head-danger .md-modal-title {
    color: #b91c1c;
}

.md-modal-head.head-danger .md-modal-sub {
    color: #dc2626;
}

/* Botón cerrar (X) */
.md-modal-x {
    margin-left: auto;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .md-modal-x svg {
        width: 15px;
        height: 15px;
    }

    .md-modal-x:hover {
        background: #e2e8f0;
        color: #334155;
    }

.md-modal-body {
    padding: 1.5rem;
    overflow-y: auto; /* ← el contenido scrollea aquí, no el modal entero */
    flex: 1 1 auto; /* ← ocupa el espacio disponible entre head y footer */
}

.md-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.5rem; /* ← padding completo, ya no solo top */
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0; /* ← no se comprime aunque el body crezca */
}


/* ══════════════════════════════════════════════════════
   15. FORMULARIO (dentro del modal)
   NOTA: usa ::deep en el .razor.css del componente para
   que los estilos lleguen a <InputText>, <InputSelect>,
   <ValidationMessage> que son componentes de Blazor.
   ══════════════════════════════════════════════════════ */
.md-form-row {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
    flex-wrap: wrap;
}

    .md-form-row.row-check {
        margin-bottom: 0;
    }

.md-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

    /* Anchos predefinidos de campos — úsalos con flex-basis */
    .md-field.field-xs {
        flex: 0 0 100px;
    }
    /* campos muy cortos */
    .md-field.field-sm {
        flex: 0 0 140px;
    }
    /* código */
    .md-field.field-md {
        flex: 0 0 200px;
    }
    /* campos medianos */
    .md-field.field-full {
        flex: 1;
    }
/* ocupa el resto del espacio */

.md-lbl {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

    .md-lbl .req {
        color: #dc2626;
    }

/* ── Estos estilos requieren ::deep en el .razor.css del componente ── */
.md-input,
.md-select {
    padding: 0.6rem 0.85rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #0f172a;
    background: #fff;
    outline: none;
    transition: all 0.2s;
    font-family: 'Segoe UI', system-ui, sans-serif;
    width: 100%;
}

    .md-input:focus,
    .md-select:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

.md-mono {
    font-family: 'Cascadia Code', 'Consolas', monospace !important;
    font-weight: 700;
}

.md-err {
    font-size: 0.78rem;
    color: #dc2626;
    margin-top: 0.2rem;
}

/* Checkbox Activo */
.md-check-lbl {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    color: #2563eb;
    cursor: pointer;
    font-weight: 500;
}

.md-chk {
    width: 15px;
    height: 15px;
    accent-color: #2563eb;
    cursor: pointer;
}


/* ══════════════════════════════════════════════════════
   16. TEXTOS DE CONFIRMACIÓN (modales eliminar/estado)
   ══════════════════════════════════════════════════════ */
.md-confirm-p {
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.md-hl {
    color: #2563eb;
}

.md-hl-danger {
    color: #dc2626;
}

.md-warn-box {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #dc2626;
    margin-bottom: 0.25rem;
}

    .md-warn-box svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }


/* ══════════════════════════════════════════════════════
   17. SPINNER EN BOTÓN
   ══════════════════════════════════════════════════════ */
.md-btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: mdSpin 0.7s linear infinite;
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════
   18. RESPONSIVE
   ══════════════════════════════════════════════════════ 
@media (max-width: 768px) {
    .md-page {
        padding: 1rem;
    }

    .md-header {
        padding: 0.85rem 1rem;
    }

    .md-hpills {
        display: none;
    }

    .md-searchbar {
        padding: 0.75rem 1rem;
    }

    .md-col-ipress,
    .md-col-desc {
        display: none;
    }
    oculta columnas secundarias en móvil
}

@media (max-width: 480px) {
    .md-field.field-sm,
    .md-field.field-md {
        flex: 1 1 100%;
    }
    campos en columna en pantallas pequeñas 
}*/

/* ══════════════════════════════════════════════════════
   19. RESPONSIVE COMPLETO — TABLET Y MÓVIL
   ══════════════════════════════════════════════════════ */

/* ── TABLET (≤768px) ── */
@media (max-width: 768px) {

    .md-page {
        padding: 1rem;
    }

    .md-header {
        padding: 0.85rem 1rem;
    }

    .md-hpills {
        display: none;
    }

    .md-searchbar {
        padding: 0.75rem 1rem;
        flex-direction: column;
        align-items: stretch;
    }

    .md-search-wrap {
        max-width: 100%;
    }

    .md-result-lbl {
        text-align: right;
    }

    /* Ocultar columnas secundarias */
    .md-col-ipress,
    .md-col-desc {
        display: none;
    }

    /* Botones de acción más grandes para dedos */
    .md-act-btn {
        width: 36px;
        height: 36px;
    }

    /* Modal más ancho en tablet */
    .md-modal {
        max-width: 95%;
    }
}

/* ── MÓVIL (≤480px) ── */
@media (max-width: 480px) {

    .md-page {
        padding: 0.75rem;
    }

    /* Topbar apilado en móvil */
    .md-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .md-btn-primary {
        width: 100%;
        justify-content: center;
        padding: 0.7rem;
    }

    /* Header sin ícono cuadrado en móvil muy pequeño */
    .md-hicon {
        display: none;
    }

    .md-htitle {
        font-size: 0.95rem;
    }

    /* Tabla — scroll horizontal suave */
    .md-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 0 18px 18px;
    }

    /* Ocultar columna # en móvil */
    .md-col-num {
        display: none;
    }

    /* Celdas más compactas */
    .md-table thead th {
        padding: 0.6rem 0.75rem;
        font-size: 0.68rem;
    }

    .md-table td {
        padding: 0.65rem 0.75rem;
    }

    /* Avatar más pequeño */
    .md-avatar {
        width: 26px;
        height: 26px;
        font-size: 0.65rem;
        border-radius: 6px;
    }

    /* Botones de acción: área táctil mínima 44px */
    .md-act-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

        .md-act-btn svg {
            width: 16px;
            height: 16px;
        }

    /* Campos del formulario siempre en columna */
    .md-field.field-xs,
    .md-field.field-sm,
    .md-field.field-md,
    .md-field.field-full {
        flex: 1 1 100%;
    }

    /* Modal ocupa casi toda la pantalla */
    .md-modal,
    .md-modal-sm {
        width: 96%;
        max-width: 96%;
        /* Posicionado un poco más arriba para que el teclado
           virtual no tape el formulario */
        top: 5%;
        transform: translate(-50%, 0);
        max-height: 90dvh; /* dvh = viewport real en iOS */
        overflow: hidden; /* el scroll vive en md-modal-body */
        border-radius: 14px;
    }

    .md-modal-body {
        padding: 1rem;
        -webkit-overflow-scrolling: touch; /* scroll con inercia en iOS */
        overscroll-behavior: contain; /* evita que el backdrop se mueva */
    }

    .md-modal-head {
        padding: 0.9rem 1rem;
    }

    /* Botones del footer del modal: tamaño táctil */
    .md-btn-ghost,
    .md-btn-save,
    .md-btn-warn,
    .md-btn-danger {
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        flex: 1;
        justify-content: center;
    }

    /* Footer con botones uno al lado del otro */
    .md-modal-footer {
        gap: 0.5rem;
    }

    /* Barra de búsqueda */
    .md-search {
        font-size: 0.9rem;
        padding: 0.65rem 2.2rem 0.65rem 2.25rem;
    }
}

/* ══════════════════════════════════════════════════════
   20. PREVIEW DE CÓDIGO (modal Inventario)
   ══════════════════════════════════════════════════════ */
.md-preview-box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 10px;
    margin-bottom: 0.1rem;
}

.md-preview-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1d4ed8;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.md-preview-codigo {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1d4ed8;
    letter-spacing: 0.08em;
}

.md-preview-placeholder {
    font-size: 0.8rem;
    color: #93c5fd;
    font-style: italic;
}


/* ══════════════════════════════════════════════════════
   21. DENOMINACIONES (modal Inventario)
   ══════════════════════════════════════════════════════ */
.md-denoms {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.md-denom-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.md-denom-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 0.3rem 0.5rem;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    flex-shrink: 0;
}


/* =====================================================
   FIN DE MASTERDATA.CSS
   ===================================================== */