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

   v21 = icono dentro del campo SIN depender del espaciado del HTML:
   icono absoluto sobre la columna + input en bloque con padding. Se
   reintroduce un unico :has barato (hijo+adyacente) solo para este
   patron; escape "mp-out" por campo.

   v20 = icono prefix DENTRO del campo automaticamente (el input
   retrocede sobre el icono via "i + input"; sin :has y sin tocar HTML).
   Clase de escape "mp-out" para dejar un campo concreto como antes.

   v19 = iconos prefix junto a su campo: si el icono va seguido del
   input se emparejan en linea (icono a la izquierda). Superado por v20.

   v18 = sin subrayado en los enlaces del menu (todos los estados).

   v17 = menu lateral compacto: items de 38px (44px en tactil), iconos
   de 20px, userView contenido, y FIX: los acordeones del menu ya no
   heredan el estilo de collapsible de contenido (caja con borde, sombra
   y padding 16px) que los engordaba; subitems indentados a 34px.

   v16 = .editable y .mp-legend EXTRAIDOS del patch: se mudan a
   css/style.css (bloque autocontenido entregado aparte). El patch ya
   no toca las celdas editables ni la leyenda.

   v15 = cabecera del datepicker compacta en 2 lineas (no eliminada) y
   PASADA DE RENDIMIENTO: fuera backdrop-filter del overlay, fuera los
   ultimos :has() (caros con DOM que muta por AJAX), fuera la animacion
   de entrada de las cards y fuera text-rendering:optimizeLegibility.
   El patch queda sin :has, sin blur y sin animaciones de entrada.

   v14 = datepicker con dias circulares de verdad (fuera el ovalo) y
   mes/anyo a ancho de contenido (fuera el "202" cortado); .editable sin
   salto de layout en hover y valido en th; estilos .mp-legend para la
   leyenda compacta de estados.

   v13 = compatibilidad con el style.css del proyecto (visto por fin):
   - scrollbar personalizada SOLO en la pagina (html); las interiores
     vuelven a ser nativas/overlay. Arregla el doble scroll visible en
     la modal .modal-fixed-footer de mediciones.
   - modal-footer con padding 10px para caber en el footer fijo de 60px
     del fix movil de style.css.

   v12 = datepicker compacto: oculta la cabecera decorativa
   .picker__date-display y ajusta los selects de mes/anyo para que el
   anyo no salga cortado.

   v11 = PODA. Menos es mas:
   - Modal: se elimina TODA la geometria forzada (width, max-height,
     overflow). Vuelve al tamano y scroll originales; solo se aplica
     piel (radio, sombra, borde). Arregla la modal enana y el doble
     scroll.
   - Iconos prefix sueltos: eliminado el posicionamiento absoluto.
     Vuelven a fluir inline junto al label, como en el original.
   - Nuevo remap de fondos solidos: .teal -> azul del tema, .green ->
     verde moderno, .red/.orange/.blue/.purple armonizados.

   v10 = v9 + movil/tablet/WebView (iOS+Android) y pulido "react":
   - inputs a 16px en tactil (evita el zoom automatico de iOS al enfocar)
   - touch-action, tap-highlight, user-select y :active en botones
   - hovers con transform neutralizados en tactil (quedaban "pegados")
   - safe-areas (notch/barra gestual) en nav, footer, FAB y toasts
   - modal con 85dvh (viewport real con barra de URL colapsable)
   - accent-color + color-scheme (nativos del tema; bloquea force-dark
     de Android WebView)
   - objetivos tactiles >=44px (iconos de tabla, dropdowns, paginacion,
     switches, select2)
   - numeros tabulares en tablas (decimales alineados en mediciones)
   - canvas (pdf.js/jsPDF) nunca desborda en movil
   - radio de botones/inputs 6->8px y sidebar 250->280px (cuadra con el
     padding-left:280px del shell)
   - seccion 35: clases .red-text/.blue-text/etc. mapeadas a la paleta
     del tema SIN perder la semantica de color de los iconos

   v9 = v8 + segunda pasada sobre el DOM real: comodin [class*="col"]
   sustituido por .col exacto, feedback de fila seleccionada, y tres
   sitios donde mi CSS le pisaba estilos inline al JS. Ver notas "v9:".

   v8 = v7 + ajustes contra el DOM REAL que generan tus .js
   (medicion, task_list, task_incidencia). Cinco bugs de especificidad
   corregidos; ver notas "v8:" en cada punto del fichero.

   v7 = CAPA DE TEMA LIMPIA. Cambia el aspecto (color, tipografia,
   sombras, radios, skins de componentes) y NO toca el layout de
   ninguna pagina. Materialize sigue maquetando como siempre.

   ELIMINADO respecto a v6 (esto era lo que rompia paginas):
   - Sec.33 Incidencias. Ocultaba iconos de accion:
       .card > .btn ~ a > i.material-icons { display:none }
     y los reemplazaba por un wrapper .card-icons-row que el HTML
     no tiene, asi que los iconos (editar/borrar/refrescar) quedaban
     invisibles sin sustituto. Ademas
       .card > .btn:not(.btn-floating) { width:100%; border-radius:0 }
     convertia en barra a ancho completo CUALQUIER boton hijo directo
     de CUALQUIER card, en todas las paginas.
   - Sec.34 Filtros. Convertia .containerfalse en CSS Grid con una
     columna max-content (crece sin limite -> desbordamiento) y ponia
     display:contents en las filas, destruyendo la maqueta flotante
     de Materialize en todos los listados con #date_range.
   - Sec.35 Nueva Tarea. Redisenyaba la pagina desde CSS: ocultaba los
     encabezados reales (.alert.alert-warning) y los repintaba con
     content:"Que hacer" etc. Eso rompe la traduccion (esos encabezados
     llevan class="tr" y la pagina tiene 6 idiomas; el texto de content
     no se traduce nunca y va sin acentos) y la exportacion a PDF via
     html2canvas, que no rinde bien los pseudo-elementos. El stepper
     era una cadena content: cuyos espacios colapsan a uno solo, por eso
     salia "1 Que 2 Cuando 3 Donde..." apelotonado.
   - Sec.38 Era un parche sobre el parche anterior. Sin el 35, sobra.

   CORREGIDO en v7:
   - .card-title tenia justify-content:space-between, lo que empujaba
     el texto al extremo derecho si el titulo empezaba por un icono.

   MANTENIDO de v6 (todos verificables):
   - Tabs activas: fondo cian (#11AED8) con texto azul era ilegible
     -> texto primary sobre fondo transparente.
   - Modales altos: overflow:hidden impedia el scroll y no se llegaba
     al boton de guardar -> overflow-y:auto.
   - Botones con texto largo: height fijo lo cortaba al envolver
     -> min-height + line-height 1.2.
   - input[required]{display:block} rompia checkboxes/radios
     -> regla acotada a inputs de texto.
   - @import de la fuente: separador de parametros corregido.
   - Comentarios en ASCII puro: sin mojibake con cualquier
     codificacion (FTP/cPanel).

   TRADEOFF CONOCIDO: .card conserva overflow:hidden para que las
   tarjetas multi-seccion con cabecera de color redondeen bien. Si
   algun desplegable dentro de una card se recorta, se arregla de
   forma quirurgica en esa pagina.
   ============================================================ */

/* ---------- 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:      8px;
    --mp-radius:         10px;
    --mp-radius-lg:      14px;
    --mp-radius-xl:      18px;

    /* Sombras v6: mas suaves y en dos capas (aire moderno) */
    --mp-shadow-xs:      0 1px 2px rgba(15, 23, 42, .05);
    --mp-shadow-sm:      0 1px 2px rgba(15, 23, 42, .04), 0 2px 5px rgba(15, 23, 42, .05);
    --mp-shadow:         0 1px 3px rgba(15, 23, 42, .04), 0 6px 16px rgba(15, 23, 42, .07);
    --mp-shadow-lg:      0 2px 6px rgba(15, 23, 42, .05), 0 12px 28px rgba(15, 23, 42, .09);
    --mp-shadow-xl:      0 4px 12px rgba(15, 23, 42, .06), 0 24px 56px rgba(15, 23, 42, .13);

    --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;

    /* v10: controles nativos (checkbox/radio/date del navegador y del
       WebView) en el color del tema, y bloqueo del "force dark" que
       Android WebView aplica invirtiendo colores por su cuenta. */
    accent-color: var(--mp-primary);
    color-scheme: light;
}

/* ---------- 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;
    /* v10 WebView: sin flash gris azulado al tocar (iOS/Android) y sin
       reescalado automatico del texto al rotar el dispositivo. */
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
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 ---------- */
/* v13: SOLO la scrollbar de la pagina (html). Antes era universal
   (::-webkit-scrollbar a secas) y eso obliga al navegador a PINTAR
   SIEMPRE todas las scrollbars en vez de usar las overlay que
   desaparecen solas. La modal de mediciones es .modal-fixed-footer:
   ahi conviven el scroll de .modal (Materialize base) y el de
   .modal-content (el fix movil de style.css), y con barras pintadas
   se veian DOS barras grises pegadas. Las scrollbars interiores
   (modales, tablas, sidebar) vuelven al comportamiento nativo. */
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; border: 2px solid transparent; }
html::-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);
    /* v10: el shell comun pone header/main/footer{padding-left:280px}; con
       250px quedaba una franja muerta de 30px entre menu y contenido.
       Sin !important: si init.js fija menuWidth inline, ese manda. */
    width: 280px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.side-nav .userView, .sidenav .userView {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #06b6d4 100%) !important;
    padding: 20px 18px 14px !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: 52px !important; height: 52px !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; }
/* v18: nunca subrayado en el menu, en ningun estado (cubre tambien el
   hover/focus por si otra hoja lo anyade ahi). */
