/* Portal de Clientes #Legalteam · 19-09-2026
   Misma casa que SCH (modulo base): colores, linea de encabezado, cabecera,
   boton oficial y pie con la linea de color. Reglas copiadas de SCH tal cual.
   Las fichas son las de Contratos de Clientes (solo lectura), la barra de
   Expandir / Contraer / Cuadros | Lista / Orden es la del Control de
   Pendientes y las etapas son las de Audiencias. */
/* 19-09-2026 · Letra oficial de la plataforma (la de SCH, modulo base): Segoe UI para el texto y
   Georgia para los titulos. Indicado por el Lic. Olvera: «aqui no esta la letra oficial». Las fichas
   usaban Source Sans 3 e IBM Plex Mono; ya no se cargan. */
:root{
  --navy:#232E4C; --navy-2:#1A2440; --navy-100:#E7EAF1;
  --ink:#1B2233; --muted:#6A7185; --line:#E3E6ED;
  --paper:#fff; --bg:#F3F5F8;
  --pink:#D12F66; --red:#B20E17; --red-50:#FCEDEE; --purple:#6B4AA0;
  --green:#1F7A55; --green-50:#EDF7F2; --amber:#9A5A00; --amber-50:#FFF9EC;
  --shadow:0 1px 2px rgba(23,32,56,.04), 0 6px 20px rgba(23,32,56,.06);
  --serif:Georgia,Gelasio,"Times New Roman",serif;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,"Open Sans",Roboto,Helvetica,Arial,sans-serif;
  /* fichas de Contratos de Clientes */
  --tinta:#1B2436; --texto-2:#4B5569; --texto-3:#79839A;
  --fondo:#F4F6FA; --papel:#FFFFFF;
  --linea:#E1E6EF; --linea-fuerte:#C8D0DE;
  --marino:#1E2A4A;
  --verde:#2E7D32; --verde-fondo:#E8F5E9; --verde-borde:#66BB6A;
  --ambar:#8A5A0B; --ambar-fondo:#FBF0DC; --ambar-borde:#D8A63C;
  --rojo:#A4121B; --rojo-fondo:#FBE9EA; --rojo-borde:#D98287;
  --gris:#5B6478; --gris-fondo:#EDF0F5;
  --sombra:0 1px 2px rgba(27,36,54,.07);
  /* marco degradado de los botones del Control de Pendientes */
  --gb:linear-gradient(90deg,var(--pink),var(--purple),var(--navy),var(--purple),var(--pink));
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
button{font:inherit;cursor:pointer}
a{color:var(--red)}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
[hidden]{display:none !important}

/* ---------- linea de encabezado (SCH) ---------- */
.topline{height:4px;background:linear-gradient(90deg,var(--pink),var(--purple),var(--navy));flex:0 0 auto}

/* ---------- cabecera (SCH) ---------- */
header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);
  padding:0 26px;min-height:70px;display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;box-shadow:0 1px 14px rgba(23,32,56,.06)}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{height:42px;width:auto;display:block}
.brand-txt{padding-left:14px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.brand-sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap}
.reloj{font-size:12px;color:var(--muted);line-height:1.2}
.acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.userchip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;
  border-radius:99px;padding:5px 14px 5px 5px;font-size:12px;font-weight:600;color:var(--ink)}
.userchip .ini{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.03em}
.bsalir{border:1px solid #D5DAE4;background:#fff;border-radius:9px;padding:9px 13px;
  font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}

/* ---------- boton oficial #Legalteam (SCH, tal cual) ---------- */
.bmain,.bsec{font-family:inherit;cursor:pointer}
a.bmain,a.bsec{display:inline-block;text-decoration:none;line-height:1.2}
.bsec,.bmain{border:1px solid #D5DAE4;background:#fff;color:var(--ink);border-radius:10px;
  padding:10px 16px 12px;font-size:13px;font-weight:700}
.bsec:not(.on):not(.sel):not([aria-selected=true]):not([aria-pressed=true]):not(:disabled):not(.inicio):hover,.bmain:not(.on):not(.sel):not([aria-selected=true]):not([aria-pressed=true]):not(:disabled):not(.inicio):hover,.bsalir:not(.on):not(.sel):not([aria-selected=true]):not([aria-pressed=true]):not(:disabled):not(.inicio):hover,.toolbar .btn:not(.on):not(.sel):not([aria-selected=true]):not([aria-pressed=true]):not(:disabled):not(.inicio):hover{border-color:#B21119;background:#FCEDEE;color:#B21119}
/* botón oficial #Legalteam · paquete h */
.bsec,.bmain,.bsalir,.toolbar .btn{position:relative;transition:border-color .16s,background .16s,transform .16s,box-shadow .16s}
.bsec::after,.bmain::after,.bsalir::after,.toolbar .btn::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;
  border-radius:2px;transform:scaleX(1);transform-origin:left center;transition:none}
