/* ==========================================================================
   RenovaZ · Registro de Insolvencia — assets/lux.css
   CAPA LUX (2026-10-06): pulido fino de belleza, UX y feedback.
   - No redefine lógica ni markup: solo estiliza clases existentes y añade
     piezas decorativas (barra de progreso viva, píldora de autoguardado).
   - Estándar js-motion: las animaciones solo corren con html.js-motion.
   - Respeta prefers-reduced-motion y @media print.
   ========================================================================== */

:root{
  --lux-grad: linear-gradient(90deg, #123D68 0%, #1E6FA8 100%);
  --lux-suave: cubic-bezier(0.16, 1, 0.3, 1);
  --lux-anillo: 0 0 0 3px rgba(30,111,168,.14);
}

/* ---------- 1. Ambiente general: luz de fondo sutil ---------- */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(30,111,168,.10), transparent 62%),
    radial-gradient(720px 460px at -12% 112%, rgba(11,42,74,.08), transparent 62%);
}
.layout{ position:relative; z-index:1; }

/* ---------- 2. Sidebar: profundidad y marca ---------- */
.sidebar{ background:linear-gradient(180deg, #0B2A4A 0%, #092340 52%, #10365C 100%); }
.sidebar-marca{ position:relative; overflow:hidden; }
.sidebar-marca::after{
  content:""; position:absolute; left:1.1rem; right:1.1rem; bottom:-1px; height:2px;
  background:linear-gradient(90deg, rgba(127,179,217,.85), rgba(127,179,217,0) 75%);
  border-radius:2px;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sidebar .marca-nombre{
    background:linear-gradient(92deg, #FFFFFF 8%, #A9CCE8 96%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.nav-enlace{
  position:relative;
  transition:background-color .18s var(--lux-suave), color .18s var(--lux-suave),
             box-shadow .2s var(--lux-suave), padding-left .18s var(--lux-suave);
}
.nav-enlace.activo{
  box-shadow:inset 3px 0 0 rgba(255,255,255,.85), 0 6px 14px -6px rgba(4,20,38,.45);
}
@media (hover:hover){
  .nav-enlace:hover:not(.activo){ padding-left:calc(.75rem + 4px); }
}

/* ---------- 3. Topbar: cristal al desplazar ---------- */
.topbar{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(16,33,56,.04);
}
.avatar{
  background:linear-gradient(135deg, #EAF2F9 0%, #D7E7F5 100%);
  box-shadow:inset 0 0 0 1px rgba(30,111,168,.18);
}

/* ---------- 4. Barra de progreso viva del expediente ---------- */
.rz-tabs-contenedor{ position:relative; }
.rz-tabs-lista{ scrollbar-width:none; }
.rz-tabs-lista::-webkit-scrollbar{ display:none; }

.rz-lux-progreso{
  position:relative; height:5px; margin:.6rem .1rem 0;
  border-radius:999px; background:rgba(18,61,104,.10);
  box-shadow:inset 0 1px 2px rgba(11,42,74,.08);
  overflow:hidden;
}
.rz-lux-progreso i{
  position:absolute; top:0; bottom:0; left:0; width:0%;
  border-radius:999px; background:var(--lux-grad);
  box-shadow:0 0 8px rgba(30,111,168,.45);
  transition:width .5s var(--lux-suave);
}
html.js-motion .rz-lux-progreso i::after{
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:38%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation:rzLuxBrillo 2.6s ease-in-out infinite;
}
@keyframes rzLuxBrillo{ 0%{ left:-40%; } 62%,100%{ left:112%; } }

/* Pista de atajos en la cabecera de pestañas */
.rz-lux-atajo{
  margin-left:auto; display:inline-flex; align-items:center; gap:.22rem;
  font-size:.7rem; color:var(--texto-suave); letter-spacing:.02em; white-space:nowrap;
}
.rz-lux-atajo kbd{
  font-family:Consolas,"Courier New",monospace; font-size:.68rem; color:var(--marino);
  background:var(--gris-bg); border:1px solid var(--borde); border-bottom-width:2px;
  border-radius:5px; padding:.05rem .3rem; line-height:1.35;
}
@media (hover:none){ .rz-lux-atajo{ display:none; } }
@media print{ .rz-lux-atajo{ display:none !important; } }

/* ---------- 5. Pestañas: micro-interacciones ---------- */
.rz-tab-btn{ transition:all .2s var(--lux-suave); }
.rz-tab-btn.activo{
  background:linear-gradient(135deg, #0B2A4A 0%, #164C7C 100%);
  box-shadow:0 6px 16px -5px rgba(11,42,74,.5);
  transform:translateY(-1px);
}
.rz-tab-btn:not(.bloqueada):not(:disabled):active{ transform:translateY(0) scale(.985); }
.rz-tab-btn.completada .rz-tab-check{ animation:rzLuxPop .32s var(--lux-suave); }
@keyframes rzLuxPop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ---------- 6. Entrada escalonada de la sección activa ---------- */
html.js-motion .formulario[data-modo-tabs="1"] details.sec.rz-tab-activa > *{
  animation:rzLuxEntra .34s var(--lux-suave) both;
}
html.js-motion .formulario[data-modo-tabs="1"] details.sec.rz-tab-activa > *:nth-child(2){ animation-delay:.05s; }
html.js-motion .formulario[data-modo-tabs="1"] details.sec.rz-tab-activa > *:nth-child(3){ animation-delay:.10s; }
html.js-motion .formulario[data-modo-tabs="1"] details.sec.rz-tab-activa > *:nth-child(4){ animation-delay:.14s; }
html.js-motion .formulario[data-modo-tabs="1"] details.sec.rz-tab-activa > *:nth-child(5){ animation-delay:.18s; }
html.js-motion .formulario[data-modo-tabs="1"] details.sec.rz-tab-activa > *:nth-child(n+6){ animation-delay:.22s; }
@keyframes rzLuxEntra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- 7. Autoguardado: píldora de estado ---------- */
.rz-autosave{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.22rem .62rem; border-radius:999px; white-space:nowrap;
  border:1px solid transparent; font-weight:600;
  transition:background-color .25s var(--lux-suave), color .25s var(--lux-suave),
             border-color .25s var(--lux-suave), box-shadow .4s var(--lux-suave);
}
.rz-autosave.rz-ok{ color:#14532D; background:#E4F3EB; border-color:#BFE5CF; }
.rz-autosave.rz-warn{ color:#7A4A0D; background:#FCEEDD; border-color:#F2D9AC; }
.rz-autosave.rz-lux-pulso{ animation:rzLuxPulso .55s var(--lux-suave); }
@keyframes rzLuxPulso{
  0%{ box-shadow:0 0 0 0 rgba(30,111,168,.35); }
  100%{ box-shadow:0 0 0 9px rgba(30,111,168,0); }
}

/* ---------- 8. Resumen financiero: cifras vivas ---------- */
.rz-cifra-item{
  position:relative; overflow:hidden;
  transition:transform .25s var(--lux-suave), box-shadow .25s var(--lux-suave);
}
.rz-cifra-item::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--lux-grad); opacity:.85;
}
@media (hover:hover){
  .rz-cifra-item:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -9px rgba(11,42,74,.32); }
}
.rz-cifra-valor{ font-variant-numeric:tabular-nums; letter-spacing:.01em; }

/* ---------- 9. Tarjetas KPI del panel ---------- */
.tarjeta-dato{
  position:relative; overflow:hidden;
  transition:transform .22s var(--lux-suave), box-shadow .22s var(--lux-suave);
}
.tarjeta-dato:not(.dato-azul):not(.dato-verde):not(.dato-naranja):not(.dato-indigo)::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--lux-grad); transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--lux-suave);
}
@media (hover:hover){
  .tarjeta-dato:hover{ transform:translateY(-3px); box-shadow:0 12px 24px -12px rgba(11,42,74,.32); }
  .tarjeta-dato:not(.dato-azul):not(.dato-verde):not(.dato-naranja):not(.dato-indigo):hover::before{ transform:scaleX(1); }
}
.dato-valor{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ---------- 10. Botones: peso y respuesta ---------- */
.btn{
  transition:transform .15s var(--lux-suave), box-shadow .22s var(--lux-suave),
             background-color .2s var(--lux-suave), border-color .2s var(--lux-suave),
             color .2s var(--lux-suave);
}
.btn:not([disabled]):not(.deshabilitado):hover{ transform:translateY(-1px); }
.btn-primario:not([disabled]):hover{ box-shadow:0 8px 18px -8px rgba(11,42,74,.55); }
.btn-azul:not([disabled]):hover{ box-shadow:0 8px 18px -8px rgba(30,111,168,.6); }
.btn:not([disabled]):not(.deshabilitado):active{ transform:translateY(0) scale(.98); }

/* ---------- 11. Formularios: foco con carácter ---------- */
.f-control input, .f-control select, .f-control textarea{
  transition:border-color .2s var(--lux-suave), box-shadow .25s var(--lux-suave),
             background-color .2s var(--lux-suave);
}
.campo-enfocado .f-control input,
.campo-enfocado .f-control select,
.campo-enfocado .f-control textarea{ background-color:#FDFEFF; }

/* ---------- 12. Tablas: lectura cómoda ---------- */
.tabla tbody tr{ transition:background-color .15s var(--lux-suave); }
.tabla tbody tr:nth-child(even) td{ background:rgba(234,242,249,.35); }
@media (hover:hover){
  .tabla tbody tr:hover td{ background:#F1F7FC; }
}
.tabla-scroll .tabla thead th{ position:sticky; top:0; z-index:2; }

/* ---------- 13. Login y registro: escena premium ---------- */
.pagina-simple{
  position:relative; overflow:hidden;
  background:radial-gradient(1200px 720px at 72% -12%, #16497E 0%, var(--marino) 46%, #071D35 100%);
}
/* Excepción (21-oct-26): páginas LARGAS que usan la escena premium pero necesitan scroll
   (directorio_ver.php). Los blobs ::before/::after siguen; el overflow-x oculta el sangrado
   negativo de los bordes redondeados. El canvas #fondo-renovaz es position:fixed y no cambia. */
body.pagina-simple.pagina-scroll{ overflow-y:auto; overflow-x:hidden; }
.pagina-simple::before,
.pagina-simple::after{
  content:""; position:absolute; border-radius:50%; filter:blur(72px);
  pointer-events:none; z-index:0;
}
.pagina-simple::before{
  width:520px; height:520px; left:-150px; top:-140px;
  background:rgba(37,128,190,.45);
}
.pagina-simple::after{
  width:470px; height:470px; right:-140px; bottom:-160px;
  background:rgba(120,72,178,.34);
}
html.js-motion .pagina-simple::before{ animation:rzLuxFlota 11s ease-in-out infinite alternate; }
html.js-motion .pagina-simple::after{ animation:rzLuxFlota 13s ease-in-out infinite alternate-reverse; }
@keyframes rzLuxFlota{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(42px,26px,0) scale(1.08); }
}

.tarjeta-centrada{ position:relative; z-index:2; border:1px solid rgba(255,255,255,.16); }
html.js-motion .tarjeta-centrada{ animation:rzLuxTarjeta .55s var(--lux-suave) both; }
@keyframes rzLuxTarjeta{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to{ opacity:1; transform:none; }
}
.tarjeta-centrada::before{
  content:"RZ"; position:absolute; top:15px; right:15px;
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.9rem; letter-spacing:.04em; color:#fff;
  background:linear-gradient(135deg, #1E6FA8 0%, #0B2A4A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px -6px rgba(2,12,24,.5);
}
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .tarjeta-centrada::after{
    content:""; position:absolute; inset:-2px; border-radius:16px; padding:2px;
    background:linear-gradient(140deg, rgba(255,255,255,.34), rgba(255,255,255,0) 38%, rgba(30,111,168,.42));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none;
  }
}

/* ---------- 14. Mensajes flash: entrada con presencia ---------- */
html.js-motion .flash{ animation:rzLuxEntra .32s var(--lux-suave); }

/* ---------- 15. Detalles ---------- */
::selection{ background:rgba(30,111,168,.22); }
.tabla .num, .dato-valor, .rz-cifra-valor{ font-variant-numeric:tabular-nums; }

/* Botón de fondo frente a la barra fija de guardado: se eleva por clase en <body>
   (fondo.js reasigna className del botón al encender/apagar y borraría una clase puesta ahí). */
body.lux-barra-fija .fondo-toggle{ bottom:88px !important; }

/* ---------- 16. Accesibilidad y salidas limpias ---------- */
@media (prefers-reduced-motion: reduce){
  html.js-motion .rz-lux-progreso i::after{ display:none; }
  .rz-lux-progreso i{ transition:none; }
  html.js-motion .tarjeta-centrada{ animation:none; }
  html.js-motion .pagina-simple::before,
  html.js-motion .pagina-simple::after{ animation:none; }
  html.js-motion .flash{ animation:none; }
  .rz-autosave.rz-lux-pulso{ animation:none; }
  .btn:not([disabled]):not(.deshabilitado):hover,
  .tarjeta-dato:hover,
  .rz-cifra-item:hover{ transform:none; }
  .nav-enlace:hover:not(.activo){ padding-left:.75rem; }
  html.js-motion .formulario[data-modo-tabs="1"] details.sec.rz-tab-activa > *{ animation:none !important; }
}
@media print{
  body::after{ display:none !important; }
  .rz-lux-progreso{ display:none !important; }
  .rz-autosave{ display:none !important; }
  .pagina-simple::before, .pagina-simple::after{ display:none !important; }
  .tarjeta-centrada::before, .tarjeta-centrada::after{ display:none !important; }
  html.js-motion .formulario[data-modo-tabs="1"] details.sec.rz-tab-activa > *{ animation:none !important; }
}
@media (max-width:640px){
  .topbar{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--superficie); }
  .rz-autosave{ max-width:48vw; overflow:hidden; text-overflow:ellipsis; }
  .pagina-simple::before, .pagina-simple::after{ filter:blur(52px); }
}