.side-nav li > a, .sidenav li > a,
.side-nav li > a:hover, .sidenav li > a:hover,
.side-nav li > a:focus, .sidenav li > a:focus,
.side-nav li > a.active, .sidenav li > a.active,
.side-nav .collapsible-header, .sidenav .collapsible-header,
.side-nav .collapsible-header:hover, .sidenav .collapsible-header:hover {
    text-decoration: none !important;
}
.side-nav li > a, .sidenav li > a {
    color: var(--mp-text-soft) !important;
    font-weight: 500;
    /* v17: menu compacto. 38px por item en PC (en tactil se mantienen
       44px via el bloque pointer:coarse). */
    min-height: 38px !important;
    height: auto !important;
    line-height: 1.3 !important;
    padding: 5px 22px !important;
    border-radius: 0 999px 999px 0;
    margin: 1px 12px 1px 0;
    transition: var(--mp-transition);
    font-size: .9rem;
    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: 12px;
    font-size: 20px;
}
.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;
}

/* v17: los acordeones del menu (ul.collapsible.collapsible-accordion) NO
   deben heredar el estilo de collapsible de contenido (seccion 19: caja
   con borde, sombra y padding 16px). Dentro del sidebar se renderizan
   como un item de menu mas, con su chevron a la derecha. */
.side-nav .collapsible, .sidenav .collapsible {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
    overflow: visible;
}
.side-nav .collapsible-header, .sidenav .collapsible-header {
    background: transparent !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 5px 22px !important;
    margin: 1px 12px 1px 0;
    border-radius: 0 999px 999px 0;
    color: var(--mp-text-soft);
    font-weight: 500;
    font-size: .9rem;
    line-height: 1.3;
}
.side-nav .collapsible-header:hover, .sidenav .collapsible-header:hover {
    background: var(--mp-primary-50) !important;
    color: var(--mp-primary-dark) !important;
}
.side-nav .collapsible-header.active, .sidenav .collapsible-header.active {
    background: var(--mp-primary-light) !important;
    color: var(--mp-primary-dark) !important;
    font-weight: 600;
}
.side-nav .collapsible-header > i, .sidenav .collapsible-header > i {
    margin-left: auto;
    margin-right: 0;
    font-size: 20px;
    color: inherit !important;
}
.side-nav .collapsible-body, .sidenav .collapsible-body {
    border: none !important;
    padding: 0 !important;
    background: #fafbfc;
}
/* Subitems: indentados y un punto mas compactos que el nivel 1 */
.side-nav .collapsible-body li > a, .sidenav .collapsible-body li > a {
    min-height: 34px !important;
    padding: 4px 22px 4px 34px !important;
    font-size: .87rem;
}
.side-nav .collapsible-body li > a > i, .sidenav .collapsible-body li > a > i {
    font-size: 18px;
    margin-right: 10px;
}

