/* ============================================================
   JoathiVA — theme_auros.css · Tema "Home" (midnight canvas)
   Pedido Rodrigo 13/08/2026: aplicar el CSS del home de la web
   (assets/css/site-v6.css) a todos los portales JoathiVA.
   Reemplaza al tema "Auros" (terminal abisal, 02/08/2026); copia
   del anterior en _to_delete/theme_auros_ABISAL_backup_2026-08-13.css.
   Se conserva el nombre del archivo para no tocar los <link>
   existentes.
   Aplica a todos los portales JoathiVA. NUNCA a OlaverryVA.
   Paleta: fondo midnight #05060f con brillos radiales · superficies
   índigo #111526/#0b0e1a · texto frost #d1e4fa · verde #1f8a4c→#6fd393
   · dorado #e0a83a como firma. Tipos: Space Grotesk (títulos) /
   Inter (texto) / JetBrains Mono (etiquetas), con caída a sistema.

   CL-28 (2026-08-14) — Este archivo es ahora la CAPA DE TEMA.
   Ya no inventa valores: reasigna los semánticos `--jv-*` a los
   primitivos `--lgx-*` que declara `brand.css`. Los valores computados
   son EXACTAMENTE los mismos que antes de CL-28.

   Cada asignación lleva fallback — `var(--lgx-x, #hex)` — a propósito:
   `brand.css` pasó a cargarse en 33 archivos, y si en alguno el <link>
   faltara o fallara, el tema degrada al valor literal de hoy en vez de
   dejar el portal sin color.

   ORDEN DE CARGA: `brand.css` temprano en el <head> (antes del <style>
   propio del módulo), y este archivo DESPUÉS de ese <style>.
   Documentación: docs/CL-28_SISTEMA_DISENO.md
   ============================================================ */
