/* =========================================================================
   VERAX — Capa de diseño unificada (Fase de unificación)
   Se carga DESPUÉS de los estilos de la app (styles.css, premium.css) y los
   alinea a una sola identidad: azul institucional + bronce + blanco cálido,
   Plus Jakarta Sans (interfaz) + Fraunces (títulos serif). No toca la lógica.
   ========================================================================= */

:root{
  /* Paleta VERAX (reemplaza tokens de la app y de premium.css) */
  --navy:#122c49; --navy-2:#1d466f; --navy-deep:#0e2338;
  --teal:#1d466f; --teal-bright:#2a5885; --teal-soft:#eef2f7;   /* acentos teal -> azul */
  --bronze:#b08a4f; --bronze-2:#caa468; --bronze-deep:#8f6d38;
  --ink:#182a3d; --muted:#6a7889; --line:#e7e3d9; --line-soft:#efeadf;
  --canvas:#f4f6f9; --white:#ffffff; --amber:#b08a4f; --green:#2f7d55; --danger:#b23b36;
  --sh-card:0 1px 2px rgba(18,44,73,.06), 0 14px 34px -18px rgba(18,44,73,.28);
  --sh-lift:0 20px 50px -22px rgba(18,44,73,.36);
  --ease:cubic-bezier(.32,.72,0,1);
}

body{ font-family:"Plus Jakarta Sans",system-ui,Arial,sans-serif; color:var(--ink); background:var(--canvas); }

/* ---- Títulos serif (identidad VERAX) ---- */
h1, h2, h3,
.page-heading h1, .page h1, .dialog-head, .home-dialog-head, .architecture-extra h2{
  font-family:"Fraunces",Georgia,serif !important; font-weight:600; letter-spacing:.2px; color:var(--navy);
}

/* ---- Ocultar el letrero DEMO (ya es producción) ---- */
.production-readiness{ display:none !important; }

