/* Shell: tokens, fondo, ventanas flotantes, dock, login, modales. Estilo oscuro de cristal, acento violeta. */
/* ── Marca Polo (oficina/branding/generar.py, dirección d1). Todos los colores de la interfaz salen de aquí. ──
   Cambiar el acento: --acc, --acc-rgb (mismo color en r,g,b), --acc-h (hover/pulsado) y --acc-l (texto/icono de acento sobre oscuro). */
@font-face { font-family: "Geist"; src: url("vendor/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("vendor/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  /* paleta de marca */
  --grafito: #121316; --hueso: #F4F3EF; --niebla: #9A9DA6; --acero: #2A2D36; --violeta: #7C6CF2;
  /* superficies (tokens `ui` de Polo: fondo, fondo2, panel, borde) */
  --bg0: #0C0D10; --bg0-rgb: 12,13,16;
  --app: #111216;
  --p1: #15161B; --p1-rgb: 21,22,27;
  --p2: #17181D; --p2-rgb: 23,24,29;
  --p3: #1F2026; --p3-rgb: 31,32,38;
  --p4: var(--acero);
  --borde: #262830;
  --line: rgba(var(--tx-rgb),.07); --line2: rgba(var(--tx-rgb),.12);
  /* texto: --tx2 (Niebla) y --tx3 pasan AA (≥4,5:1) también sobre el cristal encima de la escena clara (medido en capturas) */
  --tx: var(--hueso); --tx-rgb: 244,243,239; --tx2: var(--niebla); --tx3: #8E929C;
  --off: #5d6069;   /* punto de desconectado */
  /* acento */
  --acc: var(--violeta); --acc-rgb: 124,108,242; --acc-h: #6B5BE6; --acc-l: #B7AAFF; --acc-tx: #FFFFFF;
  --acc-s: rgba(var(--acc-rgb),.16); --acc-glow: rgba(var(--acc-rgb),.16);
  /* estados (semánticos, no son de marca) */
  --ok: #36c47c; --ok-rgb: 54,196,124; --ok-l: #5fd39a; --ok-h: #4bd592;
  --warn: #f2a93b; --warn-rgb: 242,169,59;
  --bad: #ef5350; --bad-rgb: 239,83,80; --bad-l: #ff8a86; --bad-h: #f4635f; --bad-s: rgba(var(--bad-rgb),.16);
  --code: #ff9fb0;
  /* cristal (ventanas y dock sobre la escena 3D): opaco de sobra para que el texto secundario no pierda contraste */
  --glass: rgba(var(--p1-rgb),.92); --glass2: rgba(var(--p2-rgb),.94);
  --sh: 0 10px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  --sh2: 0 28px 70px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.3);
  /* tipografía: Geist 400/500 en la interfaz, Geist Mono para cifras y código */
  --f: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --fm: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --track-logo: -0.022em;
  --r: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg0); color: var(--tx); font: 14px/1.45 var(--f); -webkit-font-smoothing: antialiased; overflow: hidden; accent-color: var(--acc); color-scheme: dark; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--acc-l); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(var(--tx-rgb),.12); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--tx-rgb),.22); background-clip: content-box; border: 2px solid transparent; }

.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cargando::after { content: ""; position: fixed; inset: 0; background: var(--bg0); }

#mapa-cont { position: fixed; inset: 0; background: var(--bg0); }
#fondo-neutro { position: fixed; inset: 0; background: radial-gradient(1200px 700px at 20% -10%, rgba(var(--acc-rgb),.16), transparent 60%), radial-gradient(900px 600px at 100% 110%, rgba(var(--tx-rgb),.03), transparent 60%), var(--bg0); z-index: -1; }
body:not(.sin-oficina) #fondo-neutro { display: none; }
#mapa-cont:empty { display: none; }

