/* ==========================================================================
   MXTV Admin — Design Tokens (F1)
   Capa única de tokens + correcciones de Dark Mode. Cargar DESPUÉS de style.css.
   Reglas:
   - Toda superficie (card, tabla, lista, dropdown, modal, input) usa --mxtv-surface-*.
   - Dark se arregla en la RAÍZ: se sobreescriben las variables de Bootstrap
     (--bs-body-bg, --bs-table-bg, --bs-list-group-bg, ...) por tema.
   - Light replica el look actual (sin regresión); Dark sigue el Design System.
   ========================================================================== */

/* ---------- TOKENS BASE (LIGHT) ---------- */
:root,
html[data-theme="light"] {
  /* Marca */
  --mxtv-brand-50:#EEF3FF;  --mxtv-brand-100:#D8E4FF; --mxtv-brand-200:#B7CEFF;
  --mxtv-brand-300:#8FB0FF; --mxtv-brand-400:#5B8DEF; --mxtv-brand-500:#2E6BF0;
  --mxtv-brand-600:#1B57DB; --mxtv-brand-700:#1547A8; --mxtv-brand-800:#163A7A;
  --mxtv-brand-900:#122A57; --mxtv-brand-950:#0D1B3A;
  --mxtv-brand:#1558B0;            /* primario (continuidad con landing) */
  --mxtv-brand-strong:#1547A8;
  --mxtv-accent:#0D9488;           /* teal: solo métricas/telemetría */

  /* Superficies */
  --mxtv-app-bg:#F6F8FB;
  --mxtv-surface-1:#FFFFFF;        /* card */
  --mxtv-surface-2:#F1F4F9;        /* sub / hover / input-group */
  --mxtv-surface-3:#E9EDF3;        /* popover / tooltip */
  --mxtv-border:#E6EAF0;

  /* Texto */
  --mxtv-text:#0F172A;
  --mxtv-text-muted:#64748B;
  --mxtv-text-faint:#94A3B8;

  /* Semántico (fg / tint) */
  --mxtv-success:#067647; --mxtv-success-bg:#ECFDF3;
  --mxtv-warning:#B54708; --mxtv-warning-bg:#FFFAEB;
  --mxtv-danger:#B42318;  --mxtv-danger-bg:#FEF3F2;
  --mxtv-info:#026AA2;    --mxtv-info-bg:#F0F9FF;

  /* Radios / spacing / sombras */
  --mxtv-r-xs:4px; --mxtv-r-sm:6px; --mxtv-r-md:8px; --mxtv-r-lg:12px; --mxtv-r-xl:16px;
  --mxtv-sh-1:0 1px 2px rgba(16,24,40,.06);
  --mxtv-sh-2:0 4px 8px -2px rgba(16,24,40,.08);
  --mxtv-sh-3:0 12px 24px -6px rgba(16,24,40,.12);

  /* Iconos de tabla */
  --mxtv-dt-ic:#8a97ad;
  --mxtv-dt-ic-on:var(--mxtv-brand);
  --mxtv-dt-head:#7c8aa3;
}

/* ---------- TOKENS BASE (DARK) ---------- */
html[data-theme="dark"] {
  --mxtv-app-bg:#0B0E14;
  --mxtv-surface-1:#121826;
  --mxtv-surface-2:#1A2233;
  --mxtv-surface-3:#232C3D;
  --mxtv-border:#232C3D;

  --mxtv-text:#E6EBF4;
  --mxtv-text-muted:#94A3B8;
  --mxtv-text-faint:#64748B;

  --mxtv-brand:#5B8DEF;            /* brand más claro para contraste en dark */
  --mxtv-brand-strong:#8FB0FF;

  --mxtv-success:#34D399; --mxtv-success-bg:#06281C;
  --mxtv-warning:#FBBF24; --mxtv-warning-bg:#2A1E05;
  --mxtv-danger:#F87171;  --mxtv-danger-bg:#2C1110;
  --mxtv-info:#56B6E6;    --mxtv-info-bg:#07212E;

  --mxtv-sh-1:none; --mxtv-sh-2:none; --mxtv-sh-3:none;

  --mxtv-dt-ic:#9fb0c9;
  --mxtv-dt-ic-on:#5b9bff;
  --mxtv-dt-head:#8492a8;
}

/* ==========================================================================
   MAPEO A VARIABLES DE BOOTSTRAP (raíz del fix de dark)
   Todos los componentes BS heredan estas vars -> dejan de pintarse blancos.
   ========================================================================== */
html[data-theme="dark"]{
  --bs-body-bg:var(--mxtv-app-bg);
  --bs-body-color:var(--mxtv-text);
  --bs-border-color:var(--mxtv-border);
  --bs-secondary-bg:var(--mxtv-surface-2);
  --bs-tertiary-bg:var(--mxtv-surface-3);
  --bs-emphasis-color:var(--mxtv-text);
  --bs-secondary-color:var(--mxtv-text-muted);

  /* tablas */
  --bs-table-bg:transparent;
  --bs-table-color:var(--mxtv-text);
  --bs-table-border-color:var(--mxtv-border);
  --bs-table-striped-bg:var(--mxtv-surface-2);
  --bs-table-striped-color:var(--mxtv-text);
  --bs-table-hover-bg:var(--mxtv-surface-2);
  --bs-table-hover-color:var(--mxtv-text);

  /* listas / cards / dropdown / modal */
  --bs-list-group-bg:var(--mxtv-surface-1);
  --bs-list-group-color:var(--mxtv-text);
  --bs-list-group-border-color:var(--mxtv-border);
  --bs-card-bg:var(--mxtv-surface-1);
  --bs-card-cap-bg:var(--mxtv-surface-1);
  --bs-card-color:var(--mxtv-text);
  --bs-card-border-color:var(--mxtv-border);
  --bs-dropdown-bg:var(--mxtv-surface-1);
  --bs-dropdown-color:var(--mxtv-text);
  --bs-dropdown-border-color:var(--mxtv-border);
  --bs-dropdown-link-color:var(--mxtv-text);
  --bs-dropdown-link-hover-bg:var(--mxtv-surface-2);
  --bs-dropdown-link-hover-color:var(--mxtv-text);
  --bs-modal-bg:var(--mxtv-surface-1);
  --bs-modal-color:var(--mxtv-text);
  --bs-modal-border-color:var(--mxtv-border);
  --bs-modal-header-border-color:var(--mxtv-border);
  --bs-modal-footer-border-color:var(--mxtv-border);
  --bs-border-color-translucent:var(--mxtv-border);
}

/* ==========================================================================
   CORRECCIONES EXPLÍCITAS DE SUPERFICIE EN DARK
   (utilidades wowdash con color fijo que ignoran las vars BS)
   ========================================================================== */
html[data-theme="dark"] body{background:var(--mxtv-app-bg);color:var(--mxtv-text)}
html[data-theme="dark"] .card,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .navbar-header,
html[data-theme="dark"] .d-footer{background:var(--mxtv-surface-1);border-color:var(--mxtv-border)}