/* ---- Barra lateral ---- */
.sidebar{
  background:linear-gradient(180deg, #0f2946 0%, var(--navy) 55%, #0d2238 100%) !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
}
.product{ color:#adbdd1 !important; }
.sidebar .account, .account{ color:#e8eef6 !important; }
.account span{ color:#9db0c7 !important; }

/* Navegación */
.nav-toggle, .nav-item{ color:#e7eef7 !important; border-radius:11px !important; }
.nav-toggle:hover, .nav-item:hover{ background:rgba(255,255,255,.08) !important; }
.nav-toggle.open{ color:#fff !important; }
.nav-submenu button{ color:#c4d2e3 !important; border-radius:9px !important; }
.nav-submenu button:hover{ background:rgba(255,255,255,.07) !important; color:#fff !important; }
.nav-submenu button.active{
  background:linear-gradient(135deg, rgba(176,138,79,.22), rgba(176,138,79,.10)) !important;
  color:#fff !important; box-shadow:inset 3px 0 0 var(--bronze) !important;
}

/* ---- Barra superior ---- */
.topbar{ background:transparent !important; border-bottom:1px solid var(--line) !important; }

/* ---- Paneles y tarjetas ---- */
.panel, .card, .architecture-card, .table-wrap{
  background:var(--white) !important; border:1px solid var(--line) !important;
  border-radius:16px !important; box-shadow:var(--sh-card) !important;
}

/* Tarjetas KPI / métricas ejecutivas: acento bronce */
.executive-metric{ background:var(--white) !important; border:1px solid var(--line) !important; border-radius:16px !important; box-shadow:var(--sh-card) !important; }
.executive-metric::before{ background:linear-gradient(var(--bronze-2), var(--bronze)) !important; }
.executive-metric:hover{ transform:translateY(-2px); box-shadow:var(--sh-lift) !important; }
.executive-metric > strong{ color:var(--navy) !important; }

/* ---- Botones ---- */
.button, .button.primary, .button.cta,
.dialog-footer .button, .home-dialog-footer .button{
  background:linear-gradient(135deg, var(--navy-2), var(--navy)) !important;
  color:#fff !important; border:0 !important; border-radius:11px !important; font-weight:700 !important;
  box-shadow:0 10px 24px -14px rgba(18,44,73,.7) !important; transition:transform .16s var(--ease), box-shadow .2s, filter .2s !important;
}
.button:hover, .button.primary:hover, .dialog-footer .button:hover{ transform:translateY(-1px) !important; box-shadow:0 16px 30px -16px rgba(18,44,73,.8) !important; filter:saturate(1.05); }
.button:active{ transform:translateY(0) !important; }
.button.secondary, .button.ghost, .button.light{
  background:#f1ede3 !important; color:var(--navy) !important; border:1px solid var(--line) !important; box-shadow:none !important;
}
.button.secondary:hover, .button.ghost:hover, .button.light:hover{ background:#e9e2d2 !important; }
.button:focus-visible{ outline:2px solid var(--bronze) !important; outline-offset:2px; }

/* ---- Campos de formulario ---- */
input, select, textarea{
  border:1px solid var(--line) !important; border-radius:11px !important; background:#fff !important;
  color:var(--ink) !important; font-family:inherit !important;
}
input:focus, select:focus, textarea:focus{
  outline:none !important; border-color:var(--navy-2) !important; box-shadow:0 0 0 4px rgba(29,70,111,.12) !important;
}
label{ color:var(--muted) !important; }

/* ---- Tablas ---- */
.table-wrap table th, .table-wrap thead th{
  color:var(--muted) !important; text-transform:uppercase; letter-spacing:.5px; font-size:11.5px !important;
  border-bottom:1px solid var(--line) !important; background:transparent !important;
}
.table-wrap tbody td{ border-bottom:1px solid var(--line-soft) !important; }
.table-wrap tbody tr:hover{ background:#faf8f2 !important; }

/* ---- Estados / etiquetas ---- */
.status.amber{ background:rgba(176,138,79,.14) !important; color:var(--bronze-deep) !important; }
.status.green{ background:rgba(47,125,85,.12) !important; color:var(--green) !important; }

/* ---- Modal ---- */
.backdrop{ background:rgba(14,35,56,.5) !important; backdrop-filter:blur(4px); }
.dialog{ border-radius:18px !important; border:1px solid var(--line) !important; background:var(--card,#fdfcf9) !important; }

/* ---- Callouts / avisos ---- */
.callout{ border-left:3px solid var(--bronze) !important; background:#faf7f0 !important; border-radius:12px !important; }

::selection{ background:rgba(176,138,79,.28); }

/* Barra inyectada (Usuarios/Salir) acorde a la identidad */
#vx-acceso a{ background:var(--navy) !important; }
#vx-acceso button{ background:var(--bronze) !important; }

/* =========================================================================
   Franja superior VERAX (fija, ancho completo) + barra lateral siempre visible
   ========================================================================= */
.vx-band{
  position:fixed; top:0; left:0; right:0; height:56px; z-index:1000;
  background:linear-gradient(90deg,#0f2946,#122c49 55%,#0d2238);
  display:flex; align-items:center; justify-content:space-between; padding:0 18px 0 20px;
  box-shadow:0 2px 14px -4px rgba(0,0,0,.45); color:#eaf2f7;
  font-family:"Plus Jakarta Sans",system-ui,Arial,sans-serif;
}
.vx-band .vx-center{ position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:11px; }
.vx-band .vx-center b{ font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:18px; letter-spacing:4px; color:#fff; }
.vx-band .vx-center small{ color:#b9c6d6; font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; border-left:1px solid rgba(255,255,255,.22); padding-left:11px; }
.vx-clock{ font-size:12.5px; color:#cdd8e6; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vx-user{ display:flex; align-items:center; gap:10px; font-size:13px; }
.vx-user .nm{ font-weight:700; color:#fff; white-space:nowrap; }
.vx-user .rol{ color:#9fb1c6; font-size:11px; }
.vx-user button, .vx-user a{ background:rgba(255,255,255,.10); color:#fff; border:0; border-radius:9px; padding:7px 11px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:none; transition:background .15s; }
.vx-user button:hover, .vx-user a:hover{ background:rgba(255,255,255,.20); }
.vx-user .danger:hover{ background:rgba(178,59,54,.7); }

/* Bajar el layout debajo de la franja; barra lateral siempre visible */
.sidebar{ top:56px !important; }
.main-content{ margin-top:56px !important; min-height:calc(100vh - 56px) !important; }
.topbar{ display:none !important; }        /* la franja reemplaza la barra blanca */

/* La consola de usuarios embebida dentro de la app (iframe) */
.vx-embed{ width:100%; border:0; background:transparent; display:block; }

/* Ocultar la barra inyectada vieja (Usuarios/Salir), ahora todo vive en la franja */
#vx-acceso{ display:none !important; }

/* Identidad del operador: la franja superior ya muestra al usuario real. Se
   oculta la línea interna de "sesión de prueba" del sidebar para no mostrar
   dos identidades ni un "Salir" que sólo limpia el operador interno. */
#lawyer-session{ display:none !important; }

/* Logo real VERAX: tamaños correctos */
.vx-band .vx-center img.vx-logo{ height:30px; width:auto; display:block; }
.vx-band .vx-center small{ border-left:1px solid rgba(255,255,255,.22); padding-left:11px; }
.page-product-brand img, [data-page-verax] img{ width:auto !important; height:48px !important; }