/* ============================================================
   Estilos del Sistema MD — extraído de Sistema_MD.html (Paso 1 modularización)
   Contenido idéntico al bloque <style> original (solo relocalizado).
   ============================================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f5f5;
        }

        /* Campo con botón de escáner (Serie · SN · MAC) */
        .scan-wrap { display: flex; gap: 6px; align-items: stretch; }
        .scan-wrap input { flex: 1; min-width: 0; }
        .scan-btn { flex: 0 0 auto; border: 1px solid #d9a900; background: #fbf3d5; color: #171717; border-radius: 8px; padding: 0 11px; font-size: 1.05rem; cursor: pointer; line-height: 1; }
        .scan-btn:hover { background: #f4e6a8; }

        /* Barra con el botón de "Pantalla completa" de los dashboards */
        .dash-fullbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
        /* Al entrar en pantalla completa: fondo claro + scroll (si no, sale negro por defecto) */
        .dash-fs:fullscreen { background: #f5f5f5; overflow: auto; padding: 18px; }
        .dash-fs:-webkit-full-screen { background: #f5f5f5; overflow: auto; padding: 18px; }

        /* Header */
        .header {
            background: linear-gradient(90deg, #080808 0%, #241d02 100%);
            color: white;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .header h1 {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-avatar {
            width: 35px;
            height: 35px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #171717;
            font-weight: bold;
            flex: none;
        }

        /* Menú de usuario (profesional, arriba a la derecha) */
        .user-menu { position: relative; }
        .user-chip {
            display: flex; align-items: center; justify-content: center;
            background: transparent; border: 2px solid rgba(255,255,255,.55);
            padding: 2px; border-radius: 50%; cursor: pointer; color: #fff;
            transition: border-color .15s, box-shadow .15s;
        }
        .user-chip:hover { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
        .user-dropdown {
            position: absolute; right: 0; top: calc(100% + 8px);
            background: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.22);
            width: 320px; padding: 8px; display: none; z-index: 500;
        }
        .user-dropdown.open { display: block; }
        .dd-section-label { font-size: .72rem; font-weight: 700; color: #5f6a72; padding: 8px 12px 4px; letter-spacing: .02em; }
        .dd-account-card {
            display: flex; align-items: center; gap: 12px;
            padding: 12px; margin: 2px 4px 4px; border-radius: 14px;
            border: 2px solid #171717; background: #f3eddd;
        }
        .dd-account-avatar {
            width: 46px; height: 46px; border-radius: 50%; flex: none;
            background: linear-gradient(135deg,#171717,#d9a900); color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 1.05rem;
        }
        .dd-account-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
        .dd-account-name { font-weight: 700; font-size: .95rem; color: #171717; line-height: 1.25; }
        .dd-account-role { font-size: .82rem; color: #5f6a72; }
        .dd-account-sub { font-size: .78rem; color: #9aabbd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .dd-check { color: #171717; font-weight: 800; flex: none; font-size: 1.05rem; align-self: center; }
        .dd-divider { height: 1px; background: #f3eddd; margin: 6px 8px; }
        .user-dropdown button {
            width: 100%; text-align: left; background: none; border: none;
            padding: 11px 14px; border-radius: 10px; cursor: pointer; font-size: .9rem;
            color: #33506e; display: flex; gap: 10px; align-items: center;
        }
        .user-dropdown button:hover { background: #f3eddd; }

        /* Role Selector */
        .role-selector {
            background: #fff;
            padding: 10px 30px;
            border-bottom: 1px solid #ddd;
            display: flex;
            gap: 10px;
        }

        .role-btn {
            padding: 8px 20px;
            border: 2px solid #171717;
            background: white;
            color: #171717;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
        }

        .role-btn.active {
            background: #171717;
            color: white;
        }

        .role-btn:hover {
            background: #d9a900;
            color: white;
        }

        /* Tabs */
        .tabs {
            background: white;
            padding: 0 30px;
            display: flex;
            border-bottom: 2px solid #e0e0e0;
        }

        .tab {
            padding: 15px 25px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            color: #666;
            font-weight: 500;
            transition: all 0.3s;
        }

        .tab:hover {
            color: #171717;
            background: #f8f9fa;
        }

        .tab.active,
        .tab-group.active > .tab {
            color: #171717;
            border-bottom-color: #171717;
            background: #e8eef5;
            font-weight: 600;
            box-shadow: inset 0 -3px 0 #171717, 0 2px 6px rgba(30,58,95,0.12);
        }

        /* feedback al presionar cualquier pestaña (clic registrado) */
        .tab:active { background: #dce4ee; }

        /* botón "ver historia completa" en cada fila de las listas */
        .btn-hist {
            background: #f3eddd;
            border: 1px solid #cdd9e8;
            border-radius: 6px;
            padding: 3px 9px;
            cursor: pointer;
            font-size: 0.95rem;
            line-height: 1;
        }
        .btn-hist:hover { background: #171717; border-color: #171717; }

        /* ───── Historia completa: resumen + línea de tiempo vertical ───── */
        .hist-summary { display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; background:#f7f9fc; border:1px solid #e6edf5; border-radius:12px; padding:14px 18px; margin-bottom:20px; }
        .hist-summary .s-item { display:flex; flex-direction:column; }
        .hist-summary .s-k { font-size:0.64rem; letter-spacing:.05em; color:#8a97a8; text-transform:uppercase; font-weight:700; }
        .hist-summary .s-v { color:#171717; font-weight:600; font-size:0.95rem; margin-top:2px; }
        .hist-timeline { position:relative; }
        .hist-step { position:relative; display:flex; gap:16px; }
        .hist-step::before { content:''; position:absolute; left:17px; top:34px; bottom:-2px; width:2px; background:#e1e8f0; }
        .hist-step:last-child::before { display:none; }
        .hist-marker { flex:none; width:36px; height:36px; border-radius:50%; background:#171717; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; z-index:1; box-shadow:0 0 0 4px #fff; }
        .hist-step.is-empty .hist-marker { background:#f3eddd; box-shadow:0 0 0 4px #fff; filter:grayscale(1); opacity:.65; }
        .hist-content { flex:1; min-width:0; padding-bottom:22px; }
        .hist-step-title { font-weight:700; color:#171717; font-size:0.97rem; margin:7px 0 10px; }
        .hist-step.is-empty .hist-step-title { color:#9aa3ad; font-weight:600; }
        .hist-empty { color:#9aa3ad; font-size:0.86rem; font-style:italic; }
        .hist-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:11px 26px; }
        .hist-field { display:flex; flex-direction:column; border-bottom:1px solid #f0f3f7; padding-bottom:7px; }
        .hist-k { font-size:0.64rem; letter-spacing:.05em; color:#8a97a8; text-transform:uppercase; font-weight:700; }
        .hist-v { color:#171717; font-size:0.9rem; margin-top:3px; word-break:break-word; }

        /* impresión del reporte: oculta menú y botones, deja solo el contenido */
        @media print {
            .tabs, #_sqlbtn, .btn-hist, #vistaTecnico { display: none !important; }
            .content { padding: 0 !important; }
            .col-filter-btn, .ms-panel { display: none !important; }
        }

        /* tarjeta de inventario (Equipos / Materiales) marcada cuando su lista está abierta */
        .inv-card-active {
            outline: 2px solid #171717;
            box-shadow: 0 4px 14px rgba(30,58,95,0.2) !important;
        }

        /* ── Tarjetas-resumen del Almacén MD (Equipos / Materiales) ── */
        .inv-resumen { transition: box-shadow .15s, transform .15s; }
        .inv-resumen:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); transform: translateY(-1px); }
        .inv-res-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
        .inv-res-tit { display: flex; flex-direction: column; font-weight: 700; color: #171717; font-size: 1rem; }
        .inv-res-sub { font-weight: 400; color: #8a8f96; font-size: .78rem; margin-top: 2px; }
        .inv-res-ver { flex: 0 0 auto; color: #171717; font-size: .74rem; font-weight: 600; background: #f3edd6;
            border: 1px solid #ece2be; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
        .inv-resumen:hover .inv-res-ver { background: #efbd12; border-color: #efbd12; }
        .inv-res-num { font-size: 2.4rem; font-weight: 800; color: #171717; line-height: 1.05; margin: 8px 0 2px; }
        .inv-res-val { color: #1e7a34; font-weight: 700; font-size: .9rem; margin-top: 4px; }

        /* Desglose en mini-recuadros dentro de la tarjeta-resumen */
        .inv-mini-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
        .inv-mini { display: flex; flex-direction: column; min-width: 76px; padding: 8px 11px;
            border: 1px solid #ece2be; border-radius: 10px; background: #fbf7e8; }
        .inv-mini .im-n { font-size: 1.15rem; font-weight: 800; color: #171717; line-height: 1; }
        .inv-mini .im-l { font-size: .74rem; font-weight: 700; color: #171717; margin-top: 4px; white-space: nowrap; }
        .inv-mini .im-s { font-size: .66rem; color: #9a8641; margin-top: 1px; white-space: nowrap; }
        .inv-mini .im-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
        .inv-mini.zero { background: #f7f7f7; border-color: #eee; }
        .inv-mini.zero .im-n { color: #c4c4c4; } .inv-mini.zero .im-l { color: #b7b7b7; } .inv-mini.zero .im-s { color: #c9c9c9; }

        /* Buscador global de cada lista (compu): busca en cualquier dato de la fila */
        .lista-buscar { border: 1px solid #d7dbe2; border-radius: 8px; padding: 6px 11px; font-size: .85rem; width: 190px; color: #171717; }
        .lista-buscar::placeholder { color: #9aa2ac; }
        .lista-buscar:focus { outline: none; border-color: #171717; box-shadow: 0 0 0 2px rgba(23,23,23,.08); }

        /* ── Vista previa inteligente de Boletas ── */
        .prev-resumen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
        .prev-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e3e6ea; border-radius: 999px;
            padding: 4px 12px; font-size: .82rem; font-weight: 600; color: #333; background: #fff; }
        .prev-chip .dot { width: 9px; height: 9px; border-radius: 50%; }
        .prev-tabla { border-collapse: collapse; font-size: .82rem; white-space: nowrap; width: 100%; }
        .prev-tabla th { position: sticky; top: 0; background: #171717; color: #fff; padding: 6px 9px; text-align: left; font-weight: 600; }
        .prev-tabla td { padding: 4px 8px; border-bottom: 1px solid #f3eddd; }
        .prev-tabla tr.r-error { background: #fdeceb; }
        .prev-tabla tr.r-dup { background: #fff4e5; }
        .prev-tabla tr.r-rei { background: #fff9e0; }
        .prev-tabla tr.r-bloq { background: #f1f2f4; }
        .prev-tabla tr.r-off { opacity: .45; }
        .prev-tabla tr.r-off td:not(.prev-estado) { text-decoration: line-through; }
        .prev-tabla td.cell-bad input { border: 1.5px solid #e74c3c; background: #fff; border-radius: 6px; padding: 3px 6px; font-size: .8rem; width: 118px; }
        .prev-tabla td.cell-bad input:focus { outline: none; border-color: #171717; }
        .prev-estado { font-weight: 700; font-size: .76rem; line-height: 1.2; white-space: normal; max-width: 300px; vertical-align: top; }
        .prev-sub { display: block; margin-top: 3px; font-size: .68rem; font-weight: 400; color: #7a8089; line-height: 1.3; white-space: normal; }
        .prev-x { cursor: pointer; color: #c0392b; font-weight: 800; border: none; background: none; font-size: 1rem; padding: 0 4px; }
        .prev-x:hover { color: #7a1f1f; }

        /* ── Pestaña Añadir: portada de carga (arrastrar / clic) ── */
        .add-intro { color: #556; font-size: .92rem; line-height: 1.55; max-width: 780px; margin: 0 0 16px; }
        .add-intro strong { color: #171717; }
        .add-dup-hint { display: flex; align-items: center; gap: 8px; background: #f3edd6; border: 1px solid #ece2be;
            color: #7a6a2f; border-radius: 10px; padding: 9px 14px; font-size: .86rem; margin: 0 0 20px; }
        .add-dup-hint strong { color: #5c4f22; }
        .add-tiles { display: flex; gap: 16px; flex-wrap: wrap; }
        .add-tile { flex: 1; min-width: 240px; display: flex; flex-direction: column; align-items: center; text-align: center;
            gap: 5px; padding: 26px 20px; border: 2px dashed #d7dbe2; border-radius: 14px; background: #fafbfc;
            cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
        .add-tile:hover { border-color: #171717; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
        .add-tile.dz-over { border-style: solid; border-color: #efbd12; background: #fffbe9; box-shadow: 0 6px 20px rgba(239,189,18,.28); transform: translateY(-2px); }
        .add-tile .add-ic { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
            background: #171717; color: #efbd12; margin-bottom: 4px; }
        .add-tile .add-ic svg { width: 26px; height: 26px; }
        .add-tile .add-t { font-weight: 800; color: #171717; font-size: 1.05rem; }
        .add-tile .add-s { color: #66727f; font-size: .82rem; }
        .add-tile .add-hint { margin-top: 8px; padding-top: 8px; width: 100%; border-top: 1px solid #f3eddd;
            font-size: .74rem; color: #98a2ad; }
        /* "Revisar duplicados" va más sobria (es utilitaria, no carga datos) */
        .add-tile.util { background: #fff; border-style: solid; border-color: #e6e9ee; }
        .add-tile.util .add-ic { background: #f3eddd; color: #5f6a72; }

        /* Menús desplegables del navegador (Boletas, Auxiliares) */
        .tab-group { position: relative; }
        .tab-group .caret { font-size: 0.7rem; margin-left: 3px; }
        .aux-badge { background: #c0392b; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 0.72rem; font-weight: 800; margin-left: 4px; line-height: 1.5; min-width: 18px; text-align: center; }
        /* Toasts: avisos flotantes del sistema (reemplazan el alert() del navegador) */
        #toastCont { position: fixed; top: 18px; right: 18px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 36px)); pointer-events: none; }
        .md-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; background: #fff; color: #171717; border-radius: 12px; padding: 12px 12px 12px 14px; box-shadow: 0 10px 34px rgba(5, 22, 41, 0.22); border-left: 5px solid #c8871a; font-size: 0.9rem; line-height: 1.4; opacity: 0; transform: translateX(24px); transition: opacity .22s ease, transform .22s ease; }
        .md-toast.in { opacity: 1; transform: translateX(0); }
        .md-toast.out { opacity: 0; transform: translateX(24px); }
        .md-toast.ok { border-left-color: #1e7a34; }
        .md-toast.warn { border-left-color: #c0392b; }
        .md-toast.info { border-left-color: #c8871a; }
        .md-toast-ico { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
        .md-toast.ok .md-toast-ico { background: #1e7a34; }
        .md-toast.warn .md-toast-ico { background: #c0392b; }
        .md-toast.info .md-toast-ico { background: #c8871a; }
        .md-toast-msg { flex: 1; white-space: pre-line; word-break: break-word; }
        .md-toast-x { flex: 0 0 auto; background: none; border: none; color: #9aa6b4; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 2px; }
        .md-toast-x:hover { color: #556271; }
        /* Confirmación propia (reemplaza el confirm() del navegador) */
        .md-confirm-ov { position: fixed; inset: 0; z-index: 100001; background: rgba(5, 22, 41, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .16s ease; }
        .md-confirm-ov.in { opacity: 1; }
        .md-confirm-ov.out { opacity: 0; }
        .md-confirm { background: #fff; border-radius: 14px; max-width: 460px; width: 100%; box-shadow: 0 18px 50px rgba(5, 22, 41, 0.35); padding: 22px 24px 18px; transform: translateY(10px) scale(.98); transition: transform .16s ease; }
        .md-confirm-ov.in .md-confirm { transform: translateY(0) scale(1); }
        .md-confirm-msg { color: #171717; font-size: 0.98rem; line-height: 1.5; white-space: pre-line; word-break: break-word; margin-bottom: 18px; }
        .md-confirm-acts { display: flex; justify-content: flex-end; gap: 10px; }
        .md-confirm-acts .btn { padding: 8px 18px; }
        /* mientras hay un menú abierto, la pestaña activa (ej. Inicio) se ve neutral para que solo
           resalte el menú abierto y no dos pestañas a la vez */
        .tabs.menu-abierto .tab.active,
        .tabs.menu-abierto .tab-group.active:not(.abierto) > .tab {
            background: transparent;
            color: #666;
            border-bottom-color: transparent;
            box-shadow: none;
            font-weight: 500;
        }

        /* cuando el desplegable está abierto, la pestaña se marca igual que la activa (sombra + línea azul) */
        .tab-group.abierto > .tab {
            background: #e8eef5;
            color: #171717;
            border-bottom-color: #171717;
            box-shadow: inset 0 -3px 0 #171717, 0 2px 6px rgba(30,58,95,0.12);
        }
        .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            border: 1px solid #e0e0e0;
            box-shadow: 0 6px 18px rgba(0,0,0,0.14);
            border-radius: 0 0 8px 8px;
            min-width: 230px;
            z-index: 1000;
        }
        .tab-group.abierto .dropdown-menu { display: block; } /* click en el menú lo abre; click de nuevo (o afuera/elegir) lo cierra */
        .dropdown-item {
            padding: 12px 18px;
            cursor: pointer;
            color: #444;
            font-size: 0.92rem;
            white-space: nowrap;
            border-bottom: 1px solid #f2f2f2;
        }
        .dropdown-item:last-child { border-bottom: none; }
        .dropdown-item:hover { background: #171717; color: #fff; }

        /* Content */
        .content {
            padding: 30px;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Cards */
        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            padding: 20px;
            margin-bottom: 20px;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 1.2rem;
            color: #333;
            font-weight: 600;
        }

        /* Filters */
        .filters {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-group label {
            color: #666;
            font-size: 0.9rem;
        }

        select, input[type="text"], input[type="date"] {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 0.9rem;
        }

        select:focus, input:focus {
            outline: none;
            border-color: #171717;
        }

        /* Table */
        .table-container {
            overflow-x: auto;
        }
        /* Barra de scroll horizontal ARRIBA de la tabla (sincronizada con la de abajo). Solo en tablas anchas: Equipos y Movimientos. */
        .top-scroll { overflow-x: auto; overflow-y: hidden; margin-bottom: 4px; }
        .top-scroll-inner { height: 1px; }
        /* "solo-top-scroll": deja SOLO la barra de arriba (oculta la barra nativa de abajo). Las 4 listas de Boletas. */
        .table-container.solo-top-scroll { scrollbar-width: none; }            /* Firefox */
        .table-container.solo-top-scroll::-webkit-scrollbar { display: none; } /* Chrome / Edge / Safari */

        /* Filtros por columna (estilo Excel: flecha en el título) */
        th.th-filter {
            position: relative;
            overflow: visible;
        }

        .th-flex {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .col-filter-btn {
            width: 19px;
            height: 19px;
            border: 1px solid #aaa;
            background: white;
            border-radius: 3px;
            font-size: 0.5rem;
            color: #555;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 0;
        }

        .col-filter-btn:hover {
            border-color: #171717;
            color: #171717;
        }

        .col-filter-btn.active {
            background: #171717;
            border-color: #171717;
            color: white;
        }

        /* Panel del filtro (como el menú de Excel) — flota sobre la página, no se recorta */
        .ms-panel {
            display: none;
            position: fixed;
            width: max-content;
            min-width: 170px;
            max-width: 230px;
            max-height: calc(100vh - 16px);
            overflow-y: auto;
            background: white;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
            padding: 8px;
            z-index: 2000;
            text-align: left;
        }

        .ms-panel.open {
            display: block;
        }

        .ms-sort {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin-bottom: 6px;
            border-bottom: 1px solid #eee;
            padding-bottom: 6px;
        }
        .ms-sortbtn {
            text-align: left;
            background: #fff;
            border: none;
            padding: 6px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            color: #171717;
            cursor: pointer;
            font-weight: normal;
            text-transform: none;
        }
        .ms-sortbtn:hover { background: #f3eddd; }

        .ms-search {
            width: 100%;
            padding: 6px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-bottom: 6px;
            font-weight: normal;
            text-transform: none;
        }

        .ms-options {
            max-height: 180px;
            overflow-y: auto;
            border-top: 1px solid #eee;
            padding-top: 4px;
        }

        .ms-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: normal;
            text-transform: none;
            color: #333;
            white-space: nowrap;
        }

        .ms-option:hover {
            background: #f0f4f8;
        }

        .ms-option input {
            accent-color: #171717;
            cursor: pointer;
        }

        .ms-option.select-all {
            font-weight: 600;
        }

        /* Botones Aceptar / Cancelar del filtro (como Excel) */
        .ms-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #eee;
        }

        .ms-footer button {
            padding: 5px 14px;
            border-radius: 4px;
            font-size: 0.8rem;
            cursor: pointer;
            font-weight: normal;
            text-transform: none;
        }

        .ms-ok {
            background: #171717;
            color: white;
            border: 1px solid #171717;
        }

        .ms-ok:disabled {
            background: #b9c5d0;
            border-color: #b9c5d0;
            cursor: not-allowed;
        }

        .ms-cancel {
            background: white;
            color: #333;
            border: 1px solid #ccc;
        }

        .ms-cancel:hover {
            background: #f0f4f8;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            background: #f8f9fa;
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
            color: #333;
            border-bottom: 2px solid #e0e0e0;
            font-size: 0.85rem;
            text-transform: uppercase;
        }

        td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            color: #555;
            font-size: 0.9rem;
        }

        /* fila de TOTALES (fondo azul, letras blancas que sí se distinguen) */
        .fila-total td {
            background: #171717 !important;
            color: #fff !important;
            font-weight: 700;
        }
        .fila-total:hover td { background: #171717 !important; }

        tr:hover {
            background: #f8f9fa;
            cursor: pointer;
        }

        /* Status Badges */
        .status {
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .status.sin-asignar {
            background: #fff3cd;
            color: #856404;
        }

        .status.asignada {
            background: #cce5ff;
            color: #004085;
        }

        .status.contactado {
            background: #e7d6f5;
            color: #5a2d82;
        }

        .status.en-ejecucion {
            background: #d1ecf1;
            color: #0c5460;
        }

        .status.ejecutada {
            background: #d4edda;
            color: #155724;
        }

        .status.rechazada {
            background: #f8d7da;
            color: #721c24;
        }

        .status.reprogramada {
            background: #e2e3e5;
            color: #383d41;
        }

        .status.supervisada {
            background: #b8e6d0;
            color: #0f5132;
        }

        .status.aceptada {
            background: #dcedc8;
            color: #33691e;
        }

        .status.por-reasignar {
            background: #ffccbc;
            color: #bf360c;
        }

        .status.observada {
            background: #ffe0b3;
            color: #7a4f01;
        }

        /* Formulario de Supervisión */
        .sup-section {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 15px;
            overflow: hidden;
        }

        .sup-section-header {
            background: #f0f4f8;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .sup-section-header h4 {
            color: #171717;
            font-size: 0.95rem;
        }

        .sup-nota {
            font-size: 0.78rem;
            color: #666;
            font-style: italic;
        }

        .check-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 15px;
            border-top: 1px solid #f0f0f0;
            font-size: 0.9rem;
            color: #333;
        }

        .bo-group {
            display: flex;
            gap: 6px;
        }

        .bo-btn {
            padding: 4px 14px;
            border-radius: 15px;
            border: 1px solid #ccc;
            background: white;
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.2s;
        }

        .bo-btn.bien.selected {
            background: #d4edda;
            color: #155724;
            border-color: #28a745;
            font-weight: 600;
        }

        .bo-btn.obs.selected {
            background: #f8d7da;
            color: #721c24;
            border-color: #dc3545;
            font-weight: 600;
        }

        .sup-motivo {
            padding: 10px 15px;
            border-top: 1px solid #f0f0f0;
            background: #fff8ec;
        }

        /* Prioridad Badges */
        .prioridad {
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .prioridad.alta {
            background: #f8d7da;
            color: #721c24;
        }

        .prioridad.media {
            background: #fff3cd;
            color: #856404;
        }

        .prioridad.baja {
            background: #d4edda;
            color: #155724;
        }

        .prioridad.prioritaria {
            background: #c0392b;
            color: #fff;
        }

        /* Mapa de Supervisión */
        .mapa-toolbar {
            display: flex; gap: 18px; align-items: center;
            padding: 12px 18px; border-bottom: 1px solid #e0e0e0;
            flex-wrap: wrap; font-size: 0.88rem;
        }
        .mapa-leg { display: flex; align-items: center; gap: 6px; }
        .mapa-leg .dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px #bbb; }
        .mapa-leg .sq { width: 12px; height: 12px; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px #bbb; }
        .mapa-chk { display: flex; align-items: center; gap: 6px; cursor: pointer; }
        .mapa-chk select { padding: 4px 8px; border-radius: 6px; border: 1px solid #ccc; }
        .mapa-wrap { display: flex; height: 560px; }
        #mapaSup, #mapaInsp { flex: 1; height: 100%; }
        .mapa-panel { width: 330px; flex-shrink: 0; background: #1c1c1e; color: #fff; overflow-y: auto; }
        .mapa-panel.vacio { display: flex; align-items: center; justify-content: center; text-align: center; color: #888; padding: 30px; }
        .mapa-ph { background: #111; padding: 22px 22px 18px; }
        .mapa-ph .num { font-size: 26px; font-weight: 700; }
        .mapa-ph .nm { font-size: 16px; margin-top: 5px; line-height: 1.3; }
        .mapa-tag { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 14px; font-size: 11px; font-weight: 600; color: #fff; }
        .mapa-f { padding: 11px 22px; border-bottom: 1px solid #2c2c2e; }
        .mapa-f .l { font-size: 11px; letter-spacing: .4px; color: #8e8e93; text-transform: uppercase; }
        .mapa-f .v { font-size: 15px; margin-top: 2px; }
        .mapa-act { padding: 18px 22px; }
        .mapa-act .btn { flex: 1; white-space: nowrap; }

        /* Mapa estilo Google Maps: el mapa ocupa TODO y los controles + la ficha flotan a la izquierda */
        .mapa-layout { position: relative; height: 640px; }
        .mapa-layout #mapaSup, .mapa-layout #mapaInsp, .mapa-layout #mapaCuad0 { position: absolute; inset: 0; width: 100%; height: 100%; }
        .mapa-toggle { position: absolute; top: 12px; left: 12px; z-index: 1001; background: #171717; color: #fff; border: none; border-radius: 8px; padding: 7px 12px; font-size: 0.82rem; font-weight: 700; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.35); }
        .mapa-float { position: absolute; top: 10px; left: 10px; width: 330px; max-height: calc(100% - 20px); z-index: 1000; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
        .mapa-float.collapsed { display: none; }
        .mapa-float-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(0,0,0,.28); }
        .mapa-float .mapa-sidebar-inner { padding: 14px; }
        .mapa-float .mapa-panel { width: 100%; border-radius: 12px; box-shadow: 0 2px 14px rgba(0,0,0,.28); flex-shrink: 0; }
        .mapa-float .mapa-panel.vacio { display: none; }   /* la ficha solo aparece al tocar un pin */
        .mapa-fbtns { display: flex; gap: 8px; }
        .mapa-fbtn { border: 0; border-radius: 10px; padding: 9px 14px; background: #fff; color: #171717; font-weight: 700; font-size: 0.84rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
        .mapa-fbtn.on { background: #171717; color: #fff; }
        .mapa-toolbar-side { flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border-bottom: none; }
        .mapa-toolbar-side .mapa-chk { justify-content: space-between; }
        .mapa-toolbar-side select { flex: 1; margin-left: 6px; min-width: 0; }
        .mapa-leg-row { display: flex; gap: 14px; }

        /* Estados de cierre */
        .status.manejada { background: #cfe2ff; color: #084298; }
        .status.cerrada { background: #495057; color: #fff; }
        /* Manejada S/E = manejada en NGOSS pero el técnico aún no ejecutó: aviso urgente en rojo */
        .status.manejada-se { background: #c0392b; color: #fff; }
        .status.programada { background: #e0d4f7; color: #4a2c82; }
        .status.terminada { background: #ffe8cc; color: #8a4b08; }
        .status.espera-auth { background: #fff3cd; color: #8a6100; }
        .status.autorizada { background: #d4edda; color: #1e6b34; }

        /* Grilla de 14 fotos (paso final del formulario) */
        .fotos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .foto-item { border: 2px dashed #c9c9c9; border-radius: 8px; padding: 12px; text-align: center; cursor: pointer; font-size: 0.82rem; color: #555; transition: all .15s; }
        .foto-item:hover { border-color: #171717; }
        .foto-item.subida { border-style: solid; border-color: #34a853; background: #f0fff4; color: #155724; font-weight: 600; }
        .foto-item .foto-num { font-weight: 700; display: block; margin-bottom: 4px; }

        /* Inventario */
        .inv-subtabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
        .inv-subtab { padding: 8px 16px; border-radius: 8px; border: 1px solid #d0d0d0; background: #fff; cursor: pointer; font-size: 0.9rem; font-weight: 500; }
        .inv-subtab.active { background: #171717; color: #fff; border-color: #171717; }
        .inv-kpi { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
        .inv-card { background: #f8f9fb; border: 1px solid #e6e6e6; border-radius: 10px; padding: 14px 18px; min-width: 160px; }
        .inv-card .lbl { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: .4px; }
        .inv-card .val { font-size: 1.4rem; font-weight: 700; color: #171717; margin-top: 3px; }
        .inv-val { font-weight: 600; color: #1e7a34; }
        .inv-bajo { color: #b00020; font-weight: 600; }
        .inv-descuadre { background: #fff3cd; }
        .inv-input-fis { width: 70px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 6px; }
        .inv-alert { background: #fde8e8; color: #8a1c1c; border: 1px solid #f5b5b5; border-radius: 8px; padding: 10px 14px; font-size: 0.88rem; margin-bottom: 12px; }
        .inv-card .sub { font-size: 0.78rem; color: #555; margin-top: 4px; font-weight: 500; }
        .inv-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
        .inv-toolbar select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; }
        .inv-sel-list { border: 1px solid #e6e6e6; border-radius: 8px; max-height: 260px; overflow-y: auto; margin-top: 6px; }
        .inv-sel-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }
        .inv-sel-row:last-child { border-bottom: none; }
        .inv-sel-row:hover { background: #f7f9fc; }
        .inv-sel-row .nm { flex: 1; font-size: 0.9rem; }
        .inv-sel-row .hint { color: #999; font-size: 0.76rem; }
        .inv-sel-qty, .inv-sel-precio, .inv-sel-total { width: 85px; padding: 5px 8px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
        .inv-sel-head { font-weight: 700; color: #8a97a8; font-size: 0.7rem; text-transform: uppercase; background: #fafbfc; }
        .inv-sel-head .col { width: 85px; text-align: center; }

        /* Pasos de cierre (Manejada → Cerrada) */
        .cierre-paso { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e0e0e0; border-radius: 8px; margin-top: 10px; }
        .cierre-paso.hecho { background: #f0fff4; border-color: #b7e4c7; }
        .cierre-num { width: 28px; height: 28px; border-radius: 50%; background: #171717; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
        .cierre-paso.hecho .cierre-num { background: #34a853; }
        .cierre-info { flex: 1; font-size: 0.9rem; }
        .cierre-meta { color: #155724; font-size: 0.8rem; margin-top: 3px; }
        .cierre-bloq { color: #999; font-size: 0.85rem; }

        /* Buttons */
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: #171717;
            color: white;
        }

        .btn-primary:hover {
            background: #d9a900;
        }

        .btn-success {
            background: #28a745;
            color: white;
        }

        .btn-danger {
            background: #dc3545;
            color: white;
        }

        .btn-warning {
            background: #ffc107;
            color: #333;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        /* Botones-ícono (Lucide inline) para las acciones del Almacén de Equipos: solo ícono + tooltip nativo (title) */
        .eq-iconbtns { display: flex; gap: 8px; align-items: center; }
        .eq-iconbtn {
            width: 38px; height: 38px;
            display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid #d5dbe3; border-radius: 9px;
            background: #fff; color: #45525f; cursor: pointer;
            transition: background .15s, color .15s, border-color .15s;
        }
        .eq-iconbtn:hover { background: #f3eddd; color: #171717; border-color: #b7c2d0; }
        .eq-iconbtn:active { transform: translateY(1px); }
        .eq-iconbtn.primary { background: #171717; color: #fff; border-color: #171717; }
        .eq-iconbtn.primary:hover { background: #171717; border-color: #171717; color: #fff; }
        .eq-iconbtn svg { width: 19px; height: 19px; }

        /* Selector de columnas (mostrar/ocultar) — panel flotante estilo "Elegir columnas" (Power Query) */
        .colsel-panel { background: #fff; border: 1px solid #cfd8e3; border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.18); padding: 12px; width: 250px; z-index: 3000; }
        .colsel-panel .colsel-title { font-weight: 700; color: #171717; font-size: 0.92rem; margin: 0 2px 8px; }
        .colsel-panel .colsel-search { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.85rem; margin-bottom: 8px; }
        .colsel-panel .colsel-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; border: 1px solid #e6ebf1; border-radius: 8px; padding: 4px; }
        .colsel-panel .colsel-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 0.86rem; color: #5f6a72; }
        .colsel-panel .colsel-opt:hover { background: #f3eddd; }
        .colsel-panel .colsel-opt input { cursor: pointer; }
        .colsel-panel .colsel-all-opt { border-bottom: 1px solid #f3eddd; margin-bottom: 2px; padding-bottom: 6px; font-weight: 600; color: #171717; }
        .colsel-panel .colsel-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
        .colsel-panel .colsel-ok, .colsel-panel .colsel-cancel { padding: 7px 16px; border-radius: 7px; font-weight: 600; cursor: pointer; font-size: 0.85rem; border: 1px solid transparent; }
        .colsel-panel .colsel-ok { background: #1e7a34; color: #fff; }
        .colsel-panel .colsel-ok:hover { background: #196b2d; }
        .colsel-panel .colsel-cancel { background: #fff; color: #45525f; border-color: #d5dbe3; }
        .colsel-panel .colsel-cancel:hover { background: #f2f5f9; }

        /* Modal */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: white;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h3 {
            color: #333;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #999;
        }

        /* Botón "Ver histórico" dentro de los formularios de trabajo (compacto, cabe en el header del modal). */
        .btn-verhist {
            padding: 6px 12px;
            font-size: 0.82rem;
            font-weight: 700;
            white-space: nowrap;
            border-radius: 8px;
        }

        .modal-body {
            padding: 20px;
        }

        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        /* Ventana de INFORMACIÓN (Almacén de Equipos): más grande, rectangular, fondo bien oscurecido + aparición "pop" */
        .modal-info { background: rgba(6, 12, 22, 0.66); }
        .modal-info .modal { max-width: 860px; animation: infoPop .2s cubic-bezier(.2,.8,.3,1); }
        @keyframes infoPop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
        .modal-info .info-lead { font-size: 1rem; color: #5f6a72; margin: 0 0 4px; }
        .modal-info .info-sec { font-weight: 800; color: #171717; font-size: 0.95rem; text-transform: uppercase; letter-spacing: .3px; margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #e6ebf1; }
        .modal-info .info-btnrow { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid #f0f3f7; }
        .modal-info .info-btnrow:last-child { border-bottom: 0; }
        .modal-info .info-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d5dbe3; background: #fff; color: #45525f; }
        .modal-info .info-ic.primary { background: #171717; color: #fff; border-color: #171717; }
        .modal-info .info-ic svg { width: 19px; height: 19px; }
        .modal-info .info-btxt { font-size: 0.92rem; color: #5f6a72; }
        .modal-info .info-btxt b { color: #171717; }
        .modal-info .info-steps { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0; }
        .modal-info .info-step { flex: 1; min-width: 180px; background: #f4f7fb; border: 1px solid #e6ebf1; border-radius: 10px; padding: 12px 14px; }
        .modal-info .info-step .n { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #171717; color: #fff; align-items: center; justify-content: center; font-weight: 700; font-size: 0.82rem; margin-bottom: 6px; }
        .modal-info .info-estados { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
        .modal-info .info-estado { display: inline-flex; align-items: center; gap: 7px; background: #f6f8fb; border: 1px solid #e6ebf1; border-radius: 999px; padding: 5px 12px; font-size: 0.86rem; color: #5f6a72; }
        .modal-info .info-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

        /* Form */
        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 0.95rem;
        }

        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        /* Radio/Checkbox */
        .radio-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .radio-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 15px;
            border: 2px solid #eee;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .radio-option:hover {
            border-color: #171717;
            background: #f8f9fa;
        }

        .radio-option.selected {
            border-color: #171717;
            background: #e8f0f7;
        }

        /* Boleta Detail */
        .boleta-detail {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .boleta-detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .boleta-detail-item {
            display: flex;
            flex-direction: column;
        }

        .boleta-detail-item span:first-child {
            font-size: 0.8rem;
            color: #666;
        }

        .boleta-detail-item span:last-child {
            font-weight: 500;
            color: #333;
        }

        /* Action Buttons */
        .action-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
            padding: 20px 0;
        }

        .action-btn {
            padding: 20px 30px;
            border: 2px solid #eee;
            border-radius: 10px;
            background: white;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s;
            min-width: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .action-btn.completar {
            border-color: #28a745;
            color: #28a745;
        }

        .action-btn.completar:hover {
            background: #28a745;
            color: white;
        }

        .action-btn.rechazar {
            border-color: #dc3545;
            color: #dc3545;
        }

        .action-btn.rechazar:hover {
            background: #dc3545;
            color: white;
        }

        /* Botón elegido (queda pintado, igual que el hover) */
        .action-btn.completar.selected { background: #28a745; color: white; }
        .action-btn.rechazar.selected { background: #dc3545; color: white; }

        .action-btn.reprogramar {
            border-color: #ffc107;
            color: #856404;
        }

        .action-btn.reprogramar:hover {
            background: #ffc107;
            color: #333;
        }

        .action-btn.posiblerechazo {
            border-color: #e08600;
            color: #8a5200;
        }

        .action-btn.posiblerechazo:hover {
            background: #e08600;
            color: white;
        }

        .action-btn-icon {
            font-size: 2rem;
            margin-bottom: 5px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .action-btn-text {
            font-weight: 500;
        }

        /* Steps */
        .steps {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }

        .step {
            display: flex;
            align-items: center;
        }

        .step-circle {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: #e0e0e0;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

        .step-circle.active {
            background: #171717;
            color: white;
        }

        .step-circle.completed {
            background: #28a745;
            color: white;
        }

        .step-line {
            width: 60px;
            height: 3px;
            background: #e0e0e0;
            margin: 0 10px;
        }

        .step-line.completed {
            background: #28a745;
        }

        /* Number Input */
        .number-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .number-input-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .number-input-group label {
            font-size: 0.9rem;
            color: #333;
        }

        .number-input-group input {
            width: 70px;
            text-align: center;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        /* Celdas de material (instalación/mensajero): label flexible a la izquierda y un bloque
           de controles de ANCHO FIJO a la derecha, para que input y switch queden SIEMPRE alineados. */
        .mat-cell { align-items: center; }
        .mat-cell > label { flex: 1 1 auto; padding-right: 12px; line-height: 1.3; }
        .mat-controls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
        .mat-controls input { width: 60px; margin: 0; flex: 0 0 auto; }
        .mat-og { margin-top: 0 !important; flex: 0 0 auto; }
        .mat-og span { min-width: 48px; text-align: center; }

        /* Quick Select */
        .quick-select {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .quick-select-btn {
            width: 45px;
            height: 45px;
            border: 2px solid #ddd;
            background: white;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }

        .quick-select-btn:hover {
            border-color: #171717;
        }

        .quick-select-btn.selected {
            background: #171717;
            color: white;
            border-color: #171717;
        }

        /* Cuadrilla Card */
        .cuadrilla-grid {
            display: grid;
            gap: 10px;
        }

        .cuadrilla-card {
            display: flex;
            align-items: center;
            padding: 15px;
            border: 2px solid #eee;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }

        /* Tabla de cuadrillas (solo en asignación de Instalación) */
        .cuadrilla-tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
        .cuadrilla-tabla th { padding: 8px 10px; background: #171717; color: #fff; font-size: 0.8rem; text-align: center; }
        .cuadrilla-tabla th:first-child { text-align: left; }
        tr.cuadrilla-card { display: table-row; padding: 0; border: none; border-radius: 0; cursor: pointer; }
        tr.cuadrilla-card td { padding: 9px 10px; border-bottom: 1px solid #eee; }
        tr.cuadrilla-card:hover td { background: #f5f8fc; }
        tr.cuadrilla-card.selected td { background: #bcd9f1; }
        tr.cuadrilla-card.selected td:first-child { box-shadow: inset 4px 0 0 #171717; }
        tr.cuadrilla-card.bloqueada { opacity: 0.6; cursor: not-allowed; }
        tr.cuadrilla-card.bloqueada:hover td { background: transparent; }

        .cuadrilla-card:hover {
            border-color: #171717;
            background: #f8f9fa;
        }

        .cuadrilla-card.selected {
            border-color: #171717;
            background: #bcd9f1;
        }

        /* Cuadrilla que avisó que no puede: visible pero bloqueada */
        .cuadrilla-card.bloqueada {
            opacity: 0.55;
            cursor: not-allowed;
            background: #f5f5f5;
        }

        .cuadrilla-card.bloqueada:hover {
            border-color: #eee;
            background: #f5f5f5;
        }

        .cuadrilla-nota {
            display: none;
            font-size: 0.8rem;
            color: #bf360c;
            margin-top: 3px;
        }

        .cuadrilla-radio {
            width: 20px;
            height: 20px;
            border: 2px solid #ddd;
            border-radius: 50%;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cuadrilla-card.selected .cuadrilla-radio {
            border-color: #171717;
        }

        .cuadrilla-card.selected .cuadrilla-radio::after {
            content: '';
            width: 10px;
            height: 10px;
            background: #171717;
            border-radius: 50%;
        }

        /* Hidden */
        .hidden {
            display: none !important;
        }

        /* Tecnico view adjustments */
        .tecnico-view .tabs {
            justify-content: flex-start;
        }

        /* =====================================================================
           RESPONSIVO MÓVIL (primera versión — 27 jun 2026)
           El MISMO sistema se adapta solo al entrar desde un teléfono (por ancho
           de pantalla). Es una base usable en pantalla chica; se irá refinando.
           ===================================================================== */
        @media (max-width: 820px) {
            html, body { max-width: 100%; overflow-x: hidden; }

            /* Encabezado */
            .header { padding: 12px 14px; }
            .header h1 { font-size: 1.15rem; }

            /* Selector de rol (solo Admin) y pestañas: se acomodan en varias filas */
            .role-selector { padding: 8px 12px; overflow-x: auto; }
            .role-btn { padding: 7px 14px; font-size: .85rem; white-space: nowrap; }
            .tabs { padding: 0 6px; flex-wrap: wrap; }
            .tab { padding: 11px 12px; font-size: .9rem; }

            /* Contenido y tarjetas */
            .content { padding: 14px 10px; }
            .card { padding: 16px 14px; }
            .card-header { flex-wrap: wrap; gap: 4px; }

            /* Tablas: scroll horizontal en vez de romper la pantalla */
            table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
            th, td { padding: 9px 10px; font-size: .85rem; }

            /* Grillas con columnas fijas → una sola columna en el teléfono */
            [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

            /* Modales casi a pantalla completa */
            .modal { width: 96%; max-width: none; max-height: 92vh; }
            .modal-header, .modal-footer { padding: 12px 14px; }
            .modal-body { padding: 14px; }
            .modal-footer { flex-wrap: wrap; }

            /* Formularios: 16px evita el zoom automático de iOS al tocar un campo */
            .form-group input, .form-group select, .form-group textarea { font-size: 16px; }
            .btn { padding: 12px 16px; }

            /* Menú de cuenta y desplegables del navegador */
            .user-dropdown { right: 6px; left: auto; max-width: 92vw; }
            .dropdown-menu { min-width: 200px; max-width: 90vw; }
        }

        @media (max-width: 480px) {
            .header h1 { font-size: 1.02rem; }
            .content { padding: 10px 7px; }
            .tab { padding: 10px 10px; font-size: .86rem; }
            th, td { padding: 8px 8px; font-size: .82rem; }
            .role-selector { gap: 6px; }
        }

/* ============================================================
   MENÚ LATERAL — pestañas en un bloque a la IZQUIERDA (override)
   Convierte la barra horizontal en una barra vertical oscura a la izquierda.
   Fácil de quitar: borrar este bloque para volver a la barra de arriba.
   ============================================================ */
#vistaEncargado, #vistaTecnico { display: flex; align-items: flex-start; }
.tabs {
    flex: 0 0 212px; width: 212px;
    flex-direction: column; align-items: stretch;
    align-self: flex-start; position: sticky; top: 0; height: 100vh; overflow: visible;
    padding: 12px 0; background: #171717;
    border-bottom: none; border-right: 1px solid #000;
}
.tabs .tab, .tabs .tab-group { width: 100%; }
.tab {
    border-bottom: none !important;
    color: #d7d2c2; padding: 12px 20px; border-radius: 0;
}
.tab:hover { background: rgba(239,189,18,.12); color: #fff; }
.tab.active,
.tab-group.active > .tab,
.tab-group.abierto > .tab {
    background: #efbd12 !important; color: #080808 !important;
    border-bottom-color: transparent !important; box-shadow: none !important; font-weight: 700;
}
.tabs.menu-abierto .tab.active,
.tabs.menu-abierto .tab-group.active:not(.abierto) > .tab {
    background: transparent !important; color: #d7d2c2 !important; box-shadow: none !important;
}
.dropdown-menu { top: 0; left: 100%; border-radius: 0 8px 8px 0; }
.content { flex: 1; min-width: 0; }

/* ============================================================
   APP-SHELL: logo arriba en la barra, cuenta + toggles de vista al pie.
   Oculta el título "MD Technology" y el selector de rol de arriba.
   ============================================================ */
/* Colapsa la barra superior pero deja renderable al botón de cuenta (que va fijo abajo) */
.header { height: 0; min-height: 0; padding: 0; margin: 0; border: none; overflow: visible; }
.header h1 { display: none; }

/* Logo al tope del menú lateral */
.side-logo { padding: 16px 16px 12px; display: flex; justify-content: center; align-items: center;
    border-bottom: 1px solid rgba(239,189,18,.20); margin-bottom: 8px; }
.side-logo img { max-width: 156px; max-height: 48px; height: auto; display: block; }

/* Espacio al pie del menú para que las últimas pestañas no queden bajo la cuenta/toggles fijos */
.tabs { padding-bottom: 132px; height: 100vh; }

/* Toggles de vista (Encargado/Técnico) — fijos al pie, DISIMULADOS */
#roleSelector { position: fixed; left: 0; bottom: 58px; width: 212px; margin: 0;
    padding: 8px 12px; background: #171717; border-top: 1px solid rgba(255,255,255,.06);
    border-right: 1px solid #000; z-index: 60; display: flex; gap: 6px; overflow: visible; }
#roleSelector .role-btn { font-size: .7rem; padding: 5px 8px; opacity: .6; background: transparent;
    color: #b9b3a4; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; }
#roleSelector .role-btn.active { opacity: 1; color: #efbd12; border-color: rgba(239,189,18,.5); background: rgba(239,189,18,.08); }

/* Botón de cuenta (avatar + menú) — fijo al pie del menú lateral */
#userMenu { position: fixed; left: 0; bottom: 0; width: 212px; margin: 0;
    padding: 10px 12px; background: #0e0e0e; border-top: 1px solid rgba(239,189,18,.20);
    border-right: 1px solid #000; z-index: 60; display: flex; align-items: center; }
/* El menú de la cuenta abre HACIA ARRIBA (está al pie) */
#userMenu .user-dropdown { top: auto; bottom: calc(100% + 8px); left: 10px; right: auto; }

/* ============================================================
   POLISH DEL MENÚ LATERAL (íconos, logo en cuadro blanco, subpestañas dentro, cuenta al pie)
   ============================================================ */
/* Íconos + texto alineados en cada pestaña */
.tabs .tab { display: flex; align-items: center; gap: 12px; font-size: .92rem; }
.tab-ic { width: 19px; height: 19px; flex: none; opacity: .92; }
.tabs .tab .caret { margin-left: auto; font-size: .68rem; opacity: .7; }

/* Logo en cuadro BLANCO con esquinas redondeadas */
.side-logo { padding: 16px 14px 14px; }
.side-logo img { background: #fff; border-radius: 14px; padding: 10px 16px; max-width: 100%; max-height: 54px;
    height: auto; display: block; box-shadow: 0 3px 10px rgba(0,0,0,.28); }

/* SUBPESTAÑAS DENTRO del lateral (acordeón), no volando a la derecha */
.tab-group .dropdown-menu {
    position: static; left: auto; top: auto; display: none;
    background: rgba(0,0,0,.32); border: none; box-shadow: none; border-radius: 0;
    min-width: 0; width: 100%; padding: 2px 0 6px;
}
.tab-group.abierto .dropdown-menu { display: block; }
.tabs .dropdown-item {
    color: #bbb4a3; padding: 9px 18px 9px 51px; border-bottom: none;
    font-size: .855rem; white-space: normal;
}
.tabs .dropdown-item:hover { background: rgba(239,189,18,.14); color: #fff; }
/* caret gira cuando el grupo está abierto */
.tab-group.abierto > .tab .caret { transform: rotate(180deg); }

/* ===== PIE DEL LATERAL: cuenta (avatar + nombre) profesional ===== */
#userMenu { padding: 12px; background: #0c0c0c; }
#userMenu .user-chip {
    width: 100%; justify-content: flex-start; gap: 11px; border: none; border-radius: 12px;
    padding: 8px 10px; background: rgba(255,255,255,.06); color: #e8e2d3;
}
#userMenu .user-chip:hover { background: rgba(239,189,18,.14); box-shadow: none; border: none; }
#userMenu .user-avatar { width: 36px; height: 36px; background: #efbd12; color: #080808; font-size: .85rem; }
#userMenu #userName { display: block !important; text-align: left; color: #efe9db; font-weight: 600;
    font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; }

/* ============================================================
   AJUSTES 2 del lateral: logo más grande y centrado, cuenta centrada y separada,
   y arreglo de la VISTA TÉCNICO (barra "probando como" a lo ancho, arriba).
   ============================================================ */
/* Logo más grande, centrado */
.side-logo { padding: 20px 14px 18px; justify-content: center; }
.side-logo img { max-height: 84px; max-width: 100%; padding: 14px 20px; border-radius: 16px; }

/* Cuenta al pie: centrada y SIN chocar con la fila de toggles de arriba */
#roleSelector { bottom: 86px; justify-content: center; }
#userMenu { padding: 14px 14px 16px; justify-content: center; }
#userMenu .user-chip { justify-content: center; max-width: 190px; }

/* VISTA TÉCNICO: la barra "Estás probando como" va a lo ancho arriba (no como columna a la izquierda) */
#vistaTecnico { flex-wrap: wrap; }
#filaProbandoComo { flex: 0 0 100%; order: -1; }

/* ============================================================
   AJUSTES 3: barra "probando como" DENTRO del lateral + ventana de cuenta rediseñada (oscura, angosta)
   ============================================================ */
#vistaTecnico { flex-wrap: nowrap; }
/* "Estás probando como" — ahora dentro del menú lateral, bajo el logo */
#filaProbandoComo {
    order: 0; flex: none; display: block; background: rgba(255,255,255,.05);
    border: none; border-radius: 10px; margin: 0 12px 12px; padding: 10px 12px;
}
#filaProbandoComo label {
    display: block; color: #8f8870; font-size: .66rem; text-transform: uppercase;
    letter-spacing: .05em; font-weight: 700; margin-bottom: 6px;
}
#filaProbandoComo select {
    width: 100%; background: #0d0d0d; color: #efe9db; border: 1px solid rgba(239,189,18,.32);
    border-radius: 8px; padding: 7px 9px; font-size: .82rem; cursor: pointer;
}

/* Ventana de la cuenta — oscura, del ancho del lateral, abre hacia arriba */
#userMenu .user-dropdown {
    width: 212px; left: 0; right: auto; top: auto; bottom: calc(100% + 8px);
    background: #141414; border: 1px solid rgba(239,189,18,.22); border-radius: 14px;
    box-shadow: 0 -10px 34px rgba(0,0,0,.55); padding: 8px;
}
#userMenu .dd-section-label { color: #8f8870; }
#userMenu .dd-account-card {
    background: rgba(239,189,18,.09); border: 1px solid rgba(239,189,18,.38);
    padding: 10px; gap: 10px;
}
#userMenu .dd-account-avatar { width: 38px; height: 38px; font-size: .9rem; background: #efbd12; color: #080808; }
#userMenu .dd-account-name { color: #efe9db; }
#userMenu .dd-account-role { color: #b9b3a4; }
#userMenu .dd-account-sub { color: #8f8870; }
#userMenu .dd-check { color: #efbd12; }
#userMenu .dd-divider { background: rgba(255,255,255,.08); }
#userMenu .user-dropdown button { color: #d7d2c2; }
#userMenu .user-dropdown button:hover { background: rgba(239,189,18,.14); color: #fff; }

/* ============================================================
   AJUSTES 4: cuenta consolidada — toggle de vista + "probando como" DENTRO del menú de cuenta,
   nombre del usuario logueado en el chip (arreglo del avatar que mostraba el rol).
   ============================================================ */
#userMenu #userName { display: none !important; }   /* oculto: solo atribución (quién ejecuta) */
.chip-name { display: block; color: #efe9db; font-weight: 600; font-size: .84rem; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 116px; }

/* El menú lateral ya no reserva tanto espacio abajo (los toggles se movieron al menú de cuenta) */
.tabs { padding-bottom: 90px; }

/* Toggle Encargado/Técnico dentro del menú de cuenta */
#userMenu #roleSelector { position: static; left: auto; bottom: auto; width: auto; z-index: auto;
    margin: 2px 4px 6px; padding: 0; background: transparent; border: none; display: block; }
#userMenu #rolSwitch { display: flex; gap: 6px; }
#userMenu #roleSelector .role-btn { flex: 1; opacity: 1; font-size: .8rem; padding: 8px 6px;
    border-radius: 9px; border: 1px solid rgba(239,189,18,.28); background: rgba(255,255,255,.05); color: #cfc9ba; }
#userMenu #roleSelector .role-btn.active { background: #efbd12; color: #080808; border-color: #efbd12; font-weight: 700; }

/* "Probando como" dentro del menú de cuenta */
#userMenu #filaProbandoComo { margin: 4px; padding: 0; background: transparent; border: none; }
#userMenu #filaProbandoComo label { display: block; color: #8f8870; font-size: .66rem; text-transform: uppercase;
    letter-spacing: .05em; font-weight: 700; margin: 4px 2px 5px; }
#userMenu #filaProbandoComo select { width: 100%; background: #0d0d0d; color: #efe9db;
    border: 1px solid rgba(239,189,18,.3); border-radius: 8px; padding: 7px 9px; font-size: .82rem; cursor: pointer; }

/* ============================================================
   AJUSTES 5: "Probando como" sin mayúsculas + subpestaña (sub-ítem) activa en dorado
   ============================================================ */
#userMenu #filaProbandoComo label { text-transform: none; letter-spacing: 0; font-size: .72rem; }
/* Sub-ítem del menú lateral que está seleccionado → dorado */
.tabs .dropdown-item.sub-activa { background: rgba(239,189,18,.92); color: #080808; font-weight: 700; }
.tabs .dropdown-item.sub-activa:hover { background: #efbd12; color: #080808; }

/* ============================================================
   LISTA DE INSTALACIÓN: tarjetas por estado, menú Acciones, filtro de fecha oculto por defecto
   ============================================================ */
/* Tarjetas chiquitas con la cantidad por estado (clicables) */
.est-cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.est-card { display: flex; flex-direction: column; align-items: center; min-width: 78px; padding: 9px 13px;
    border: 1px solid #e0e6ee; border-radius: 12px; background: #fff; cursor: pointer; transition: .15s; }
.est-card:hover { border-color: #171717; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.est-card.on { border-color: #171717; background: #171717; }
.est-card.on .est-n, .est-card.on .est-l { color: #efbd12; }
.est-card .est-n { font-size: 1.18rem; font-weight: 800; color: #171717; line-height: 1; }
.est-card .est-l { font-size: .72rem; color: #66727f; margin-top: 4px; white-space: nowrap; }
.est-card.bloq .est-n { color: #8a6d00; }

/* Menú "Acciones en grupo" */
.acc-wrap { position: relative; display: inline-block; }
.acc-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: #fff;
    border: 1px solid #e0e6ee; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16);
    padding: 6px; min-width: 214px; z-index: 600; text-align: left; }
.acc-wrap.abierto .acc-menu { display: block; }
.acc-menu .acc-hint { font-size: .72rem; color: #8a97a8; padding: 6px 10px 8px; line-height: 1.35; }
.acc-menu .acc-grp { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: #171717;
    font-weight: 800; padding: 9px 10px 3px; border-top: 1px solid #f0f3f7; margin-top: 3px; }
.acc-menu .acc-grp:first-of-type { border-top: none; margin-top: 0; }
.acc-menu button { display: block; width: 100%; text-align: left; background: none; border: none;
    padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: .86rem; color: #5f6a72; }
.acc-menu button:hover { background: #171717; color: #efbd12; }

/* El filtro de fecha ya no va suelto abajo; se muestra desde el botón "Filtros" */
#tab-instalaciones .fecha-bar, #tab-retiros .fecha-bar, #tab-mensajeros .fecha-bar, #tab-asistencias .fecha-bar { display: none; }

/* ============================================================
   Ventana de Filtros de Instalaciones (fechas + otras columnas)
   ============================================================ */
.flt-modal .flt-grp { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: #171717; font-weight: 800; margin: 14px 0 8px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.flt-modal .flt-grp:first-child { margin-top: 0; }
.flt-modal .flt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.flt-modal .flt-lab { flex: 0 0 130px; font-size: .86rem; color: #5f6a72; }
.flt-modal .flt-a { color: #8a97a8; font-size: .82rem; }
.flt-modal .flt-row input, .flt-modal .flt-row select { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid #d7dee7;
    border-radius: 8px; font-size: .86rem; }
.flt-modal .flt-row input[type=date] { flex: 0 0 auto; }

/* ── Filtros reciclados en el TELÉFONO (body.mv-on): que la ventana se ajuste a la pantalla ── */
body.mv-on .flt-modal { align-items: flex-end; }
body.mv-on .flt-modal .modal { width: 100%; max-width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; }
body.mv-on .flt-modal .modal-header { padding: 14px 16px; }
body.mv-on .flt-modal .modal-header h3 { font-size: 1.02rem; }
body.mv-on .flt-modal .modal-body { padding: 14px 16px; }
body.mv-on .flt-modal .flt-grp { margin-top: 14px; }
body.mv-on .flt-modal .flt-row { flex-wrap: wrap; gap: 6px 8px; margin-bottom: 13px; }
body.mv-on .flt-modal .flt-lab { flex: 1 1 100%; font-size: .82rem; font-weight: 700; color: #171717; margin-bottom: 1px; }
body.mv-on .flt-modal .flt-row input, body.mv-on .flt-modal .flt-row select { flex: 1 1 40%; padding: 11px 10px; font-size: 16px; }
body.mv-on .flt-modal .flt-row input[type=date] { flex: 1 1 40%; }
body.mv-on .flt-modal .modal > div:last-child { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; background: #fff; }
body.mv-on .flt-modal .modal > div:last-child .btn { flex: 1; padding: 12px; }

/* ============================================================
   Dashboard "Boletas Sin Asignar" — 1 sola pantalla (sin scroll) + pantalla completa
   ============================================================ */
#dashboard-sinasignar .sa-wrap { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 200px); min-height: 460px; }
.sa-hero { flex: 0 0 auto; background: linear-gradient(135deg, #0f0f0f, #241d02 90%); color: #fff;
    border-radius: 14px; padding: 14px 22px; display: flex; align-items: center; gap: 28px; }
.sa-hero-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #cfc9ba; margin-bottom: 3px; }
.sa-hero-big { font-size: 38px; font-weight: 800; color: #efbd12; line-height: 1; }
.sa-hero-mini { display: flex; gap: 22px; }
.sa-hero-mini .n { font-size: 19px; font-weight: 700; color: #fff; }
.sa-hero-mini .k { font-size: 10px; color: #b7b0a0; text-transform: uppercase; letter-spacing: .03em; }
.sa-hero-btns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sa-body { flex: 1; min-height: 0; }
.sa-cards { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 10px; height: 100%; }
.sa-card { background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; padding: 11px 13px;
    overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.sa-card h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: #171717; margin: 0 0 9px; font-weight: 800; }
.sa-row { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; cursor: pointer; font-size: 11.5px; }
.sa-l { flex: 0 0 76px; color: #7a828c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-row.on .sa-l { color: #171717; font-weight: 700; }
.sa-t { flex: 1; height: 14px; background: #f0f1f3; border-radius: 5px; overflow: hidden; }
.sa-f { display: block; height: 100%; background: linear-gradient(90deg, #d9a900, #efbd12); }
.sa-row.on .sa-f { background: #171717; }
.sa-n { flex: 0 0 30px; text-align: right; font-weight: 700; color: #171717; }
.sa-empty { color: #aaa; font-size: 11px; }
/* Pantalla completa */
#dashboard-sinasignar .sa-wrap:fullscreen { height: 100vh; padding: 20px 24px; background: #f3eddd; }
@media (max-width: 900px) { .sa-cards { grid-template-columns: repeat(2, 1fr); } #dashboard-sinasignar .sa-wrap { height: auto; } }

/* ============================================================
   Filtro de columna FECHA en árbol jerárquico Año → Mes → Día
   ============================================================ */
.ms-tree { max-height: 264px; overflow-y: auto; }
.ms-tnode { display: flex; align-items: center; gap: 6px; padding: 3px 6px; font-size: 13px; }
.ms-tnode.n0 { padding-left: 4px; font-weight: 700; color: #171717; }
.ms-tnode.n1 { padding-left: 24px; }
.ms-tnode.n2 { padding-left: 46px; color: #55606b; }
.ms-tnode:hover { background: #f3f6fa; }
.ms-ttog { width: 14px; flex: none; text-align: center; cursor: pointer; color: #8a97a8; font-size: 11px; user-select: none; }
.ms-tlab { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }