/* ============================================================
   clientes-fx.css — Tema oscuro Barrespi + FX del Portal de Clientes
   Cargar al FINAL del <head>, después de los <style> de cada página.
   Acompaña a clientes-fx.js. No afecta la impresión (los documentos
   se imprimen igual que antes).
   ============================================================ */

:root{
  --cfx-bg:#0e141a;
  --cfx-panel:#161f29;
  --cfx-panel2:#10161d;
  --cfx-border:#2a3542;
  --cfx-blue:#5b93c9;
  --cfx-blue2:#7fb2e2;
  --cfx-text:#f4efe4;
  --cfx-muted:#8a97a3;
}

/* ---------- Base ---------- */
body{
  background:
    radial-gradient(1100px 560px at 78% -12%, rgba(91,147,201,.085), transparent 62%),
    radial-gradient(800px 480px at -8% 108%, rgba(53,107,160,.07), transparent 58%),
    var(--cfx-bg) !important;
  color:var(--cfx-text) !important;
}
main h2, main > h2{color:var(--cfx-muted) !important}

/* ---------- Migas (breadcrumb inline: fx.js le pone .fx-breadcrumb) ---------- */
.fx-breadcrumb{
  background:rgba(19,27,36,.88) !important;
  border-bottom:1px solid rgba(127,178,226,.14) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.fx-breadcrumb a{color:#a9c4de !important; transition:color .2s}
.fx-breadcrumb a:hover{color:var(--cfx-blue2) !important}
.fx-breadcrumb span{color:#3a4a5c !important}

/* ---------- Encabezados (header oscuro con brillo) ---------- */
header, .topbar, .navbar{
  background:linear-gradient(180deg,#18222d 0%,#131b24 100%) !important;
  box-shadow:0 1px 0 rgba(127,178,226,.12), 0 10px 30px rgba(0,0,0,.35) !important;
  position:relative;
}
header::after, .topbar::after, .navbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, transparent 5%, rgba(127,178,226,.5) 50%, transparent 95%);
  pointer-events:none;
}
header p{color:var(--cfx-muted) !important}
.topbar-right a, .nav-btn{
  background:rgba(91,147,201,.12) !important; border:1px solid rgba(91,147,201,.25) !important;
  transition:all .22s cubic-bezier(.2,.7,.3,1) !important;
}
.topbar-right a:hover, .nav-btn:hover{
  background:rgba(91,147,201,.25) !important; transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(91,147,201,.25);
}
.brand-ico{background:rgba(91,147,201,.22) !important}

/* ---------- Entrada escalonada (fx.js añade .fx-up) ---------- */
/* Patrón seguro: el contenido es visible por defecto; la animación solo lo
   "trae" desde abajo (backwards cubre el retardo). Si la animación no corre
   por lo que sea, la página NUNCA queda invisible. */
.fx-up{animation:cfxUp .75s cubic-bezier(.16,1,.3,1) backwards; animation-delay:var(--fx-d,0s)}
@keyframes cfxUp{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .fx-up{animation:none} }

/* ---------- Portal: tarjetas de cliente ---------- */
.client-card{
  background:linear-gradient(180deg,#18222d,#141d26) !important;
  border:1px solid var(--cfx-border) !important; border-radius:12px !important;
  color:var(--cfx-text) !important; position:relative; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.30) !important;
  transition:border-color .25s, transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s !important;
}
.client-card:hover{
  transform:translateY(-6px);
  border-color:var(--cfx-blue) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.45), 0 0 30px rgba(91,147,201,.20) !important;
}
.client-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(127,178,226,.55), transparent); opacity:.45;
}
.client-card h3{color:var(--cfx-text) !important}
.client-card a.btn{
  background:linear-gradient(180deg,#74a9db,#4a82b8) !important; color:#0e141a !important;
  font-weight:700; border-radius:8px !important; position:relative; overflow:hidden;
  box-shadow:0 4px 14px rgba(91,147,201,.30), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s, box-shadow .2s, filter .2s !important;
}
.client-card a.btn:hover{transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 8px 22px rgba(91,147,201,.45), inset 0 1px 0 rgba(255,255,255,.3) !important}

/* ---------- Hub SERMIMEX: botones grandes ---------- */
.btn-main{
  background:linear-gradient(180deg,#18222d,#141d26) !important;
  border:1px solid var(--cfx-border) !important; border-radius:12px !important;
  color:var(--cfx-text) !important; position:relative; overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.30);
  transition:border-color .25s, transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s !important;
}
.btn-main:hover{
  background:linear-gradient(180deg,#1b2836,#16202b) !important;
  border-color:var(--cfx-blue) !important;
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 28px rgba(91,147,201,.22) !important;
}
.btn-main::after{
  content:""; position:absolute; top:-30%; bottom:-30%; left:-80%; width:32%;
  background:linear-gradient(100deg, transparent, rgba(180,215,245,.10), transparent);
  transform:skewX(-18deg); pointer-events:none; transition:left .6s ease;
}
.btn-main:hover::after{left:150%}
.btn-main .badge-notif{top:10px !important; right:10px !important; border-color:rgba(255,255,255,.35) !important}
.btn-main span.icon{filter:drop-shadow(0 3px 8px rgba(0,0,0,.4)); transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.btn-main:hover span.icon{transform:scale(1.12)}
.btn-main.btn-naranja{
  background:linear-gradient(180deg, rgba(91,147,201,.22), rgba(53,107,160,.12)) !important;
  border-color:rgba(91,147,201,.45) !important;
}
.btn-main.btn-naranja:hover{border-color:var(--cfx-blue2) !important}

/* ---------- Boletos: tarjetas de color ---------- */
a.card{
  border-radius:12px !important; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 28px rgba(0,0,0,.35) !important;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .3s, filter .2s !important;
}
a.card:hover{transform:translateY(-4px) !important; filter:brightness(1.07); box-shadow:0 16px 40px rgba(0,0,0,.5) !important}
a.card::after{
  content:""; position:absolute; top:-30%; bottom:-30%; left:-80%; width:32%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(-18deg); pointer-events:none; transition:left .55s ease;
}
a.card:hover::after{left:150%}
.card-green{background:linear-gradient(160deg,#1f8a4c,#177040) !important}
.card-blue{background:linear-gradient(160deg,#2c7fb8,#226291) !important}
.card-red{background:linear-gradient(160deg,#d64535,#b23a2c) !important}
.card-gray{background:linear-gradient(160deg,#37485c,#2b3948) !important}
.badge-big{animation:cfxBadge 2s ease-in-out infinite}
@keyframes cfxBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.12); box-shadow:0 2px 14px rgba(231,76,60,.55)}}
.badge-notif{animation:cfxBadge 2s ease-in-out infinite}

/* ---------- Paneles genéricos (dashboard y formularios) ---------- */
div.card{
  background:var(--cfx-panel) !important;
  border:1px solid var(--cfx-border);
  box-shadow:0 10px 30px rgba(0,0,0,.30) !important;
}
.card-body{border-top:1px solid rgba(255,255,255,.05) !important; color:var(--cfx-text)}
.form-group label{color:var(--cfx-muted) !important}
.form-group input, .form-group select, .form-group textarea{
  background:var(--cfx-panel2) !important; border-color:var(--cfx-border) !important; color:var(--cfx-text) !important;
  transition:border-color .2s, box-shadow .2s !important;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  border-color:var(--cfx-blue) !important; box-shadow:0 0 0 3px rgba(91,147,201,.18);
}
.form-group input[readonly]{background:#141c25 !important; color:#7e8b98 !important}
.field-auto{background:rgba(214,162,75,.12) !important; border-color:rgba(214,162,75,.5) !important; color:#e8c37a !important}
.field-hint{color:#6f7c88 !important}
.radio-opt, .check-opt{background:var(--cfx-panel2); border-color:var(--cfx-border) !important; color:var(--cfx-text); transition:all .2s !important}
.radio-opt:hover, .check-opt:hover{border-color:var(--cfx-blue) !important; background:rgba(91,147,201,.08) !important; transform:translateY(-1px)}
.radio-opt.selected, .check-opt.selected{border-color:var(--cfx-blue) !important; background:rgba(91,147,201,.14) !important; box-shadow:0 0 0 1px rgba(91,147,201,.35)}
.radio-opt .opt-title{color:var(--cfx-text) !important}
.radio-opt .opt-sub{color:var(--cfx-muted) !important}
.info-box.blue{background:rgba(91,147,201,.10) !important; color:#a9c8e8 !important; border-color:rgba(91,147,201,.35) !important}
.info-box.green{background:rgba(60,150,90,.12) !important; color:#9ee6b4 !important; border-color:rgba(60,150,90,.4) !important}
.info-box.orange{background:rgba(214,162,75,.10) !important; color:#e8c37a !important; border-color:rgba(214,162,75,.4) !important}
.info-box.purple{background:rgba(155,120,190,.12) !important; color:#cdb3e6 !important; border-color:rgba(155,120,190,.4) !important}
.info-box.red{background:rgba(214,80,70,.10) !important; color:#f2a099 !important; border-color:rgba(214,80,70,.4) !important}
.beneficiario-row{background:rgba(214,80,70,.07) !important; border-color:rgba(214,80,70,.35) !important}
.beneficiario-row .brow-header{color:#f2a099 !important}

/* ---------- Botones de acción ---------- */
.btn-generar{
  background:linear-gradient(180deg,#74a9db,#4a82b8) !important; color:#0e141a !important;
  position:relative; overflow:hidden;
  box-shadow:0 6px 20px rgba(91,147,201,.35), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s, box-shadow .2s, filter .2s !important;
}
.btn-generar:hover{transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 10px 28px rgba(91,147,201,.5), inset 0 1px 0 rgba(255,255,255,.3) !important}
.btn-generar:active{transform:translateY(0) scale(.99)}
.btn-ct{transition:all .2s !important}
.btn-ct:hover{transform:translateY(-1px)}

/* ---------- Enlaces de regreso y pie ---------- */
.back-link{color:#a9c4de !important; transition:color .2s}
.back-link:hover{color:var(--cfx-blue2) !important; border-bottom-color:var(--cfx-blue2) !important}
footer{color:#5a6570 !important; border-top:1px solid var(--cfx-border) !important}

/* ---------- Tablas genéricas (historial, listados) ---------- */
table th{background:#1b2634; color:#c9d8e6}
table td{border-color:var(--cfx-border)}
tr:hover td{background:rgba(91,147,201,.05)}

/* ---------- Onda al hacer clic (fx.js) ---------- */
.fx-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.35); transform:scale(0);
  animation:cfxRip .55s ease-out forwards;
}
@keyframes cfxRip{to{transform:scale(3.2); opacity:0}}

/* ---------- ZONA PAPEL: los documentos siguen siendo claros ---------- */
.contrato-area, .contrato-area *{color:#1c1c1c}
.contrato-area{background:#fff !important; box-shadow:0 24px 60px rgba(0,0,0,.5) !important}
.contrato-area input, .contrato-area select, .contrato-area textarea{background:#fff !important; color:#1c1c1c !important}

/* ---------- Impresión: sin tema oscuro ---------- */
@media print{
  body{background:#fff !important; color:#000 !important}
  .fx-breadcrumb, .fx-ripple{display:none !important}
  .contrato-area{box-shadow:none !important}
}

/* ============================================================
   Corrección de contraste — paneles y tablas que quedaron con
   fondo claro heredando el texto crema del tema (ilegible).
   Se les da el fondo oscuro del tema. Solo pantalla.
   ============================================================ */
@media screen{
  /* Boletos: solicitudes pendientes / historial */
  .sol-card{background:var(--cfx-panel) !important; box-shadow:0 10px 28px rgba(0,0,0,.35) !important}
  .sol-header{background:var(--cfx-panel2) !important; border-bottom-color:var(--cfx-border) !important}
  .sol-actions{background:var(--cfx-panel2) !important; border-top-color:var(--cfx-border) !important}
  tbody tr{background:transparent !important}
  tbody tr:nth-child(even){background:rgba(255,255,255,.05) !important}
  tbody td{color:var(--cfx-text); border-color:var(--cfx-border) !important}
  .tfoot-total td{background:var(--cfx-panel2) !important; color:var(--cfx-text) !important; border-top-color:var(--cfx-blue) !important}

  /* Paneles genéricos que venían en blanco */
  .section-box, .stat-card, .saldo-box, .saldo-desglose, .modal-box{
    background:var(--cfx-panel) !important; color:var(--cfx-text) !important; border-color:var(--cfx-border) !important;
  }
  .autocomplete-dropdown{background:var(--cfx-panel2) !important; color:var(--cfx-text) !important; border-color:var(--cfx-border) !important}
  .autocomplete-dropdown .selected{background:rgba(91,147,201,.22) !important}
  .data-label{background:var(--cfx-panel2) !important; color:var(--cfx-muted) !important; border-color:var(--cfx-border) !important}
  .data-value{color:var(--cfx-text) !important; border-color:var(--cfx-border) !important}
  .rfield-input{background:var(--cfx-panel2) !important; color:var(--cfx-text) !important; border-color:var(--cfx-border) !important}
  .modal-cancel{background:var(--cfx-panel2) !important; color:var(--cfx-text) !important; border:1px solid var(--cfx-border) !important}
}

/* ============================================================
   Documentos Laborales: menú de tarjetas (.doc-card) al tema
   oscuro + entrada animada, en sincronía con el resto del portal.
   ============================================================ */
@media screen{
  .doc-card{
    background:linear-gradient(180deg,#18222d,#141d26) !important;
    border:1px solid var(--cfx-border) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.30) !important;
    transition:border-color .25s, box-shadow .3s !important;
    animation:cfxUp .7s cubic-bezier(.16,1,.3,1) backwards;
  }
  .doc-card:nth-child(2){animation-delay:.08s}
  .doc-card:nth-child(3){animation-delay:.16s}
  .doc-card:hover{border-color:var(--cfx-blue) !important; box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 26px rgba(91,147,201,.20) !important}
  .doc-card .doc-name{color:var(--cfx-text) !important}
  .doc-card .doc-ref{color:var(--cfx-muted) !important}
  .page-title h2{color:var(--cfx-text) !important}
  .page-subtitle{color:var(--cfx-muted) !important}
}
@media (prefers-reduced-motion:reduce){ .doc-card{animation:none} }