/* ─ ventanas flotantes ─ */
#ventanas { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.ventana { position: absolute; display: none; flex-direction: column; pointer-events: auto; background: var(--glass); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border: 1px solid var(--line2); border-radius: 18px; box-shadow: var(--sh2); overflow: hidden; min-width: 420px; min-height: 320px; }
.ventana.abierta { display: flex; animation: aparece .18s ease-out; }
@keyframes aparece { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.ventana.max { inset: 12px 12px 88px 12px; width: auto; height: auto; min-width: 0; }
.v-barra { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); cursor: grab; user-select: none; flex: none; background: rgba(var(--tx-rgb),.02); }
.ventana.max .v-barra { cursor: default; }
.v-titulo { display: flex; align-items: center; gap: 9px; color: var(--tx2); font-size: 13px; }
.v-titulo b { font-weight: 600; color: var(--tx); letter-spacing: .1px; }
.v-botones { display: flex; gap: 2px; }
.v-botones button { width: 30px; height: 28px; border-radius: 8px; color: var(--tx3); display: grid; place-items: center; }
.v-botones button:hover { background: rgba(var(--tx-rgb),.08); color: var(--tx); }
.v-botones button[data-v=cerrar]:hover { background: var(--bad-s); color: var(--bad); }
.v-botones .ico { width: 15px; height: 15px; }
.v-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.v-tirador { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 5; background: linear-gradient(135deg, transparent 55%, rgba(var(--tx-rgb),.22) 55%, rgba(var(--tx-rgb),.22) 62%, transparent 62%, transparent 74%, rgba(var(--tx-rgb),.22) 74%, rgba(var(--tx-rgb),.22) 81%, transparent 81%); }
.ventana.max .v-tirador { display: none; }

/* ─ dock ─ */
#dock-zona { position: fixed; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; pointer-events: none; z-index: 60; padding: 0 8px; }
#dock { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 7px 9px; background: var(--glass2); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--line2); border-radius: 22px; box-shadow: var(--sh2); max-width: 100%; }
.d-btn { position: relative; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--tx2); transition: background .15s, color .15s, transform .15s; }
.d-btn .ico { width: 22px; height: 22px; }
.d-btn:hover { background: rgba(var(--tx-rgb),.08); color: var(--tx); transform: translateY(-2px); }
.d-btn.on { background: var(--acc-s); color: var(--acc-l); }
.d-btn.on::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--acc-l); }
.d-btn.perfil { padding: 0; }
.d-sep { width: 1px; height: 26px; background: var(--line2); margin: 0 5px; }
.d-tip { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(var(--bg0-rgb),.94); color: var(--tx); padding: 4px 9px; border-radius: 8px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .15s; border: 1px solid var(--line); }
.d-btn:hover .d-tip { opacity: 1; transform: translateX(-50%); }
.insignia { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; display: grid; place-items: center; border: 2px solid var(--p2); }

/* ─ avatar ─ */
.avatar { position: relative; display: inline-grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); color: #fff; font-weight: 700; flex: none; letter-spacing: .3px; }
.avatar .punto { position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--off); border: 2px solid var(--p2); }
.avatar .punto.on { background: var(--ok); }

/* ─ botones y campos ─ */
.btn { padding: 8px 14px; border-radius: 10px; background: var(--p3); border: 1px solid var(--line2); color: var(--tx); font-weight: 500; font-size: 13px; transition: background .15s; }
.btn:hover { background: var(--p4); }
.btn.primario { background: var(--acc); border-color: transparent; color: var(--acc-tx); }
.btn.primario:hover { background: var(--acc-h); }
.btn.peligro { background: var(--bad); border-color: transparent; color: #fff; }
.btn.chico { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: default; }
input[type=text], input[type=search], input[type=date], input:not([type]), textarea, select { background: var(--p1); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 11px; outline: none; width: 100%; }
input:focus, textarea:focus, select:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-s); }
/* los campos ya marcan el foco con borde y halo: sin el contorno global encima (evita el doble anillo) */
input:not([type=checkbox]):not([type=radio]):focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tx3) 50%), linear-gradient(135deg, var(--tx3) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
input[type=checkbox] { accent-color: var(--acc); width: 16px; height: 16px; }

/* ─ modal, menú, toasts ─ */
.modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 200; padding: 16px; }
.modal { width: 400px; max-width: 100%; max-height: 90vh; overflow: auto; background: var(--glass2); border: 1px solid var(--line2); border-radius: 18px; padding: 22px; box-shadow: var(--sh2); }
.modal h3 { font-size: 16px; margin-bottom: 8px; }
.modal p { color: var(--tx2); margin-bottom: 12px; }
.modal .campo { display: block; margin: 12px 0; }
.modal .campo span { display: block; font-size: 12px; color: var(--tx3); margin-bottom: 5px; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
#menu-ctx { display: none; position: fixed; z-index: 300; min-width: 190px; padding: 5px; background: var(--glass2); backdrop-filter: blur(20px); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--sh2); }
#menu-ctx button { display: block; width: 100%; text-align: left; padding: 7px 11px; border-radius: 8px; font-size: 13px; }
#menu-ctx button:hover { background: var(--acc-s); }
#menu-ctx button.peligro { color: var(--bad); }
#menu-ctx hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
#toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 400; pointer-events: none; align-items: center; }
.toast { background: var(--glass2); backdrop-filter: blur(20px); border: 1px solid var(--line2); padding: 9px 16px; border-radius: 12px; box-shadow: var(--sh); animation: aparece .2s; transition: opacity .4s; max-width: 90vw; }
.toast.error { border-color: rgba(var(--bad-rgb),.5); }
.toast.fuera { opacity: 0; }

/* ─ login ─ */
#login { display: none; position: fixed; inset: 0; z-index: 150; place-items: center; background: radial-gradient(900px 600px at 30% 0%, var(--acc-glow), transparent 60%), var(--bg0); overflow: auto; padding: 20px; }
#login.visible { display: grid; }
.login-caja { width: 440px; max-width: 100%; background: var(--p2); border: 1px solid var(--line2); border-radius: 22px; padding: 30px; box-shadow: var(--sh2); }
.marca { display: block; width: 100%; height: 100%; }
.login-marca { width: 44px; height: 44px; border-radius: 12px; background: var(--p3); border: 1px solid var(--line2); color: var(--tx); display: grid; place-items: center; margin-bottom: 18px; }
.login-marca .marca { width: 24px; height: 24px; }
.login-caja h1 { font-size: 26px; font-weight: 500; letter-spacing: var(--track-logo); line-height: 1.15; }
.login-caja .sub { color: var(--tx2); margin: 4px 0 18px; }
.login-caja .sub { max-width: 34ch; }
.lg-form { display: grid; gap: 14px; }
.lg-campo { display: grid; gap: 6px; }
.lg-campo > span { font-size: 12px; font-weight: 600; color: var(--tx2); }
.lg-in { position: relative; }
.lg-in input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--p2); border: 1px solid var(--line); color: var(--tx); font: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.lg-in input::placeholder { color: var(--tx3); letter-spacing: .5px; }
.lg-in input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.25); }
.lg-in input[type=password], .lg-in:has(.lg-ojo) input { padding-right: 44px; }
.lg-ojo { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: var(--tx3); }
.lg-ojo:hover { color: var(--tx); background: var(--p3); }
.lg-error { display: none; font-size: 13px; color: var(--bad-l); background: rgba(var(--bad-rgb),.1); border: 1px solid rgba(var(--bad-rgb),.3); border-radius: 10px; padding: 9px 12px; }
.lg-error.on { display: block; }
.lg-ok { height: 46px; font-size: 15px; justify-content: center; margin-top: 2px; }
.lg-ok:disabled { opacity: .6; cursor: default; }
.lg-enlace { background: none; border: 0; color: var(--acc-l); font: inherit; font-size: 13px; padding: 6px; cursor: pointer; text-align: center; }
.lg-enlace:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .ventana, .ventana.max { inset: 0 0 76px 0; width: auto !important; height: auto !important; border-radius: 0; border: 0; min-width: 0; }
  .v-tirador { display: none; }
  .v-barra { cursor: default; }
  #dock-zona { bottom: 8px; }
  #dock { gap: 0; padding: 5px 6px; border-radius: 20px; }
  .d-btn { width: 40px; height: 40px; }
  .d-tip { display: none; }
  .login-caja { padding: 24px 20px; border-radius: 18px; }
  .lg-in input { font-size: 16px; }
}

