/* ============================================================
   MODERN PATCH CSS v5
   Para SaaS con MaterializeCSS 0.x + Bootstrap 3 + Select2 + Toastr
   Cargar DESPUES de css/style.css

   Cambios vs v4:
   - Select2 multi vacío con placeholder y altura mínima visible
   - Date/time inputs con icono "prefix" fuera de .input-field
   - Banner "OT tramitada" (verde/rojo dentro de card) con contraste real
   - Iconos de acción bajo cards normalizados (footer-acciones)
   - Botones con .left/.right (lupa Filtros) bien separados
   - Botones de bloque (full-width) con wrap defensivo
   - Card header coloreado con title + menú (⋮) en flex space-between
   - Refresco de border-radius en cards multi-sección
   ============================================================ */

/* ---------- 0. Fuente Inter ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- 1. Variables ---------- */
:root {
    --mp-primary:        #2563eb;
    --mp-primary-dark:   #1d4ed8;
    --mp-primary-light:  #dbeafe;
    --mp-primary-50:     #eff6ff;
    --mp-accent:         #0ea5e9;

    --mp-text:           #111827;
    --mp-text-soft:      #4b5563;
    --mp-text-muted:     #6b7280;
    --mp-text-on-color:  #ffffff;

    --mp-bg:             #f7f8fb;
    --mp-bg-deep:        #eef0f5;
    --mp-surface:        #ffffff;
    --mp-border:         #e5e7eb;
    --mp-border-soft:    #eef0f3;

    --mp-success:        #10b981;
    --mp-success-dark:   #047857;
    --mp-success-light:  #d1fae5;
    --mp-warning:        #f59e0b;
    --mp-warning-light:  #fef3c7;
    --mp-danger:         #ef4444;
    --mp-danger-dark:    #b91c1c;
    --mp-danger-light:   #fee2e2;
    --mp-info:           #3b82f6;
    --mp-purple:         #a855f7;
    --mp-purple-dark:    #7e22ce;

    --mp-radius-sm:      6px;
    --mp-radius:         10px;
    --mp-radius-lg:      14px;
    --mp-radius-xl:      18px;

    --mp-shadow-xs:      0 1px 2px rgba(15, 23, 42, .06);
    --mp-shadow-sm:      0 2px 6px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --mp-shadow:         0 4px 14px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .04);
    --mp-shadow-lg:      0 10px 30px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);
    --mp-shadow-xl:      0 20px 50px rgba(15, 23, 42, .15), 0 4px 12px rgba(15, 23, 42, .06);

    --mp-ring:           0 0 0 3px rgba(37, 99, 235, .18);
    --mp-ring-danger:    0 0 0 3px rgba(239, 68, 68, .18);

    --mp-transition:     all .18s cubic-bezier(.4,0,.2,1);

    --mp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------- 2. Base ---------- */
html, body {
    font-family: var(--mp-font) !important;
    color: var(--mp-text) !important;
    background: var(--mp-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body {
    font-size: 14.5px;
    line-height: 1.55;
    font-feature-settings: "cv02","cv03","cv04","cv11","ss01";
}
main { background: var(--mp-bg) !important; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mp-font) !important;
    color: var(--mp-text) !important;
    font-weight: 600 !important;
    letter-spacing: -.018em;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.02rem; }

a { color: var(--mp-primary); transition: var(--mp-transition); }
a:hover { color: var(--mp-primary-dark); }

::selection { background: var(--mp-primary-light); color: var(--mp-primary-dark); }

/* ---------- 3. Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 4. Navbar / header app ---------- */
nav, .navbar-fixed nav {
    background: var(--mp-surface) !important;
    color: var(--mp-text) !important;
    box-shadow: var(--mp-shadow-sm) !important;
    border-bottom: 1px solid var(--mp-border-soft);
    height: 64px;
    line-height: 64px;
}
nav .nav-wrapper { padding: 0 22px; }
nav a, nav .brand-logo, nav ul a {
    color: var(--mp-text) !important;
    font-weight: 500;
    transition: var(--mp-transition);
}
nav ul a {
    padding: 0 14px !important;
    border-radius: var(--mp-radius-sm);
    margin: 0 2px;
    height: 40px;
    line-height: 40px;
    display: inline-flex !important;
    align-items: center;
}
nav ul a:hover {
    background: var(--mp-bg) !important;
    color: var(--mp-primary) !important;
}
nav .button-collapse i, nav a.sidenav-trigger i { color: var(--mp-text) !important; }

nav a[href*="logout"], nav a[href*="cerrar"], nav .red-btn-power, nav i.red-text {
    color: var(--mp-danger) !important;
}
nav a[href*="logout"]:hover { background: var(--mp-danger-light) !important; }

/* Banderas idiomas */
img[src*="flag"], img[src*="bandera"], img[src*="lang"] {
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
    transition: var(--mp-transition);
    cursor: pointer;
    width: 20px;
    height: auto;
    vertical-align: middle;
}
img[src*="flag"]:hover, img[src*="bandera"]:hover, img[src*="lang"]:hover {
    transform: scale(1.3);
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* ---------- 5. Side-nav ---------- */
.side-nav, .sidenav {
    background: var(--mp-surface) !important;
    box-shadow: var(--mp-shadow) !important;
    border-right: 1px solid var(--mp-border-soft);
    width: 250px;
}
.side-nav .userView, .sidenav .userView {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #06b6d4 100%) !important;
    padding: 28px 22px 18px !important;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}
.side-nav .userView::after, .sidenav .userView::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.1) 0, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.08) 0, transparent 30%);
    pointer-events: none;
}
.side-nav .userView .background, .sidenav .userView .background { display: none !important; }
.side-nav .userView .circle, .sidenav .userView .circle {
    width: 60px !important; height: 60px !important;
    border: 3px solid rgba(255,255,255,.4) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    position: relative; z-index: 1;
}
.side-nav .userView .name, .sidenav .userView .name,
.side-nav .userView .email, .sidenav .userView .email {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    position: relative; z-index: 1;
    font-weight: 500;
}