.bsec::after,.bmain::after,.bsalir::after,.toolbar .btn::after{background:var(--red)}
.bsec:hover::after,.bmain:hover::after,.bsalir:hover::after,.toolbar .btn:hover::after,.bsec:focus-visible::after,.bmain:focus-visible::after,.bsalir:focus-visible::after,.toolbar .btn:focus-visible::after{transform:scaleX(1);animation:ltRaya .38s cubic-bezier(.2,.7,.3,1)}@keyframes ltRaya{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bsec:hover,.bmain:hover,.bsalir:hover,.toolbar .btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(27,34,51,.07)}.bsec:active,.bmain:active,.bsalir:active,.toolbar .btn:active{transform:translateY(0)}.bsec[disabled],.bmain[disabled],.bsalir[disabled],.toolbar .btn[disabled]{transform:none;box-shadow:none}#btnInicio:hover,.bsalir.inicio:hover{transform:none;box-shadow:none}#btnInicio:active,.bsalir.inicio:active{transform:translateY(1px)}#btnInicio:not(:hover){border-color:var(--line,#E3E6ED)}@media (prefers-reduced-motion:reduce){.bsec,.bmain,.bsalir,.toolbar .btn,.bsec:hover,.bmain:hover,.bsalir:hover,.toolbar .btn:hover{transition:none;transform:none}.bsec:hover::after,.bmain:hover::after,.bsalir:hover::after,.toolbar .btn:hover::after{transition:none}}
.bsec[disabled]::after,.bmain[disabled]::after,.bsalir[disabled]::after,.toolbar .btn[disabled]::after{display:none}
.bsec[disabled],.bmain[disabled]{opacity:.45;cursor:not-allowed}
.bchico{padding:7px 12px 9px;font-size:12.5px;border-radius:9px}
.bchico::after{left:12px;right:12px;bottom:4px}
.bsalir::after,.toolbar .btn::after{left:12px;right:12px;bottom:4px}
#btnInicio::after,.binicio::after,.bsalir.inicio::after{display:none}

/* ---------- estructura (SCH) ---------- */
main{flex:1;width:min(1480px,100%);margin:0 auto;padding:28px 26px 40px}
.saludo{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;flex-wrap:wrap;margin:0 0 22px}
.saludo h1{font-family:var(--serif);font-size:34px;font-weight:400;letter-spacing:-.012em;line-height:1.15;margin:0;color:var(--navy)}
.saludo p{margin:8px 0 0;color:var(--muted);font-size:14px;max-width:72ch}
.lema{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;color:var(--navy);
  border-left:3px solid var(--pink);padding-left:14px}
.tarjeta{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:26px 30px}
h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;color:var(--navy);margin:0}
h3{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:24px 0 10px}

/* ---------- entrada ---------- */
.entrar{max-width:540px}
.entrar h2{margin-bottom:10px}
.pista{color:var(--muted);margin:0 0 14px;max-width:62ch}
.peq{font-size:13px;margin-top:14px}
label{display:block;font-size:13px;font-weight:600;margin:6px 0 6px}
input{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px}
input:focus{outline:2px solid var(--navy-100);border-color:var(--navy)}
/* i287 · #100 · 01-10-2026 · auditoría iOS: en el celular y en el iPad los campos van a 16 px (el correo de la entrada estaba a 14.5 px
   y Safari acercaba la pantalla al tocarlo). El código de 6 dígitos (#codigo, 22 px) queda igual. En la computadora, igual que antes. */
@media (max-width:820px){ input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px} }
#codigo{font-size:22px;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.fila{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.enlace{background:none;border:0;padding:0;color:var(--navy);font:inherit;text-decoration:underline;cursor:pointer}
.aviso{margin:16px 0 0;padding:10px 12px;border-radius:10px;font-size:14px;background:var(--red-50);color:var(--red)}
.aviso.bien{background:var(--green-50);color:var(--green)}
.cargando{text-align:center;color:var(--muted);padding:60px 0}