/* tablas: el contenedor pinta, las celdas transparentes -> se ve la card */
html[data-theme="dark"] .table{color:var(--mxtv-text)}
html[data-theme="dark"] .table>:not(caption)>*>*{background-color:transparent;color:var(--mxtv-text);border-color:var(--mxtv-border)}
html[data-theme="dark"] .table thead th{color:var(--mxtv-dt-head)}

/* listas */
html[data-theme="dark"] .list-group,
html[data-theme="dark"] .list-group-item{background:var(--mxtv-surface-1);color:var(--mxtv-text);border-color:var(--mxtv-border)}

/* dropdown / modal explícitos */
html[data-theme="dark"] .dropdown-menu{background:var(--mxtv-surface-1);color:var(--mxtv-text);border-color:var(--mxtv-border)}
html[data-theme="dark"] .dropdown-item{color:var(--mxtv-text)}
html[data-theme="dark"] .dropdown-item:hover{background:var(--mxtv-surface-2)}
html[data-theme="dark"] .dropdown-divider{border-color:var(--mxtv-border)}
html[data-theme="dark"] .modal-content{background:var(--mxtv-surface-1);color:var(--mxtv-text);border-color:var(--mxtv-border)}

/* utilidades de fondo claro -> superficie en dark */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-base,
html[data-theme="dark"] .bg-neutral-50{background-color:var(--mxtv-surface-1)!important}
html[data-theme="dark"] .bg-neutral-100{background-color:var(--mxtv-surface-2)!important}
html[data-theme="dark"] .bg-neutral-200{background-color:var(--mxtv-surface-3)!important}

/* inputs / selects / textarea */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text{background:var(--mxtv-app-bg);color:var(--mxtv-text);border-color:var(--mxtv-border)}
html[data-theme="dark"] .form-control::placeholder{color:var(--mxtv-text-faint)}
html[data-theme="dark"] .input-group-text{background:var(--mxtv-surface-2)}

/* texto secundario / código */
html[data-theme="dark"] .text-secondary-light{color:var(--mxtv-text-muted)!important}
html[data-theme="dark"] code{color:#f0a3c0;background:transparent}

/* fondo de la app en light también desde token (consistencia) */
html[data-theme="light"] body{background:var(--mxtv-app-bg)}

/* ==========================================================================
   ESTRUCTURA COMPARTIDA (migrada del CSS inline duplicado de los 2 layouts)
   ========================================================================== */
body{font-size:13px}
.dashboard-main-body h6{font-size:13.5px}
.card-header{padding-top:.6rem;padding-bottom:.6rem}
.card-header h6,.text-md{font-size:12.8px!important}
.sidebar-menu a{font-size:12.5px;padding-top:6px;padding-bottom:6px}
.sidebar-menu-group-title{font-size:10px!important;letter-spacing:.5px;margin-top:8px;margin-bottom:2px}
.sidebar-menu .menu-icon{font-size:18px}
.table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--mxtv-dt-head)}
.table td{padding-top:.5rem;padding-bottom:.5rem}
h5{font-size:16.5px}
.brand-txt{font-weight:800;font-size:1.15rem;color:var(--mxtv-brand)}
.sidebar,.dashboard-main{transition:transform .25s ease,margin .25s ease}
body.nav-off .sidebar{transform:translateX(-100%)}
body.nav-off .dashboard-main{margin-left:0!important}
@media(max-width:991px){.dashboard-main{margin-left:0!important}.sidebar{transform:translateX(-100%)}body.nav-on .sidebar{transform:translateX(0)}}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}

/* transición suave de tema */
body,.card,.sidebar,.navbar-header,.dropdown-menu,.table,.list-group-item,.form-control,.form-select{
  transition:background-color .12s ease,color .12s ease,border-color .12s ease}
/* Al cambiar de tema, sin transiciones: la plantilla pone "transition:all .3s" a TODO elemento
   y el cambio animaba miles de nodos (casi 2 s). La clase la ponen y la quitan los layouts admin y revendedor. */
html.mxtv-tema-cambiando,html.mxtv-tema-cambiando *,html.mxtv-tema-cambiando ::before,
html.mxtv-tema-cambiando ::after{transition:none!important}

/* iconos de tabla (filtro/orden) */
.dt-ic{background:none;border:0;padding:0 2px;line-height:1;cursor:pointer;color:var(--mxtv-dt-ic);font-size:15px;display:inline-flex;align-items:center}
.dt-ic:hover,.dt-ic.dt-on{color:var(--mxtv-dt-ic-on)}
.dt-ic.dt-sort{opacity:.45}
.dt-th-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:2px}

/* popover de filtro compacto */
.dashboard-main-body .card{overflow:visible}
.dt-filter-menu,.dt-filter-menu *{text-transform:none!important;letter-spacing:normal!important}
.dt-filter-menu{font-size:11px}
.dt-filter-menu label{font-size:11px;font-weight:500;color:var(--mxtv-text-muted);margin:0;cursor:pointer}
.dt-filter-menu .form-control{font-size:11px;height:auto;padding:.2rem .45rem}
.dt-filter-menu .btn{font-size:11px;padding:.25rem .5rem}
.dt-filter-menu input[type=checkbox]{width:14px;height:14px}

/* ESTÁNDAR de tabla: título y dato alineados a la IZQUIERDA (coherente entre todas).
   Columnas numéricas / estado / acciones se centran o alinean por su propia clase. */
.table thead th{text-align:left;vertical-align:middle}
.table tbody td{vertical-align:middle}
.table thead th .d-flex{justify-content:flex-start}
.table th.text-center,.table td.text-center{text-align:center!important}
.table th.text-end,.table td.text-end{text-align:right!important}
.col-mac{min-width:160px}
.col-texto{min-width:200px}                          /* textos largos: no partirlos palabra por palabra */
/* Tabla de dos columnas de referencia (ruta + descripcion): en celular una debajo de la otra */
@media(max-width:575.98px){
  .tabla-pila td{display:block;border-bottom:0}
  .tabla-pila td + td{padding-top:0;border-bottom:1px solid var(--mxtv-border)}
}

/* Inputs/selects más compactos (acordes al resto del UI) */
/* wowdash fuerza alturas grandes -> override con height + !important */
.form-control,.form-select{font-size:13px;height:36px!important;min-height:0;padding:.34rem .65rem}
textarea.form-control{height:auto!important;min-height:64px}
.form-label{font-size:12.5px;margin-bottom:.25rem}
/* Variante chica (búsqueda de tablas, filtros): más baja y texto menor */
.input-group-sm>.form-control,.input-group-sm>.input-group-text,
.form-control-sm,.form-select-sm{font-size:12.5px;height:30px!important;min-height:0;padding:.2rem .55rem}
.input-group-sm>.btn,.input-group-sm>.btn.btn-sm{height:30px!important;padding:.2rem .6rem;font-size:12px}
/* Búsqueda de tabla: un poco más alta que el resto de inputs sm */
.mxtv-search>.form-control,.mxtv-search>.input-group-text,.mxtv-search>.btn{height:34px!important;font-size:12.5px}
/* Botones del toolbar de búsqueda (Buscar / Limpiar) al mismo alto que el input */
#dtForm .btn{height:34px!important;display:inline-flex;align-items:center;font-size:12.5px}
/* hint/placeholder más chico que el texto escrito (fuerza sobre wowdash) */
.form-control::placeholder{font-size:11px!important;opacity:.7}
.input-group-sm>.form-control::placeholder,.form-control-sm::placeholder{font-size:10.5px!important;opacity:.65}
/* (los inputs del popover de filtro y los input-group-sm conservan su propio tamaño) */

