/* ============================================================
   ERP — HOJA PRINCIPAL  (agente BASE-UI)
   Hermana del sistema Fichas de CN: barra oscura con filo dorado,
   títulos en Georgia, cabeceras de tabla en carbón con letras crema y
   botón principal dorado. Pensada para un ERP: densa, cifras tabulares
   alineadas a la derecha, chips de estado y tarjetas de resumen.

   Los colores de la empresa llegan de Ajustes (empresa.colorPrincipal y
   colorAcento) y js/app.js los pone en <html> como --principal y --acento
   (con sus derivados). Estos son los de CN Capital por defecto.
   Modo oscuro: css/oscuro.css · Impresión: css/impresion.css
   ============================================================ */
:root{
  /* marca */
  --principal:#2b2b29;  --principal-2:#41413e;  --principal-suave:#f3f2ef;  --principal-osc:#20201f;
  --acento:#b8a282;     --acento-osc:#76654b;   --acento-suave:#efe8dd;     --crema:#ddd1bf;
  /* superficies y texto */
  --fondo:#f5f4f1;  --carta:#ffffff;  --carta-2:#faf9f7;  --tinta:#1f1f1d;  --gris:#66645e;
  --borde:#e4e1db;  --borde-fuerte:#cdc8bf;  --linea:#efede9;
  /* estados */
  --ok:#1c7c4d;     --ok-fondo:#e3f3ea;
  --error:#b3372b;  --error-fondo:#fbeae7;
  --aviso:#875f00;  --aviso-fondo:#fdf3dc;
  --info:#1d5a94;   --info-fondo:#e5eef8;
  --neutro:#55534d; --neutro-fondo:#efede9;
  /* gráficos */
  --g1:var(--principal); --g2:var(--acento); --g3:#3f8f6b; --g4:#5b7fb0; --g5:#c0704f; --g6:#8b7bb8;
  /* medidas */
  --alto-barra:58px; --ancho-menu:236px; --radio:12px;
  --sombra:0 1px 2px rgba(25,24,20,.05), 0 1px 4px rgba(25,24,20,.04);
  --fuente:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif:Georgia, 'Times New Roman', serif;
  /* nombres de Fichas (por si alguna pantalla los usa) */
  --verde:var(--principal); --verde-suave:var(--principal-suave); --dorado:var(--acento); --dorado-osc:var(--acento-osc);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; background:var(--fondo); }
body{ font-family:var(--fuente); font-size:14px; line-height:1.45; color:var(--tinta); background:var(--fondo); min-height:100vh; }
img, svg{ display:block; max-width:100%; }
button, input, select, textarea{ font:inherit; color:inherit; }
a{ color:var(--acento-osc); }
[hidden]{ display:none !important; }
::selection{ background:var(--acento-suave); color:var(--principal); }
:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.ico{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.saltar{ position:absolute; left:12px; top:-60px; z-index:300; background:var(--acento); color:var(--principal); padding:8px 14px; border-radius:8px; font-weight:700; text-decoration:none; }
.saltar:focus{ top:10px; }

/* ---------- arranque ---------- */
.arranque{ position:fixed; inset:0; z-index:250; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:radial-gradient(900px 520px at 50% -10%, color-mix(in srgb, var(--acento) 16%, var(--principal)), var(--principal) 70%); color:var(--crema); }
.arranque-logo{ height:86px; width:auto; }
.arranque-texto{ font-size:13px; letter-spacing:.4px; opacity:.85; }
.arranque .giro{ border-color:color-mix(in srgb, var(--acento) 35%, transparent); border-top-color:var(--acento); }

/* ---------- acceso: instalación, ingreso y cambio de clave ---------- */
.acceso-fondo{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px 16px;
  background:radial-gradient(1000px 560px at 50% -12%, color-mix(in srgb, var(--acento) 18%, var(--principal)), var(--principal) 68%); }
.acceso-caja{ background:var(--carta); width:100%; max-width:390px; border-radius:16px; padding:30px 28px 24px;
  border-top:4px solid var(--acento); box-shadow:0 18px 60px rgba(0,0,0,.35); text-align:center; }
.acceso-caja.ancha{ max-width:540px; }
.acceso-logo{ height:70px; width:auto; margin:0 auto 12px; object-fit:contain; }
.acceso-titulo{ font-family:var(--serif); font-size:21px; font-weight:700; color:var(--principal); letter-spacing:.4px; }
.acceso-sub{ font-size:13px; color:var(--gris); margin:6px 0 18px; }
.acceso-caja .form{ text-align:left; }
.acceso-caja .form-acciones{ border:0; padding:0; margin-top:14px; }
.acceso-caja .form-acciones .btn{ width:100%; justify-content:center; padding:11px 16px; font-size:14.5px; }
.acceso-caja input{ font-size:15px; padding:10px 12px; }
.acceso-pie{ margin-top:16px; font-size:12.5px; color:var(--gris); }
.acceso-firma{ color:var(--crema); opacity:.8; font-size:12px; letter-spacing:.5px; text-align:center; }
.enlace{ background:none; border:0; color:var(--acento-osc); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-weight:600; padding:6px; }

/* ---------- barra superior ---------- */
.barra-superior{ position:sticky; top:0; z-index:40; height:var(--alto-barra); display:flex; align-items:center; gap:14px;
  padding:0 16px 0 14px; background:var(--principal); color:#fff; border-bottom:3px solid var(--acento); }
.marca{ display:flex; align-items:center; height:100%; flex:0 0 auto; text-decoration:none; padding-right:6px; border-radius:6px; }
.marca-logo{ height:50px; width:auto; max-width:180px; object-fit:contain; margin:-4px 0; }
.miga{ display:flex; align-items:center; gap:8px; min-width:0; padding-left:14px; border-left:1px solid rgba(255,255,255,.14); height:30px; font-size:13.5px; white-space:nowrap; overflow:hidden; }
.miga-grupo{ color:var(--crema); opacity:.75; font-size:11px; text-transform:uppercase; letter-spacing:1.2px; font-weight:600; }
.miga-sep{ color:rgba(255,255,255,.3); }
.miga-titulo{ font-family:var(--serif); font-size:16px; letter-spacing:.4px; color:#fff; overflow:hidden; text-overflow:ellipsis; }
.barra-derecha{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.barra-btn{ height:36px; min-width:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 9px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#f1ede6; border-radius:9px; cursor:pointer; font-size:13px; font-weight:600; }
.barra-btn:hover{ background:rgba(255,255,255,.14); }
.barra-btn:focus-visible, .marca:focus-visible, .usuario-chip:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.barra-salir{ padding:0 12px; }
.btn-menu{ display:none; }
.usuario-chip{ display:flex; align-items:center; gap:9px; padding:4px 10px 4px 4px; border-radius:22px; text-decoration:none; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); max-width:260px; }
.usuario-chip:hover{ background:rgba(255,255,255,.12); }
.usuario-avatar{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--acento); color:var(--principal); font-size:12px; font-weight:800; letter-spacing:.5px; }
.usuario-datos{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.usuario-datos b{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usuario-datos small{ font-size:11px; color:var(--crema); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.barra-carga{ position:fixed; left:0; right:0; top:calc(var(--alto-barra)); height:3px; z-index:41; pointer-events:none; opacity:0; overflow:hidden; }
.barra-carga.activa{ opacity:1; }
.barra-carga::before{ content:""; position:absolute; top:0; bottom:0; width:30%; background:var(--acento); filter:brightness(1.15); animation:carga 1.1s ease-in-out infinite; }
@keyframes carga{ from{ left:-30%; } to{ left:100%; } }

/* ---------- estructura: menú lateral y contenido ---------- */
.cuerpo-app{ display:flex; align-items:flex-start; min-height:calc(100vh - var(--alto-barra)); }
.menu{ position:sticky; top:calc(var(--alto-barra) + 3px); flex:0 0 var(--ancho-menu); width:var(--ancho-menu); height:calc(100vh - var(--alto-barra) - 3px);
  overflow-y:auto; background:var(--carta); border-right:1px solid var(--borde); padding:14px 10px 12px; display:flex; flex-direction:column; gap:4px; }
.menu-usuario{ display:none; }
.menu-grupos{ display:flex; flex-direction:column; gap:14px; flex:1; }
.menu-grupo{ display:flex; flex-direction:column; gap:1px; }
.menu-grupo-titulo{ font-size:10.5px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--acento-osc); padding:2px 12px 6px; }
.menu-item{ position:relative; display:flex; align-items:center; gap:11px; padding:8px 12px; border-radius:9px; color:var(--tinta); text-decoration:none; font-size:13.5px; font-weight:500; }
.menu-item .ico{ color:var(--gris); }
.menu-item:hover{ background:var(--principal-suave); }
.menu-item.activo{ background:var(--acento-suave); color:var(--principal); font-weight:700; }
.menu-item.activo .ico{ color:var(--acento-osc); }
.menu-item.activo::before{ content:""; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--acento); }
.menu-item:focus-visible{ outline-offset:-2px; }
.menu-vacio{ font-size:12.5px; color:var(--gris); padding:8px 12px; }
.menu-pie{ display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--gris); padding:12px 12px 2px; border-top:1px solid var(--linea); margin-top:10px; }
.menu-velo{ display:none; }

.contenido{ flex:1; min-width:0; padding:20px 24px 60px; outline:none; }
.pantalla{ display:flex; flex-direction:column; gap:16px; max-width:1480px; margin:0 auto; animation:aparecer .18s ease; }
@keyframes aparecer{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* ---------- tarjetas ---------- */
.tarjeta{ background:var(--carta); border:1px solid var(--borde); border-radius:var(--radio); padding:16px 18px; box-shadow:var(--sombra); min-width:0; }
.tarjeta-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.tarjeta-titulos{ min-width:0; }
.tarjeta h2{ font-family:var(--serif); font-size:17px; font-weight:700; color:var(--principal); letter-spacing:.3px; line-height:1.3; }
.tarjeta-sub{ font-size:12.5px; color:var(--gris); margin-top:2px; }
.tarjeta-acciones{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tarjeta > .tabla-caja:last-child{ margin-bottom:-2px; }
.tarjeta h3{ font-size:12px; text-transform:uppercase; letter-spacing:.7px; color:var(--acento-osc); font-weight:700; margin:4px 0 8px; }

.aviso-pantalla{ display:flex; gap:14px; align-items:flex-start; padding:22px; }
.aviso-pantalla > .ico{ width:26px; height:26px; color:var(--acento-osc); margin-top:2px; }
.aviso-pantalla p{ color:var(--gris); margin:4px 0 12px; }

/* ---------- KPIs ---------- */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.kpi{ position:relative; background:var(--carta); border:1px solid var(--borde); border-radius:var(--radio); padding:12px 14px 12px 16px; box-shadow:var(--sombra); overflow:hidden; min-width:0; }
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--acento); }
.kpi-ok::before{ background:var(--ok); } .kpi-error::before{ background:var(--error); } .kpi-aviso::before{ background:#d49b1c; } .kpi-info::before{ background:var(--info); }
.kpi-rotulo{ font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--gris); font-weight:600; }
.kpi-valor{ font-size:22px; font-weight:700; color:var(--principal); margin-top:3px; font-variant-numeric:tabular-nums; letter-spacing:-.2px; line-height:1.2; overflow-wrap:anywhere; }
.kpi-ok .kpi-valor{ color:var(--ok); } .kpi-error .kpi-valor{ color:var(--error); } .kpi-aviso .kpi-valor{ color:var(--aviso); } .kpi-info .kpi-valor{ color:var(--info); }
.kpi-sub{ font-size:12px; color:var(--gris); margin-top:3px; }
.kpi-clic{ cursor:pointer; transition:border-color .15s, transform .15s; }
.kpi-clic:hover{ border-color:var(--acento); }

/* ---------- chips de estado ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; line-height:1.6; vertical-align:middle; }
.chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.75; }
.chip-ok{ background:var(--ok-fondo); color:var(--ok); }
.chip-aviso{ background:var(--aviso-fondo); color:var(--aviso); }
.chip-error{ background:var(--error-fondo); color:var(--error); }
.chip-info{ background:var(--info-fondo); color:var(--info); }
.chip-neutro{ background:var(--neutro-fondo); color:var(--neutro); }

/* ---------- botones ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; border-radius:8px; padding:8px 14px;
  font-size:13.5px; font-weight:650; cursor:pointer; text-decoration:none; white-space:nowrap; line-height:1.25; position:relative; transition:filter .15s, background .15s, border-color .15s; }
.btn .ico{ width:16px; height:16px; }
.btn:hover:not(:disabled){ filter:brightness(1.06); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primario{ background:var(--acento); color:var(--principal); border-color:color-mix(in srgb, var(--acento) 80%, #000); }
.btn-oscuro{ background:var(--principal); color:var(--crema); }
.btn-suave{ background:var(--carta); color:var(--principal); border-color:var(--borde-fuerte); }
.btn-suave:hover:not(:disabled){ background:var(--principal-suave); filter:none; }
.btn-peligro{ background:var(--error-fondo); color:var(--error); border-color:color-mix(in srgb, var(--error) 25%, transparent); }
.btn-peligro-lleno{ background:var(--error); color:#fff; }
.btn-texto{ background:transparent; color:var(--acento-osc); padding-left:6px; padding-right:6px; }
.btn-texto:hover:not(:disabled){ text-decoration:underline; text-underline-offset:3px; filter:none; }
.btn-chico{ padding:5px 10px; font-size:12.5px; border-radius:7px; }
.btn-chico .ico{ width:14px; height:14px; }
.btn-icono{ padding:7px; }
.btn.cargando{ color:transparent !important; pointer-events:none; }
.btn.cargando > *{ visibility:hidden; }
.btn.cargando::after{ content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--principal); border-right-color:transparent; animation:girar .7s linear infinite; }
.btn-peligro-lleno.cargando::after, .btn-oscuro.cargando::after{ border-color:#fff; border-right-color:transparent; }

/* ---------- tablas ---------- */
.tabla-caja{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--borde); border-radius:10px; background:var(--carta); max-width:100%; }
.tabla{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.tabla th{ background:var(--principal); color:var(--crema); text-align:left; padding:8px 10px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; position:sticky; top:0; }
.tabla td{ padding:8px 10px; border-bottom:1px solid var(--linea); vertical-align:middle; }
.tabla tbody tr:last-child td{ border-bottom:0; }
.tabla tbody tr:hover td{ background:var(--carta-2); }
.tabla tr.clic{ cursor:pointer; }
.tabla tr.clic:hover td{ background:var(--principal-suave); }
.tabla tr.clic:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.tabla .der{ text-align:right; white-space:nowrap; }
.tabla .centro{ text-align:center; }
.tabla td .sub, .tabla td small{ display:block; font-size:11.5px; color:var(--gris); margin-top:1px; }
.tabla tfoot td{ background:var(--principal-suave); font-weight:700; color:var(--principal); border-top:2px solid var(--principal); border-bottom:0; white-space:nowrap; }
.tabla .fila-vacia td, .tabla .fila-vacia:hover td{ background:var(--carta); padding:0; }
.tabla-caja.compacta .tabla td{ padding:5px 9px; }
.tabla-caja.compacta .tabla th{ padding:6px 9px; }
.tabla td .btn + .btn{ margin-left:6px; }

/* ---------- formularios ---------- */
.form{ display:block; }
.form-rejilla{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px 14px; }
.campo{ display:flex; flex-direction:column; gap:5px; min-width:0; grid-column:span 3; }
.campo.ancho-completo{ grid-column:1 / -1; }
.campo.ancho-mitad{ grid-column:span 3; }
.campo.ancho-tercio{ grid-column:span 2; }
.campo-rotulo{ font-size:12px; font-weight:600; color:var(--gris); }
.req{ color:var(--error); font-weight:700; }
.ayuda{ font-size:11.5px; color:var(--gris); font-weight:400; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), select, textarea{
  width:100%; border:1px solid var(--borde-fuerte); border-radius:8px; padding:8px 10px; font-size:14px; background:var(--carta); color:var(--tinta); min-height:37px; }
textarea{ resize:vertical; min-height:72px; line-height:1.45; }
select{ cursor:pointer; }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--acento); outline-offset:0; border-color:var(--acento); }
input[readonly], textarea[readonly]{ background:var(--carta-2); color:var(--gris); }
select:disabled, input:disabled{ background:var(--carta-2); color:var(--gris); cursor:not-allowed; }
input[type="file"]{ font-size:13px; padding:6px; border:1px dashed var(--borde-fuerte); border-radius:8px; width:100%; background:var(--carta-2); }
input[type="file"]::file-selector-button{ border:1px solid var(--borde-fuerte); background:var(--carta); color:var(--principal); border-radius:6px; padding:5px 10px; margin-right:10px; font-weight:600; cursor:pointer; }
input[type="checkbox"]{ width:17px; height:17px; accent-color:var(--principal); cursor:pointer; flex:0 0 auto; }
input::placeholder, textarea::placeholder{ color:#9a978f; }
.num, input.num{ font-variant-numeric:tabular-nums; text-align:right; }
.control-dinero{ position:relative; }
.control-dinero .prefijo{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--gris); font-size:13px; font-weight:600; pointer-events:none; }
.control-dinero input{ padding-left:32px !important; text-align:right; font-variant-numeric:tabular-nums; }
.casilla{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer; color:var(--tinta); padding:6px 0; }
.campo-casilla{ justify-content:center; }
.campo-error{ font-size:12px; color:var(--error); font-weight:600; }
.campo-error:empty{ display:none; }
.campo.invalido input, .campo.invalido select, .campo.invalido textarea{ border-color:var(--error); background:var(--error-fondo); }
.form-error{ display:flex; gap:9px; align-items:flex-start; background:var(--error-fondo); color:var(--error); border:1px solid color-mix(in srgb, var(--error) 30%, transparent);
  border-radius:9px; padding:9px 12px; font-size:13px; font-weight:600; margin-bottom:12px; }
.form-error .ico{ width:17px; height:17px; margin-top:1px; }
.form-acciones{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--linea); }

/* ---------- barra de filtros ---------- */
.barra-filtros{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end; margin-bottom:12px; }
.filtros-campos{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end; flex:1 1 auto; min-width:0; }
.barra-filtros .campo{ grid-column:auto; gap:3px; flex:1 1 150px; max-width:240px; }
.barra-filtros .campo-texto, .barra-filtros .campo.ancho-completo{ flex:2 1 220px; max-width:360px; }
.barra-filtros .campo-casilla{ flex:0 0 auto; }
.barra-filtros .campo-rotulo{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.barra-filtros input:not([type="checkbox"]), .barra-filtros select{ min-height:34px; padding:6px 9px; font-size:13.5px; }
.control-buscar{ position:relative; }
.control-buscar .ico{ position:absolute; left:9px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--gris); pointer-events:none; }
.control-buscar input{ padding-left:32px !important; }
.filtros-acciones{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; align-items:center; }

/* ---------- pestañas ---------- */
.pestanas-barra{ display:flex; gap:2px; border-bottom:1px solid var(--borde); overflow-x:auto; scrollbar-width:thin; margin-bottom:16px; }
.pestana{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px 10px; background:none; border:0; border-bottom:2.5px solid transparent;
  color:var(--gris); font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; margin-bottom:-1px; border-radius:8px 8px 0 0; }