/* ─ Personas y permisos ─ */
.admin { display: flex; flex: 1; min-height: 0; }
.ad-lista { width: 290px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: rgba(var(--bg0-rgb),.35); }
.ad-lista-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; }
.ad-lista-cab .btn { display: inline-flex; align-items: center; gap: 5px; }
.ad-lista-cab .ico { width: 13px; height: 13px; }
.ad-personas { flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.ad-per { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px; border-radius: 11px; flex-wrap: wrap; }
.ad-per:hover { background: rgba(var(--tx-rgb),.05); }
.ad-per.act { background: var(--acc-s); }
.ad-per > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ad-per b { font-size: 13.5px; }
.ad-per small { color: var(--tx3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-rol { width: 100%; padding-left: 44px; font-size: 11.5px; color: var(--tx2); margin-top: -8px; }
.ad-rol i { margin-left: 8px; font-style: normal; font-size: 10.5px; color: var(--warn); background: rgba(var(--warn-rgb),.14); padding: 0 6px; border-radius: 6px; }
.ad-det { flex: 1; overflow-y: auto; padding: 20px 26px 0; min-width: 0; }
.ad-cab { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ad-cab h3 { font-size: 19px; letter-spacing: -.3px; }
.ad-cab small { color: var(--tx3); }
.ad-cab > div:nth-child(2) { flex: 1; min-width: 140px; }
.ad-rolsel { width: 230px; }
.ad-rolsel label { display: block; font-size: 11.5px; color: var(--tx3); margin-bottom: 4px; }
.ad-rolsel small { display: block; margin-top: 4px; font-size: 11.5px; }
.ad-mano { background: rgba(var(--warn-rgb),.1); border: 1px solid rgba(var(--warn-rgb),.3); color: var(--warn); border-radius: 12px; padding: 9px 13px; margin-bottom: 12px; font-size: 12.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ad-det section { padding: 14px 0; border-top: 1px solid var(--line); }
.ad-det h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--tx3); margin-bottom: 9px; }
.ad-chk { display: flex; align-items: center; gap: 9px; padding: 4px 0; cursor: pointer; }
.ad-chk input:disabled + span { color: var(--tx3); }
.ad-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 18px; }
.ad-multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 14px; margin: 4px 0 2px 24px; }
.ad-multi.off { opacity: .45; }
.ad-sub { margin-left: 24px; margin-top: 8px; }
.ad-sub.off { opacity: .5; }
.ad-sub .ad-multi { margin-left: 0; }
.ad-etq { display: block; font-size: 12px; color: var(--tx3); margin: 8px 0 2px; }
.ad-nota { color: var(--tx3); display: block; margin: 2px 0 4px 24px; }
.ad-cad { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ad-cad input { width: 170px; color-scheme: dark; }
.ad-cad small { color: var(--tx3); }
.ad-pie { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 12px 0 16px; margin-top: 8px; background: linear-gradient(transparent, rgba(var(--p1-rgb),.95) 30%); }
.ad-pie span { margin-right: auto; color: var(--tx3); font-size: 12.5px; }
.ad-pie span.sucio { color: var(--warn); }

/* ─ Datos ─ */
.datos { flex: 1; overflow-y: auto; padding: 20px 24px 26px; }
.dt-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.dt-cab h3 { font-size: 19px; letter-spacing: -.3px; }
.dt-cab small { color: var(--tx3); }
.dt-acc { display: flex; gap: 8px; }
.dt-acc .btn { display: inline-flex; align-items: center; gap: 6px; }
.dt-acc .ico { width: 13px; height: 13px; }
.dt-total { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 22px; margin-bottom: 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(var(--acc-rgb),.22), rgba(var(--acc-rgb),.05)); border: 1px solid rgba(var(--acc-rgb),.35); }
.dt-total small { color: var(--tx2); display: block; font-size: 12px; }
.dt-gran { font-family: var(--fm); font-size: 26px; font-weight: 500; letter-spacing: -.04em; margin: 2px 0; font-variant-numeric: tabular-nums; }
.dt-gran.grande { font-size: 36px; }
.dt-tot-cols { display: flex; gap: 28px; flex-wrap: wrap; }
.dt-tot-cols b { font-family: var(--fm); font-weight: 500; font-size: 19px; font-variant-numeric: tabular-nums; }
.dt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.dt-card { padding: 16px; border-radius: 16px; background: var(--p2); border: 1px solid var(--line); }
.dt-card header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; }
.dt-card header small { color: var(--tx3); font-size: 11.5px; text-align: right; }
.dt-var { font-size: 12.5px; font-weight: 600; }
.dt-var.sube { color: var(--ok); } .dt-var.baja { color: var(--bad); } .dt-var.neutro { color: var(--tx3); font-weight: 500; }
.dt-fila { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dt-fila:first-of-type { margin-top: 12px; }
.dt-fila span { color: var(--tx2); }
.dt-fila b { font-family: var(--fm); font-weight: 500; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.dt-fila small { color: var(--tx3); font-weight: 400; font-family: var(--f); font-size: 12px; }
.dt-error { background: var(--bad-s); border: 1px solid rgba(var(--bad-rgb),.4); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.dt-error pre { white-space: pre-wrap; font: 12px/1.4 var(--fm); margin: 6px 0; color: var(--tx2); }
.dt-avisos { margin-top: 16px; background: rgba(var(--warn-rgb),.07); border: 1px solid rgba(var(--warn-rgb),.25); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--tx2); }
.dt-avisos summary { cursor: pointer; color: var(--warn); font-weight: 600; }
.dt-avisos ul { margin: 8px 0 0 18px; display: grid; gap: 3px; }

@media (max-width: 700px) {
  .admin { flex-direction: column; }
  .ad-lista { width: 100%; max-height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ad-det { padding: 14px 16px 0; }
  .datos { padding: 16px; }
}
.dt-avisos { margin: 0 0 14px; }
.ad-per > span:nth-child(2) small:empty { display: none; }

/* ─ Administración: inicio de sesión ─ */
.ad-ult { display: block; color: var(--tx3); }
.ad-acceso .ad-acc-fila { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.ad-acceso .ok { color: var(--ok-l); font-weight: 600; }
.ad-acceso .aviso { color: var(--warn); font-weight: 600; }
.ad-acc-meta { color: var(--tx3); font-size: 12px; }
.ad-acc-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ad-correo { max-width: 360px; }
.ad-correo input { width: 100%; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--p2); border: 1px solid var(--line); color: var(--tx); font: inherit; }
.ad-correo input:focus { outline: none; border-color: var(--acc); }
.ad-codigo { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 12px 14px; background: var(--p1); border: 1px dashed var(--acc); border-radius: 12px; }
.ad-codigo code { flex: 1; font: 500 18px/1 var(--fm); letter-spacing: 1.5px; color: var(--acc-l); user-select: all; }
.ad-correo span { display: block; font-size: 12px; color: var(--tx3); margin-bottom: 5px; }
#login.visible { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.login-caja, .lg-in input { box-sizing: border-box; }