/* ---------- 6. Cards ---------- */
.card, .card-panel {
    /* v8: SIN !important a proposito. El JS usa <div class="card light-green">
       para el aviso de export correcto; con !important mi blanco ganaba a
       .light-green y el mensaje (white-text) quedaba blanco sobre blanco.
       Sin !important, las clases de color de Materialize (que si lo llevan)
       mandan, y las cards normales siguen saliendo blancas igual. */
    background: var(--mp-surface);
    border: 1px solid var(--mp-border-soft);
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow-xs) !important;
    transition: box-shadow .18s;
    overflow: hidden;
    /* v15: sin animacion de entrada. Cada refresco AJAX re-renderiza todas
       las tarjetas y todas se animaban a la vez: parpadeo + coste. */
}
.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;
    /* v7: antes tenia justify-content:space-between. Con un titulo que
       empieza por icono (.material-icons.left) eso empujaba el texto al
       extremo derecho. Ahora el texto queda junto al icono y solo los
       iconos finales (menu de 3 puntos / .right) se van a la derecha. */
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* v9: el JS de Incidencias mete titulos de hasta 200 chars (clip(titulo,200))
       en tarjetas a 1/3 de ancho. En flex, un item no baja de su min-content,
       asi que una palabra larga (una URL, un codigo) desbordaria la tarjeta. */
    overflow-wrap: anywhere;
}
.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.right,
.card .card-content .card-title > .more-vert,
.card .card-content .card-title > a:last-child > i.material-icons {
    margin-left: auto;
}
.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;
}
/* v8: antes era ".card .card-action a" a secas. El JS de Incidencias mete
   <a class="resolver btn ..."> dentro de .card-action; ese selector (0,2,1
   con !important) ganaba a .btn{color:#fff} (0,1,0) y dejaba el boton
   "Resolver" con texto azul sobre fondo azul: invisible. */
.card .card-action a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
    color: var(--mp-primary) !important;
    font-weight: 600;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ============================================================
   Cards con HEADER coloreado (rojo/morado/verde/etc.)
   El menu de 3 puntos, 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 (3 puntos 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%;
}

/* ============================================================
   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;
}
/* Tarjetas multi-seccion (header color + banner + cuerpo blanco):
   cada bloque redondea segun su posicion. 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;
}

/* ============================================================
   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;
    /* v6: min-height + line-height 1.2 para que el texto largo envuelva
       sin recortarse (antes height fijo de 38px lo cortaba). */
    min-height: 38px;
    line-height: 1.2;
    padding: 0 18px;
    font-family: var(--mp-font) !important;
    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;  }
.btn-small { min-height: 32px; line-height: 1.2; padding: 4px 14px; font-size: .85rem; height: auto; }

/* v10: tacto de app nativa. Sin seleccion de texto en long-press, sin el
   retardo/zoom de doble tap, y feedback inmediato al pulsar (el hover no
   existe en tactil; el :active si). */
.btn, .btn-large, .btn-small, .btn-flat, .btn-floating {
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
.btn:active, .btn-large:active, .btn-small:active {
    filter: brightness(.92);
}
.btn-flat:active { background: var(--mp-bg) !important; }
.btn-floating:active { filter: brightness(.92); transform: scale(.96); }

.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; }

/* 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; }
/* v8: el JS de mediciones genera <button class="btn-floating red remove-item">.
   Mi .btn-floating{background:...!important} (0,1,0) empataba con el
   .red{...!important} de Materialize (0,1,0) y ganaba por cargar despues:
   el boton de borrar salia AZUL. Variantes explicitas (0,2,0). */