:root{
  /* --- Alias del home (site-v6) → primitivos --- */
  --color-midnight-canvas:var(--lgx-midnight,#05060f);
  --color-deep-indigo:var(--lgx-indigo-900,#0b0e1a);
  --color-surface-indigo:var(--lgx-indigo-800,#111526);
  --color-frost-glow:var(--lgx-frost,#d1e4fa);
  --color-platinum:var(--lgx-platinum,#ffffff);
  --color-moon-mist:var(--lgx-mist,#9db0cf);
  --color-mist-dim:var(--lgx-mist-dim,#7d90b0);
  --color-primary:var(--lgx-green-500,#1f8a4c);
  --color-primary-light:var(--lgx-green-300,#6fd393);
  --color-oro:var(--lgx-gold,#e0a83a);
  --color-oro-osc:var(--lgx-gold-dark,#c98a1b);
  --gradient-bioluminescent:linear-gradient(135deg,#1f8a4c 0%,#6fd393 100%);
  --gradient-aurora:linear-gradient(135deg,#1f8a4c 0%,#6fd393 100%);
  --hairline:var(--lgx-hairline,rgba(186,215,247,.12));
  --hairline-soft:var(--lgx-hairline-soft,rgba(186,215,247,.07));
  --radius-cards:var(--lgx-radius-lg,14px);
  --radius-small:var(--lgx-radius-sm,8px);

  /* --- CAPA 2 — semánticos --jv-* reasignados al stack oscuro --- */
  --jv-bg:var(--color-midnight-canvas);
  --jv-surface:var(--color-surface-indigo);
  --jv-surface-2:var(--color-deep-indigo);
  --jv-ink:var(--color-platinum);
  --jv-text:var(--color-frost-glow);
  --jv-muted:var(--color-moon-mist);
  --jv-muted-2:var(--color-mist-dim);
  --jv-line:var(--hairline);
  --jv-line-soft:var(--hairline-soft);
  --jv-primary:var(--color-primary);
  --jv-primary-light:var(--color-primary-light);
  --jv-radius:var(--lgx-radius-lg,14px);
  --jv-radius-sm:var(--lgx-radius-sm,8px);
  --jv-shadow-1:0 10px 30px -12px rgba(0,0,0,.45);
  --jv-shadow-2:0 24px 60px -18px rgba(0,0,0,.55);
  --jv-info:var(--lgx-blue,#52a4ff);
  --jv-info-bg:#0d1b30;
  --jv-success:var(--lgx-green-ok,#2fbf71);
  --jv-success-bg:#0a2417;
  --jv-warning:var(--color-oro);
  --jv-warning-dark:var(--color-oro-osc);
  --jv-warning-bg:#2a2010;
  --jv-danger:var(--lgx-red,#ff6b5e);
  --jv-danger-bg:#331210;
  --jv-green-50:var(--color-deep-indigo);
  --jv-green-100:var(--color-surface-indigo);
  --jv-font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --jv-font-display:'Space Grotesk','Archivo','Inter',system-ui,'Segoe UI',sans-serif;
  --jv-font-mono:'JetBrains Mono',Consolas,monospace;

  /* Anillo de foco del tema oscuro. brand.css trae el dorado #fedc00, que
     sirve sobre fondo claro. Sobre midnight se unifica en el verde que hub
     (:55), expedientes (:52) y control-tower (:44) ya venían declarando a
     mano. Decisión de Rodrigo, 2026-08-14: verde en todo el portal.
     ATENCIÓN: esto también le cambia el anillo al login, que por lo demás
     queda fuera del alcance de CL-28. Es el único efecto sobre joathiva.html
     y fue aceptado explícitamente. */
  --jv-focus-ring:0 0 0 3px rgba(31,138,76,.38);
}

/* ── Lienzo: midnight con los dos brillos radiales del home ── */
html,body{
  background:var(--color-midnight-canvas)!important;
  color:var(--color-frost-glow);
  font-family:var(--jv-font);
}
body{
  background:
    radial-gradient(1000px 620px at 88% -12%,rgba(31,138,76,.20) 0%,transparent 58%),
    radial-gradient(820px 520px at -8% 108%,rgba(82,164,255,.12) 0%,transparent 55%),
    var(--color-midnight-canvas)!important;
}
::selection{background:rgba(111,211,147,.4);color:#fff}

/* ── Texto ── */
h1,h2,h3,h4{color:var(--color-frost-glow);font-family:var(--jv-font-display);font-weight:600;letter-spacing:-.02em}
h1,h2{line-height:1.1}
p,li,td,label,span{color:inherit}
body{color:var(--color-moon-mist)}
a{color:var(--color-frost-glow)}
a:hover{color:var(--color-platinum)}
small,.muted,.hint{color:var(--color-mist-dim)}

/* ── Superficies genéricas: tarjetas/paneles → índigo con hairline ── */
.card,.panel,.box,.tile,.widget,.modal,.dropdown,section.card,
[class*="card"],[class*="panel"]{
  background-color:var(--color-surface-indigo);
  color:var(--color-frost-glow);
  border-color:var(--jv-line);
  border-radius:var(--radius-cards);
  box-shadow:var(--jv-shadow-1)!important;
}
table{color:var(--color-frost-glow)}
th{color:var(--color-mist-dim);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:500;font-family:var(--jv-font-mono)}
tr,td,th{border-color:var(--jv-line)!important}
thead,tbody tr:nth-child(even){background:rgba(186,215,247,.025)}
hr{border-color:var(--jv-line)}

/* ── Inputs ── */
input,select,textarea{
  background:var(--color-deep-indigo)!important;
  color:var(--color-frost-glow)!important;
  border:1px solid var(--jv-line)!important;
  border-radius:var(--radius-small)!important;
}
input::placeholder,textarea::placeholder{color:rgba(125,144,176,.6)}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(111,211,147,.55)!important;box-shadow:0 0 0 3px rgba(31,138,76,.45)!important}

/* ── Botones ── */
button,.btn,[type="submit"],[type="button"]{
  background:var(--color-surface-indigo);
  color:var(--color-frost-glow);
  border:1px solid var(--jv-line);
  border-radius:var(--radius-small);
  box-shadow:none!important;
}
button:hover,.btn:hover{border-color:rgba(111,211,147,.5)}
/* CL-28 — El `box-shadow:none!important` de la regla de arriba le gana a
   cualquier regla de foco, así que desde el retema del 13/08 NINGÚN botón de
   JoathiVA muestra anillo al navegar con teclado: ni el verde que declaran
   hub/expedientes/control-tower, ni el dorado de brand.css. Se restituye con
   el mismo peso. El color sale del token, así que cambiarlo es una línea. */
button:focus-visible,.btn:focus-visible,
[type="submit"]:focus-visible,[type="button"]:focus-visible{
  box-shadow:var(--jv-focus-ring,0 0 0 3px rgba(254,220,0,.55))!important;
}
/* CTA principal: gradiente verde del home con texto blanco */
.btn-primary,.btn.primary,button.primary,.cta,[class*="btn-cta"]{
  background:var(--gradient-aurora)!important;
  color:#ffffff!important;
  border:none!important;
  font-weight:700;
  box-shadow:0 12px 28px -10px rgba(31,138,76,.55)!important;
}

/* ── Etiquetas de sección (eyebrow) ── */
.eyebrow,.kicker,.section-label,.tag,.badge{
  text-transform:uppercase;letter-spacing:.12em;font-weight:500;
  color:var(--color-mist-dim);
  font-family:var(--jv-font-mono);
}

/* ── Cifras destacadas: dorado del home ── */
.stat,.kpi-value,.big-number,[class*="stat-value"],[class*="kpi"] b,[class*="kpi"] strong{
  color:var(--color-oro)!important;
  font-family:var(--jv-font-display);
}

/* ── Íconos con acabado 3D ── */
.jva-ico3d,.ak-ico,i[class^="ri-"],i[class*=" ri-"],.icon,[class*="ico"] svg{
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(31,138,76,.35));
}
.jva-ico3d{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(111,211,147,.16),rgba(17,21,38,.9) 55%,rgba(11,14,26,.95));
  border:1px solid rgba(111,211,147,.22);
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 4px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.5)!important;
}
img[src*="logo"],img[src*="Logo"]{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

/* ── Header / nav ── */
header,nav,.topbar,.navbar{background:transparent;border-color:var(--jv-line)}
nav a,.navbar a{text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--color-moon-mist)}
nav a:hover,.navbar a:hover,nav a.active{color:var(--color-frost-glow)}

/* ── Avatar unificado: siempre arriba a la derecha ── */
.jva-avatar-slot,#ak-user,.avatar-menu,.user-avatar,.usermenu{
  position:fixed!important;top:14px!important;right:22px!important;left:auto!important;z-index:9000;
}

/* ── Isotipo Joathi como efecto de fondo (marca de agua) ── */
#jva-logo-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* CL-40 2026-08-18: joathi-logo.png no existe (404 en todos los módulos); el isotipo real es logo_joathiva.png */
  background:url('/joathiva/assets/logo_joathiva.png') no-repeat 78% 46%/min(62vmin,720px) auto;
  opacity:.06;
  filter:grayscale(1) brightness(2.2) sepia(1) hue-rotate(90deg) saturate(1.8)
         drop-shadow(0 0 40px rgba(31,138,76,.55));
  mix-blend-mode:screen;
}
/* ── Footer unificado ── */
body>footer:not(#jva-footer){display:none!important}
#jva-footer{
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  margin-top:64px;padding:40px 32px;
  background:var(--color-deep-indigo);
  border-top:1px solid var(--jv-line);
  color:var(--color-moon-mist);
  font:400 12.5px/1.5 var(--jv-font);
}
#jva-footer .jvaf-brand{display:flex;align-items:center;gap:10px;color:var(--color-frost-glow);font-weight:500;letter-spacing:.02em}
#jva-footer .jvaf-brand .dot{width:10px;height:10px;border-radius:50%;background:var(--gradient-bioluminescent);box-shadow:0 0 8px rgba(31,138,76,.8)}
#jva-footer .jvaf-gold{color:var(--color-oro)}
#jva-footer .jvaf-date{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px}
#jva-footer a{color:var(--color-moon-mist);text-decoration:none}
#jva-footer a:hover{color:var(--color-frost-glow)}

/* ── Lenguaje de interacción de Gestión Comercial ──
   El relieve se reserva a dispositivos con puntero preciso. En pantallas
   táctiles no se aplica tilt: evita botones que "saltan" durante el tap. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn-primary,.btn.primary,button.primary,.cta,[class*="btn-cta"]{
    transform-style:preserve-3d;
    will-change:transform;
    transition:transform .4s cubic-bezier(.18,.9,.32,1),box-shadow .3s,background .3s;
  }
  .btn-primary:hover,.btn.primary:hover,button.primary:hover,.cta:hover,[class*="btn-cta"]:hover{
    transform:perspective(700px) rotateX(8deg) rotateY(-6deg) translateY(-2px);
    box-shadow:0 12px 28px rgba(0,0,0,.48),0 0 22px rgba(111,211,147,.34)!important;
  }
  .btn-primary:active,.btn.primary:active,button.primary:active,.cta:active,[class*="btn-cta"]:active{
    transform:perspective(700px) translateY(1px) scale(.98);
    transition-duration:.1s;
  }
}

/* ── Base responsive transversal ──
   Corrige los patrones compartidos sin esconder datos: cabeceras que no
   encogen, paneles calculados con 100vw, tablas sin contenedor y modales que
   exceden el alto útil. Los módulos pueden conservar sus breakpoints propios. */
@media (max-width:700px){
  html,body{
    width:100%;
    max-width:100%;
  }
  body{min-width:0}

  img,svg,video,canvas,iframe{
    max-width:100%;
  }

  .topbar,.ct-topbar,.navbar{
    width:100%;
    max-width:100%;
    min-width:0;
    gap:8px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .topbar>*,.ct-topbar>*,.navbar>*{min-width:0}
  .topbar>.brand:has(>img){flex:0 1 auto;min-width:0}
  .topbar>.brand>img{
    width:auto;
    height:auto;
    max-width:min(112px,32vw);
    max-height:32px;
    object-fit:contain;
  }
  .topbar>.user-bar{
    min-width:0;
    margin-left:auto;
    gap:6px!important;
  }
  .topbar>.user-bar>.btn-top{
    margin-left:0!important;
    padding-left:9px!important;
    padding-right:9px!important;
  }

  /* En 390 px el texto completo del botón hacía crecer la cabecera a 437 px. */
  #btnLogout{
    width:44px;
    min-width:44px;
    min-height:44px;
    padding:6px!important;
    font-size:0!important;
  }
  #btnLogout::before{
    content:'Salir';
    font-size:10px;
    line-height:1;
  }

  :where(.table-wrap,.table-scroll,.table-responsive,[class*="table-wrap"],[class*="table-scroll"]){
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  :where(main,.main,.content,.page,.modal,.panel-scroll)>table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  :where(aside.panel,.op-drawer,.drawer,[class*="side-panel"]){
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box;
  }
  :where(.modal,.dialog,[role="dialog"]){
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
    max-height:calc(100dvh - 24px)!important;
    box-sizing:border-box;
  }

  :where(.dashboard-grid,.map-page-grid,.two-grid,.three-grid,.settings-grid,
         .card-grid,.report-grid,.agenda-board,.incident-board,.form-grid){
    grid-template-columns:minmax(0,1fr)!important;
  }
  :where(.metrics,.stat-grid,.kpi-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,textarea{font-size:16px!important;min-height:44px}
  button,.btn,[type="submit"],[type="button"],nav a,nav button{min-height:44px}
  :where(.icon-btn,.top-icon,.mobile-menu,.menu-toggle,.role-switch,#roleSwitch,[aria-label]){min-width:44px}
  button,a,input,select,textarea{touch-action:manipulation}

  .jva-avatar-slot,#ak-user,.avatar-menu,.user-avatar,.usermenu{
    right:10px!important;
  }

  #jva-footer{
    flex-direction:column;
    align-items:flex-start;
    margin-top:36px;
    padding:28px 18px;
  }
}

@media (max-width:420px){
  .topbar>.brand:has(>img) .brand-word{display:none!important}
  .topbar>.user-bar>.avatar{display:none!important}
}