.pestana .ico{ width:16px; height:16px; }
.pestana:hover{ color:var(--principal); background:var(--principal-suave); }
.pestana.activa{ color:var(--principal); border-bottom-color:var(--acento); font-weight:700; }
.pestana:focus-visible{ outline-offset:-2px; }
.pestana-contador{ background:var(--acento); color:var(--principal); border-radius:999px; font-size:11px; font-weight:800; padding:0 7px; line-height:18px; }
.pestanas-panel{ outline:none; }
.pestana-contenido{ display:flex; flex-direction:column; gap:16px; }

/* ---------- ventanas (modal) ---------- */
body.con-modal{ overflow:hidden; }
.modal-fondo{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px 24px;
  background:rgba(22,21,18,.55); backdrop-filter:blur(2px); animation:fundido .14s ease; overflow-y:auto; }
.modal-fondo.saliendo{ opacity:0; transition:opacity .15s; }
.modal-caja{ background:var(--carta); width:100%; border-radius:14px; border-top:4px solid var(--acento); box-shadow:0 24px 70px rgba(0,0,0,.3);
  display:flex; flex-direction:column; max-height:calc(100vh - 7vh - 24px); outline:none; animation:subir .18s ease; }
.modal-caja.ancho-chico{ max-width:460px; } .modal-caja.ancho-medio{ max-width:700px; } .modal-caja.ancho-grande{ max-width:1040px; }
.modal-cab{ display:flex; align-items:center; gap:12px; padding:14px 16px 12px 20px; border-bottom:1px solid var(--linea); }
.modal-cab h3{ font-family:var(--serif); font-size:17.5px; color:var(--principal); letter-spacing:.3px; flex:1; line-height:1.3; }
.modal-x{ width:34px; height:34px; border-radius:8px; border:0; background:transparent; color:var(--gris); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; }
.modal-x:hover{ background:var(--principal-suave); color:var(--tinta); }
.modal-cuerpo{ padding:16px 20px 18px; overflow-y:auto; flex:1 1 auto; }
.modal-cuerpo .form-acciones{ position:sticky; bottom:-18px; background:var(--carta); margin:16px -20px -18px; padding:12px 20px 14px; }
.modal-pie{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--linea); background:var(--carta-2); border-radius:0 0 14px 14px; }
.modal-desc{ color:var(--gris); font-size:13px; margin-bottom:14px; }
.confirmar-texto{ display:flex; gap:12px; align-items:flex-start; font-size:14px; }
.confirmar-texto .ico-peligro{ width:24px; height:24px; color:var(--error); }
@keyframes fundido{ from{ opacity:0; } to{ opacity:1; } }
@keyframes subir{ from{ opacity:0; transform:translateY(10px) scale(.99); } to{ opacity:1; transform:none; } }