.btn-floating.red    { background: var(--mp-danger) !important; }
.btn-floating.red:hover { background: #dc2626 !important; }
.btn-floating.green  { background: var(--mp-success) !important; }
.btn-floating.green:hover { background: #059669 !important; }
.btn-floating.orange { background: var(--mp-warning) !important; }
.btn-floating.blue   { background: var(--mp-info) !important; }
.btn-floating.grey   { background: #6b7280 !important; }

.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;
}

/* v8: el JS de Tareas genera <input class="col s12 m4 green"> / ".red" para
   marcar dentro/fuera de rango en la modal Cumplimentar. Mi regla base
   (0,2,1 !important) ganaba al .green de Materialize (0,1,0) y borraba ese
   feedback. Estas van a 0,3,1 y lo recuperan, ya con la paleta del tema. */
input[type=text].green:not(.browser-default),
input[type=number].green:not(.browser-default) {
    background: var(--mp-success-light) !important;
    border-color: var(--mp-success) !important;
    color: var(--mp-success-dark) !important;
}
input[type=text].red:not(.browser-default),
input[type=number].red:not(.browser-default) {
    background: var(--mp-danger-light) !important;
    border-color: var(--mp-danger) !important;
    color: var(--mp-danger-dark) !important;
}
input[type=text].amber:not(.browser-default),
input[type=number].amber:not(.browser-default) {
    background: var(--mp-warning-light) !important;
    border-color: var(--mp-warning) !important;
    color: #92400e !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); }

/* v11: ELIMINADO el hack que posicionaba en absoluto los iconos "prefix"
   sueltos (fuera de .input-field). Era fragil: con un label entre medias o
   con el div del datepicker como hermano, el reloj acababa colgado en la
   esquina del input. En el Materialize original esos iconos fluyen inline
   junto al label y se ven bien; solo se armoniza color y alineado. */
/* Estilo base de los iconos prefix sueltos (sin input pegado detras):
   fluyen inline junto a su label, como en Materialize original. */
.col > i.material-icons.prefix:not(.is-required) {
    position: static;
    float: none;
    font-size: 20px;
    color: var(--mp-text-muted);
    vertical-align: middle;
    margin-right: 8px;
}

/* v21: icono DENTRO del campo, a prueba de bombas. El intento v20 ponia
   icono e input en la misma linea con margen negativo: el espacio en
   blanco entre etiquetas del HTML (~4px) desbordaba la linea y el input
   saltaba abajo, dejando la lupa colgada arriba. Ahora el icono sale del
   flujo (absoluto sobre la columna) y el input es un bloque normal con
   padding: no hay linea compartida, no hay nada que pueda saltar.

   Se reintroduce UN :has, deliberadamente y solo aqui: es la forma barata
   (combinador hijo+adyacente, no el :has(~) general que purgamos por
   rendimiento) y sin el es imposible condicionar el icono. Alcance
   minimo: solo columnas cuyo primer patron es exactamente i.prefix+input.
   - Con label entre medias (datepickers): no casa, intactos.
   - Los .is-required (asterisco de style.css): excluidos, fuera del campo. */
.col:has(> i.material-icons.prefix:not(.is-required):not(.mp-out) + input:not(.select-dropdown):not([type=hidden])) {
    position: relative;
}
.col > i.material-icons.prefix:not(.is-required):not(.mp-out):has(+ input:not(.select-dropdown):not([type=hidden])) {
    position: absolute;
    top: 10px;
    left: 22px;
    margin: 0;
    z-index: 1;
    font-size: 20px;
    line-height: 1;
    color: var(--mp-text-muted);
    pointer-events: none;
}
.col > i.material-icons.prefix:not(.is-required):not(.mp-out) + input:not(.select-dropdown):not([type=hidden]):not([type=checkbox]):not([type=radio]) {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 40px !important;
}

/* Salida de emergencia por campo: clase "mp-out" en el icono y ese campo
   vuelve a icono-junto-al-label, sin efecto dentro. */
.col > i.material-icons.prefix.mp-out + input:not(.select-dropdown):not([type=hidden]) {
    margin-left: 0 !important;
    padding-left: 12px !important;
    width: 100% !important;
    display: block !important;
}

/* <p> usado como label */
.col > p[for], .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;
}
/* v15: eliminados los selectores :has() que pintaban el asterisco de
   "required" automaticamente. :has() se reevalua en cada mutacion del DOM
   y tus paginas reescriben tablas enteras via .html() en cada AJAX: coste
   real. Ademas style.css ya resuelve esto con la clase .is-required. */

/* 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;
}

/* v6: acotado. Antes era input[required]{display:block} y rompia
   checkboxes/radios required (los volvia bloque y los descuadraba). */
input[required]:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]) {
    display: block;
}