/* Icono de KPI / estado: círculo sólido + icono blanco BIEN definido (color propio, no wowdash) */
.kpi-ic{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;font-size:21px;line-height:1;flex:0 0 auto;color:#fff;background:#2E6BF0}
.kpi-ic iconify-icon{display:block}
.kpi-ic.sm{width:28px;height:28px;font-size:16px}
.kpi-ic.is-primary{background:#2E6BF0}
.kpi-ic.is-success{background:#16A34A}
.kpi-ic.is-warning{background:#D97706}
.kpi-ic.is-danger{background:#DC2626}
.kpi-ic.is-info{background:#0EA5E9}
.kpi-ic.is-neutral,.kpi-ic.is-secondary{background:#64748B}

/* Contador de registros bajo la tabla */
.mxtv-count{font-size:12px;color:var(--mxtv-text-muted)}

/* Footer estático (no se mueve al hacer scroll) */
.d-footer{position:sticky;bottom:0;z-index:15;background:var(--mxtv-surface-1);border-top:1px solid var(--mxtv-border)}
/* El pie va pegado abajo mientras se hace scroll, asi que sin aire tapa el ultimo bloque de
   las pantallas largas (se veia en Configuración: las versiones publicadas quedaban debajo
   del pie). Este respiro es lo que le devuelve el sitio al ultimo bloque. Hallazgo H9. */
.dashboard-main-body{padding-bottom:72px}
/* Barra de Guardar pegada abajo: va ENCIMA del pie, no debajo. Con bottom:0 el pie (z 15) la
   tapaba y el clic en Guardar caia en el pie (Mi marca no guardaba). --mxtv-pie-h lo mide
   mxtv-ui.js; 69px es el pie de escritorio. */
.mxtv-barra-guardar{position:sticky;bottom:var(--mxtv-pie-h,69px);z-index:16}

/* ==========================================================================
   MODAL DETALLE DE DISPOSITIVO (estilo P1)
   ========================================================================== */
/* En dark el diálogo debe DIFERENCIARSE del fondo: superficie más clara + borde + sombra. */
html[data-theme="dark"] .modal-content{background:var(--mxtv-surface-2);border:1px solid var(--mxtv-border);box-shadow:0 20px 60px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.2)}
.modal-content{box-shadow:0 20px 60px rgba(15,23,42,.12),0 4px 12px rgba(15,23,42,.05)}
/* Par clave/valor: etiqueta MAYÚSCULA atenuada arriba, valor normal abajo */
.mxtv-kv{display:flex;flex-direction:column;min-width:0}
.mxtv-kv .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mxtv-text-faint);line-height:1.6}
.mxtv-kv .v{font-size:13px;color:var(--mxtv-text);word-break:break-word}
.mxtv-kv .v.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.mxtv-submac{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--mxtv-text-muted)}
/* Sección colapsable tipo "box" dentro del diálogo */
.mxtv-sec{border:1px solid var(--mxtv-border);border-radius:var(--mxtv-r-md);background:var(--mxtv-surface-1);margin-top:10px;overflow:hidden}
html[data-theme="dark"] .mxtv-sec{background:var(--mxtv-app-bg)}
.mxtv-sec>.mxtv-sec-h{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;
  padding:10px 14px;cursor:pointer;color:var(--mxtv-text);font-weight:600;font-size:13px}
.mxtv-sec>.mxtv-sec-h .chev{margin-left:auto;transition:transform .15s}
.mxtv-sec>.mxtv-sec-h[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mxtv-sec .mxtv-sec-b{padding:0 14px 14px}

/* TABLAS ADAPTATIVAS: si no caben a lo ancho, scroll HORIZONTAL en el cuerpo (cualquier ancho).
   Lo vertical lo da el scroll de la página. La toolbar (card-header) queda fija debajo de la
   cabecera (4.5rem; con top:0 quedaba escondida detras de ella). En celular la toolbar ocupa
   tres renglones: ahi no se fija, para no comerse la pantalla. */
.dt-card .card-header{position:sticky;top:4.5rem;z-index:20;background:var(--mxtv-surface-1);
  border-top-left-radius:inherit;border-top-right-radius:inherit}
@media(max-width:575.98px){.dt-card .card-header{position:static}}
/* En celular los filtros de cualquier tabla bajan de renglon y el buscador ocupa uno propio
   (sin esto se aplastaban hasta quedar solo el icono). */
@media(max-width:575.98px){
  #dtForm{flex-wrap:wrap}
  #dtForm .input-group{flex:1 1 100%;max-width:none!important}
}
.dt-card .card-body{overflow-x:auto}                 /* aparece scrollbar horizontal si hace falta */
/* Tabla vacia mas ancha que la pantalla: el aviso de vacio se queda en la parte visible
   (antes se centraba en todo el ancho de la tabla y salia cortado). */
.dt-card .card-body:has(.mxtv-empty),.table-responsive:has(.mxtv-empty){container-type:inline-size}
.dt-card .card-body td .mxtv-empty,.table-responsive td .mxtv-empty{position:sticky;left:0;width:calc(100cqw - 40px)}
.dt-card .table{white-space:nowrap}                  /* columnas no se aplastan -> se activa el scroll */
.dt-card .table .mxtv-pill,.dt-card .table code{white-space:nowrap}

/* Tabla de dispositivos: celdas de dos renglones (dato principal arriba, acompañante abajo)
   y fila completa clicable para abrir la configuración. */
.dev-tabla td{vertical-align:middle}
.dev-tabla .dev-l1{font-size:13.5px;color:var(--mxtv-text);font-weight:500;line-height:1.35}
.dev-tabla .dev-l2{font-size:11.5px;color:var(--mxtv-text-muted);line-height:1.35;margin-top:2px;display:flex;align-items:center;gap:4px}
.dev-tabla .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
/* Etiqueta del revendedor: un clic la edita (admin y revendedor). */
.dev-etq{background:none;border:0;padding:0;color:var(--mxtv-text-muted);cursor:pointer;text-align:left;display:inline-flex;align-items:center;gap:4px;font:inherit}
.dev-etq:hover,.dev-etq:focus-visible{color:var(--mxtv-brand)}
.dev-etq .dev-etq-lapiz{opacity:.45}
.dev-etq:hover .dev-etq-lapiz{opacity:1}
/* Tipo de equipo: logotipo o aparato (App\Support\TipoEquipo). */
.tipo-pill{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.tipo-pill iconify-icon{font-size:14px}
.dev-tabla .dev-l2 .mono{font-size:11px}
.dev-tabla .dev-fila{cursor:pointer}
.dev-tabla .dev-fila:hover>td{background:var(--mxtv-surface-2)}
.dev-tabla .dev-acc .dt-ic{width:30px;height:30px;font-size:17px}
/* Diálogo del equipo: cabecera resumen + zona delicada */
.dev-cab{border:0;border-radius:var(--mxtv-r-lg);background:var(--mxtv-surface-2);padding:16px}
html[data-theme="dark"] .dev-cab{background:var(--mxtv-surface-1)}
.dev-cab-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--mxtv-surface-1);color:var(--mxtv-brand);box-shadow:0 1px 2px rgba(15,23,42,.06),0 0 0 1px var(--mxtv-border);flex-shrink:0}
html[data-theme="dark"] .dev-cab-ic{background:var(--mxtv-surface-3);box-shadow:none}
.dev-cab-mac{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--mxtv-text);word-break:break-all;line-height:1.35}
.dev-cab-sub{font-size:12.5px;color:var(--mxtv-text-muted);margin-top:3px;word-break:break-word;text-wrap:pretty}
.dev-cab-sub .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.dev-cab-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;margin-top:16px}
.dev-cab-datos .k{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mxtv-text-muted);margin-bottom:3px}
.dev-cab-datos .v{display:block;font-size:13.5px;font-weight:500;color:var(--mxtv-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dev-cab-datos .v.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
@media (max-width:480px){.dev-cab-datos{grid-template-columns:repeat(2,minmax(0,1fr))}.dev-cab-mac{font-size:14px}}
.dev-peligro{margin-top:18px;padding-top:4px;border-top:1px dashed var(--mxtv-danger)}
.dev-peligro-t{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--mxtv-danger);margin:8px 0 2px;display:flex;align-items:center;gap:5px}
.dev-peligro .mxtv-sec-h{color:var(--mxtv-danger)}
/* Columnas: ocultas, encabezado arrastrable y menú de orden */
.dev-tabla .dev-oc{display:none!important}
.dev-tabla th.dev-thmov{cursor:grab}
.dev-colmenu{width:240px}
.dev-colitem{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:var(--mxtv-r-sm);cursor:grab;user-select:none}
.dev-colitem:hover{background:var(--mxtv-surface-2)}
.dev-colitem.is-arr{opacity:.45;background:var(--mxtv-surface-2)}
.dev-colgrip{color:var(--mxtv-text-faint);font-size:16px;flex-shrink:0}
.dev-colmov{border:0;background:none;color:var(--mxtv-text-muted);width:26px;height:26px;border-radius:var(--mxtv-r-sm);display:inline-flex;align-items:center;justify-content:center;padding:0}
.dev-colmov:hover{background:var(--mxtv-surface-3);color:var(--mxtv-text)}
.dev-acc .dropdown-item{display:flex;align-items:center;gap:8px;font-size:13.5px}
/* Diálogo por vistas: barra Volver + equipo, mosaicos de acción, bloques */
.dev-dlg-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:-6px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--mxtv-border)}
.dev-volver{border:0;background:none;margin-left:-8px;padding:0 10px 0 8px;min-height:36px;border-radius:var(--mxtv-r-md);color:var(--mxtv-brand);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;transition:background-color .15s ease-out}
.dev-volver:hover{background:var(--mxtv-surface-2)}
.dev-dlg-eq{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mxtv-text-muted)}
.dev-dlg-eq .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.dev-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dev-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--mxtv-border);border-radius:var(--mxtv-r-lg);background:var(--mxtv-surface-1);padding:14px;color:var(--mxtv-text);cursor:pointer;
  transition-property:border-color,box-shadow,transform;transition-duration:.15s;transition-timing-function:ease-out}