.side-nav li, .sidenav li { line-height: normal; }
.side-nav li > a, .sidenav li > a {
    color: var(--mp-text-soft) !important;
    font-weight: 500;
    min-height: 44px !important;
    height: auto !important;
    line-height: 1.3 !important;
    padding: 8px 22px !important;
    border-radius: 0 999px 999px 0;
    margin: 2px 12px 2px 0;
    transition: var(--mp-transition);
    font-size: .92rem;
    display: flex !important;
    align-items: center;
}
.side-nav li > a:hover, .sidenav li > a:hover {
    background: var(--mp-primary-50) !important;
    color: var(--mp-primary-dark) !important;
}
.side-nav li > a.active, .sidenav li > a.active,
.side-nav li.active > a, .sidenav li.active > a {
    background: var(--mp-primary-light) !important;
    color: var(--mp-primary-dark) !important;
    font-weight: 600;
}
.side-nav li > a > i, .sidenav li > a > i {
    color: inherit !important;
    margin-right: 14px;
    font-size: 22px;
}
.side-nav .divider, .sidenav .divider { background: var(--mp-border-soft); margin: 8px 0; }
.side-nav .subheader, .sidenav .subheader {
    color: var(--mp-text-muted) !important;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0 22px !important;
    margin-top: 12px;
    line-height: 28px !important;
    height: 28px !important;
}

.side-nav .new.badge, .sidenav .new.badge,
.side-nav .badge, .sidenav .badge {
    background: var(--mp-primary) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    padding: 2px 9px !important;
    line-height: 1.4 !important;
    margin-left: auto;
    height: auto !important;
    min-width: auto !important;
}

/* ---------- 6. Cards ---------- */
.card, .card-panel {
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-border-soft);
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow-xs) !important;
    transition: box-shadow .18s, transform .18s;
    overflow: hidden;
    animation: mpFadeIn .35s ease-out;
}
.card:hover { box-shadow: var(--mp-shadow-sm) !important; }
.card .card-content { padding: 20px; color: var(--mp-text); }
.card .card-content .card-title {
    font-weight: 600;
    font-size: 1.15rem;
    margin-bottom: 12px;
    letter-spacing: -.01em;
    line-height: 1.3;
    /* FIX v5: titulo + menu (⋮) en una fila sin solaparse */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.card .card-content .card-title > i.material-icons,
.card .card-content .card-title > .more-vert {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
    opacity: .9;
    transition: var(--mp-transition);
}
.card .card-content .card-title > i.material-icons:hover {
    opacity: 1;
    transform: scale(1.1);
}
.card .card-action {
    border-top: 1px solid var(--mp-border-soft);
    background: #fafbfc;
    padding: 12px 20px;
}
.card .card-action a {
    color: var(--mp-primary) !important;
    font-weight: 600;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

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

/* ============================================================
   FIX v5: Cards con HEADER coloreado (rojo/morado/verde/etc.)
   El three-dot, los iconos y los strong deben ser BLANCOS,
   no quedarse en tono apagado heredado de Materialize.
   ============================================================ */
.card .card-content.red,
.card-panel.red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
    border-radius: var(--mp-radius) var(--mp-radius) 0 0 !important;
}
.card .card-content.purple,
.card-panel.purple {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
    color: #fff !important;
    border-radius: var(--mp-radius) var(--mp-radius) 0 0 !important;
}
.card .card-content.green, .card-panel.green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
}
.card .card-content.orange, .card-panel.orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #fff !important;
}
.card .card-content.blue, .card-panel.blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #fff !important;
}

/* Texto BLANCO forzado para hijos directos dentro de header coloreado */
.card .card-content.red,
.card .card-content.purple,
.card .card-content.green,
.card .card-content.orange,
.card .card-content.blue,
.card-panel.red:not(.lighten-4):not(.lighten-5),
.card-panel.purple:not(.lighten-4):not(.lighten-5),
.card-panel.green:not(.lighten-4):not(.lighten-5),
.card-panel.orange:not(.lighten-4):not(.lighten-5),
.card-panel.blue:not(.lighten-4):not(.lighten-5) {
    text-shadow: 0 1px 1px rgba(0,0,0,.10);
}
.card .card-content.red *,
.card .card-content.purple *,
.card .card-content.green *,
.card .card-content.orange *,
.card .card-content.blue *,
.card-panel.red:not(.lighten-4):not(.lighten-5) *,
.card-panel.purple:not(.lighten-4):not(.lighten-5) *,
.card-panel.green:not(.lighten-4):not(.lighten-5) *,
.card-panel.orange:not(.lighten-4):not(.lighten-5) *,
.card-panel.blue:not(.lighten-4):not(.lighten-5) * {
    color: #fff !important;
    border-color: rgba(255,255,255,.25) !important;
}
.card .card-content.red strong,
.card .card-content.purple strong,
.card .card-content.green strong,
.card .card-content.orange strong,
.card .card-content.blue strong {
    font-weight: 700;
    color: #fff !important;
}
/* Iconos (⋮ y otros) dentro del header coloreado deben SER blancos */
.card .card-content.red i.material-icons,
.card .card-content.red .more-vert,
.card .card-content.purple i.material-icons,
.card .card-content.purple .more-vert,
.card .card-content.green i.material-icons,
.card .card-content.green .more-vert,
.card .card-content.orange i.material-icons,
.card .card-content.orange .more-vert,
.card .card-content.blue i.material-icons,
.card .card-content.blue .more-vert {
    color: #fff !important;
    background: transparent !important;
}
.card .card-content.red i.material-icons:hover,
.card .card-content.purple i.material-icons:hover,
.card .card-content.green i.material-icons:hover,
.card .card-content.orange i.material-icons:hover,
.card .card-content.blue i.material-icons:hover {
    background: rgba(255,255,255,.18) !important;
    border-radius: 50%;
}

/* ============================================================
   FIX v5 CRITICO: banner "OT tramitada" dentro de card.
   El header verde tenia text-shadow y opacity que dejaban el
   titulo casi invisible. Forzamos blanco solido + peso 700.
   ============================================================ */
.card .card-content.green .card-title,
.card .card-content.red .card-title,
.card .card-content.purple .card-title,
.card .card-content.orange .card-title,
.card .card-content.blue .card-title,
.card .card-content.green h1, .card .card-content.green h2,
.card .card-content.green h3, .card .card-content.green h4,
.card .card-content.green h5, .card .card-content.green h6,
.card .card-content.red h1,   .card .card-content.red h2,
.card .card-content.red h3,   .card .card-content.red h4,
.card .card-content.red h5,   .card .card-content.red h6,
.card .card-content.purple h1, .card .card-content.purple h2,
.card .card-content.purple h3, .card .card-content.purple h4,
.card .card-content.purple h5, .card .card-content.purple h6 {
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.20) !important;
    font-weight: 700 !important;
}
/* Si hay tarjetas multi-seccion (header color + banner + cuerpo blanco),
   cada bloque debe redondear segun su posicion. Por defecto los headers
   coloreados solo redondean arriba; los banners intermedios sin radius. */
