/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO UNIFICADO — Portal Corporativo (sep-2026)
   Misma familia visual que Gestión Operativa: mismos botones, campos, tablas,
   tarjetas, ventanas y avisos. 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). Regla para pantallas nuevas: usar las clases comunes
   (btn, btn-primario, campo, panel, tabla-wrap, badge) sin padding/bordes en línea.
   Fuente editable: E:\CODE\ux-apps\portal\ds.css  (aplicar con aplicar_ds.py)
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --primario:#1c3f60;--primario-hover:#132c44;--primario-cl:#eef2f7;
  --bg:#f4f6fa;--texto:#1a2632;--texto-sec:#5c6b7a;--borde:#d5dce4;--gris-cl:#eef1f5;
  --rojo:#b42318;--rojo-cl:#fdeceb;--verde:#1a7f4b;--verde-cl:#e8f5ee;--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-lg: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;-webkit-font-smoothing:antialiased;line-height:1.45}
*{scrollbar-width:thin;scrollbar-color:#c3cdd9 transparent}
h1,h2,h3{letter-spacing:-.01em;line-height:1.25}
::selection{background:#cfe0f3}

/* ── Barra superior ── */
.header .logo{border-radius:10px}
.header .titulo{font-size:17px;font-weight:700;color:var(--primario)}
.header .avatar{background:var(--primario-cl);color:var(--primario)}
.header .btn{min-height:36px;padding:6px 12px;font-size:13.5px}
main{max-width:1180px}
.subtitulo{font-size:14px}
.toolbar h2{font-size:20px;font-weight:700}

/* ── Botones: una sola escala ── */
.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(--primario);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){background:#f6f9fd;border-color:var(--primario)}
.btn:focus-visible,.tab:focus-visible,.card:focus-visible{outline:none;box-shadow:var(--foco)}
.btn:disabled{opacity:.55;cursor:default}
.btn-primario{background:var(--primario);color:#fff;border-color:var(--primario)}
.btn-primario:hover:not(:disabled){background:var(--primario-hover);border-color:var(--primario-hover)}
.btn-rojo{background:#fff;color:var(--rojo);border-color:#f1c4c0}
.btn-rojo:hover:not(:disabled){background:var(--rojo-cl);border-color:#e5a39d}
.btn-mini{min-height:32px;padding:4px 10px;font-size:12.5px;border-radius:8px}
.acciones .btn{min-height:32px;padding:4px 10px;font-size:12.5px;border-radius:8px}

/* ── Tarjetas del portal ── */
.card{border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);transition:transform .15s,box-shadow .15s,border-color .15s}
.card:hover{transform:translateY(-2px);box-shadow:var(--sombra-media);border-color:#c3cdd9}
.card:active{transform:none}
.card-body .t{font-size:15px;font-weight:600}
.card-body .d{font-size:13px;line-height:1.45}
.card-body .abrir{font-size:13px}
.tools-titulo{font-size:17px;font-weight:700}
.tools-lista,.panel,.tabla-wrap{border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra)}
.tool-item{border-bottom-color:var(--gris-cl)}
.tool-item:hover{background:#f6f9fd}
.tool-nombre{font-size:15px}
.tool-desc{font-size:13px}

/* ── Pestañas ── */
.tabs{gap:4px;overflow-x:auto}
.tab{font-weight:500;min-height:42px}
.tab.activa{font-weight:700}

/* ── Campos ── */
.campo :is(input,select,textarea):where(:not([type=checkbox],[type=radio],[type=file],[type=color],[type=hidden])),.user-filter{
  font-family:inherit;font-size:14px;color:var(--texto);background:#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}
.campo :is(input,select,textarea):focus,.user-filter:focus{outline:none;border-color:var(--primario);box-shadow:var(--foco)}
::placeholder{color:#94a1af}
.campo label{font-size:12.5px;font-weight:600;color:var(--texto-sec)}
.contador{font-weight:500}
.icon-grid,.user-list{border-radius:var(--radio-ctl)}
.icon-grid button{border-radius:8px;min-height:34px}
.icon-grid button.sel{background:var(--primario-cl)}
.paleta button{width:30px;height:30px;border-radius:8px}
.user-item{min-height:44px;border-radius:8px}
.user-item input[type=checkbox]{width:17px;height:17px}
.toggle input:checked+.slider{background:var(--verde)}

/* ── Tablas ── */
th{padding:10px 14px;background:#f8fafc;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;border-bottom:1px solid var(--borde)}
td{padding:11px 14px;border-bottom-color:var(--gris-cl);font-size:13.5px}
tbody tr:hover td{background:#f6f9fd}
.badge{font-size:11.5px;line-height:1.4;padding:2px 10px}
.badge-on{background:var(--verde-cl);color:var(--verde)}.badge-off{background:var(--gris-cl);color:var(--texto-sec)}.badge-info{background:var(--info-cl);color:var(--info)}
.aviso{border-radius:var(--radio-ctl)}.aviso-error{background:var(--rojo-cl)}.aviso-ok{background:var(--verde-cl)}

/* ── Ventana de confirmación ── */
.overlay{background:rgba(15,23,42,.45);animation:dsFondo .15s}
.modal{border-radius:16px;box-shadow:var(--sombra-lg);animation:dsModal .2s cubic-bezier(.2,.8,.2,1)}
.modal h3{font-size:17px;font-weight:700}
.spinner{border-color:#d3dce7;border-top-color:var(--primario)}
@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}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Celular: dedos, no punteros. 16px evita el zoom de iOS al enfocar ── */
@media(max-width:760px){
  :root{--ctl-h:44px}
  .campo :is(input,select,textarea):where(:not([type=checkbox],[type=radio],[type=file],[type=color],[type=hidden])),.user-filter{font-size:16px}
  .header .titulo{font-size:15px}
  .toolbar h2{font-size:18px;flex:1 1 100%}
  .toolbar .spacer{display:none}
  .toolbar .btn{flex:1 1 auto}
  .btn-mini,.acciones .btn{min-height:36px;padding:6px 12px;font-size:13px}
  /* Portal: dos aplicaciones por fila, tarjeta compacta (antes una por fila = mucho scroll). */
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card{min-height:0}
  .card-header{height:52px;padding:0 14px}
  .card-header svg{width:28px;height:28px}.card-header .emoji{font-size:26px}
  .card-body{padding:10px 14px 14px;gap:4px}
  .card-body .t{font-size:14px;line-height:1.3}
  .card-body .d{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card-body .abrir{display:none}
  .tool-item{padding:12px 16px;min-height:44px}
  /* Tablas como TARJETAS: ds.js marca .ds-cards y rotula cada celda con su columna (data-l). */
  .tabla-wrap:has(>table.ds-cards){background:none;border:none;box-shadow:none;overflow:visible}
  table.ds-cards{display:block;min-width:0!important;background:none;box-shadow:none;border-collapse:separate}
  table.ds-cards>thead{display:none}
  table.ds-cards>tbody{display:grid;gap:10px}
  table.ds-cards>tbody>tr{display:flex;flex-direction:column;position:relative;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:12px 14px}
  table.ds-cards>tbody>tr>td{display:flow-root;padding:4px 0;border:none!important;background:none!important;position:static!important;box-shadow:none!important;text-align:right;min-width:0;max-width:none!important;overflow-wrap:anywhere;white-space:normal!important;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(--texto-sec);line-height:1.6;overflow-wrap:normal}
  table.ds-cards>tbody>tr>td:empty,table.ds-cards>tbody>tr>td.ds-vacia{display:none}
  table.ds-cards>tbody>tr>td.ds-tit{order:-1;display:block;text-align:left;font-size:15px;font-weight:600;padding:0 40px 6px 0;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.drag-handle::before,table.ds-cards>tbody>tr>td[colspan]::before{content:none}
  /* El asa para reordenar queda en la esquina de la tarjeta, grande para el dedo. */
  table.ds-cards>tbody>tr>td.drag-handle{position:absolute!important;top:6px;right:6px;width:40px;height:40px;display:grid;place-items:center;font-size:20px;padding:0;touch-action:none}
  table.ds-cards>tbody>tr>td.ds-acc{order:9;display:flex;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--gris-cl)!important}
  table.ds-cards>tbody>tr>td.ds-acc>.btn{flex:1 1 auto;margin:0}
  table.ds-cards>tbody>tr>td[colspan]{display:block;text-align:center;padding:14px 0}
  /* Formulario del admin: «Guardar» queda fijo abajo mientras se recorre el formulario. */
  .panel .ds-form-acciones{position:sticky;bottom:0;z-index:3;background:#fff;border-top:1px solid var(--gris-cl);margin:16px -16px 0!important;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .panel .ds-form-acciones>.btn{flex:1 1 auto}
  /* La ventana sube desde abajo y ocupa el ancho: los botones quedan al alcance del pulgar. */
  .overlay{place-items:end stretch}
  .modal{max-width:none;width:100%;margin:0;border-radius:18px 18px 0 0;padding:20px 16px calc(16px + env(safe-area-inset-bottom));animation-name:dsHoja}
  .modal .modal-acciones>.btn{flex:1 1 auto}
}