.dev-tile:hover{border-color:var(--mxtv-brand);background:var(--mxtv-surface-2);box-shadow:0 4px 12px rgba(15,23,42,.08)}
html[data-theme="dark"] .dev-tile:hover{box-shadow:0 4px 12px rgba(0,0,0,.3)}
.dev-tile:active{transform:scale(.98)}
.dev-tile:focus-visible{outline:2px solid var(--mxtv-brand);outline-offset:2px}
.dev-tile iconify-icon{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:19px;color:var(--mxtv-brand);background:var(--mxtv-brand-50);margin-bottom:8px}
html[data-theme="dark"] .dev-tile iconify-icon{background:rgba(96,140,255,.14)}
.dev-tile .t{font-weight:600;font-size:13.5px;line-height:1.3}
.dev-tile .s{font-size:12px;color:var(--mxtv-text-muted);line-height:1.35;text-wrap:pretty}
@media (max-width:575.98px){.dev-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dev-nota{display:flex;gap:8px;background:var(--mxtv-warning-bg);border-radius:var(--mxtv-r-md);padding:10px 12px;font-size:13px;color:var(--mxtv-text);white-space:pre-wrap;word-break:break-word}
.dev-nota iconify-icon{color:var(--mxtv-warning);font-size:16px;flex-shrink:0;margin-top:1px}
.dev-bloque{padding:2px 0 0}
.dev-bloque-t{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mxtv-text-muted);font-weight:600;margin-bottom:6px}
.dev-hist{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--mxtv-border);font-size:13px;color:var(--mxtv-text);font-variant-numeric:tabular-nums}
.dev-bloque-t + .dev-hist{border-top:0;padding-top:4px}
.dev-hist iconify-icon{display:inline-block;vertical-align:-2px}
.dev-hist .f{font-size:12px;color:var(--mxtv-text-muted);white-space:nowrap;min-width:92px}
.dev-hist.is-rev .fw-semibold,.dev-hist.is-rev .d-block{text-decoration:line-through;opacity:.6}
.dev-rev-tag{font-size:11px;font-weight:600;padding:1px 6px;border-radius:6px;background:var(--mxtv-danger-bg,rgba(220,53,69,.12));color:var(--mxtv-danger)}
.dev-link{border:0;background:none;padding:6px 0 0;color:var(--mxtv-brand);font-size:13px;font-weight:600}
.dev-link:hover{text-decoration:underline}
/* Acciones delicadas al pie: botones sobrios; liberar y eliminar en rojo */
.dev-delicado{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;padding-top:16px;border-top:1px solid var(--mxtv-border)}
.dev-delicado button{border:1px solid var(--mxtv-border);background:var(--mxtv-surface-1);border-radius:var(--mxtv-r-md);min-height:36px;padding:0 12px;font-size:13px;font-weight:500;color:var(--mxtv-text);display:inline-flex;align-items:center;gap:6px;
  transition-property:border-color,background-color;transition-duration:.15s;transition-timing-function:ease-out}
.dev-delicado button iconify-icon{font-size:16px;color:var(--mxtv-text-muted)}
.dev-delicado button:hover{background:var(--mxtv-surface-2)}
.dev-delicado button[data-dev-ir=liberar],.dev-delicado button[data-dev-ir=eliminar],
.dev-delicado button[data-dev-ir=liberar] iconify-icon,.dev-delicado button[data-dev-ir=eliminar] iconify-icon{color:var(--mxtv-danger)}
.dev-delicado button[data-dev-ir=liberar]:hover,.dev-delicado button[data-dev-ir=eliminar]:hover{background:var(--mxtv-danger-bg);border-color:var(--mxtv-danger)}
.dev-delicado button:focus-visible{outline:2px solid var(--mxtv-brand);outline-offset:2px}
/* Opciones en tarjetas (radio): plan de licencia, tipo de mensaje */
.dev-opciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dev-opciones-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:575.98px){.dev-opciones{grid-template-columns:1fr}.dev-opciones-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dev-opc{position:relative;display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--mxtv-border);border-radius:var(--mxtv-r-lg);padding:12px 14px;cursor:pointer;margin:0;background:var(--mxtv-surface-1);
  transition-property:border-color,background-color,box-shadow;transition-duration:.15s;transition-timing-function:ease-out}