.card .card-content.green:not(:first-child) {
    border-radius: 0 !important;
}
.card .card-content + .card-content {
    border-top: 1px solid rgba(255,255,255,.18);
}

/* Card-panel callouts amber/yellow */
.card-panel.amber, .card-panel.amber.lighten-4, .card-panel.amber.lighten-5,
.card-panel.yellow, .card-panel.yellow.lighten-4, .card-panel.yellow.lighten-5 {
    background: #fffbeb !important;
    color: #78350f !important;
    border: 1px solid #fde68a !important;
    border-left: 4px solid var(--mp-warning) !important;
    border-radius: var(--mp-radius) !important;
    padding: 14px 20px !important;
    font-weight: 500;
    box-shadow: none !important;
}
.card-panel.amber h1, .card-panel.amber h2, .card-panel.amber h3,
.card-panel.amber h4, .card-panel.amber h5, .card-panel.amber h6,
.card-panel.yellow h1, .card-panel.yellow h2, .card-panel.yellow h3,
.card-panel.yellow h4, .card-panel.yellow h5, .card-panel.yellow h6 {
    color: #78350f !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.card-panel.red.lighten-4, .card-panel.red.lighten-5 {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
    border-left: 4px solid var(--mp-danger) !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: none !important;
}
.card-panel.green.lighten-4, .card-panel.green.lighten-5 {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
    border-left: 4px solid var(--mp-success) !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: none !important;
}
.card-panel.blue.lighten-4, .card-panel.blue.lighten-5 {
    background: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
    border-left: 4px solid var(--mp-info) !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: none !important;
}

.card .red.lighten-4, .red.lighten-4 {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-radius: var(--mp-radius-sm);
    padding: 12px 14px;
    font-size: .9rem;
}
.card .green.lighten-4, .green.lighten-4 {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-radius: var(--mp-radius-sm);
    padding: 12px 14px;
    font-size: .9rem;
}

/* ============================================================
   FIX v5: fila de iconos de accion SUELTOS bajo "Resolver"
   (pencil, refresh, briefcase, trash, etc.) sin contenedor.
   Cuando aparecen como hermanos directos del boton, agruparlos
   visualmente y darles padding/color uniforme.
   ============================================================ */
.card .btn.btn-block + i.material-icons,
.card .btn-large.btn-block + i.material-icons,
.card > .btn + i.material-icons,
.card > i.material-icons,
.card > a > i.material-icons.standalone {
    color: var(--mp-text-muted);
    padding: 8px;
    border-radius: 50%;
    transition: var(--mp-transition);
    cursor: pointer;
    font-size: 20px;
}

/* Si el HTML usa <div class="card-actions"> o similar como wrapper */
.card .card-actions,
.card .card-icons-row,
.card > .actions-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
    padding: 10px 16px 14px;
    background: #fafbfc;
    border-top: 1px solid var(--mp-border-soft);
}
.card .card-actions a,
.card .card-actions > i,
.card .card-icons-row a,
.card .card-icons-row > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--mp-text-muted) !important;
    background: transparent;
    transition: var(--mp-transition);
    text-decoration: none;
}
.card .card-actions a:hover,
.card .card-actions > i:hover,
.card .card-icons-row a:hover,
.card .card-icons-row > i:hover {
    background: var(--mp-primary-light);
    color: var(--mp-primary-dark) !important;
}
.card .card-actions a.delete:hover,
.card .card-actions a.red-text:hover,
.card .card-actions i.delete:hover,
.card .card-actions i.red-text:hover {
    background: var(--mp-danger-light);
    color: var(--mp-danger) !important;
}

/* ---------- 7. Botones ---------- */
.btn, .btn-large, .btn-small, .btn-flat {
    text-transform: none !important;
    letter-spacing: .005em !important;
    font-weight: 600 !important;
    border-radius: var(--mp-radius-sm) !important;
    box-shadow: var(--mp-shadow-xs) !important;
    transition: background-color .18s, box-shadow .18s, color .18s !important;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    font-family: var(--mp-font) !important;
    /* FIX v5: si el texto no cabe en una linea, que envuelva en lugar de cortarse */
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
}
.btn-large { min-height: 44px; line-height: 1.2; padding: 8px 22px; font-size: .98rem; height: auto; }
.btn-small { min-height: 32px; line-height: 1.2; padding: 4px 14px; font-size: .85rem; height: auto; }

.btn, .btn-large {
    background: var(--mp-primary) !important;
    color: #fff !important;
}
.btn:hover, .btn-large:hover {
    background: var(--mp-primary-dark) !important;
    box-shadow: var(--mp-shadow-sm) !important;
}
.btn:focus-visible, .btn-large:focus-visible { box-shadow: var(--mp-ring) !important; }

.btn-flat {
    background: transparent !important;
    color: var(--mp-text) !important;
    box-shadow: none !important;
}
.btn-flat:hover { background: var(--mp-bg) !important; }

.btn.red, .btn-large.red          { background: var(--mp-danger) !important; }
.btn.red:hover, .btn-large.red:hover { background: #dc2626 !important; }
.btn.green, .btn-large.green       { background: var(--mp-success) !important; }
.btn.green:hover, .btn-large.green:hover { background: #059669 !important; }
.btn.orange, .btn-large.orange     { background: var(--mp-warning) !important; }
.btn.orange:hover, .btn-large.orange:hover { background: #d97706 !important; }
.btn.grey, .btn-large.grey         { background: #6b7280 !important; }
.btn.blue, .btn-large.blue         { background: var(--mp-info) !important; }
.btn.purple, .btn-large.purple     { background: var(--mp-purple) !important; }

/* FIX v5: iconos .left y .right de Materialize con separacion adecuada */
.btn i.material-icons.left,
.btn-large i.material-icons.left,
.btn-small i.material-icons.left,
.btn-flat i.material-icons.left {
    margin-right: 8px;
    margin-left: 0;
    font-size: 18px;
}
.btn i.material-icons.right,
.btn-large i.material-icons.right,
.btn-small i.material-icons.right,
.btn-flat i.material-icons.right {
    margin-left: 8px;
    margin-right: 0;
    font-size: 18px;
}

.card .btn, .card-content > .btn {
    min-height: 40px;
    line-height: 1.2;
    font-size: .92rem;
    height: auto;
    padding: 8px 16px;
}

.btn-floating {
    box-shadow: var(--mp-shadow) !important;
    background: var(--mp-primary) !important;
    transition: var(--mp-transition);
}
.btn-floating:hover {
    box-shadow: var(--mp-shadow-lg) !important;
    transform: scale(1.05);
}
.btn-floating.btn-large { width: 56px; height: 56px; }

.card-action i.material-icons,
.card-action a > i.material-icons,
.card .actions i.material-icons {
    color: var(--mp-primary);
    transition: var(--mp-transition);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
}
.card-action i.material-icons:hover,
.card .actions i.material-icons:hover {
    background: var(--mp-primary-light);
    color: var(--mp-primary-dark);
}

.btn:disabled, .btn-large:disabled, .btn[disabled], .btn-large[disabled] {
    background: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* FAB siempre por encima del footer azul */
.fixed-action-btn { z-index: 998 !important; }
.fixed-action-btn .btn-floating { box-shadow: var(--mp-shadow-lg) !important; }
.fixed-action-btn[style*="bottom: 50px"],
.fixed-action-btn[style*="bottom:50px"] { bottom: 80px !important; }
.page-footer, footer.page-footer { position: relative; z-index: 1; }

/* ---------- 8. Inputs ---------- */
input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
textarea.materialize-textarea {
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius-sm) !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    font-size: 14.5px !important;
    color: var(--mp-text) !important;
    transition: var(--mp-transition) !important;
    font-family: var(--mp-font) !important;
}
textarea.materialize-textarea {
    height: auto !important;
    min-height: 80px;
    padding: 10px 12px !important;
    line-height: 1.5;
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-color: var(--mp-primary) !important;
    box-shadow: var(--mp-ring) !important;
    outline: none !important;
}

input[disabled], input[readonly], textarea[disabled], textarea[readonly] {
    background: var(--mp-bg) !important;
    color: var(--mp-text-muted) !important;
    cursor: not-allowed;
}

input.invalid, textarea.invalid,
input.bad-input, input[aria-invalid="true"] {
    border-color: var(--mp-danger) !important;
    box-shadow: var(--mp-ring-danger) !important;
}

/* Placeholder visible */
input::placeholder, textarea::placeholder {
    color: var(--mp-text-muted) !important;
    opacity: 1;
}

/* Labels Materialize */
.input-field label {
    color: var(--mp-text-muted) !important;
    font-weight: 500;
    left: 12px !important;
}
.input-field label.active {
    color: var(--mp-primary) !important;
    transform: translateY(-22px) scale(.85) !important;
    background: var(--mp-bg);
    padding: 0 4px;
    left: 8px !important;
}
.input-field { margin-top: 1.4rem; margin-bottom: 1.4rem; }
.input-field input:focus + label { color: var(--mp-primary) !important; }
.input-field .prefix { top: 8px; color: var(--mp-text-muted); }
.input-field .prefix.active { color: var(--mp-primary); }
.input-field .prefix ~ input,
.input-field .prefix ~ textarea { margin-left: 3rem; width: calc(100% - 3rem); }

/* ============================================================
   FIX v5: inputs con i.material-icons.prefix FUERA de .input-field
   Patron observado: <i class="material-icons prefix">access_time</i><input>
   donde el icono y el input son hermanos directos de la columna.
   Antes el icono quedaba flotando a la izquierda, lejos del input.
   Soluciona Desde:/Hasta: con reloj.
   ============================================================ */
.col:has(> i.material-icons.prefix):has(> input),
[class*="col"]:has(> i.material-icons.prefix):has(> input),
.row > div:has(> i.material-icons.prefix):has(> input) {
    position: relative;
}
.col:has(> i.material-icons.prefix) > input:not(.select-dropdown),
[class*="col"]:has(> i.material-icons.prefix) > input:not(.select-dropdown),
.row > div:has(> i.material-icons.prefix) > input:not(.select-dropdown) {
    padding-left: 38px !important;
    width: 100%;
}
.col > i.material-icons.prefix,
[class*="col"] > i.material-icons.prefix,
.row > div > i.material-icons.prefix {
    position: absolute !important;
    left: 12px !important;
    top: auto !important;
    bottom: 11px !important;
    font-size: 18px !important;
    color: var(--mp-text-muted) !important;
    transform: none !important;
    pointer-events: none;
    z-index: 2;
    line-height: 1 !important;
}
/* Si hay label <p> antes, el icono se centra con el input que viene despues */
.col > p[for] + i.material-icons.prefix,
[class*="col"] > p[for] + i.material-icons.prefix,
.col > p.tr + i.material-icons.prefix,
[class*="col"] > p.tr + i.material-icons.prefix {
    bottom: 11px !important;
}

/* <p> usado como label */
.col > p[for], .col > p.tr,
[class*="col"] > p[for], [class*="col"] > p.tr {
    font-size: .82rem;
    color: var(--mp-text-muted);
    font-weight: 500;
    margin: 0 0 6px 0;
    line-height: 1.3;
    letter-spacing: .01em;
}

/* Asterisco rojo en labels con required */
label.required::after {
    content: " *";
    color: var(--mp-danger);
    font-weight: 700;
}
label:has(+ input[required])::after,
label:has(~ input[required])::after,
p[for]:has(~ input[required])::after {
    content: " *";
    color: var(--mp-danger);
    font-weight: 700;
}

/* En cards/modales el label activo en blanco */
.card .input-field label.active,
.card-panel .input-field label.active,
.modal .input-field label.active,
.white .input-field label.active {
    background: #fff;
}

input[required] { display: block; }

/* ---------- 9. Selects nativos y Materialize ---------- */
select.browser-default,
select:not(.select-dropdown) {
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius-sm) !important;
    box-shadow: none !important;
    padding: 0 32px 0 12px !important;
    height: 40px !important;
    font-size: 14.5px !important;
    color: var(--mp-text) !important;
    transition: var(--mp-transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    font-family: var(--mp-font) !important;
}
select.browser-default:focus,
select:not(.select-dropdown):focus {
    border-color: var(--mp-primary) !important;
    box-shadow: var(--mp-ring) !important;
    outline: none !important;
}

.select-wrapper input.select-dropdown {
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius-sm) !important;
    height: 40px !important;
    line-height: 38px !important;
    padding: 0 12px !important;
    color: var(--mp-text) !important;
    font-size: 14.5px;
    font-family: var(--mp-font) !important;
}
.select-wrapper .caret { fill: var(--mp-text-muted); right: 10px; }
.select-wrapper input.select-dropdown:focus {
    border-color: var(--mp-primary) !important;
    box-shadow: var(--mp-ring) !important;
}
.dropdown-content.select-dropdown {
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow) !important;
    border: 1px solid var(--mp-border-soft);
    overflow: hidden;
    margin-top: 4px;
}
.dropdown-content.select-dropdown li > span {
    color: var(--mp-text) !important;
    padding: 10px 16px !important;
    font-size: .92rem;
}
.dropdown-content.select-dropdown li.selected,
.dropdown-content.select-dropdown li.active { background: var(--mp-primary-light) !important; }
.dropdown-content.select-dropdown li.selected > span,
.dropdown-content.select-dropdown li.active > span { color: var(--mp-primary-dark) !important; font-weight: 600; }
.dropdown-content.select-dropdown li:hover { background: var(--mp-bg) !important; }

/* ---------- 10. Select2 ---------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius-sm) !important;
    min-height: 40px !important;
    background: var(--mp-surface) !important;
    transition: var(--mp-transition);
    font-family: var(--mp-font);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    color: var(--mp-text);
    padding-left: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--mp-primary) !important;
    box-shadow: var(--mp-ring) !important;
}
.select2-dropdown {
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow) !important;
    overflow: hidden;
    font-family: var(--mp-font);
}
.select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--mp-primary) !important;
    color: #fff !important;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius-sm) !important;
    padding: 6px 10px !important;
    outline: none;
    font-family: var(--mp-font);
}

/* ============================================================
   FIX v5: Select2 MULTIPLE vacio (cajas sin texto en filtros).
   - Altura minima visible
   - Placeholder visible si no hay seleccion
   - Caret simulado a la derecha para que parezca un select
   - Chips internos con estilo coherente
   ============================================================ */
.select2-container--default .select2-selection--multiple {
    min-height: 40px !important;
    padding: 0 30px 0 8px !important;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.select2-container--default .select2-selection--multiple::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%);
    pointer-events: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    list-style: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--mp-primary-light) !important;
    border: 1px solid var(--mp-primary) !important;
    color: var(--mp-primary-dark) !important;
    border-radius: 999px !important;
    padding: 2px 8px 2px 10px !important;
    margin: 2px 0 !important;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--mp-primary-dark) !important;
    margin-right: 4px !important;
    font-weight: 700;
    border: none !important;
    background: transparent !important;
    padding: 0 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--mp-danger) !important;
}
.select2-search--inline {
    flex: 1;
    min-width: 60px;
}
.select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding: 6px 4px !important;
    height: 28px !important;
    font-family: var(--mp-font) !important;
    font-size: 14px;
    color: var(--mp-text);
    background: transparent;
    border: none !important;
    outline: none;
    width: 100% !important;
}
/* Placeholder cuando no hay seleccion */
.select2-container--default .select2-selection--multiple .select2-selection__placeholder,
.select2-search--inline .select2-search__field::placeholder {
    color: var(--mp-text-muted) !important;
    font-size: 14px;
    font-style: normal;
    opacity: 1;
}

