/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO UNIFICADO — Gestión Comercial (sep-2026)
   Misma familia visual que Gestión Operativa: una sola definición de botones,
   campos, tablas, tarjetas, ventanas y avisos para TODOS los módulos.
   Se carga DESPUÉS de styles.css a propósito: a igual especificidad gana esta
   capa. No cambia ninguna función; solo cómo se ve y se toca (celular primero).
   «Cotizaciones Artium» (.ca-*) y /visita conservan su diseño propio, ya pensado
   para el celular: aquí solo heredan colores y tipografía.
   Regla para pantallas nuevas: usar las clases comunes (btn primary/ghost/danger,
   buscar, panel > table, badge, modal-card) y NO escribir padding/bordes en línea.
   Fuente editable: E:\CODE\ux-apps\comercial\ds.css  (aplicar con aplicar_ds.py)
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --azul:#1c3f60;--azul2:#2a5d8a;--azul-osc:#132c44;--azul-cl:#eef2f7;
  --gris:#5c6b7a;--gris-cl:#eef1f5;--bg:#f4f6fa;--borde:#d5dce4;--texto:#1a2632;
  --ok:#1a7f4b;--ok-cl:#e8f5ee;--bad:#b42318;--bad-cl:#fdeceb;--warn:#b45309;--warn-cl:#fef3c7;--info:#1967d2;--info-cl:#e8f0fe;
  --radio:12px;--radio-ctl:10px;--ctl-h:40px;
  --sombra:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
  --sombra-media:0 6px 18px rgba(15,23,42,.12);
  --sombra-alta:0 16px 40px rgba(15,23,42,.22);
  --foco:0 0 0 3px rgba(28,63,96,.16);
}
body{font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--texto);-webkit-font-smoothing:antialiased;line-height:1.45}
*{scrollbar-width:thin;scrollbar-color:#c3cdd9 transparent}
h1,h2,h3,h4{letter-spacing:-.01em;line-height:1.25}
::selection{background:#cfe0f3}

/* ── Estructura: menú lateral claro, encabezado, área de trabajo ── */
.sidebar{background:#fff;color:var(--gris);border-right:1px solid var(--borde);padding:16px 10px}
.brand{color:var(--azul);font-size:17px;padding:0 10px 14px;border-bottom:1px solid var(--gris-cl)}
.sidebar nav{padding:10px 0;gap:3px}
.modulo{color:#3b4a59;border-left:none;border-radius:var(--radio-ctl);padding:10px 12px;font-size:13.5px;min-height:40px;font-family:inherit}
.modulo:hover{background:var(--gris-cl);color:var(--texto)}
.modulo.active{background:var(--azul-cl);color:var(--azul);font-weight:600;box-shadow:inset 3px 0 0 var(--azul)}
.modulo.inicio{border-bottom:none;margin-bottom:2px}
.sidebar .grupo-tit{color:var(--gris);letter-spacing:.06em;padding:12px 12px 6px}
.sidebar-foot{color:var(--gris);border-top:1px solid var(--gris-cl);padding:12px 10px 0}
.sidebar-foot .btn.link{color:var(--azul)}
.content{padding:22px 24px}
.topbar{margin-bottom:12px;gap:12px;min-height:var(--ctl-h)}
.topbar h2{color:var(--texto);font-size:20px;font-weight:700}
.estado{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-height:24px;margin-bottom:10px}
.estado a{color:var(--azul2)!important;font-weight:600;text-decoration:none}
.estado a:hover{text-decoration:underline}
.home-saludo{color:var(--texto);font-size:20px}

/* ── Botones: una sola escala. Relleno = acción principal; el resto, contorno ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--ctl-h);padding:8px 16px;border:1px solid var(--borde);border-radius:var(--radio-ctl);
  background:#fff;color:var(--azul);font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:hover:not(:disabled){border-color:var(--azul);background:#f6f9fd}
.btn:focus-visible,.modulo:focus-visible,.tab:focus-visible,.home-card:focus-visible{outline:none;box-shadow:var(--foco)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--azul);color:#fff;border-color:var(--azul)}
.btn.primary:hover:not(:disabled){background:var(--azul-osc);border-color:var(--azul-osc)}
.btn.ghost{background:#fff;color:var(--azul)}
.btn.danger{background:#fff;color:var(--bad);border-color:#f1c4c0}.btn.danger:hover:not(:disabled){background:var(--bad-cl);border-color:#e5a39d}
.btn.success{background:#fff;color:var(--ok);border-color:#b7dcc6}.btn.success:hover:not(:disabled){background:var(--ok-cl);border-color:#8fc7a6}
.btn.link{min-height:0;padding:4px;border-color:transparent;background:none;color:var(--azul2)}
.btn.link:hover:not(:disabled){background:none;border-color:transparent;text-decoration:underline}
.btn.sm{min-height:32px;padding:4px 10px;font-size:12.5px;border-radius:8px}
.icon-btn,.btn.icon-btn{width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border-radius:50%}
.icon-btn.mini,.btn.icon-btn.mini{width:26px;height:26px;min-width:26px;min-height:26px}
.icon-btn:hover{transform:none;filter:none}
.btn.primary .spin{border-color:#fff;border-top-color:transparent}

/* ── Campos: misma altura, borde, radio y foco en toda la app ── */
.buscar,
.modal-card:not(.ca-modal):not(.ca-modal-sm) :is(input,select,textarea):where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden])),
.content :is(input,select,textarea):where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],.fcol,.ti)){
  font-family:inherit;font-size:14px;color:var(--texto);background-color:#fff;border:1px solid var(--borde);border-radius:var(--radio-ctl);padding:9px 12px;min-height:var(--ctl-h);outline:none;transition:border-color .12s,box-shadow .12s}
@media(min-width:901px){.buscar{width:240px}}
:is(.content,.modal-card) :is(input,select,textarea):focus{outline:none;border-color:var(--azul);box-shadow:var(--foco)}
:is(.content,.modal-card) :is(input,select,textarea):disabled{background-color:#f3f5f8;color:var(--gris);cursor:not-allowed}
.modal-card textarea{min-height:76px;line-height:1.45;resize:vertical}
::placeholder{color:#94a1af}
input[type=checkbox],input[type=radio]{accent-color:var(--azul);width:17px;height:17px;cursor:pointer;flex:none}
input[type=file]{font-family:inherit;font-size:13px;max-width:100%}
.modal-card label{font-size:12.5px;font-weight:600;color:var(--gris)}
/* Compactos a propósito: filtros por columna y editor de tarifas. */
.fcol{min-height:30px;border-radius:8px;border-color:var(--borde);font-family:inherit}
.tabla-tar .ti{border-color:var(--borde);border-radius:8px;min-height:32px}
.ca-f input,.ca-f select,.ca-f textarea{border-color:var(--borde);border-radius:var(--radio-ctl);min-height:var(--ctl-h)}
.ca-f input:focus,.ca-f select:focus,.ca-f textarea:focus{border-color:var(--azul);box-shadow:var(--foco)}

/* ── Pestañas por tipo (Pendientes) ── */
.tabs{gap:6px;overflow-x:auto;border-bottom-color:var(--gris-cl)}
.tab{background:#fff;border-color:var(--borde);font-family:inherit;min-height:34px;white-space:nowrap}
.tab:hover{background:var(--azul-cl)}
.tab.active{background:var(--azul);border-color:var(--azul)}

/* ── Tablas ── */
.panel{border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra)}
.panel.ca-host{border:none;box-shadow:none}
.panel>table{font-size:13.5px}
thead th{background:#f8fafc;color:var(--gris);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;padding:10px 14px;border-bottom:1px solid var(--borde)}
thead th[onclick]:hover{color:var(--texto);background:var(--gris-cl)}
.panel>table thead tr:first-child th:last-child{background:#f8fafc}
tr.filtros th,.panel>table tr.filtros th:last-child{background:#fff;padding:6px 8px;border-bottom:1px solid var(--borde);text-transform:none;letter-spacing:0}
tbody td{padding:11px 14px;border-top:1px solid var(--gris-cl);vertical-align:middle}
tbody tr:hover,.panel>table tbody tr:hover td:last-child{background:#f6f9fd}
.tabla-tar thead th{padding:8px}
.vacio{color:var(--gris);font-size:13.5px;line-height:1.5}
.badge,.perm-chip,.home-card .hc-nivel{font-size:11.5px;font-weight:600;line-height:1.4;padding:2px 10px;border-radius:999px;white-space:nowrap}
.badge.cotizada{background:var(--info-cl);color:var(--info)}
.badge.ganado{background:var(--ok-cl);color:var(--ok)}
.badge.perdido{background:var(--bad-cl);color:var(--bad)}
.badge.cerrada{background:var(--gris-cl);color:var(--gris)}
.badge.otro{background:var(--warn-cl);color:var(--warn)}

/* ── Menú «Acciones ▾» (lo arma ds.js con los botones originales de la fila) ── */
.ds-menu-btn{white-space:nowrap}
.ds-menu{display:none;position:fixed;z-index:60;min-width:230px;max-width:min(340px,92vw);background:#fff;border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra-alta);padding:6px;text-align:left}
.ds-menu.abierto{display:block;animation:dsModal .14s}
/* Un botón dentro del menú deja de ser botón: es una FILA. Hay que decirlo con `.btn` en el selector
   porque `.btn.icon-btn` y `.btn.primary` (0,2,0) le ganan a `.ds-menu>:is(button,a)` (0,1,1): sin esto
   los ítems quedaban como círculos de 34 px, en azul los primary, y el rótulo se salía encima del de al
   lado (se veía en Convocatorias, que tiene 6 acciones). */
.ds-menu>:is(button,a){display:flex;width:100%;height:auto;min-width:0;justify-content:flex-start;gap:10px;min-height:40px;padding:8px 12px;margin:0;border:none;border-radius:8px;background:transparent;color:var(--texto);font-size:13.5px;font-weight:500;text-align:left;white-space:normal;text-decoration:none}
.ds-menu>:is(button,a).btn{width:100%;height:auto;min-width:0;min-height:40px;padding:8px 12px;border-radius:8px;justify-content:flex-start;gap:10px;background:transparent;color:var(--texto);box-shadow:none}
.ds-menu>:is(button,a).btn.danger{color:var(--bad)}
.ds-menu>:is(button,a):hover:not(:disabled){background:var(--azul-cl);color:var(--azul)}
.ds-menu>.danger{color:var(--bad)}.ds-menu>.danger:hover:not(:disabled){background:var(--bad-cl);color:var(--bad)}
.ds-menu>[data-ds-l]::after{content:attr(data-ds-l)}
.ds-menu>.hidden{display:none!important}
.ds-menu-fondo{position:fixed;inset:0;z-index:59;background:transparent}
td.ds-menu-abierto{z-index:61!important}
.ds-barra{display:none}

/* ── Tarjetas y paneles ── */
.home-card,.chk-box,.ficha,.part-celda,.tabla-tar,.tar-resumen,.hist-item{border-color:var(--borde);border-radius:var(--radio-ctl)}
.home-card{padding:18px;gap:10px;border-radius:var(--radio);box-shadow:var(--sombra)}
.home-card:hover{box-shadow:var(--sombra-media);border-color:#c3cdd9;transform:translateY(-1px)}
.home-card .hc-ico{width:46px;height:46px;display:grid;place-items:center;background:var(--azul-cl);border-radius:12px;font-size:24px}
.home-card .hc-tit{font-size:15px;line-height:1.3;color:var(--texto)}
.home-card.admin,.chk-box{background:#fff;border-color:var(--borde)}
.chk-box{border-radius:var(--radio);box-shadow:var(--sombra)}
.chk-progress>div{background:var(--ok)}.chk-item input{accent-color:var(--ok)}
.chk-item{min-height:44px;align-items:center}
.hist-item{border-left:3px solid var(--azul2);border-radius:0 var(--radio-ctl) var(--radio-ctl) 0;background:#f8fafc}
.ficha-titulo{color:var(--gris)}
.ficha-etq,.part-etq{color:var(--gris)}

/* ── Ventanas ── */
.modal{background:rgba(15,23,42,.45);animation:dsFondo .15s}
.modal-card{--m-x:26px;--m-b:26px;border-radius:16px;box-shadow:var(--sombra-alta);animation:dsModal .2s cubic-bezier(.2,.8,.2,1)}
.modal-card h3{color:var(--texto);font-size:17px;font-weight:700;padding-right:34px}
.modal-close{top:10px;right:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--gris);z-index:4}
.modal-close:hover{background:var(--gris-cl);color:var(--texto)}
/* Barra de acciones fija abajo (ds.js marca la ÚLTIMA fila de botones de cada ventana). */
.modal-card .ds-acciones{position:sticky;bottom:calc(var(--m-b) * -1);z-index:3;display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;
  background:#fff;border-top:1px solid var(--gris-cl);margin:18px calc(var(--m-x) * -1) calc(var(--m-b) * -1)!important;padding:12px var(--m-x) 14px}
.login{background:linear-gradient(135deg,#132c44,#1c3f60 55%,#2a5d8a)}
.login-card{border-radius:18px;box-shadow:var(--sombra-alta)}
.login-card h1{color:var(--azul)}
.login-card .btn{min-height:46px;width:100%}
@keyframes dsModal{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dsFondo{from{opacity:0}to{opacity:1}}
@keyframes dsHoja{from{transform:translateY(100%)}to{transform:none}}

/* ── Avisos ── */
.toast{background:#1a2632;border-radius:var(--radio-ctl);box-shadow:var(--sombra-alta);font-weight:500;font-size:14px;max-width:min(92vw,520px)}
.toast.ok{background:var(--ok)}.toast.bad{background:var(--bad)}

/* ── Cotizaciones Artium: conserva su lenguaje; hereda colores de la familia ── */
.ca-tab.on,.ca-mover button.on{background:var(--azul);border-color:var(--azul)}
.ca-col.sobre{box-shadow:inset 0 0 0 2px var(--azul)}
.ca-cerradas,.ca-agenda{border-color:var(--borde);box-shadow:var(--sombra)}
.ub-chip{border-color:var(--azul);font-family:inherit}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

@media(max-width:900px){
  .sidebar{padding:6px 10px;border-right:none;border-bottom:1px solid var(--borde)}
  .brand{border-bottom:none;border-right:1px solid var(--borde);padding:0 10px 0 4px;font-size:15px}
  .sidebar nav{padding:0;gap:4px}
  .modulo,.modulo.inicio{border-bottom:none;min-height:38px;padding:8px 12px}
  .modulo.active,.modulo.inicio.active{box-shadow:inset 0 -3px 0 var(--azul)}
  .sidebar-foot{border-top:none;padding:0 0 0 10px}
  .content{padding:14px 12px}
}

/* ── Celular: dedos, no punteros. 16px evita el zoom de iOS al enfocar ── */
@media(max-width:760px){
  :root{--ctl-h:44px}
  .buscar,
  .modal-card:not(.ca-modal):not(.ca-modal-sm) :is(input,select,textarea):where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden])),
  .content :is(input,select,textarea):where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],.ti)){font-size:16px}
  .btn.sm{min-height:36px;padding:6px 12px;font-size:13px}
  .icon-btn,.btn.icon-btn{width:40px;height:40px;min-width:40px}
  .icon-btn.mini,.btn.icon-btn.mini{width:32px;height:32px;min-width:32px}
  .topbar h2,.home-saludo{font-size:18px}
  .acciones{flex-wrap:wrap}
  .buscar{flex:1 1 150px;width:auto;min-width:0}
  .acciones>.btn{flex:1 1 auto}
  .estado .btn.sm{margin-left:0!important}
  .sidebar-foot #userName{display:none}
  /* Inicio: dos módulos por fila, tarjeta compacta. */
  .home-wrap{padding:4px 0}
  .home-grid{grid-template-columns:1fr 1fr;gap:10px}
  .home-card{padding:14px 12px;gap:8px}
  .home-card .hc-ico{width:40px;height:40px;font-size:21px}
  .home-card .hc-tit{font-size:14px}
  /* Tablas como TARJETAS: ds.js marca .ds-cards y rotula cada celda con su columna (data-l).
     La 1ª celda es el título de la tarjeta; la celda de botones va abajo a lo ancho.
     OJO: la app oculta filas con style="display:none" al filtrar → aquí NO se usa !important en el display del tr. */
  .panel:has(>table.ds-cards){background:none;border:none;box-shadow:none;overflow:visible}
  .panel:has(>table.ds-cards)>.tabs{background:none;border:none;padding:0 0 10px}
  .panel>table.ds-cards{display:block;min-width:0;font-size:14px;border-collapse:separate}
  /* Encabezado: fichas «Ordenar» (los títulos que ordenan) + botón «Filtros» que despliega los filtros por columna. */
  .ds-barra{display:flex;gap:8px;margin-bottom:8px}
  .ds-barra>.btn{flex:1 1 auto}
  table.ds-cards>thead{display:block;margin-bottom:10px}
  table.ds-cards>thead>tr:first-child{display:flex;align-items:center;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  table.ds-cards>thead>tr:first-child::before{content:'Ordenar';flex:none;font-size:12px;font-weight:600;color:var(--gris);margin-right:2px}
  table.ds-cards>thead>tr:first-child>th{display:none}
  table.ds-cards>thead>tr:first-child>th[onclick]{display:block;flex:none;position:static!important;background:#fff!important;border:1px solid var(--borde);border-radius:999px;padding:8px 14px;font-size:12.5px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--azul)}
  table.ds-cards>thead>tr.filtros{display:none}
  .panel.ds-filtros-on table.ds-cards>thead>tr.filtros{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:12px 14px}
  table.ds-cards>thead>tr.filtros>th{display:block;padding:0;background:none!important;border:none;position:static!important;white-space:normal}
  table.ds-cards>thead>tr.filtros>th.ds-vacia{display:none}
  table.ds-cards>thead>tr.filtros>th::before{content:attr(data-l);display:block;font-size:12.5px;font-weight:600;color:var(--gris);margin-bottom:4px}
  table.ds-cards>thead>tr.filtros .fcol{width:100%;min-height:var(--ctl-h);font-size:16px;padding:9px 12px;border-radius:var(--radio-ctl)}
  table.ds-cards>tbody{display:grid;gap:10px}
  table.ds-cards>tbody>tr{display:flex;flex-direction:column;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:12px 14px}
  table.ds-cards>tbody>tr:active{background:#f6f9fd}
  .panel>table.ds-cards>tbody>tr>td{display:flow-root;padding:4px 0;border:none;background:none!important;position:static;box-shadow:none;text-align:right;min-width:0;max-width:none;overflow-wrap:anywhere;font-size:14px}
  table.ds-cards>tbody>tr>td::before{content:attr(data-l);float:left;max-width:45%;margin-right:14px;text-align:left;font-size:12px;font-weight:600;color:var(--gris);line-height:1.6;overflow-wrap:normal}
  table.ds-cards>tbody>tr>td:empty,table.ds-cards>tbody>tr>td.ds-vacia{display:none}
  .panel>table.ds-cards>tbody>tr>td.ds-tit{order:-1;display:block;text-align:left;font-size:15px;font-weight:600;padding:0 0 6px;line-height:1.35}
  table.ds-cards>tbody>tr>td.ds-tit::before,table.ds-cards>tbody>tr>td.ds-acc::before,table.ds-cards>tbody>tr>td[colspan]::before{content:none}
  .panel>table.ds-cards>tbody>tr>td.ds-acc{order:9;display:block;margin-top:8px;padding-top:10px;border-top:1px solid var(--gris-cl)}
  table.ds-cards>tbody>tr>td.ds-acc>.row-actions{flex-wrap:wrap;gap:8px}
  table.ds-cards>tbody>tr>td.ds-acc>.row-actions>.ds-menu-btn{flex:1 1 auto;min-height:40px}
  .panel>table.ds-cards>tbody>tr>td[colspan]{display:block;text-align:center;padding:14px 0}
  table.ds-cards .td-compacta{max-width:none}
  table.ds-cards .celda-archivo{white-space:normal;flex-wrap:wrap;justify-content:flex-end}
  /* En el celular el menú sube desde abajo, con opciones grandes. */
  .ds-menu{left:0!important;right:0;top:auto!important;bottom:0;max-width:none;border-radius:18px 18px 0 0;border:none;padding:10px 10px calc(12px + env(safe-area-inset-bottom))}
  .ds-menu.abierto{animation:dsHoja .2s cubic-bezier(.2,.8,.2,1)}
  .ds-menu>:is(button,a){min-height:50px;font-size:16px;padding:10px 14px}
  .ds-menu>:is(button,a).btn{min-height:50px;padding:10px 14px}
  .ds-menu-fondo{background:rgba(15,23,42,.45)}
  /* La ventana sube desde abajo y ocupa el ancho: los botones quedan al alcance del pulgar. */
  .modal{place-items:end center}
  .modal-card:not(.ca-modal):not(.ca-modal-sm){--m-x:16px;--m-b:calc(18px + env(safe-area-inset-bottom));width:100%;max-width:none;max-height:94vh;border-radius:18px 18px 0 0;padding:18px var(--m-x) var(--m-b);animation-name:dsHoja}
  .modal-card .ds-acciones{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .modal-card .ds-acciones>.btn{flex:1 1 auto}
  .cierre-opts{flex-wrap:wrap}.cierre-opts>.btn{flex:1 1 auto}
  .toast{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));max-width:none;text-align:center}
}

/* ═══ MARCA MESA DE SOPORTE — misma imagen que Gestión Operativa (24-sep-2026) ═══
   Pantalla de ingreso con el logo, barra superior con la marca y usuario a la
   derecha. Los archivos viven en src/img/ (ms-logo, ms-mono-blanco, ms-icono). */

/* ── Ingreso ── */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:linear-gradient(135deg,#132c44,#1c3f60 55%,#2a5d8a)}
.login-card{background:#fff;width:360px;max-width:100%;padding:36px 32px;border-radius:18px;
  box-shadow:var(--sombra-alta);text-align:center}
.login-ms{display:block;width:min(220px,70%);height:auto;margin:0 auto 14px}
.login-card h1{font-size:20px;font-weight:700;color:var(--texto);margin:0 0 4px}
.login-card p{color:var(--gris);font-size:13px;margin:0 0 20px}
.btn.btn-block{width:100%;margin-top:8px;font-size:15px;min-height:46px;padding:12px}

/* ── Barra superior con la marca ── */
.app{grid-template-rows:auto 1fr}
.ms-topbar{grid-column:1/-1;display:flex;align-items:center;gap:14px;height:60px;padding:0 24px;
  background:#fff;border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:41}
.ms-topbar .brand{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0;border:none;
  font-size:17px;font-weight:700;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-logo{width:32px;height:32px;flex:none;border-radius:10px;background:var(--azul);
  display:flex;align-items:center;justify-content:center}
.brand-logo img{width:24px;height:auto;display:block}
.ms-topbar-der{display:flex;align-items:center;gap:10px}
.ms-topbar .usuario{color:var(--gris);font-size:12.5px;max-width:230px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ms-topbar .btn{min-height:34px;padding:5px 12px;font-size:13px}
/* El menú lateral acompaña el scroll, como en Operativa. */
@media(min-width:901px){
  .sidebar{position:sticky;top:60px;align-self:start;height:calc(100vh - 60px);overflow-y:auto}
}
@media(max-width:900px){
  /* Marca arriba, franja de módulos pegada debajo. */
  .app{grid-template-rows:auto auto 1fr}
  .ms-topbar{position:static;height:52px;padding:0 12px;gap:8px}
  .ms-topbar .brand{font-size:15px;gap:8px}
  .brand-logo{width:28px;height:28px;border-radius:9px}
  .brand-logo img{width:21px}
}
@media(max-width:600px){
  .login-card{padding:28px 22px}
  .ms-topbar .usuario{display:none}
}

/* ── Inicio por paneles (calcado de Gestión Operativa, 24-sep-2026) ──────────
   Los módulos se agrupan en secciones de color; lo que no está en ningún panel
   cae en «Otros módulos» (sección sin fondo). Los grupos se definen en app.js
   (HOME_PANELES): esta capa solo los pinta. */
.home-wrap .hp-panel{--ac:#1c3f60;--ac-cl:#eef2f7;margin-top:18px;border-radius:16px;padding:14px 16px 16px;
  background:var(--ac-cl);border:1px solid color-mix(in srgb,var(--ac) 18%,transparent)}
.home-wrap .hp-panel.otros{background:transparent;border:0;padding:0}
.home-wrap .hp-cab{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.home-wrap .hp-cab .punto{width:10px;height:10px;border-radius:50%;background:var(--ac);flex:0 0 auto}
.home-wrap .hp-cab h3{margin:0;font-size:15px;font-weight:700;color:var(--ac);letter-spacing:.01em}
.home-wrap .hp-cab .n{font-size:12px;font-weight:700;color:var(--ac);background:#fff;border-radius:999px;padding:1px 9px}
.home-wrap .hp-panel.otros .hp-cab h3{color:var(--gris)}
.home-wrap .hp-panel .home-grid{margin-top:0}
.home-wrap .hp-panel:not(.otros) .home-card{border-top:3px solid var(--ac)}
.home-wrap .hp-panel.azul{--ac:#1c3f60;--ac-cl:#eef2f7}   .home-wrap .hp-panel.verde{--ac:#1a7f4b;--ac-cl:#e8f5ee}
.home-wrap .hp-panel.morado{--ac:#6c3fb5;--ac-cl:#f1ecfb} .home-wrap .hp-panel.naranja{--ac:#b45309;--ac-cl:#fef3c7}
.home-wrap .hp-panel.rojo{--ac:#b42318;--ac-cl:#fdeceb}   .home-wrap .hp-panel.gris{--ac:#5c6b7a;--ac-cl:#eef1f5}
@media(max-width:760px){ .home-wrap .hp-panel{padding:12px;margin-top:14px} }

/* «Mis apps» (solo en el Inicio): enlaces a las otras apps de Artium, al pie del menú */
.sb-apps{display:flex;flex-direction:column;gap:3px;margin-top:12px;padding-top:8px;border-top:1px solid var(--borde)}
.sb-apps[hidden]{display:none}
.sb-apps a.modulo{display:flex;align-items:center;text-decoration:none}
@media(max-width:900px){
  .sb-apps{display:contents}
  .sb-apps[hidden]{display:none}
  .sb-apps .grupo-tit{border-left:1px solid var(--borde);margin-left:4px}
  .sb-apps a.modulo{white-space:nowrap;flex:none}
}

/* Editor del orden de «Mis apps» (solo superadmin): hoja inferior en celular, diálogo en escritorio */
.sb-apps .ma-ordenar{font-size:12px;opacity:.85}
.ma-ov{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1000;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:640px){.ma-ov{align-items:center}}
.ma-caja{background:#fff;width:100%;max-width:440px;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));max-height:90vh;overflow:auto}
@media(min-width:640px){.ma-caja{border-radius:16px}}
.ma-cab{display:flex;flex-direction:column;margin-bottom:10px}.ma-cab b{font-size:16px}.ma-cab small{color:var(--gris);font-size:12.5px}
.ma-fila{display:flex;align-items:center;gap:8px;border:1px solid var(--borde);border-radius:10px;padding:6px 8px;margin-bottom:6px;min-height:52px}
.ma-n{width:22px;text-align:center;color:var(--gris);font-weight:700;font-size:13px}
.ma-nom{flex:1;min-width:0;font-size:14.5px;overflow-wrap:anywhere}
.ma-fila button{width:44px;height:44px;border:1px solid var(--borde);background:#fff;border-radius:10px;font-size:18px;cursor:pointer;flex:none}
.ma-fila button:disabled{opacity:.3;cursor:default}
.ma-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.ma-est{font-size:13px;color:var(--gris)}
.ma-listo{min-height:44px;padding:0 20px;border:0;border-radius:10px;background:var(--azul);color:#fff;font-weight:600;cursor:pointer}