.dev-opc input{position:absolute;opacity:0;pointer-events:none}
.dev-opc .t{font-weight:600;font-size:13.5px;color:var(--mxtv-text);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dev-opc .s{font-size:11.5px;color:var(--mxtv-text-muted)}
.dev-opc:hover{border-color:var(--mxtv-brand-400)}
.dev-opc:has(input:checked){border-color:var(--mxtv-brand);background:var(--mxtv-brand-50);box-shadow:inset 0 0 0 1px var(--mxtv-brand)}
html[data-theme="dark"] .dev-opc:has(input:checked){background:rgba(96,140,255,.12)}
.dev-opc:has(input:focus-visible){outline:2px solid var(--mxtv-brand);outline-offset:2px}
.dev-actual{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;background:var(--mxtv-success-bg);color:var(--mxtv-success);border-radius:999px;padding:1px 7px}
.dev-quitar{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--mxtv-danger);border-radius:var(--mxtv-r-md);background:var(--mxtv-danger-bg);padding:10px 12px}
@media (max-width:575.98px){.dev-quitar{flex-direction:column;align-items:stretch}}
/* Mensaje al equipo: plantillas, tipo y vista previa con aspecto de pantalla de TV */
.msg-chip{border:1px solid var(--mxtv-border);background:var(--mxtv-surface-1);border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--mxtv-text)}
.msg-chip:hover{border-color:var(--mxtv-brand);color:var(--mxtv-brand)}
.msg-nivel .t{justify-content:center}
.msg-nivel.is-info:has(input:checked){border-color:#2E90FA;box-shadow:0 0 0 3px rgba(46,144,250,.15)}
.msg-nivel.is-warning:has(input:checked){border-color:#F79009;box-shadow:0 0 0 3px rgba(247,144,9,.15)}
.msg-nivel.is-promo:has(input:checked){border-color:#9E77ED;box-shadow:0 0 0 3px rgba(158,119,237,.15)}
.msg-prev{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#0B1220,#18233A);border-radius:var(--mxtv-r-lg);padding:16px;color:#E6EBF4;border-left:4px solid #2E90FA}
.msg-prev .ic{font-size:26px;line-height:1;color:#2E90FA;flex-shrink:0}
.msg-prev .pt{font-weight:700;font-size:15px;word-break:break-word}
.msg-prev .pb{font-size:13px;color:#B6C2D6;margin-top:3px;white-space:pre-wrap;word-break:break-word}
.msg-prev.is-warning{border-left-color:#F79009}.msg-prev.is-warning .ic{color:#F79009}
.msg-prev.is-promo{border-left-color:#9E77ED}.msg-prev.is-promo .ic{color:#9E77ED}
/* Celular: la tabla de dispositivos se pinta como tarjetas (una por equipo) */
@media (max-width:767.98px){
  .card-body:has(> table.dev-tabla){overflow-x:visible}
  .dev-tabla thead{display:none}
  .dev-tabla,.dev-tabla tbody{display:block;width:100%}
  .dev-tabla tr.dev-fila{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:2px 10px;padding:12px 14px;border-bottom:1px solid var(--mxtv-border)}
  .dev-tabla tr.dev-fila > td{display:block;border:0!important;padding:0!important;background:none!important}
  .dev-tabla tr.dev-fila > .c-chk{grid-row:1;grid-column:1;padding-top:2px!important}
  .dev-tabla tr.dev-fila > .c-equipo{grid-row:1;grid-column:2}
  .dev-tabla tr.dev-fila > .c-estado{grid-row:1;grid-column:3;justify-self:end}
  .dev-tabla tr.dev-fila > td[data-label]{grid-column:2 / 4;display:flex;align-items:baseline;gap:8px;font-size:13px}
  .dev-tabla tr.dev-fila > td[data-label]::before{content:attr(data-label);flex:0 0 92px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--mxtv-text-faint)}
  .dev-tabla tr.dev-fila > td[data-label] > div{display:inline}
  .dev-tabla tr.dev-fila > td[data-label] .dev-l2{display:inline-flex;margin:0 0 0 6px}
  /* Lo secundario (fecha, etiqueta) baja a su propia linea, a la derecha, si no cabe */
  .dev-tabla tr.dev-fila > td[data-label]{flex-wrap:wrap;row-gap:0}
  .dev-tabla tr.dev-fila > td[data-label] > .dev-l1{min-width:0;overflow-wrap:anywhere}
  .dev-tabla tr.dev-fila > td[data-label] > .dev-l2{margin-left:auto}
  .dev-tabla tr.dev-fila > td.text-center{text-align:left!important}
  .dev-tabla tr.dev-fila > .c-acc{grid-column:1 / 4;display:flex!important;justify-content:flex-end;gap:4px;margin-top:6px;padding-top:6px!important;border-top:1px dashed var(--mxtv-border)!important;position:static;box-shadow:none}
  .dev-tabla tr.dev-fila > .c-acc .dt-ic{width:38px;height:38px;font-size:19px}
  .dev-tabla tr:not(.dev-fila){display:block}
  .dev-tabla tr:not(.dev-fila) > td{display:block}
  /* Revendedor: la MAC manda; Key, versión y alta quedan en el diálogo del equipo */
  /* Tarjeta: MAC + estado / etiqueta / vigencia y conexión / tipo, listas y acciones */
  .dev-tabla.dev-tabla-rev tr.dev-fila{grid-template-columns:28px auto minmax(0,1fr) auto;grid-template-areas:"chk mac mac est" ". etq etq etq" ". vig vig vig" ". con con con" ". tip lis acc";gap:0 10px;padding:14px 16px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-chk{grid-area:chk}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-equipo{grid-area:mac;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14.5px;font-weight:600;letter-spacing:.01em;color:var(--mxtv-text);display:flex;flex-wrap:wrap;align-items:center;gap:6px;overflow-wrap:anywhere;line-height:1.4}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-equipo .mxtv-pill{font-family:var(--bs-body-font-family);font-weight:500}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-estado{grid-area:est;align-self:start}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-etiqueta{grid-area:etq;margin:2px 0 8px;font-size:13px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-etiqueta::before{content:none}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td[data-label=Vigencia]{grid-area:vig}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-seen{grid-area:con;margin-top:2px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td[data-label]::before{flex-basis:76px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-tipo{grid-area:tip;align-self:center;margin-top:12px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-listas{grid-area:lis;align-self:center;margin-top:12px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-tipo::before,.dev-tabla.dev-tabla-rev tr.dev-fila > td.c-listas::before{content:none}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-listas .btn{min-height:36px;display:inline-flex;align-items:center;gap:4px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-acc{grid-area:acc;margin-top:12px;padding-top:0!important;border-top:0!important;gap:8px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-acc .dt-ic{width:40px;height:40px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-tipo:has(> .text-secondary-light){visibility:hidden}
  /* Segunda opinión: un solo indicador de estado (la píldora de arriba); la vigencia va como texto */
  .dev-tabla.dev-tabla-rev tr.dev-fila{padding:12px 14px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-etiqueta{margin:0 0 6px;font-size:12.5px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-etiqueta .dev-etq{color:var(--mxtv-text-muted)!important;-webkit-appearance:none;appearance:none}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td[data-label=Vigencia] .mxtv-pill{background:none!important;border:0!important;padding:0!important;font-size:13px;font-weight:500;color:var(--mxtv-text)}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td[data-label=Vigencia] .mxtv-pill::before{display:none}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td[data-label=Vigencia] .mxtv-pill.is-danger{color:var(--mxtv-danger)}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td[data-label=Vigencia] .mxtv-pill.is-warning{color:var(--mxtv-warning)}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-tipo,.dev-tabla.dev-tabla-rev tr.dev-fila > td.c-listas,.dev-tabla.dev-tabla-rev tr.dev-fila > td.c-acc{margin-top:10px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-listas .btn{min-height:44px;padding:0 12px!important}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-listas .btn::before{content:"Listas"}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-listas .btn iconify-icon{display:none}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-acc .dt-ic{width:44px;height:44px}
  /* Barra de búsqueda: el buscador ocupa su propia línea */
  .dt-card:has(.dev-tabla-rev) #dtForm{flex-wrap:wrap}
  .dt-card:has(.dev-tabla-rev) #dtForm .input-group{flex:1 1 100%;max-width:none!important}
  .dt-card:has(.dev-tabla-rev) #dtForm .input-group .form-control{min-height:40px}
  .dev-tabla.dev-tabla-rev tr.dev-fila > td.c-key,.dev-tabla.dev-tabla-rev tr.dev-fila > td.c-ver,.dev-tabla.dev-tabla-rev tr.dev-fila > td.c-alta{display:none!important}
}
/* Revendedor: la fila no abre nada al tocarla (se abre con el engrane) */
.dev-tabla-rev .dev-fila{cursor:auto}
/* Tableta y escritorio: la tabla se desliza si no cabe; la columna de acciones queda fija a la derecha */
@media (min-width:768px){
  .dev-tabla .c-acc{position:sticky;right:0;z-index:1;background:var(--mxtv-surface-1);box-shadow:-8px 0 8px -8px rgba(0,0,0,.35)}
  .card-body:has(> table.dev-tabla){overflow-x:auto}
  /* Fondo opaco siempre (en oscuro el texto de la columna anterior se veía a través) y
     columnas sin partir: si no caben, la tabla se desliza en vez de encimarse. */
  .dev-tabla td.c-acc,.dev-tabla th.c-acc{background-color:var(--mxtv-surface-1)!important}
  .dev-tabla tr.dev-fila:hover > td.c-acc{background-color:var(--mxtv-surface-2)!important}
  /* El menú ⋯ abierto quedaba bajo la columna fija de las filas siguientes y el clic caía en ellas. */
  .dev-tabla td.c-acc:has(.dropdown-menu.show){z-index:3}
  .dev-tabla.sm-table thead tr th,.dev-tabla.sm-table tbody tr td{white-space:nowrap;padding-left:10px!important;padding-right:10px!important}
}
/* Iconos de acción (segunda opinión): marca e info alternados, a todo color en claro y oscuro;
   verde/ámbar/rojo quedan para el estado. Al pasar, fondo del mismo color al 12%. */
.dev-acc .dt-ic{color:var(--mxtv-brand);border-radius:8px}
.dev-acc .dt-ic[data-v=licencia],.dev-acc .dt-ic[data-v=info]{color:var(--mxtv-info)}
.dev-acc .dt-ic:hover,.dev-acc .dt-ic:focus-visible{background:color-mix(in srgb,currentColor 12%,transparent)}
.dev-acc .dt-ic:hover{color:var(--mxtv-brand)}
.dev-acc .dt-ic[data-v=licencia]:hover,.dev-acc .dt-ic[data-v=info]:hover{color:var(--mxtv-info)}

/* ==========================================================================
   IDENTIDAD MXTV (F2) — logo-mark + wordmark únicos (login = sidebar = topbar)
   ========================================================================== */
.mxtv-mark{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--mxtv-r-md);flex:0 0 auto;
  background:linear-gradient(135deg,var(--mxtv-brand-500),var(--mxtv-brand-700));
  color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.5px;box-shadow:var(--mxtv-sh-1)}
.mxtv-mark.lg{width:46px;height:46px;font-size:18px;border-radius:var(--mxtv-r-lg)}
.mxtv-wordmark{font-weight:800;font-size:1.05rem;color:var(--mxtv-text);letter-spacing:-.01em;line-height:1}
.mxtv-wordmark b{color:var(--mxtv-brand);font-weight:800}
.mxtv-brand-row{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.mxtv-brand-sub{font-size:9px;font-weight:700;letter-spacing:.6px;
  color:var(--mxtv-brand);background:var(--mxtv-brand-50);border-radius:6px;padding:1px 5px}
html[data-theme="dark"] .mxtv-brand-sub{background:rgba(91,141,239,.14)}

/* ==========================================================================
   F3 — COMPONENTES BASE (focus, botones, pills, segmented, empty)
   ========================================================================== */

/* Focus-visible accesible (teclado) en todo control interactivo */
a:focus-visible,button:focus-visible,.btn:focus-visible,
.form-control:focus-visible,.form-select:focus-visible,
[tabindex]:focus-visible,.dt-ic:focus-visible{
  outline:2px solid var(--mxtv-brand);outline-offset:2px;border-radius:var(--mxtv-r-xs)}
.form-control:focus,.form-select:focus{
  border-color:var(--mxtv-brand);box-shadow:0 0 0 3px var(--mxtv-brand-100)}
html[data-theme="dark"] .form-control:focus,html[data-theme="dark"] .form-select:focus{
  box-shadow:0 0 0 3px rgba(91,141,239,.25)}

/* Botón-icono fantasma: estándar para acciones de tabla (reemplaza multicolor) */
.btn-icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--mxtv-text-muted);border-radius:var(--mxtv-r-sm);
  font-size:16px;cursor:pointer;transition:background-color .12s,color .12s}
.btn-icon:hover{background:var(--mxtv-surface-2);color:var(--mxtv-brand)}
.btn-icon.is-danger:hover{background:var(--mxtv-danger-bg);color:var(--mxtv-danger)}
.btn-icon.is-warning:hover{background:var(--mxtv-warning-bg);color:var(--mxtv-warning)}
.btn-icon:disabled{opacity:.45;cursor:not-allowed}

/* Pills de estado semánticas (legibles en light Y dark) */
.mxtv-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 10px;border-radius:999px;line-height:1.4;white-space:nowrap}
.mxtv-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.mxtv-pill.is-success{color:var(--mxtv-success);background:var(--mxtv-success-bg)}
.mxtv-pill.is-warning{color:var(--mxtv-warning);background:var(--mxtv-warning-bg)}
.mxtv-pill.is-danger{color:var(--mxtv-danger);background:var(--mxtv-danger-bg)}
.mxtv-pill.is-info{color:var(--mxtv-info);background:var(--mxtv-info-bg)}
.mxtv-pill.is-neutral{color:var(--mxtv-text-muted);background:var(--mxtv-surface-3)}

/* Segmented control único (rango de fechas / tipo) = marca, sin verde/azul mixto */
.mxtv-seg{display:inline-flex;background:var(--mxtv-surface-2);border:1px solid var(--mxtv-border);
  border-radius:var(--mxtv-r-md);padding:2px;gap:2px}
.mxtv-seg .btn,.mxtv-seg button{border:0!important;background:transparent!important;
  color:var(--mxtv-text-muted)!important;font-size:12px;font-weight:600;border-radius:var(--mxtv-r-sm);
  padding:3px 12px;box-shadow:none!important;line-height:1.5}
.mxtv-seg .btn.active,.mxtv-seg button.active{
  background:var(--mxtv-brand)!important;color:#fff!important}
.mxtv-seg .btn:hover:not(.active),.mxtv-seg button:hover:not(.active){color:var(--mxtv-text)!important}

/* Estado vacío con icono + texto */
.mxtv-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:32px 16px;color:var(--mxtv-text-muted);text-align:center}
.mxtv-empty iconify-icon{font-size:34px;opacity:.5}
.mxtv-empty .mxtv-empty-t{font-weight:600;color:var(--mxtv-text)}
.mxtv-empty .mxtv-empty-s{font-size:12px}

/* KPI: número prominente + delta + sparkline */
.kpi-val{font-size:1.5rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--mxtv-text)}
.kpi-delta{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;
  padding:1px 6px;border-radius:999px;line-height:1.5}
.kpi-delta.is-up{color:var(--mxtv-success);background:var(--mxtv-success-bg)}
.kpi-delta.is-down{color:var(--mxtv-danger);background:var(--mxtv-danger-bg)}
.kpi-delta.is-flat{color:var(--mxtv-text-muted);background:var(--mxtv-surface-3)}
.kpi-spark{height:34px;margin-top:6px}

/* Barra de progreso pjax (navegacion AJAX) + atenuado suave del contenido */
#mxtvBar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--mxtv-brand);
  z-index:3000;opacity:0;pointer-events:none}
#mxtvBar.on{width:92%;opacity:1;transition:width 1.4s cubic-bezier(.1,.7,.4,1)}
#mxtvPage{transition:opacity .12s ease}

/* Skeleton de carga (shimmer) — reemplaza "Cargando…" en modales/AJAX */
.mxtv-skel{display:block;border-radius:var(--mxtv-r-sm);
  background:linear-gradient(90deg,var(--mxtv-surface-2) 25%,var(--mxtv-surface-3) 37%,var(--mxtv-surface-2) 63%);
  background-size:400% 100%;animation:mxtvShimmer 1.2s ease-in-out infinite}
.mxtv-skel+.mxtv-skel{margin-top:8px}
@keyframes mxtvShimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ==========================================================================
   SIDEBAR angosta (ajustada al texto). Header (logo) sigue el mismo ancho.
   ========================================================================== */
@media(min-width:992px){
  .sidebar{width:212px!important}
  .dashboard-main{margin-left:212px!important}
  .sidebar-logo{padding-left:16px;padding-right:12px}
}
/* La plantilla esconde el menú con inset-inline-start:-100% por debajo de 1200px; aquí lo
   esconde/muestra transform (nav-off / nav-on). Sin esto, de 992 a 1199px quedaba el hueco del
   menú en blanco y en celular el botón no lo abría. El logo ocupa todo el ancho del menú. */
.sidebar{inset-inline-start:0}
.sidebar-logo.mxtv-brand-row{display:flex;width:100%}
.dashboard-main{min-width:0}
@media(max-width:991px){ .sidebar{z-index:1050;box-shadow:0 0 24px rgba(0,0,0,.35)} body:not(.nav-on) .sidebar{box-shadow:none} }
/* Encabezado en celular: todo en un renglón (antes se partía en dos y tapaba el título) */
@media(max-width:575.98px){
  .navbar-header .row{flex-wrap:nowrap;--bs-gutter-x:8px}
  .navbar-header .w-40-px{width:36px!important}.navbar-header .h-40-px{height:36px!important}
  .navbar-header .gap-2{gap:6px!important}
}
@media(max-width:429.98px){ .navbar-header .mxtv-brand-row{display:none!important} }

/* ==========================================================================
   F9 — RESPONSIVE
   ========================================================================== */
@media(max-width:575.98px){
  .dashboard-main-body{padding-left:12px;padding-right:12px}
  .mxtv-crumb{display:none!important}             /* breadcrumb fuera en móvil (gana a .d-flex de BS) */
}
/* Layout 100% FLUIDO: el contenido usa todo el ancho disponible (sin tope fijo). */
.dashboard-main-body{width:100%;max-width:none}

/* ==========================================================================
   ONLINE DOT — indicador heartbeat en lista de dispositivos
   ========================================================================== */
.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:5px;vertical-align:middle;flex-shrink:0}
.online-dot.is-offline{background:#94a3b8}

/* ==========================================================================
   INPUTS NUMÉRICOS — el spinner nativo se pinta burdo y cortado sobre el
   tema: fuera en todos los navegadores, el campo queda limpio.
   ========================================================================== */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ==========================================================================
   MODALES — la X del título es el único cierre genérico; el SVG de bootstrap
   es negro y en oscuro desaparecía: se invierte con el tema. Encabezado del
   mismo color que el cuerpo (sin franja gris ni acento: la franja dejaba un
   borde oscuro arriba en claro). Animación corta y sin "transition:all".
   ========================================================================== */
[data-theme=dark] .btn-close{filter:invert(1) grayscale(100%) brightness(180%)}
.modal-content.mxtv-modal{border:1px solid var(--mxtv-border)!important;border-radius:16px;overflow:hidden;background-clip:padding-box;background:var(--mxtv-surface-1)}
html[data-theme="dark"] .modal-content.mxtv-modal{background:var(--mxtv-surface-2)}
.mxtv-modal .modal-header.mxtv-modal-head{background:transparent;border-bottom:1px solid var(--mxtv-border);border-radius:0;padding:16px 16px 14px 24px;position:relative}
.mxtv-modal .modal-title{font-size:17px;font-weight:600!important;letter-spacing:-.01em;color:var(--mxtv-text)}
.mxtv-modal-ico{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--mxtv-brand-50);color:var(--mxtv-brand);font-size:20px;flex-shrink:0}
/* X: 40x40 de toque, fondo al pasar */
.mxtv-modal .btn-close{width:40px;height:40px;padding:0;margin:-4px 0 -4px 8px;border-radius:10px;background-size:12px;opacity:.7;
  transition-property:background-color,opacity;transition-duration:.15s}
.mxtv-modal .btn-close:hover{opacity:1;background-color:var(--mxtv-surface-2)}
[data-theme=dark] .mxtv-modal .btn-close{opacity:.85}
[data-theme=dark] .mxtv-modal .btn-close:hover{opacity:1;background-color:rgba(0,0,0,.25)}
.mxtv-modal .btn-close:focus{box-shadow:0 0 0 3px rgba(21,88,176,.25)}
.mxtv-modal .modal-body{padding:20px 24px 24px}
@media (max-width:575.98px){.mxtv-modal .modal-header.mxtv-modal-head{padding:12px 10px 12px 16px}.mxtv-modal .modal-body{padding:16px}
  .modal-fullscreen-sm-down .modal-content.mxtv-modal{border:0!important;border-radius:0}}
/* style.css trae "*{transition:all .3s}": dentro del modal hacía todo lento. Solo color y
   bordes, rápido; los componentes con su propia transición la conservan. */
.modal *{transition-duration:.15s}
.modal-content,.modal-header,.modal-body,.modal-title{transition:none}
.modal.fade{transition:opacity .15s linear}
.modal.fade .modal-dialog{transform:translateY(8px) scale(.98);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.modal.show .modal-dialog{transform:none}
.modal-backdrop.fade{transition:opacity .15s linear}
#deviceModal .modal-dialog.modal-lg{max-width:720px}
@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transform:none;transition:none}}

/* ==========================================================================
   STEPPER NUMÉRICO — reemplaza el spinner nativo en campos de créditos:
   botones − / + a los lados, valor centrado. JS por delegación en mxtv-ui.js.
   ========================================================================== */
.mxtv-stepper .mxtv-step{width:44px;font-weight:700;font-size:18px;line-height:1;
  color:var(--mxtv-text);border-color:var(--mxtv-border);background:var(--mxtv-surface-2)}
.mxtv-stepper .mxtv-step:hover{background:var(--mxtv-surface-3);color:var(--mxtv-brand)}
.mxtv-stepper input{text-align:center;font-weight:700}

/* Campo con cambios sin guardar: marca ámbar hasta que el formulario se envía */
form .mxtv-changed{border-color:var(--mxtv-warning)!important;
  box-shadow:0 0 0 3px rgba(245,158,11,.15)!important}

/* Movil: tablas anchas se desplazan dentro de su tarjeta (el body tiene overflow-x:hidden y las cortaba) */
@media (max-width:767.98px){
  .card-body:has(> table.table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .d-flex > .flex-grow-1{min-width:0}
  .card-header.d-flex{flex-wrap:wrap;gap:8px}
  input.form-control,select.form-select,textarea.form-control{font-size:16px} /* iPhone no hace zoom al escribir */
}
/* Tablas de dispositivos: la columna Configurar queda fija a la derecha aunque la tabla se deslice */
table.table td:has(> .dev-view),table.table:has(.dev-view) thead th:last-child{
  position:sticky;right:0;z-index:1;background:var(--mxtv-surface-1,#fff);box-shadow:-8px 0 8px -8px rgba(0,0,0,.35)}
/* Al pasar el cursor, el tinte del tema (tr:hover td, casi transparente) se ponía encima y dejaba ver
   el texto de la columna de atrás: el tinte va sobre fondo opaco. */
table.table tbody tr:hover td:has(> .dev-view){
  background:linear-gradient(color-mix(in srgb,var(--mxtv-brand) 4%,transparent),color-mix(in srgb,var(--mxtv-brand) 4%,transparent)) var(--mxtv-surface-1,#fff)}
/* Registro de mensajes del equipo (diálogo Mensaje) */
.msg-log{max-height:560px;overflow-y:auto}
.msg-log-it{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--mxtv-border)}
.msg-log-it:first-of-type{border-top:0}
.msg-log-it .ic{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:16px;background:var(--mxtv-info-bg);color:var(--mxtv-info)}
.msg-log-it.is-warning .ic{background:var(--mxtv-warning-bg);color:var(--mxtv-warning)}
.msg-log-it.is-promo .ic{background:var(--mxtv-surface-2);color:#9E77ED}
.msg-log-b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Tipo en celular: icono arriba y texto abajo, igual en las tres tarjetas */
@media (max-width:575.98px){.msg-nivel{padding:8px 6px}.msg-nivel .t{flex-direction:column;gap:2px;font-size:12.5px;text-align:center;flex-wrap:nowrap}.msg-nivel .t iconify-icon{font-size:18px}}
/* Plataformas de cobro: tarjetas con la misma cabecera (logo, nombre, comisión, estado, encendido) */
.cob-logo{width:36px;height:36px;border-radius:var(--mxtv-r-md);border:1px solid #000;display:inline-flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;color:var(--mxtv-brand)}
.cob-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.3;white-space:nowrap}
.cob-badge.is-comision{background:var(--mxtv-warning-bg);color:var(--mxtv-warning)}
.cob-badge.is-libre,.cob-badge.is-listo{background:var(--mxtv-success-bg);color:var(--mxtv-success)}
.cob-badge.is-falta{background:var(--mxtv-surface-2);color:var(--mxtv-text-muted)}
.cob-badge.is-pruebas{background:var(--mxtv-info-bg);color:var(--mxtv-info)}
.cob-badge.is-real{background:var(--mxtv-danger-bg);color:var(--mxtv-danger)}
.cob-grupo{display:contents}
:where(.cob-grupo)>*{width:100%;max-width:100%}
.cob-grupo>*{flex-shrink:0;padding-right:calc(var(--bs-gutter-x)*.5);padding-left:calc(var(--bs-gutter-x)*.5);margin-top:var(--bs-gutter-y)}
.cob-hook{border:1px dashed var(--mxtv-border);border-radius:var(--mxtv-r-md);padding:12px;background:var(--mxtv-surface-2)}
.cob-hook [data-copiable]{cursor:pointer}
.cob-hook summary{cursor:pointer;width:max-content;list-style:none}
.cob-hook summary::-webkit-details-marker{display:none}
.cob-hook summary::before{content:"▸";display:inline-block;width:1em}
.cob-hook details[open]>summary::before{content:"▾"}
.cob-logo [icon="simple-icons:mercadopago"]{color:#00b1ea}
.cob-logo [icon="simple-icons:revolut"]{color:var(--mxtv-text)}
.cob-card .form-switch .form-check-input{width:40px;height:22px;cursor:pointer;background-color:var(--mxtv-danger);border-color:var(--mxtv-danger)}
.cob-card .form-switch .form-check-input::before{visibility:visible;opacity:1;width:18px;height:18px;left:2px}
.cob-card .form-switch .form-check-input:checked::before{left:calc(100% - 20px)}
.cob-card .form-switch .form-check-input:checked{background-color:var(--mxtv-success);border-color:var(--mxtv-success)}
/* Paquetes de créditos del revendedor: tarjeta seleccionable */
.mxtv-paquete{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.mxtv-paquete:hover{border-color:var(--mxtv-brand)!important}
.mxtv-paquete.is-activo{border-color:var(--mxtv-brand)!important;box-shadow:0 0 0 2px var(--mxtv-brand) inset}
.mxtv-paquete:has(input:focus-visible){outline:2px solid var(--mxtv-brand);outline-offset:2px}