.visor{ min-height:200px; display:flex; align-items:center; justify-content:center; background:var(--carta-2); border-radius:8px; }
.visor img{ max-height:72vh; width:auto; margin:auto; border-radius:6px; }
.visor iframe{ width:100%; height:72vh; border:0; border-radius:6px; background:#fff; }
.enlace-archivo{ display:inline-flex; align-items:center; gap:5px; font-weight:600; text-decoration:none; color:var(--acento-osc); }
.enlace-archivo .ico{ width:15px; height:15px; }
.enlace-archivo:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- avisos flotantes ---------- */
.toasts{ position:fixed; right:18px; bottom:18px; z-index:200; display:flex; flex-direction:column; gap:8px; max-width:400px; width:calc(100% - 36px); pointer-events:none; }
.toast{ pointer-events:auto; display:flex; align-items:flex-start; gap:10px; background:var(--principal); color:#fff; border-left:4px solid var(--acento);
  padding:11px 10px 11px 14px; border-radius:10px; font-size:13.5px; box-shadow:0 8px 26px rgba(0,0,0,.25); animation:subir .22s ease; margin-left:auto; }
.toast .ico{ width:18px; height:18px; margin-top:1px; }
.toast-ok{ border-left-color:#48c98a; } .toast-ok > .ico{ color:#7fdcab; }
.toast-error{ background:#6e2018; border-left-color:#ff8d7e; } .toast-error > .ico{ color:#ffb3a8; }
.toast-aviso > .ico{ color:var(--acento); }
.toast-texto{ flex:1; line-height:1.4; }
.toast-x{ background:none; border:0; color:inherit; opacity:.6; cursor:pointer; padding:2px; border-radius:6px; }
.toast-x:hover{ opacity:1; }
.toast-x .ico{ width:15px; height:15px; margin:0; }
.toast.saliendo{ opacity:0; transform:translateY(6px); transition:all .2s; }

/* ---------- estados vacíos, carga y errores ---------- */
.vacio{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:var(--gris); padding:28px 12px; font-size:13.5px; }
.vacio .ico{ width:28px; height:28px; opacity:.45; }
.cargando{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--gris); padding:28px 12px; font-size:13.5px; }
.giro{ width:18px; height:18px; border-radius:50%; border:2px solid var(--borde-fuerte); border-top-color:var(--acento-osc); animation:girar .7s linear infinite; display:inline-block; }
@keyframes girar{ to{ transform:rotate(360deg); } }
.panel-error{ display:flex; gap:12px; align-items:flex-start; background:var(--error-fondo); border:1px solid color-mix(in srgb, var(--error) 28%, transparent);
  border-radius:var(--radio); padding:14px 16px; color:var(--tinta); }
.panel-error > .ico{ width:22px; height:22px; color:var(--error); margin-top:1px; }
.panel-error strong{ color:var(--error); display:block; margin-bottom:2px; }
.panel-error p{ font-size:13.5px; margin-bottom:10px; }

/* ---------- gráficos ---------- */
.grafico{ display:block; overflow:visible; }
.grafico .g-rejilla{ stroke:var(--linea); stroke-width:1; stroke-dasharray:3 4; }
.grafico .g-cero{ stroke:var(--borde-fuerte); stroke-width:1; }
.grafico .g-texto{ fill:var(--gris); font-size:11px; font-family:var(--fuente); font-variant-numeric:tabular-nums; }
.grafico .g-texto-ley{ fill:var(--tinta); font-size:12px; }
.grafico .g-punto{ fill:var(--carta); stroke-width:2; }
.grafico rect:hover, .grafico .g-punto:hover{ filter:brightness(1.15); }

/* ---------- utilidades para las pantallas ---------- */
.rejilla-2, .rejilla-3, .rejilla-4{ display:grid; gap:14px; }
.rejilla-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.rejilla-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.rejilla-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.pila{ display:flex; flex-direction:column; gap:14px; }
.fila-acciones{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.texto-gris{ color:var(--gris); }
.der{ text-align:right; }
.nota{ background:var(--aviso-fondo); color:var(--aviso); border:1px solid color-mix(in srgb, var(--aviso) 22%, transparent); border-radius:9px; padding:9px 13px; font-size:13px; }
.nota-ok{ background:var(--ok-fondo); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 22%, transparent); }
.nota-error{ background:var(--error-fondo); color:var(--error); border-color:color-mix(in srgb, var(--error) 22%, transparent); }
.nota-info{ background:var(--info-fondo); color:var(--info); border-color:color-mix(in srgb, var(--info) 22%, transparent); }
.nota-aviso{ }
.datos-def{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }
.datos-def > div{ background:var(--carta-2); border:1px solid var(--linea); border-radius:9px; padding:8px 11px; min-width:0; }
.datos-def dt, .datos-def small{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris); font-weight:600; }
.datos-def dd, .datos-def b{ display:block; font-size:14px; font-weight:600; color:var(--tinta); overflow-wrap:anywhere; }
.separador{ border:0; border-top:1px solid var(--linea); margin:14px 0; }
.clave-temporal{ display:flex; align-items:center; justify-content:center; gap:10px; font-family:Consolas, 'Courier New', monospace; font-size:22px; font-weight:700;
  letter-spacing:2px; background:var(--principal-suave); border:1px dashed var(--acento); border-radius:10px; padding:14px; color:var(--principal); margin:12px 0; user-select:all; }

/* ---------- pantalla de Ajustes ---------- */
.rejilla-ajustes{ display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(300px, 1fr); gap:16px; align-items:start; }
.rejilla-ajustes.angosta{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.6fr); max-width:1100px; }
.control-color{ display:flex; gap:8px; align-items:center; }
.selector-color{ width:42px; height:37px; flex:0 0 auto; padding:2px; border:1px solid var(--borde-fuerte); border-radius:8px; background:var(--carta); cursor:pointer; }
.vista-marca{ display:flex; flex-direction:column; gap:10px; }
.vm-barra{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-radius:10px; border-bottom:3px solid; }
.vm-barra img{ height:44px; width:auto; max-width:60%; object-fit:contain; }
.vm-boton{ font-size:12px; font-weight:700; padding:6px 11px; border-radius:7px; white-space:nowrap; }
.vm-claro{ display:flex; align-items:center; gap:14px; padding:12px; background:#fff; border:1px solid #e4e1db; border-radius:10px; flex-wrap:wrap; }
.vm-claro img{ height:52px; width:auto; max-width:45%; object-fit:contain; }
.vm-tabla{ display:flex; flex-direction:column; flex:1; min-width:140px; font-size:11.5px; border-radius:6px; overflow:hidden; border:1px solid #e4e1db; }
.vm-tabla span{ padding:5px 9px; color:#1f1f1d; }
.vm-tabla span:last-child{ border-left:3px solid; background:#faf9f7; }
.vista-marca img.roto{ opacity:.25; outline:1px dashed var(--error); }
.tabla-permisos .tabla td, .tabla-permisos .tabla th{ vertical-align:middle; }
.tabla-permisos .tabla th:not(:first-child){ white-space:normal; min-width:92px; max-width:120px; line-height:1.25; }
.tabla-permisos .permiso-nombre{ min-width:260px; }
.tabla-permisos .permiso-nombre b{ font-weight:600; }
.tabla-permisos .fila-grupo td{ background:var(--acento-suave) !important; color:var(--principal); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; padding:6px 10px; }
.tabla-permisos .celda-fija{ background:var(--carta-2); }
.tabla-permisos input[type="checkbox"]{ margin:auto; display:block; }
.permisos-estado{ font-size:12.5px; }
.detalle-corto{ display:block; max-width:520px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--gris); font-size:12.5px; }
.importar-contador{ font-size:12.5px; margin-top:8px; }

/* ---------- celular y tableta ---------- */
@media (max-width:980px){
  .btn-menu{ display:inline-flex; }
  .miga{ border-left:0; padding-left:0; }
  .menu{ position:fixed; z-index:90; top:0; left:0; bottom:0; height:100%; width:min(300px, 86vw); flex-basis:auto; transform:translateX(-102%);
    transition:transform .22s ease; box-shadow:12px 0 40px rgba(0,0,0,.25); padding-top:12px; visibility:hidden; }
  body.menu-abierto .menu{ transform:none; visibility:visible; }
  .menu-velo{ display:block; position:fixed; inset:0; z-index:85; background:rgba(22,21,18,.5); }
  .menu-usuario{ display:flex; align-items:center; gap:10px; padding:6px 10px 14px; margin-bottom:6px; border-bottom:1px solid var(--linea); }
  .menu-usuario .usuario-datos b{ color:var(--tinta); font-size:14px; }
  .menu-usuario .usuario-datos small{ color:var(--gris); }
  .menu-item{ padding:11px 12px; font-size:14.5px; }
  .contenido{ padding:16px 16px 60px; }
  .rejilla-3, .rejilla-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .rejilla-ajustes, .rejilla-ajustes.angosta{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:640px){
  :root{ --alto-barra:54px; }
  .barra-superior{ gap:8px; padding:0 10px; }
  .marca-logo{ height:44px; max-width:118px; }
  .miga{ display:none; }
  .usuario-chip{ padding:3px; border-radius:50%; }
  .usuario-chip .usuario-datos{ display:none; }
  .barra-salir-texto{ display:none; }
  .barra-salir{ padding:0 9px; }
  .contenido{ padding:12px 10px 70px; }
  .pantalla{ gap:12px; }
  .tarjeta{ padding:13px 12px; border-radius:11px; }
  .tarjeta h2{ font-size:16px; }
  .tarjeta-acciones{ width:100%; }
  .kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .kpi{ padding:10px 10px 10px 13px; }
  .kpi-valor{ font-size:17px; }
  .form-rejilla{ grid-template-columns:1fr; }
  .campo, .campo.ancho-mitad, .campo.ancho-tercio{ grid-column:1 / -1; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea{ font-size:16px; min-height:44px; }
  .btn{ min-height:40px; }
  .btn-chico{ min-height:34px; }
  .barra-filtros .campo{ max-width:none; flex:1 1 calc(50% - 6px); }
  .barra-filtros .campo-texto{ flex-basis:100%; }
  .barra-filtros input:not([type="checkbox"]), .barra-filtros select{ min-height:42px; font-size:16px; }
  .filtros-acciones{ margin-left:0; width:100%; }
  .rejilla-2, .rejilla-3, .rejilla-4{ grid-template-columns:1fr; }
  .modal-fondo{ padding:0; align-items:flex-end; }
  .modal-caja{ border-radius:16px 16px 0 0; max-height:94vh; }
  .modal-pie{ border-radius:0; }
  .modal-pie .btn, .modal-cuerpo .form-acciones .btn{ flex:1 1 auto; }
  .acceso-caja{ padding:24px 18px 20px; }
  .toasts{ right:10px; left:10px; bottom:12px; width:auto; max-width:none; }
  .tabla{ font-size:12.5px; }
  .tabla td, .tabla th{ padding:7px 8px; }
  .solo-pc{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}