/* ---------- 9. Selects nativos y Materialize ---------- */
/* v9: se excluye .select2-hidden-accessible. Cuando select2 se inicializa
   deja el <select> original oculto (1px, clip); mi regla (0,1,1) le ganaba a
   la de select2 (0,1,0) y le reimponia height:40px y paddings. Queda tapado
   igual, pero no hay razon para pelearse con el. */
select.browser-default:not(.select2-hidden-accessible),
select:not(.select-dropdown):not(.select2-hidden-accessible) {
    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: scroll;
    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);
}

/* ============================================================
   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; }
/* v9: en el listado de Tareas el JS hace tr.toggleClass('selected') para la
   seleccion multiple, pero el checkbox va como <label><input type=checkbox>
   sin "for": Materialize esconde todo checkbox (left:-9999px) y solo lo
   dibuja con "[type=checkbox] + label" (hermano), que aqui no casa. Es decir,
   el checkbox NO se ve y .selected es la unica pista visual. Ademas
   .striped>tr:nth-child(odd) (0,2,3) le ganaba a .selected (0,1,0). */
table > tbody > tr.selected,
table.striped > tbody > tr.selected,
table.striped > tbody > tr.selected:nth-child(odd) {
    background: var(--mp-primary-light) !important;
    box-shadow: inset 3px 0 0 var(--mp-primary);
}
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;
    /* v10: cifras de ancho fijo; en las tablas de mediciones los decimales
       quedan alineados en vertical en vez de bailar. */
    font-variant-numeric: tabular-nums;
    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;
}

/* v16: las reglas de .editable (celdas de mediciones) se han movido a
   css/style.css junto con su leyenda: son piezas de la aplicacion, no del
   tema. Ver bloque "CELDAS EDITABLES + LEYENDA DE ESTADOS" en style.css. */
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;
    -webkit-overflow-scrolling: touch;
}
.table-responsive table { border: none; box-shadow: none; }

/* ---------- 12. Modales ---------- */
/* v11: SOLO piel. En v10 se forzaba width:min(680px,92%) y max-height, y en
   pantallas grandes la modal quedaba enana comparada con el ancho que le da
   tu style.css; ademas mi overflow-y sumado al de Materialize producia doble
   barra de scroll con la scrollbar personalizada (que es siempre visible).
   El tamano y el scroll vuelven a ser EXACTAMENTE los de antes del patch. */
.modal {
    border-radius: var(--mp-radius-lg) !important;
    box-shadow: var(--mp-shadow-xl) !important;
    border: 1px solid var(--mp-border-soft);
}
.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);
    /* v13: 10px en vez de 14px. El fix movil de style.css fija el footer a
       60px de alto; con 14+38(boton)+14=66px el boton Enviar se recortaba.
       Con 10 quedan 58px y cabe. */
    padding: 10px 22px !important;
    border-radius: 0 0 var(--mp-radius-lg) var(--mp-radius-lg);
}
/* v15: sin backdrop-filter. El blur en tiempo real obliga a recomponer
   toda la pantalla mientras la modal esta abierta; en WebView se nota. */
.modal-overlay { background: rgba(15, 23, 42, .6) !important; }
.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);
}
/* v6: la tab activa/hover tenia fondo cian (#11AED8) con texto azul,
   ilegible. Ahora texto primary sobre fondo transparente y el
   indicador inferior marca la activa. */
.tabs .tab a:hover, .tabs .tab a.active {
    color: var(--mp-primary) !important;
    background: var(--mp-primary-dark) !important;
}
.tabs .tab a.active { font-weight: 600; }
.tabs .tab a:focus, .tabs .tab a:focus.active {
    background: var(--mp-primary-dark) !important;
    outline: none;
}
.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;
}
/* v14: circulo de verdad. border-radius:50% sobre una celda mas ancha que
   alta pintaba el dia seleccionado como un ovalo aplastado. Dimensiones
   fijas y centrado dentro de la celda. */
.picker__day {
    transition: var(--mp-transition);
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px !important;
    padding: 0 !important;
    margin: 2px auto;
    text-align: center;
    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; }
/* v15: cabecera COMPACTA en 2 lineas (antes v12 la quitaba del todo).
   Linea 1: dia de la semana. Linea 2: dia + mes + anyo. De ~180px de
   alto a ~60px, manteniendo el fondo azul del tema. */