/* ---------- barra de herramientas (Control de Pendientes, tal cual) ---------- */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;align-items:center}
.toolbar .btn{border:1px solid #D5DAE4;background:#fff;color:var(--ink);border-radius:9px;padding:7px 12px 9px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700}
.sort-select{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:9px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
@keyframes gbFlujo{0%{background-position:0 0,0% 50%}100%{background-position:0 0,300% 50%}}
.sort-select{
  border:1.5px solid transparent;
  background-image:linear-gradient(#fff,#fff),var(--gb);
  background-origin:border-box;background-clip:padding-box,border-box;
  background-size:100% 100%,300% 100%;
  animation:gbFlujo 6s linear infinite;
  transition:transform .18s cubic-bezier(.2,.8,.3,1.2),box-shadow .18s,color .15s,background-image .15s;
  will-change:transform}
.sort-select:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(35,46,76,.16);animation-duration:1.6s}
.sort-select:hover{background-image:linear-gradient(#FAFBFD,#FAFBFD),var(--gb);color:var(--navy);border-color:transparent}
.sort-select:active{transform:translateY(0) scale(.97);box-shadow:none}
.sort-select{background-color:transparent}
@media (prefers-reduced-motion:reduce){
  .sort-select{animation:none!important;transition:none}
  .sort-select:hover{transform:none}
}

/* ---------- hotel ---------- */
.hotel{margin-bottom:22px}
.hotel-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lugar{color:var(--muted);font-size:14px}
.vacio{color:var(--muted);font-size:14px;margin:4px 0 0}

/* ---------- fichas (Contratos de Clientes, solo lectura) ---------- */
.lt-hoja{color:var(--tinta);font:400 15px/1.6 var(--sans)}
.lt-hoja .grupo{background:var(--papel);border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);margin-bottom:14px;overflow:hidden}
.lt-hoja .grupo > summary.tapa{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;background:var(--papel);list-style:none}
.lt-hoja .grupo > summary.tapa::-webkit-details-marker{display:none}
.lt-hoja .grupo > summary.tapa:hover{background:var(--fondo)}
.lt-hoja .gclave{font:600 11px/1 var(--sans);color:var(--texto-3);letter-spacing:.08em}
.lt-hoja .gnom{font:600 16px/1.3 var(--sans);display:block;margin-top:4px}
.lt-hoja .gcuenta{color:var(--texto-3);font-size:13px}
.lt-hoja .flecha{display:inline-block;margin-left:4px;transition:transform .18s}
.lt-hoja details[open] > summary .flecha{transform:rotate(90deg)}
/* 19-09-2026 · Solo en lista: una ficha debajo de otra (la vista de cuadros se quito). */
.lt-hoja .gcuerpo{padding:14px 18px 16px;border-top:1px solid var(--linea);display:grid;gap:14px;
  grid-template-columns:minmax(0,1fr);align-items:start}

.lt-hoja .contrato{border:1px solid var(--linea);border-radius:10px;background:var(--papel);min-width:0}
.lt-hoja .contrato.vigente{border-left:4px solid var(--verde-borde)}
.lt-hoja .contrato.porvencer{border-left:4px solid var(--ambar-borde)}
.lt-hoja .contrato.vencido{border-left:4px solid var(--rojo-borde)}
.lt-hoja .contrato.espera{border-left:4px solid var(--linea-fuerte)}
.lt-hoja .contrato > summary.cab{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-start;justify-content:space-between;padding:14px 16px;cursor:pointer;list-style:none;border-radius:10px}
.lt-hoja .contrato > summary.cab::-webkit-details-marker{display:none}
.lt-hoja .contrato > summary.cab:hover{background:var(--fondo)}
.lt-hoja .contrato[open] > summary.cab{border-bottom:1px dashed var(--linea);border-radius:10px 10px 0 0}
.lt-hoja .contrato h4{font:600 15px/1.35 var(--sans);margin:4px 0 0;overflow-wrap:anywhere}
.lt-hoja .contrato .cclave{font:600 11px/1 var(--sans);color:var(--texto-3);letter-spacing:.06em}
.lt-hoja .contrato .resumen{display:block;margin-top:4px;color:var(--texto-3);font-size:13px}
.lt-hoja .contrato .cab-der{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.lt-hoja .contrato .cuerpo{padding:4px 16px 16px}
.lt-hoja .rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;margin-top:12px}
.lt-hoja .dato .et{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);margin-bottom:3px}
.lt-hoja .dato .vl{display:block;overflow-wrap:anywhere}

.lt-hoja .docfila{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:9px;margin-top:8px;
  background:var(--verde-fondo);border:1px solid var(--verde-borde);border-left:3px solid var(--verde-borde)}
.lt-hoja .docfila .tipo{font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--verde);color:#fff;border-radius:5px;padding:5px 8px;white-space:nowrap}
.lt-hoja .docfila .nom{font-weight:600;overflow-wrap:anywhere;flex:1 1 200px;font-size:14px}
.lt-hoja .docfila .cuando{display:block;font-weight:400;font-size:12.5px;color:var(--texto-3)}
.lt-hoja .docfila .acc{display:flex;gap:6px;flex-wrap:wrap}
.lt-hoja .docfila a.abrir{font:600 12.5px/1 var(--sans);color:var(--verde);background:var(--papel);border:1px solid var(--verde-borde);border-radius:6px;padding:7px 11px;text-decoration:none}
.lt-hoja .docfila a.abrir:hover{background:#fff}
.lt-hoja .docsvacio{margin-top:10px;color:var(--texto-3);font-size:13.5px;font-style:italic}

.lt-hoja .alerta{margin-top:12px;padding:11px 13px;border-radius:9px;font-size:14px;border:1px solid}
.lt-hoja .a-ojo{background:var(--ambar-fondo);border-color:var(--ambar-borde);color:#6C4708}
.lt-hoja .a-mal{background:var(--rojo-fondo);border-color:var(--rojo-borde);color:#7C0F16}
.lt-hoja .a-neutro{background:var(--gris-fondo);border-color:var(--linea-fuerte);color:var(--texto-2)}
.lt-hoja .a-bien{background:var(--verde-fondo);border-color:var(--verde-borde);color:#1B5E20}

.lt-hoja .pastilla{display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;border-radius:5px;padding:5px 8px;white-space:nowrap}
.lt-hoja .p-ok{background:var(--verde-fondo);color:var(--verde)}
.lt-hoja .p-ojo{background:var(--ambar-fondo);color:var(--ambar)}
.lt-hoja .p-mal{background:var(--rojo-fondo);color:var(--rojo)}
.lt-hoja .p-gris{background:var(--gris-fondo);color:var(--gris)}
.lt-hoja .p-azul{background:#E7ECF7;color:var(--marino)}
/* semaforo de vencimiento de SCH */
.lt-hoja .p-naranja{background:#FDEBDD;color:#B5651D}
.lt-hoja .p-rojo{background:var(--rojo-fondo);color:#D12F66}
.lt-hoja .p-venc{background:#7C0F16;color:#fff}
.lt-hoja .contrato.t-amarillo{border-left-color:var(--ambar-borde)}
.lt-hoja .contrato.t-naranja{border-left-color:#E59A5B}
.lt-hoja .contrato.t-rojo{border-left-color:#D12F66}
.lt-hoja .contrato.t-venc{border-left-color:#7C0F16}
.lt-hoja .a-naranja{background:#FDEBDD;border-color:#E59A5B;color:#8A4A12}
.lt-hoja .a-venc{background:#FBE9EA;border-color:#7C0F16;color:#7C0F16}

.lt-hoja .subt{font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);margin:16px 0 0}
.lt-hoja .linea-tiempo{list-style:none;margin:12px 0 0;padding:0}
.lt-hoja .linea-tiempo li{border-left:2px solid var(--linea-fuerte);padding:0 0 12px 14px;position:relative}
.lt-hoja .linea-tiempo li::before{content:"";position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--linea-fuerte)}
.lt-hoja .linea-tiempo .quien{font:600 11px/1 var(--sans);color:var(--texto-3);letter-spacing:.05em}
.lt-hoja .linea-tiempo .que{display:block;margin-top:4px}
.lt-hoja .fichas{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-items:start}
.lt-hoja .fichas .contrato{padding:0}

/* ---------- etapas del contrato (Audiencias, en solo lectura) ---------- */
.lt-hoja .pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px;margin:14px 0 4px;position:relative}
.lt-hoja .paso{position:relative;overflow:hidden;text-align:center;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:#9AA2B4;background:#F5F7FA;border-radius:8px;padding:8px 6px;line-height:1.3;hyphens:auto;overflow-wrap:break-word;
  border:1px solid #EDF0F5;transform:translateY(4px);opacity:0;
  animation:pasoEntra .38s cubic-bezier(.22,.9,.3,1) forwards;
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif}
.lt-hoja .paso .n{display:block;font-size:11px;margin-bottom:2px}
.lt-hoja .paso .f{display:block;font-size:9px;font-weight:600;letter-spacing:.02em;margin-top:3px;opacity:.85}
.lt-hoja .paso:nth-child(1){animation-delay:.02s}.lt-hoja .paso:nth-child(2){animation-delay:.09s}
.lt-hoja .paso:nth-child(3){animation-delay:.16s}.lt-hoja .paso:nth-child(4){animation-delay:.23s}
.lt-hoja .paso:nth-child(5){animation-delay:.30s}.lt-hoja .paso:nth-child(6){animation-delay:.37s}
@keyframes pasoEntra{to{transform:translateY(0);opacity:1}}
.lt-hoja .paso.ok{color:#116A34;border-color:#CDE8D9;background:#E6F4EC;background-size:200% 100%;
  background-image:linear-gradient(90deg,#E6F4EC 0 50%,#F5F7FA 50% 100%);background-position:100% 0;
  animation:pasoEntra .38s cubic-bezier(.22,.9,.3,1) forwards, pasoLlena .5s ease forwards}
@keyframes pasoLlena{from{background-position:100% 0}to{background-position:0 0}}
.lt-hoja .paso.now{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 0 0 0 rgba(35,46,76,.45);
  animation:pasoEntra .38s cubic-bezier(.22,.9,.3,1) forwards, pasoLate 2.4s ease-out .5s infinite}
@keyframes pasoLate{0%{box-shadow:0 0 0 0 rgba(35,46,76,.40)}60%{box-shadow:0 0 0 9px rgba(35,46,76,0)}100%{box-shadow:0 0 0 0 rgba(35,46,76,0)}}
.lt-hoja .paso.now::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:pasoBrillo 2.6s linear .8s infinite}
@keyframes pasoBrillo{to{left:120%}}
.lt-hoja .paso-leyenda{font-size:12.5px;color:var(--texto-3);margin:2px 0 0}

/* ---------- pendientes ---------- */
.pend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pend > li{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.pend ul li{margin:2px 0}
.pend b{display:block;margin-bottom:6px}
.pend ul{margin:0;padding-left:18px}
.pend .fecha{color:var(--muted);font-size:13px;margin-left:6px}
.pend .grupo-t{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-right:4px}

/* ---------- boton oficial para volver arriba (el mismo de toda la plataforma) ---------- */
@property --lt-avance { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes lt-avance { from { --lt-avance: 0; } to { --lt-avance: 1; } }
#btnArriba{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));width:50px;height:50px;min-width:50px;padding:0;
  border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--navy);font-size:19px;font-weight:800;line-height:1;text-align:center;
  z-index:60;box-shadow:0 6px 18px rgba(23,32,56,.14);overflow:visible;isolation:isolate;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s,background .16s,border-color .16s}
#btnArriba.ver{opacity:1;visibility:visible;transform:none}
#btnArriba::before,#btnArriba::after{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:50%;pointer-events:none;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px))}
#btnArriba::before{background:conic-gradient(from 0deg,#D12F66 0turn,#6B4AA0 .5turn,#232E4C 1turn)}
#btnArriba::after{background:conic-gradient(transparent calc(var(--lt-avance, 0) * 1turn),#E7EAF1 0)}
#btnArriba:hover{background:#FAFBFD;border-color:#C7CDDA}
@supports (animation-timeline: scroll()){
  #btnArriba{animation:lt-avance linear both;animation-timeline:scroll(root block)}
}

/* ---------- pie (SCH) con el aviso de confidencialidad y privacidad ---------- */
footer{flex:0 0 auto;margin-top:auto}
.pie-linea{height:4px;background:linear-gradient(90deg,var(--pink),var(--purple),var(--navy))}
.pie-aviso{width:min(1480px,100%);margin:0 auto;padding:18px 26px 4px;font-size:12px;line-height:1.55;color:var(--muted)}
.pie-aviso b{display:block;color:var(--navy);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin:0 0 6px}
.pie-aviso p{margin:0 0 6px;max-width:130ch;text-align:justify}
.pie-aviso a{color:var(--navy);font-weight:600}
.pie-txt{width:min(1480px,100%);margin:0 auto;padding:12px 26px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.pie-txt b{color:var(--navy);font-weight:800}
.pie-txt a{color:var(--navy)}

@media (max-width:640px){
  header{padding:8px 16px}
  .reloj{display:none}
  main{padding:20px 16px 32px}
  .saludo h1{font-size:28px}
  .tarjeta{padding:20px}
  .pie-aviso,.pie-txt{padding-left:16px;padding-right:16px}
  .lt-hoja .pasos{grid-template-columns:repeat(2,1fr)}
  .lt-hoja .gcuerpo{padding-left:12px;padding-right:12px}
}

/* 19-09-2026 b · Pestañas de modulos del Hotel: las mismas de la ficha en la Base General de Clientes. */
.subpest{display:flex;gap:18px;margin:18px 0 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.subpest button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:8px 0;font-weight:700;font-size:13px}
.subpest button[aria-selected=true]{color:var(--navy);border-bottom-color:var(--red)}
.subpest .pcuenta{margin-left:6px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.subpest button[aria-selected=true] .pcuenta{color:var(--navy)}
.panel .modnom{margin:0 0 12px;color:var(--muted);font-size:13px}

/* 19-09-2026 c · Etapas por evidencia: la primera gris late (igual que en el módulo de Contratos). */
.lt-hoja .paso.now{background:#F5F7FA;color:var(--navy);border-color:#C9D0E0}
.lt-hoja .paso.now::after{display:none}

/* 20-09-2026 · Mensajes y solicitudes al despacho */
#solicitudes{margin-top:18px}
#solicitudes .sol-form{display:block;max-width:720px}
#solicitudes select.sol-campo,#solicitudes textarea.sol-campo{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px}
#solicitudes textarea.sol-campo{resize:vertical;min-height:110px;line-height:1.45}
#solicitudes select.sol-campo:focus,#solicitudes textarea.sol-campo:focus{outline:2px solid var(--navy-100);border-color:var(--navy)}
#solicitudes .fila{margin-top:14px}
#solicitudes .sol-dato{margin:0;font-size:13px;color:var(--muted)}
#solicitudes .sol-msg{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.5;color:var(--ink)}
#solicitudes .sol-resp{border:1px solid var(--line);border-left:3px solid var(--green);border-radius:10px;padding:10px 12px;background:#FAFBFD}
#solicitudes .sol-resp > b{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--green);margin-bottom:6px}

/* 20-09-2026 · Portal espejo: los módulos del Hotel como las tarjetas del Inicio de la plataforma. */
.mod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;margin:16px 0 4px}
@media(max-width:1100px){ .mod-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .mod-grid{grid-template-columns:1fr} }
.mod{--acc:var(--navy);background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow);transition:transform .13s ease,box-shadow .13s ease,border-color .13s;
  font:inherit;color:inherit;text-decoration:none;min-width:0;white-space:normal;overflow-wrap:anywhere}
.mod:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(23,32,56,.13);border-color:#C7CDDA}
.mod:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.mod .ico{font-size:31px;line-height:1}
.mod h3{margin:0;font-family:var(--serif);font-size:19px;font-weight:700;color:var(--acc);letter-spacing:-.005em;text-transform:none}
.mod p{margin:0;font-size:13px;line-height:1.5;color:var(--muted);flex:1 1 auto}
.mod-cuenta{font-size:12.5px;font-weight:700;color:var(--navy)}
.mod-cuenta.ojo{color:var(--amber)}
.mod-cuenta.mal{color:var(--red)}
.mod-pie{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mod .et{border-radius:99px;padding:5px 11px;border:1px solid;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:center}
.mod .et.listo{color:var(--green);border-color:#BFE3D2;background:var(--green-50)}
@media (prefers-reduced-motion:reduce){.mod{transition:none}.mod:hover{transform:none}}

/* ===== 20-09-2026 · paquete g ===== */
/* Entrada: el recuadro de seguridad junto a «Entrar al portal». */
.entrar-rejilla{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:22px;align-items:start}
.entrar-rejilla .entrar{max-width:none}
.seguridad h2{font-size:20px;margin-bottom:12px}
.seg-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.seg-lista li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.5;color:var(--ink,#1B2233)}
.seg-lista li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:#EAF6F0;
  box-shadow:inset 0 0 0 1px #BFE3D2}
.seg-lista li::after{content:"";position:absolute;left:5px;top:6px;width:5px;height:8px;border:solid #1F7A55;border-width:0 2px 2px 0;transform:rotate(45deg)}
.seg-lista b{color:var(--navy,#232E4C)}
.seg-pie{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.seg-pie a{color:var(--navy,#232E4C);font-weight:700}
/* 21-09-2026 · Lic. Olvera: «justifica así protegemos su información». En el celular se permite partir palabras
   (español) para que el justificado no deje huecos grandes entre palabras. */
.seg-lista li,.seg-pie{text-align:justify;text-justify:inter-word}
@media (max-width:640px){ .seg-lista li,.seg-pie{hyphens:auto;-webkit-hyphens:auto} }
@media (max-width:900px){ .entrar-rejilla{grid-template-columns:1fr} }
/* Celular (Lic. Olvera: «mira cómo se ve en iPhone»): el encabezado cabe en una sola línea. */
@media (max-width:640px){
  header{flex-wrap:nowrap!important;gap:8px!important;padding:8px 12px!important}
  header .brand img{height:30px!important;width:auto}
  header .brand-txt{display:none!important}
  header .acciones{flex-wrap:nowrap!important;gap:6px!important;margin-left:auto}
  #quien,#userNom{display:none!important}
  .userchip{padding:3px!important;gap:0!important}
  .bsalir{padding:7px 10px!important;font-size:12px!important}
  #btnInicio .txt{display:none}
}

/* 21-09-2026 · «es el mismo que mi teléfono» en el formulario de solicitudes */
.sol-form .sol-mismo{display:flex;align-items:center;gap:8px;margin:-4px 0 12px;font-weight:400;font-size:13px;color:var(--muted,#6A7185);cursor:pointer}
.sol-form .sol-mismo input{width:16px;height:16px;margin:0;accent-color:#232E4C}
.sol-form input[readonly]{background:#F2F4F8;color:var(--muted,#6A7185)}

/* i17 · 21-09-2026 · pantalla de salida del Portal: la tarjeta de «Gracias por su visita» */
.tarjeta.salida{max-width:620px}
.tarjeta.salida h2{margin-bottom:12px}
.tarjeta.salida .aviso{margin:0 0 14px;display:inline-block}

/* i19 · 22-09-2026 · cluster: un botón oficial por Hotel; el que se está viendo lleva el filo multicolor de la casa */
.lt-hoteles-sel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px}
.lt-hoteles-sel[hidden]{display:none}
.lt-hoteles-sel-tit{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#6A7185);margin-right:2px}
.lt-hoteles-sel .lt-hotel-btn.activo{border:2px solid transparent;padding:9px 15px 11px;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--pink,#D12F66),var(--purple,#6B4AA0),var(--navy,#232E4C)) border-box}

/* i111 · 25-09-2026 · 360 #34 · Pregúntele a Homero: responde con lo que el Cliente ya ve, cada dato con su fuente */
.hom-sug{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.hom-chip{font:600 12.5px/1.4 var(--sans);color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer;text-align:left}
.hom-chip:hover{border-color:#C7CDDA;background:#FAFBFD}
.hom-conv{display:flex;flex-direction:column;gap:12px;margin:10px 0 14px}
.hom-par{display:flex;flex-direction:column;gap:6px}
.hom-q,.hom-a{border-radius:12px;padding:10px 13px;font-size:14px;line-height:1.55;max-width:760px;overflow-wrap:anywhere}
.hom-q{align-self:flex-end;background:#F3F5F8;border:1px solid var(--line)}
.hom-a{background:#fff;border:1px solid var(--line);border-left:3px solid var(--purple)}
.hom-a.hom-err{border-left-color:var(--red)}
.hom-a.hom-esp span{color:var(--muted);font-style:italic}
.hom-q b,.hom-a b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.hom-q span,.hom-a span{white-space:pre-wrap}
.hom-fuentes{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:12px}
.hom-fte{color:var(--muted);font-weight:700}
.hom-f{background:#F1F3F7;color:#3B4257;border-radius:99px;padding:3px 10px}
.hom-f a{color:var(--red);font-weight:700;margin-left:4px}
.hom-a .fila{margin-top:8px}
.bsec.hom-disc{font-weight:600;color:var(--muted)}

/* i111 · 25-09-2026 · 360 #36 · Informes de la firma (la versión para el Cliente, autorizada) */
.inf-cuerpo h4{font:400 16px/1.3 Georgia,"Times New Roman",serif;color:var(--navy);margin:14px 0 4px}
.inf-cuerpo p,.inf-cuerpo li{font-size:14px;line-height:1.6;max-width:80ch}
.inf-tabla{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin:8px 0}
.inf-tabla table{border-collapse:collapse;width:100%;font-size:13px}
.inf-tabla th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:7px 10px;border-bottom:1px solid var(--line);background:#FAFBFD;white-space:nowrap}
.inf-tabla td{padding:7px 10px;border-top:1px solid #EEF0F4;vertical-align:top}
.inf-nw{white-space:nowrap}

/* i112 · 26-09-2026 · #61 · Subir documentos a la firma: «La firma le pide», «Documentos para la firma» y la ventana de la casa.
   Los botones son los oficiales de esta hoja (.bsec .bchico); aquí no se define ningún botón nuevo. */
.psub-pedidos{margin:18px 0 6px}
.psub-pedidos h3{margin:0 0 10px}
.psub-pedido{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--red);border-radius:12px;padding:12px 14px;margin:0 0 10px;box-shadow:var(--shadow)}
.psub-pedido-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 260px}
.psub-pedido-txt b{font-size:15px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.psub-pedido-meta{font-size:13px;color:var(--muted)}
.psub-pedido-nota{font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.psub-lim.ojo{color:var(--amber);font-weight:700}
.psub-lim.mal{color:var(--red);font-weight:700}
/* la tarjeta del módulo con «Subir documento»: toda la tarjeta sigue abriendo el módulo */
.mod.mod-psub .mod-liga{color:inherit;text-decoration:none}
.mod.mod-psub a.et{text-decoration:none}
.mod.mod-psub .mod-pie{justify-content:space-between}
/* Documentos para la firma */
.psub-barra{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 12px}
.psub-barra .pista{margin:0;flex:1 1 280px}
.lt-hoja .psub-fila .nom .cuando + .cuando{margin-top:2px}
.lt-hoja .psub-fila .acc{align-items:center}
/* la ventana: la de la casa (línea multicolor arriba y abajo, #LEGALTEAM, Georgia en el título, pie oficial) */
html.psub-sin-scroll{overflow:hidden}
.psub-fondo{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(27,34,51,.46);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.psub-fondo[hidden]{display:none!important}
.psub-caja{width:100%;max-width:580px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 48px rgba(27,34,51,.28);color:var(--ink);text-align:left}
.psub-linea{height:4px;flex:0 0 auto;background:linear-gradient(90deg,var(--pink),var(--purple),var(--navy))}
.psub-cuerpo{padding:20px 22px 12px;overflow-y:auto;min-height:0}
/* i136 · #150 · la × oficial de cerrar: redonda, arriba a la derecha, roja al pasar el mouse */
.psub-caja{position:relative}
.psub-cuerpo{padding-right:66px}
.psub-x{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;min-width:42px;padding:0;border-radius:50%;background:#fff;
  border:1px solid #DBD9D4;color:#5A6070;font:400 22px/1 "Segoe UI",-apple-system,Arial,sans-serif;cursor:pointer;text-align:center;
  transition:background .15s,border-color .15s,color .15s}
.psub-x::after{display:none;content:none}
.psub-x:hover,.psub-x:focus-visible{background:#FCEDEE;border-color:#B20E17;color:#B20E17;outline:none}
.psub-firma{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.psub-titulo{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.25;color:var(--navy);margin:0}
.psub-sub{margin:4px 0 12px;color:var(--muted);font-size:13.5px}
.psub-cuerpo label{margin-top:12px}
.psub-campo{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.psub-campo:focus{outline:2px solid var(--navy-100);border-color:var(--navy)}
.psub-campo:disabled{background:#F2F4F8;color:var(--muted)}
.psub-et{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
.psub-et2{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.psub-pedido-v{margin:6px 0 4px;box-shadow:none}
.psub-zona{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:4px;margin:0!important;border:1.5px dashed #C7CDDA;border-radius:12px;
  padding:16px 14px;text-align:center;cursor:pointer;background:#FAFBFD;font-weight:400!important}
.psub-zona b{color:var(--navy);font-size:14px}
.psub-zona span{color:var(--muted);font-size:12.5px}
.psub-zona:hover,.psub-zona.sobre{border-color:var(--navy);background:#F3F5F8}
.psub-zona:focus-within{outline:2px solid var(--navy);outline-offset:2px}
.psub-oculto{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.psub-lista{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.psub-lista:empty{display:none}
.psub-lista li{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13.5px;background:#fff}
.psub-lista .n{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-weight:600}
.psub-lista .e{font-size:12.5px;color:var(--muted);text-align:right;max-width:55%}
.psub-lista li.ok{background:var(--green-50);border-color:#BFE3D2}
.psub-lista li.ok .e{color:var(--green);font-weight:700}
.psub-lista li.mal{background:var(--red-50);border-color:#F0C9CC}
.psub-lista li.mal .e{color:var(--red)}
.psub-quitar{flex:0 0 auto;border:0;background:none;color:var(--muted);font-size:18px;line-height:1;padding:2px 6px;border-radius:6px}
.psub-quitar:hover{color:var(--red);background:var(--red-50)}
.psub-progreso{height:8px;border-radius:99px;background:var(--navy-100);overflow:hidden;margin:14px 0 4px}
.psub-progreso i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--purple),var(--navy));transition:width .2s}
.psub-avance{margin:0;font-size:12.5px;color:var(--muted);min-height:1em}
.psub-avance:empty{display:none}
.psub-cuerpo .aviso{margin:12px 0 0}
.psub-nota{margin:12px 0 0!important;font-size:12.5px}
.psub-botones{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:12px 22px 16px;border-top:1px solid var(--line);flex:0 0 auto}
.psub-pie{display:flex;align-items:center;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;padding:9px 22px;background:#FAFBFD;
  font-size:10.5px;font-weight:600;color:var(--muted);flex:0 0 auto}
.psub-pie b{color:var(--navy);font-weight:800}
@media (max-width:640px){
  .psub-fondo{padding:0;align-items:flex-end}
  .psub-caja{max-width:none;border-radius:16px 16px 0 0;max-height:94vh}
  .psub-cuerpo{padding:16px 16px 10px}
  .psub-botones{padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
  .psub-botones .bsec{flex:1 1 40%}
  .psub-pie{padding:8px 16px}
  .psub-pedido .bsec{flex:1 1 100%}
  .psub-barra .bsec{flex:1 1 100%}
  .psub-campo,.psub-cuerpo select{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.psub-progreso i{transition:none}}

/* ===== i293 · 01-10-2026 · Lic. Olvera («ok hazlo», lista #37 y #39) · auditoría iOS =====
   Sólo en pantallas táctiles (celular y iPad); en la computadora no cambia nada.
   #37 · lo que se toca mide al menos 40 px de alto.
   #39 · los campos de captura van a 16 px: con menos, Safari acerca la pantalla al escribir. */
@media (hover:none) and (pointer:coarse){
  .bsec,.bmain,.bsalir,.bchico,.btn,.boton,.b,.arch-b,.pestana,.chip,.navbtn,.liga,.binicio,.rn-liga,.esp-sol,.mod-liga,.enlace,
  button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"]{min-height:40px}
  .icob{min-width:40px;min-height:40px}
  /* las etiquetas de color de las tablas: la pastilla se ve igual; lo que crece es lo que se puede tocar */
  select.etq{border-top:8.5px solid transparent !important;border-bottom:8.5px solid transparent !important;background-clip:padding-box !important}
  input[type="checkbox"],input[type="radio"]{width:22px;height:22px}
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
  textarea,select:not(.etq),[contenteditable=""],[contenteditable="true"]{font-size:16px !important}
}