/* ---------- 11. Tablas ---------- */
table {
    background: var(--mp-surface);
    border-radius: var(--mp-radius);
    overflow: hidden;
    box-shadow: var(--mp-shadow-xs);
    border: 1px solid var(--mp-border-soft);
    font-family: var(--mp-font);
}
table > tbody > tr { border-bottom: 1px solid var(--mp-border-soft); transition: background-color .12s; }
table > tbody > tr:last-child { border-bottom: none; }
table.striped > tbody > tr:nth-child(odd) { background: #fafbfc; }
table > thead > tr {
    background: #f3f4f6 !important;
    border-bottom: 1px solid var(--mp-border) !important;
}
table > thead th {
    color: var(--mp-text-soft) !important;
    font-weight: 600 !important;
    text-transform: none;
    font-size: .82rem;
    letter-spacing: .02em;
    padding: 12px 14px !important;
}
table td {
    padding: 11px 14px !important;
    color: var(--mp-text);
    font-size: .9rem;
    vertical-align: middle;
}
table.highlight > tbody > tr:hover,
table > tbody > tr:hover { background: #eef2ff !important; }

table td i.material-icons {
    color: var(--mp-text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: var(--mp-transition);
    vertical-align: middle;
}
table td i.material-icons:hover {
    background: var(--mp-primary-light);
    color: var(--mp-primary-dark);
}

/* Reset de iconos dentro de botones en tablas */
table td .btn i.material-icons,
table td .btn-floating i.material-icons,
table td .btn-large i.material-icons,
table td .btn-small i.material-icons,
table td .btn-flat i.material-icons,
table td button i.material-icons,
table td a.btn i.material-icons,
table td a.btn-floating i.material-icons {
    color: inherit !important;
    font-size: 24px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    cursor: inherit !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
}
table td .btn i.material-icons:hover,
table td .btn-floating i.material-icons:hover,
table td .btn-large i.material-icons:hover,
table td .btn-small i.material-icons:hover,
table td .btn-flat i.material-icons:hover {
    background: transparent !important;
    color: inherit !important;
}

table tr[onclick], table tr[data-href], table tr.clickable { cursor: pointer; }

.table-responsive {
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-border-soft);
    overflow-x: auto;
}
.table-responsive table { border: none; box-shadow: none; }

/* ---------- 12. Modales ---------- */
.modal {
    border-radius: var(--mp-radius-lg) !important;
    box-shadow: var(--mp-shadow-xl) !important;
    border: 1px solid var(--mp-border-soft);
    max-height: 85% !important;
    width: min(680px, 92%) !important;
    overflow: hidden;
}
.modal .modal-content { padding: 26px 28px; }
.modal .modal-content h4,
.modal .modal-content h5 {
    margin-top: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mp-border-soft);
    margin-bottom: 18px;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.modal-footer {
    background: #fafbfc;
    border-top: 1px solid var(--mp-border-soft);
    padding: 14px 22px !important;
    border-radius: 0 0 var(--mp-radius-lg) var(--mp-radius-lg);
}
.modal-overlay { background: rgba(15, 23, 42, .55) !important; backdrop-filter: blur(2px); }
.modal .modal-close { transition: var(--mp-transition); }

/* ---------- 13. Chips, badges, tabs ---------- */
.chip {
    background: var(--mp-primary-light) !important;
    color: var(--mp-primary-dark) !important;
    border-radius: 999px !important;
    font-weight: 500;
    height: 30px;
    line-height: 30px;
    padding: 0 14px !important;
}
.badge {
    border-radius: 999px;
    font-weight: 600;
    background: var(--mp-bg);
    color: var(--mp-text-soft);
}
.badge.new, .new.badge {
    background: var(--mp-primary) !important;
    color: #fff !important;
}

.tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--mp-border) !important;
}
.tabs .tab a {
    color: var(--mp-text-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500;
    transition: var(--mp-transition);
}
.tabs .tab a:hover, .tabs .tab a.active {
    color: var(--mp-primary) !important;
    background: #11AED8 !important;
}
.tabs .indicator { background: var(--mp-primary) !important; height: 3px; border-radius: 2px 2px 0 0; }

/* ---------- 14. Switches y checkboxes ---------- */
.switch label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mp-text);
    font-weight: 500;
}
.switch label .lever {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
    height: 20px !important;
    width: 36px !important;
    transition: background-color .18s;
}
.switch label .lever:after {
    background: #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.2) !important;
    width: 16px !important; height: 16px !important;
    top: 2px !important; left: 2px;
    transition: left .18s, background-color .18s;
}
.switch label input[type=checkbox]:checked + .lever {
    background: var(--mp-primary) !important;
}
.switch label input[type=checkbox]:checked + .lever:after {
    background: #fff !important;
    left: 18px;
}
[type="checkbox"]:checked + span:not(.lever):before,
[type="checkbox"].filled-in:checked + span:not(.lever):after {
    border-color: transparent var(--mp-primary) var(--mp-primary) transparent !important;
    background-color: var(--mp-primary) !important;
}
[type="radio"]:checked + span:before,
[type="radio"]:checked + span:after { border-color: var(--mp-primary) !important; }
[type="radio"]:checked + span:after { background-color: var(--mp-primary) !important; }