.picker__date-display {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 8px;
    background: var(--mp-primary) !important;
    padding: 10px 14px 12px !important;
    text-align: center;
}
.picker__weekday-display {
    flex: 0 0 100%;
    background: transparent !important;
    padding: 0 0 2px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    letter-spacing: .05em;
    color: rgba(255,255,255,.85) !important;
}
.picker__day-display, .picker__month-display, .picker__year-display {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Orden natural en castellano: 6 Ago 2026 (el DOM trae mes antes que dia) */
.picker__day-display { order: 1; }
.picker__month-display { order: 2; }
.picker__year-display { order: 3; color: rgba(255,255,255,.7) !important; }

/* Los selects de mes/anyo del picker heredaban mi estilo de select
   (32px de padding para la flecha) y en su hueco estrecho el anyo salia
   cortado ("202"). Version compacta solo dentro del picker. */
.picker__select--month.browser-default,
.picker__select--year.browser-default {
    height: 34px !important;
    /* v14: ancho segun contenido. pickadate les da un % fijo del header y
       con el padding de la flecha el anyo salia cortado ("202"). */
    width: auto !important;
    min-width: 0 !important;
    padding: 0 24px 0 8px !important;
    font-size: 13.5px !important;
    background-position: right 6px center !important;
}
.picker__header { margin-top: 4px; }
.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; }
    .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. Detalles genericos
   Lo unico que se rescata de las antiguas secciones 33-38: reglas
   que valen para CUALQUIER pagina y no secuestran ningun layout.
   ============================================================ */

/* Logo del navbar. El HTML lo trae con max-height:65px inline y la
   barra mide 64px, asi que sin esto sobresale. */
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;
}

/* Titulo 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;
}

/* Selects sueltos en columnas (sin .input-field): ancho completo y
   alto minimo visible aunque esten vacios. */
.col > select:not(.browser-default):not(.select-dropdown),
.col > .select-wrapper,
.col > .select2-container {
    width: 100% !important;
    display: block;
}
.col > .select2-container { min-height: 40px; }

/* <p> vacios usados como label: no dejar hueco */
.col > p[for]:empty,
.col > p.tr:empty {
    display: none;
}

/* v8: se retira el "html,body{overflow-x:hidden}" que puse en v7. Tu JS de
   Incidencias fija el scroll del body en iOS (.modal-open + top:-scrollPos +
   window.scrollTo), y overflow-x en html/body crea un contexto de scroll que
   interfiere justo con eso. Sin los grids secuestrados de v6 ya no hay nada
   que desborde, asi que la red de seguridad sobra. */


/* ============================================================
   34. Movil, tablet y WebView (Android/iOS)
   Ajustes de comportamiento tactil. No cambian el aspecto en PC.
   Nota: los env(safe-area-inset-*) solo actuan si el meta viewport
   incluye viewport-fit=cover (recomendado en la app hibrida).
   ============================================================ */

/* Sin retardo de doble tap en toda superficie interactiva */
a, button, label, select, input[type="submit"], input[type="button"],
.waves-effect, .modal-trigger, .editable {
    touch-action: manipulation;
}

/* iOS hace ZOOM automatico al enfocar cualquier campo con fuente <16px.
   En punteros tactiles se sube a 16px; en PC se mantiene el 14.5px. */
@media (pointer: coarse) {
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.select-dropdown),
    input.select-dropdown,
    textarea.materialize-textarea,
    textarea,
    select.browser-default,
    select:not(.select-dropdown):not(.select2-hidden-accessible),
    .select2-search--inline .select2-search__field,
    .select2-search--dropdown .select2-search__field {
        font-size: 16px !important;
    }

    /* Objetivos tactiles: minimo ~44px reales */
    .btn, .btn-large { min-height: 44px; }
    .btn-small { min-height: 40px; }
    table td i.material-icons { padding: 8px; font-size: 22px; }
    .card-action i.material-icons,
    .card .actions i.material-icons { padding: 10px; }
    .dropdown-content li > a, .dropdown-content li > span { padding: 14px 18px !important; }
    .dropdown-content.select-dropdown li > span { padding: 13px 16px !important; }
    .select2-results__option { padding: 12px 14px !important; }
    .pagination li a {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .tabs .tab a { padding: 0 18px; }
    .side-nav li > a, .sidenav li > a,
    .side-nav .collapsible-header, .sidenav .collapsible-header {
        min-height: 44px !important;
    }
    .side-nav .collapsible-body li > a, .sidenav .collapsible-body li > a {
        min-height: 42px !important;
    }
    .switch label .lever { height: 24px !important; width: 44px !important; }
    .switch label .lever:after { width: 20px !important; height: 20px !important; }
    .switch label input[type=checkbox]:checked + .lever:after { left: 22px; }
}

