/* Lo propio del demo de S. Gabriela Pérez (va DESPUÉS de estilos.css y celular.css).
 * Todo lo demás es igual al demo de María Lucía Furtado. */

/* Dorado del logo y azules de los fondos de la pantalla de ingreso: no cambian con el acento. */
:root{ --dorado-logo:#c8973f; --dorado-suave:#e2c48a; --azul-medio:#16305c; --azul-luz:#1b3563; --azul-borde:#18386b; }

/* Monograma en versión clara (G blanca, P dorada) sobre el azul: sin recuadro blanco. */
.brand img{height:62px;width:auto;background:none;padding:0;border-radius:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.hero-logo{height:78px;width:auto;background:none;padding:0;border-radius:0;opacity:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
@media(max-width:560px){ .brand img{height:44px} }

.ac-sep{border:none;border-top:1px solid var(--border-soft);margin:20px 0 16px}
.ac-ver{margin-top:12px;background:none;border:none;color:var(--azul);font-weight:700;font-size:12.5px;cursor:pointer;padding:0}
.ac-ver:hover{text-decoration:underline}

/* FONDO DE LA PANTALLA DE INGRESO (⋯ → Apariencia). Sin data-fondo = el de siempre (azul liso). */
#login{overflow:hidden}
#login .lf{display:none;position:absolute;pointer-events:none}
#login .login-card{position:relative;z-index:2}
#login .wm-login{z-index:2}
.login-card .lc-nombre{display:none}
/* Miniaturas de cada fondo, para elegir en Apariencia */
.fl-sw{width:54px;height:36px;border-radius:7px;flex-shrink:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);background:linear-gradient(160deg,var(--azul),var(--azul-osc))}
.fl-sw::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:20px;margin:-10px 0 0 -8px;background:#fff;border-radius:3px}
.fl-sw.dividida{background:linear-gradient(90deg,var(--azul) 50%,#fff 50%)} .fl-sw.dividida::after{left:74%;box-shadow:0 0 0 1px var(--border)}
.fl-sw.resplandor{background:radial-gradient(ellipse at 50% 120%,color-mix(in srgb,var(--dorado-logo) 60%,transparent),transparent 60%),var(--azul)} .fl-sw.resplandor::after{border-top:2px solid var(--dorado-logo)}
.fl-sw.arcos{background:radial-gradient(circle,transparent 13px,color-mix(in srgb,var(--dorado-logo) 55%,transparent) 14px,transparent 15px,transparent 19px,color-mix(in srgb,var(--dorado-logo) 35%,transparent) 20px,transparent 21px),var(--azul)}
.fl-sw.agua{background:linear-gradient(160deg,var(--azul-luz),var(--azul-osc))}
.fl-sw.agua::before{content:'G';position:absolute;right:-4px;bottom:-12px;font:700 34px var(--f-display);color:rgba(255,255,255,.13)}

/* 1 · Marca de agua: el monograma gigante, muy suave */
#login[data-fondo="agua"]{background:radial-gradient(circle at 30% 20%,var(--azul-luz) 0%,var(--azul) 45%,var(--azul-osc) 100%)}
#login[data-fondo="agua"] .lf-agua1{display:block;right:-60px;bottom:-90px;width:640px;max-width:90vw;opacity:.07}
#login[data-fondo="agua"] .lf-agua2{display:block;left:-120px;top:-140px;width:420px;max-width:70vw;opacity:.05}

/* 2 · Pantalla dividida: a la izquierda la marca, a la derecha el ingreso */
#login[data-fondo="dividida"]{background:#fff;justify-content:flex-end;padding-right:max(24px,calc((48vw - 360px)/2))}
#login[data-fondo="dividida"] .lf-lado{display:flex;left:0;top:0;bottom:0;width:52%;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:#fff;background:linear-gradient(160deg,var(--azul-medio),var(--azul-osc))}
.lf-lado img{width:230px;max-width:60%;margin-bottom:26px}
.lf-lado h2{font-family:var(--f-display);font-size:34px;font-weight:500;letter-spacing:1px}
.lf-lado p{font-size:12px;letter-spacing:5px;text-transform:uppercase;color:var(--dorado-suave);margin-top:10px}
.lf-lado .lf-linea{width:70px;height:2px;background:var(--dorado-logo);margin:22px 0}
.lf-lado .lf-frase{font-family:var(--f-display);font-style:italic;font-size:17px;color:rgba(255,255,255,.75);letter-spacing:0;text-transform:none;margin:0}
#login[data-fondo="dividida"] .login-card{box-shadow:0 10px 40px rgba(15,36,71,.12);border:1px solid var(--border-soft)}
#login[data-fondo="dividida"] .wm-login{left:52%;color:var(--muted)}
#login[data-fondo="dividida"] .wm-login img{box-shadow:0 0 0 1px var(--border)}
/* En celular no entra dividida: queda el azul con la tarjeta al centro */
@media(max-width:820px){
  #login[data-fondo="dividida"]{background:linear-gradient(160deg,var(--azul),var(--azul-osc));justify-content:center;padding-right:0}
  #login[data-fondo="dividida"] .lf-lado{display:none}
  #login[data-fondo="dividida"] .wm-login{left:0;color:rgba(255,255,255,.82)}
}

/* 3 · Resplandor dorado: el monograma arriba y un brillo dorado desde abajo */
#login[data-fondo="resplandor"]{flex-direction:column;background:radial-gradient(ellipse at 50% 115%,color-mix(in srgb,var(--dorado-logo) 35%,transparent) 0%,color-mix(in srgb,var(--dorado-logo) 0%,transparent) 55%),radial-gradient(circle at 50% 40%,var(--azul-luz) 0%,var(--azul) 50%,var(--azul-osc) 100%)}
#login[data-fondo="resplandor"] .lf-trama{display:block;inset:0;opacity:.08;background-image:linear-gradient(45deg,#fff 1px,transparent 1px),linear-gradient(-45deg,#fff 1px,transparent 1px);background-size:46px 46px}
#login[data-fondo="resplandor"] .lf-arriba{display:block;position:relative;z-index:2;width:92px;margin-bottom:22px}
#login[data-fondo="resplandor"] .login-card{border-top:4px solid var(--dorado-logo)}
#login[data-fondo="resplandor"] .lc-logo{display:none}
#login[data-fondo="resplandor"] .lc-nombre{display:block}
.lc-nombre .t{font-family:var(--f-display);font-size:22px;color:var(--azul);margin-bottom:4px}
.lc-nombre .s{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--muted);margin-bottom:18px}

/* 4 · Arcos dorados alrededor de la tarjeta */
#login[data-fondo="arcos"]{background:linear-gradient(135deg,var(--azul-osc) 0%,var(--azul) 55%,var(--azul-borde) 100%)}
#login[data-fondo="arcos"] .lf-arcos{display:block;inset:0;width:100%;height:100%;stroke:var(--dorado-logo)}

/* Vencimientos de certificados (17/10/2026) */
:root{ --cert:#7b5ea7; --cert-l:#f1ecf8; }
.cert-th{font-size:10.5px;white-space:nowrap}
.cert-td{min-width:112px;padding-left:6px;padding-right:6px}
.cert-td.cert-vacio .cert-in{opacity:.35}
.cert-td.cert-vacio .cert-in:focus{opacity:1}
.cert-in{font-size:12px;padding-left:4px;padding-right:2px}
.cert-td.cert-venc{background:var(--red-l)} .cert-td.cert-venc .cert-in{color:var(--red);font-weight:700}
.cert-td.cert-pronto{background:var(--amber-l)} .cert-td.cert-pronto .cert-in{color:var(--amber);font-weight:700}
.cert-resumen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-size:12px}
.cert-resumen.ok{color:var(--green);font-weight:700}
.cert-chip{font-size:11px;font-weight:700;border-radius:10px;padding:2px 9px}
.cert-chip.venc{background:var(--red-l);color:var(--red)} .cert-chip.pronto{background:var(--amber-l);color:var(--amber)}
.cert-sel{margin:4px 0 12px}
.cal-ev.ev-cert{background:var(--cert-l);color:var(--cert);border-left:3px solid var(--cert)}
/* Empresas usa todo el ancho de la pantalla (17/10/2026): con los 9 certificados, en 1240 px no entraba la tabla. */
main:has(#view-empresas.active){max-width:none}
#view-empresas td:first-child{max-width:220px}
#view-empresas th,#view-empresas td{padding-left:8px;padding-right:8px}
#view-empresas .cert-td{min-width:104px}
#view-empresas .cert-th{font-size:10px;letter-spacing:.3px}
/* Para que entren los 9 certificados en una notebook: la fecha sin el iconito (al tocarla se abre el calendario
   igual, con showPicker) y los títulos largos en dos renglones. */
#view-empresas .cert-in::-webkit-calendar-picker-indicator{display:none}
#view-empresas .cert-in{width:100%;min-width:0;padding-left:2px;padding-right:2px;text-align:center;cursor:pointer}
#view-empresas .cert-td{min-width:0;width:86px;padding-left:4px;padding-right:4px}
#view-empresas .cert-th{white-space:normal;line-height:1.25;width:86px;text-align:center}
#view-empresas td:first-child{max-width:200px}
@media(max-width:760px){ #view-empresas .cert-td{width:auto} #view-empresas .cert-in{text-align:right} }
main:has(#view-empresas.active){padding-left:14px;padding-right:14px}
#view-empresas td:first-child{max-width:180px}