/* ---------- 15. Toastr ---------- */
#toast-container > div,
#toast-container > .toast,
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-warning,
#toast-container > .toast-info {
    background-image: none !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow-lg) !important;
    opacity: .98 !important;
    padding: 14px 18px 14px 56px !important;
    font-family: var(--mp-font);
    font-weight: 500;
    position: relative;
    color: #fff;
    overflow: hidden;
}
#toast-container > .toast-success { background-color: var(--mp-success) !important; }
#toast-container > .toast-error   { background-color: var(--mp-danger) !important; }
#toast-container > .toast-warning { background-color: var(--mp-warning) !important; }
#toast-container > .toast-info    { background-color: var(--mp-info) !important; }

#toast-container > div::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}
#toast-container > .toast-success::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>");
}
#toast-container > .toast-error::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>");
}
#toast-container > .toast-warning::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}
#toast-container > .toast-info::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}
#toast-container > div:hover { box-shadow: var(--mp-shadow-lg) !important; opacity: 1 !important; }
#toast-container .toast-title { font-weight: 700; margin-bottom: 2px; }
#toast-container .toast-message { font-weight: 500; line-height: 1.4; }
#toast-container .toast-close-button {
    color: #fff !important;
    opacity: .7;
    text-shadow: none;
    font-size: 18px;
    font-weight: 400;
    right: 8px; top: 4px;
}
#toast-container .toast-close-button:hover { opacity: 1; }
.toast-progress { background: rgba(255,255,255,.5) !important; height: 3px !important; opacity: .5; }

.toast {
    background: #1f2937 !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow-lg) !important;
    font-weight: 500;
}

/* ---------- 16. Dropdowns ---------- */
.dropdown-content {
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow) !important;
    border: 1px solid var(--mp-border-soft);
    overflow: hidden;
    font-family: var(--mp-font);
}
.dropdown-content li > a, .dropdown-content li > span {
    color: var(--mp-text) !important;
    padding: 12px 18px !important;
    font-weight: 500;
}
.dropdown-content li:hover, .dropdown-content li.active { background: var(--mp-primary-light) !important; }
.dropdown-content li:hover > a { color: var(--mp-primary-dark) !important; }