/* En tactil el hover se queda "pegado" tras el tap. Se neutralizan los
   efectos hover con movimiento; los :active de arriba dan el feedback. */
@media (hover: none) {
    img[src*="flag"]:hover, img[src*="bandera"]:hover, img[src*="lang"]:hover {
        transform: none;
        box-shadow: 0 1px 2px rgba(0,0,0,.12);
    }
    .btn-floating:hover { transform: none; box-shadow: var(--mp-shadow) !important; }
    .card:hover { box-shadow: var(--mp-shadow-xs) !important; }
    .card .card-content .card-title > i.material-icons:hover {
        transform: none;
        opacity: .9;
    }
}

/* Notch / isla dinamica / barra gestual (iPhone y Android modernos) */
@supports (padding: max(0px)) {
    nav .nav-wrapper {
        padding-left: max(22px, env(safe-area-inset-left));
        padding-right: max(22px, env(safe-area-inset-right));
    }
    .side-nav, .sidenav { padding-bottom: env(safe-area-inset-bottom); }
    .page-footer .footer-copyright { padding-bottom: env(safe-area-inset-bottom); }
    .fixed-action-btn {
        bottom: calc(23px + env(safe-area-inset-bottom));
        right: calc(24px + env(safe-area-inset-right));
    }
    #toast-container.toast-top-right {
        top: calc(12px + env(safe-area-inset-top));
        right: calc(12px + env(safe-area-inset-right));
    }
    #toast-container.toast-top-center { top: calc(12px + env(safe-area-inset-top)); }
    #toast-container.toast-bottom-right {
        bottom: calc(12px + env(safe-area-inset-bottom));
        right: calc(12px + env(safe-area-inset-right));
    }
    #toast-container.toast-bottom-center { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* pdf.js y jsPDF pintan sobre canvas: que una pagina A4 nunca desborde
   la pantalla del movil. height:auto conserva la proporcion. */
main canvas { max-width: 100%; height: auto; }

/* ============================================================
   35. Clases de color de Materialize -> paleta del tema
   Tu JS marca semantica con estas clases (delete en red-text, pausa
   en blue-text, avisos en orange-text...). NO se elimina esa
   semantica: solo se sustituye el tono crudo de Materialize
   (#F44336, #2196F3...) por el equivalente del tema, para que un
   icono de borrar y un boton de borrar tengan EL MISMO rojo.
   Los matices .text-darken-N / .text-lighten-N de Materialize son
   selectores compuestos (0,2,0) y siguen ganando a estos (0,1,0):
   no se pierde ningun matiz existente.
   ============================================================ */
/* Fondos solidos: el teal por defecto de Materialize pasa a azul y los
   colores intensos de 2014 (#4CAF50, #F44336...) a sus equivalentes
   modernos. Los matices .lighten-N / .darken-N son selectores compuestos
   (0,2,0) de Materialize y siguen ganando: no cambian. */
.teal   { background-color: var(--mp-primary) !important; }
.green  { background-color: var(--mp-success) !important; }
.red    { background-color: var(--mp-danger) !important; }
.orange { background-color: var(--mp-warning) !important; }
.blue   { background-color: var(--mp-info) !important; }
.purple { background-color: var(--mp-purple) !important; }
.amber  { background-color: var(--mp-warning) !important; }

.red-text    { color: var(--mp-danger) !important; }
.green-text  { color: var(--mp-success) !important; }
.blue-text   { color: var(--mp-info) !important; }
.orange-text { color: var(--mp-warning) !important; }
.purple-text { color: var(--mp-purple) !important; }
.amber-text  { color: var(--mp-warning) !important; }
.grey-text   { color: var(--mp-text-muted) !important; }
.black-text  { color: var(--mp-text) !important; }