/* ---------- 17. Pagination ---------- */
.pagination li a {
    color: var(--mp-text) !important;
    border-radius: var(--mp-radius-sm) !important;
    margin: 0 2px;
    transition: var(--mp-transition);
}
.pagination li.active { background: transparent !important; }
.pagination li.active a { background: var(--mp-primary) !important; color: #fff !important; }
.pagination li a:hover { background: var(--mp-bg) !important; }
.pagination li.disabled a { color: var(--mp-text-muted) !important; }

.pagination > li > a, .pagination > li > span {
    border-radius: var(--mp-radius-sm) !important;
    margin: 0 2px;
    border-color: var(--mp-border) !important;
    color: var(--mp-text) !important;
    font-family: var(--mp-font);
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    background: var(--mp-primary) !important;
    border-color: var(--mp-primary) !important;
    color: #fff !important;
}

/* ---------- 18. Bootstrap 3 ---------- */
.panel {
    border: 1px solid var(--mp-border-soft) !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow-xs) !important;
}
.panel-default > .panel-heading {
    background: #fafbfc !important;
    border-bottom: 1px solid var(--mp-border-soft) !important;
    border-radius: var(--mp-radius) var(--mp-radius) 0 0 !important;
    font-weight: 600;
    color: var(--mp-text) !important;
}
.panel-primary > .panel-heading {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #06b6d4 100%) !important;
    border-color: var(--mp-primary) !important;
}
.panel-primary > .panel-heading,
.panel-primary > .panel-heading h5,
.panel-primary > .panel-heading h6,
.panel-primary > .panel-heading * { color: #ffffff !important; }

.alert {
    border-radius: var(--mp-radius) !important;
    border: 1px solid transparent;
    padding: 14px 16px;
    font-weight: 500;
    font-family: var(--mp-font);
}
.alert-success { background: #ecfdf5 !important; color: #065f46 !important; border-color: #a7f3d0 !important; }
.alert-danger  { background: #fef2f2 !important; color: #991b1b !important; border-color: #fecaca !important; }
.alert-warning { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; }
.alert-info    { background: #eff6ff !important; color: #1e40af !important; border-color: #bfdbfe !important; }

.form-control {
    border-radius: var(--mp-radius-sm) !important;
    border: 1px solid var(--mp-border) !important;
    box-shadow: none !important;
    height: 40px;
    padding: 0 12px;
    transition: var(--mp-transition);
    font-family: var(--mp-font);
}
.form-control:focus {
    border-color: var(--mp-primary) !important;
    box-shadow: var(--mp-ring) !important;
}

.btn-primary {
    background: var(--mp-primary) !important;
    border-color: var(--mp-primary) !important;
    border-radius: var(--mp-radius-sm) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--mp-primary-dark) !important;
    border-color: var(--mp-primary-dark) !important;
}

/* ---------- 19. Collapsibles ---------- */
.collapsible {
    border: 1px solid var(--mp-border-soft) !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow-xs) !important;
    overflow: hidden;
}
.collapsible-header {
    background: var(--mp-surface) !important;
    border-bottom: 1px solid var(--mp-border-soft) !important;
    font-weight: 600;
    padding: 16px 20px;
    transition: var(--mp-transition);
}
.collapsible-header:hover { background: #fafbfc !important; }
.collapsible-header.active { background: var(--mp-primary-light) !important; color: var(--mp-primary-dark) !important; }
.collapsible-body { border-bottom: 1px solid var(--mp-border-soft) !important; padding: 18px 20px; }

/* ---------- 20. Progress ---------- */
.progress {
    background: var(--mp-bg) !important;
    border-radius: 999px !important;
    height: 8px;
    overflow: hidden;
}
.progress .determinate, .progress .indeterminate { background: var(--mp-primary) !important; }

.preloader-wrapper.small { width: 32px; height: 32px; }
.spinner-blue, .spinner-blue-only,
.spinner-red, .spinner-red-only,
.spinner-green, .spinner-green-only,
.spinner-yellow, .spinner-yellow-only {
    border-color: var(--mp-primary) !important;
}

/* ---------- 21. Material icons ---------- */
.material-icons { vertical-align: middle; }

/* ---------- 22. Tooltips ---------- */
.material-tooltip {
    background: #1f2937 !important;
    border-radius: var(--mp-radius-sm) !important;
    font-size: .82rem;
    padding: 6px 10px;
    color: #fff;
    box-shadow: var(--mp-shadow);
    font-family: var(--mp-font);
    font-weight: 500;
}
.backdrop { background: #1f2937 !important; }

/* ---------- 23. Datepicker / Timepicker ---------- */
.picker__box {
    border-radius: var(--mp-radius-lg) !important;
    border: none !important;
    overflow: hidden;
    box-shadow: var(--mp-shadow-xl);
    font-family: var(--mp-font) !important;
}
.picker__weekday, .picker__day {
    font-family: var(--mp-font) !important;
    font-weight: 500;
}
.picker__day { transition: var(--mp-transition); border-radius: 50%; }
.picker__day:hover { background: var(--mp-primary-light) !important; color: var(--mp-primary-dark) !important; }
.picker__day--selected, .picker__day--selected:hover {
    background: var(--mp-primary) !important;
    color: #fff !important;
    border-radius: 50%;
}
.picker__day--today { color: var(--mp-primary) !important; font-weight: 700; }
.picker__date-display {
    background: linear-gradient(135deg, var(--mp-primary) 0%, var(--mp-primary-dark) 100%) !important;
    padding: 18px 20px;
}
.picker__weekday-display { background: var(--mp-primary-dark) !important; }
.picker__close, .picker__today {
    color: var(--mp-primary) !important;
    font-weight: 600;
    border-radius: var(--mp-radius-sm);
    transition: var(--mp-transition);
}
.picker__close:hover, .picker__today:hover { background: var(--mp-primary-light); }
.picker__nav--prev:hover, .picker__nav--next:hover {
    background: var(--mp-primary-light) !important;
    border-radius: 50%;
}

.clockpicker-display {
    background: linear-gradient(135deg, var(--mp-primary) 0%, var(--mp-primary-dark) 100%) !important;
}
.clockpicker-canvas line, .clockpicker-canvas-bg { fill: var(--mp-primary) !important; stroke: var(--mp-primary) !important; }
.clockpicker-button { color: var(--mp-primary) !important; }

/* ---------- 24. Breadcrumbs ---------- */
.breadcrumb { color: var(--mp-text-soft) !important; font-weight: 500; }
.breadcrumb:before { color: var(--mp-text-muted) !important; }
.breadcrumb:last-child { color: var(--mp-primary) !important; }

/* ---------- 25. Footer ---------- */
.page-footer, footer.page-footer {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #06b6d4 100%) !important;
    color: #fff !important;
    border-top: none;
}
.page-footer a, footer.page-footer a {
    color: #fff !important;
    opacity: .9;
    transition: var(--mp-transition);
    font-weight: 500;
}
.page-footer a:hover { opacity: 1; text-decoration: underline; }

/* ---------- 26. File inputs ---------- */
.file-field .btn, .file-field .btn-large {
    border-radius: var(--mp-radius-sm) 0 0 var(--mp-radius-sm) !important;
}
.file-field .file-path-wrapper {
    padding-left: 0 !important;
}
.file-path {
    border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0 !important;
    border: 1px solid var(--mp-border) !important;
    border-left: none !important;
    height: 40px !important;
    padding: 0 12px !important;
}

/* ---------- 27. Empty states ---------- */
.card-content > div:empty:not(.divider):not(.spinner):not(.indicator):not(.preloader-wrapper) {
    display: none;
}

/* ---------- 28. Divider y hr ---------- */
.divider { background: var(--mp-border-soft) !important; }
hr { border: none; border-top: 1px solid var(--mp-border-soft); margin: 18px 0; }
.section { padding: 1.2rem 0; }
.container { max-width: 1280px; }

/* ---------- 29. Detalles ---------- */
img.circle, .circle { border-radius: 50% !important; }
.input-field > label:not(.label-icon).active {
    transform: translateY(-22px) scale(.85) !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--mp-text);
    -webkit-box-shadow: 0 0 0 1000px var(--mp-surface) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

*:focus-visible {
    outline: 2px solid var(--mp-primary);
    outline-offset: 2px;
    border-radius: var(--mp-radius-sm);
}
.btn:focus-visible, .btn-large:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
}

i.material-icons.search, .input-field i.search {
    color: var(--mp-text-muted);
}

/* ---------- 30. Animaciones globales ---------- */
@keyframes mpSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 31. Print ---------- */
@media print {
    nav, .side-nav, .sidenav, .page-footer, footer,
    .btn, .btn-large, .btn-floating, .fixed-action-btn,
    .modal, .modal-overlay, #toast-container,
    .no-print { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    main { padding: 0 !important; margin: 0 !important; }
    .card, .card-panel {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }
    table { box-shadow: none !important; border: 1px solid #ccc !important; }
    table > thead > tr { background: #f0f0f0 !important; }
    a { color: #000 !important; text-decoration: underline; }
    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
}

/* ---------- 32. Responsive ---------- */
@media (max-width: 992px) {
    .container { max-width: 100%; padding: 0 18px; }
}
@media (max-width: 600px) {
    body { font-size: 14px; }
    .container { padding: 0 12px; }
    .card .card-content { padding: 16px; }
    .modal { width: 94% !important; }
    .btn, .btn-large { padding: 0 14px; }
    table td, table > thead th { padding: 10px 8px !important; font-size: .85rem; }
    nav, .navbar-fixed nav { height: 56px; line-height: 56px; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.15rem; }
}

/* ============================================================
   33. FIX v5 — Tarjetas de Incidencias (multi-seccion)
   Estructura observada en Autocontrol Plan:
     .card
       > .card-content.<color>  (header con titulo, info, fecha)
       > .card-content.green    (banner "OT tramitada", opcional)
       > .card-content (blanco) (Gestion de archivo(s))
       > .btn (Resolver, full-width)
       > iconos sueltos (pencil/refresh/briefcase/trash)

   Necesidades:
   - Eliminar el borde redondo interno entre secciones
   - Forzar texto blanco en banners coloreados
   - Boton "Resolver" sin radius arriba para encajar
   - Fila de iconos como footer plano
   ============================================================ */

/* Cuerpo blanco de "Gestion de archivos" dentro de card colorida */
.card .card-content + .card-content:not([class*="red"]):not([class*="purple"]):not([class*="green"]):not([class*="orange"]):not([class*="blue"]) {
    background: var(--mp-surface) !important;
    color: var(--mp-text) !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--mp-border-soft);
}
.card .card-content + .card-content:not([class*="red"]):not([class*="purple"]):not([class*="green"]):not([class*="orange"]):not([class*="blue"]) * {
    color: var(--mp-text);
}
.card .card-content + .card-content a {
    color: var(--mp-primary) !important;
    text-decoration: none;
    font-weight: 500;
}
.card .card-content + .card-content a:hover {
    text-decoration: underline;
}

/* Boton "Resolver" full-width pegado al cuerpo */
.card > .btn:last-child,
.card > .btn-large:last-child,
.card > .btn:not(.btn-floating),
.card > a.btn:not(.btn-floating) {
    display: block;
    width: 100%;
    border-radius: 0 !important;
    margin: 0 !important;
    min-height: 44px;
    height: auto;
    box-shadow: none !important;
}
/* Si tras el boton hay iconos de accion */
.card > .btn + i.material-icons,
.card > .btn + a > i.material-icons,
.card > .btn ~ i.material-icons,
.card > .btn ~ a > i.material-icons {
    display: none; /* se gestionara via .card-actions abajo */
}

/* Footer plano de acciones bajo Resolver (se aplica si HTML usa wrapper) */
.card .card-icons-row,
.card > .actions-bar,
.card > .card-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    padding: 8px 12px;
    background: #fafbfc;
    border-top: 1px solid var(--mp-border-soft);
}
.card .card-icons-row a,
.card > .actions-bar a,
.card > .card-actions-bar a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: var(--mp-radius-sm);
    color: var(--mp-text-muted) !important;
    transition: var(--mp-transition);
    text-decoration: none;
}
.card .card-icons-row a:hover {
    background: var(--mp-primary-light);
    color: var(--mp-primary-dark) !important;
}
.card .card-icons-row a.delete,
.card .card-icons-row a.red-text {
    color: var(--mp-danger) !important;
}
.card .card-icons-row a.delete:hover,
.card .card-icons-row a.red-text:hover {
    background: var(--mp-danger-light);
}

/* ============================================================
   34. FIX v5 — Filtros de listado (banda superior)
   Layout observado: grid de selects + 3 botones a la derecha
   apilados (Incidencias externas, Filtros, Reiniciar).
   Asegurar que botones cuyo texto no cabe envuelvan
   correctamente y no se corten.
   ============================================================ */
.filtros-grid, .filter-bar, .filters-row,
.row:has(> [class*="col"] > .btn-large) {
    align-items: stretch;
}
.btn-large.orange, .btn-large.blue, .btn-large.red {
    /* Permitir wrap del texto si la columna es estrecha */
    white-space: normal !important;
    line-height: 1.2 !important;
    min-height: 44px;
    height: auto !important;
    padding: 8px 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ============================================================
   35. FIX v5 — Brand-logo "AUTOCONTROL PLAN" en navbar
   Asegurar que la imagen del logo no se corte.
   ============================================================ */
nav .brand-logo, nav .brand-logo img {
    max-height: 48px;
    width: auto;
    height: auto;
}
nav .brand-logo {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
}

/* ============================================================
   36. FIX v5 — Header del listado "Incidencias"
   Titulo H4/H5 de pagina con margen razonable.
   ============================================================ */
main > h1:first-child, main > h2:first-child,
main > h3:first-child, main > h4:first-child,
main > h5:first-child,
main > .container > h1:first-child,
main > .container > h2:first-child,
main > .container > h3:first-child,
main > .container > h4:first-child,
main > .container > h5:first-child {
    margin-top: 18px;
    margin-bottom: 18px;
}

/* ============================================================
   37. FIX v5 — Inputs sin .input-field (sueltos en columnas)
   Los selects vacios de filtros sin label flotante necesitan
   un alto minimo visible aunque no tengan opciones.
   ============================================================ */
[class*="col"] > select:not(.browser-default):not(.select-dropdown),
[class*="col"] > .select-wrapper,
[class*="col"] > .select2-container {
    width: 100% !important;
    display: block;
}
[class*="col"] > .select2-container { min-height: 40px; }

/* Si los <p> que actuan como label estan VACIOS, ocultarlos para
   no dejar huecos extra */
[class*="col"] > p[for]:empty,
[class*="col"] > p.tr:empty {
    display: none;
}