/*
 * Complementos de las pantallas de acceso (tablero.css de app.premier-ia.co, body.acceso).
 * El plugin escribía algunos estilos dentro del HTML; la política de contenido de Laravel lo impide, así que van aquí.
 * Las pantallas del segundo factor no existían en el plugin: usan la misma tarjeta.
 */
.acceso-ok{background:rgba(0,200,206,.14);border-color:rgba(0,200,206,.45)}
.acceso-caja .acceso-nota{color:#b9d3da;font-size:.9rem;margin:0}
.acceso-caja input[type=email]{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:11px 13px;color:#fff;font-size:1rem}
.acceso-caja input[readonly]{opacity:.75}
.acceso-caja .campo-codigo{letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.acceso-caja .pasos{margin:0;padding-left:20px;color:#e6f1f4;font-size:.95rem}
.acceso-caja .pasos li{margin-bottom:6px}
.acceso-caja .qr{background:#fff;border-radius:14px;padding:12px;width:226px;margin:4px auto}
.acceso-caja .qr svg{display:block;width:200px;height:200px}
.acceso-caja .clave{display:inline-block;margin-top:6px;font-family:ui-monospace,Consolas,monospace;letter-spacing:.05em;background:rgba(255,255,255,.08);border-radius:8px;padding:6px 10px;word-break:break-all;color:#fff}
.acceso-caja .codigos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acceso-caja .codigos code{display:block;text-align:center;font-family:ui-monospace,Consolas,monospace;background:rgba(255,255,255,.08);border-radius:8px;padding:8px;color:#fff}
.acceso-caja details{color:#b9d3da;font-size:.92rem}
.acceso-caja details summary{cursor:pointer;color:var(--acento);margin-bottom:10px}
.acceso-caja details label{margin-bottom:8px}
.acceso-caja a.boton-enlace{display:block;text-align:center;background:var(--acento);color:var(--tinta);border-radius:999px;padding:12px 18px;font-weight:600;text-decoration:none}
.acceso-caja a.boton-enlace:hover{background:#3fe0e5}
.acceso-caja button.boton-texto{background:none;color:var(--acento);padding:0;font-weight:400;font-size:.94rem;text-decoration:underline;align-self:flex-start}
.acceso-caja button.boton-texto:hover{background:none;color:#3fe0e5}
.acceso-caja form.en-linea{margin:0}
/* Modo desarrollador (/modo-desarrollador): estado, historial. */
.acceso-caja .dev-estado{border:1px solid rgba(255,255,255,.24);border-radius:12px;padding:12px 14px;color:#e6f1f4;font-size:.95rem;background:rgba(255,255,255,.05)}
.acceso-caja .dev-estado.dev-activo{border-color:rgba(0,200,206,.6);background:rgba(0,200,206,.14)}
.acceso-caja .dev-quien{display:block;color:#b9d3da;font-size:.88rem;margin-top:4px}
.acceso-caja select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:10px 12px;color:#fff;font-size:1rem}
.acceso-caja select option{color:#05232d}
.acceso-caja .dev-historial ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.acceso-caja .dev-historial li span{color:#fff;font-variant-numeric:tabular-nums;margin-right:6px}
.acceso-caja .dev-form{display:grid;gap:12px;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 16px;margin-top:14px}
.acceso-caja .dev-form-apagar{border-color:rgba(255,255,255,.1)}
.acceso-caja .dev-sub{margin:0;color:#fff;font-weight:600}

/* Marca CEO, opción 5, en todas las pantallas de acceso (Fernando, 23 de octubre de 2026): colibrí en círculo con borde turquesa fino,
   «ceo.» en minúsculas con el punto turquesa y el nombre completo al lado; fondo con dos halos suaves, tarjeta más limpia y campos con foco turquesa. */
body.acceso{position:relative;overflow-x:hidden;background:radial-gradient(900px 520px at 12% -6%,rgba(0,200,206,.16),transparent 62%),radial-gradient(760px 520px at 108% 110%,rgba(0,200,206,.12),transparent 60%),radial-gradient(1200px 700px at 30% 0%,#0b3a49,#05232d 64%)}
.acceso-caja{position:relative;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.12);border-radius:24px;padding:30px 32px 26px;box-shadow:0 30px 70px -36px rgba(0,0,0,.75)}
.acc-marca{display:flex;align-items:stretch;justify-content:flex-start;gap:14px;margin:0 0 24px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.1);color:#fff}
.acc-izq{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center}
.acc-col{display:block;width:40px;height:auto;margin-bottom:-1px}
.acc-sigla{position:relative;display:block;margin-right:.19em;font-size:2.1rem;font-weight:700;letter-spacing:-.045em;line-height:1}
.acc-ala{position:absolute;right:-.19em;top:.09em;height:.28em;width:auto}
.acc-txt{display:flex;flex-direction:column;justify-content:center;gap:5px;flex:1;min-width:0}
.acc-nom{display:block}
.acc-nombre{display:block;white-space:nowrap;font-size:.84rem;font-weight:400;line-height:1.02;letter-spacing:-.01em}
.acc-nombre b{font-weight:700}
.acc-firma{display:block;white-space:nowrap;font-size:.7rem;line-height:1.1;color:#8fb3bd}
.acceso-caja h1{font-size:1.3rem;font-weight:700;letter-spacing:-.01em;text-align:center}
.acceso-caja h1+.sub{text-align:center;margin-top:6px}
.acceso-caja input[type=text]:focus,.acceso-caja input[type=password]:focus,.acceso-caja input[type=email]:focus,.acceso-caja select:focus{outline:0;border-color:#00c8ce;box-shadow:0 0 0 3px rgba(0,200,206,.22);background:rgba(255,255,255,.1)}
.acceso-caja button,.acceso-caja a.boton-enlace{transition:background .2s,transform .2s,box-shadow .2s}
.acceso-caja button:not(.boton-texto):hover,.acceso-caja a.boton-enlace:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(0,200,206,.8)}
.acceso-caja .legal{text-align:center}
@media (max-width:420px){
  .acceso-caja{padding:24px 20px 22px}
  .acc-marca{gap:10px}
  .acc-col{width:32px}
  .acc-sigla{font-size:1.7rem}
  .acc-nombre{font-size:.7rem}
  .acc-firma{font-size:.62rem}
}

/* Pantallas de acceso, opción A (Fernando, 23 de octubre de 2026): fondo oscuro con halo y colibrí de marca de agua que flotan, tarjeta
   en dos partes con la marca y un pequeño dashboard en movimiento a la izquierda y el formulario a la derecha. En el celular, solo el
   formulario con la marca arriba. Con «reducir movimiento» no hay animaciones. */
body.acc-v2{background:#04202a;overflow:hidden auto}
.acc-halo{position:fixed;left:-200px;top:-200px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(0,200,206,.18),transparent 65%);pointer-events:none;animation:acc-halo 9s ease-in-out infinite alternate}
@keyframes acc-halo{to{transform:translate(120px,80px) scale(1.15)}}
.acc-agua{position:fixed;right:-120px;bottom:-90px;width:820px;max-width:none;opacity:.07;pointer-events:none;animation:acc-flota 10s ease-in-out infinite alternate}
@keyframes acc-flota{to{transform:translate(-30px,-24px) rotate(-3deg)}}
.acc-caja2{position:relative;z-index:1;width:min(420px,100%)}
.acc-lado{display:none}
@media (min-width:900px){
  .acc-caja2{display:grid;grid-template-columns:380px 440px;width:auto;background:#072d38;border:1px solid rgba(255,255,255,.08);border-radius:28px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.7)}
  .acc-caja2.ancha{grid-template-columns:380px 560px}
  .acc-caja2 .acceso-caja{width:auto;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;padding:40px 40px 30px}
  .acc-caja2 .acceso-caja>.acc-marca{display:none}
  .acc-caja2 .acceso-caja h1,.acc-caja2 .acceso-caja h1+.sub{text-align:left}
  .acc-caja2 .acceso-caja h1{font-size:1.6rem}
  .acc-lado{position:relative;display:flex;flex-direction:column;gap:16px;padding:34px 30px;background:linear-gradient(170deg,#0b4656,#05232d);color:#fff}
  .acc-marca-lado{justify-content:flex-start;margin:0;padding:0;border:0}
  .acc-marca-lado .acc-col{width:36px}.acc-marca-lado .acc-sigla{font-size:1.85rem}
  .acc-marca-lado .acc-nombre{font-size:.75rem}.acc-marca-lado .acc-firma{font-size:.66rem}
}
.acc-vivo{display:flex;align-items:center;gap:7px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7fe9ec}
.acc-vivo i{width:8px;height:8px;border-radius:50%;background:#00c8ce;animation:acc-late 1.2s ease-in-out infinite}
@keyframes acc-late{50%{transform:scale(1.12)}}
.acc-ti{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:14px 16px}
.acc-ti small{display:block;font-size:.72rem;color:#9fc3cd}
.acc-ti b{display:block;margin-top:3px;font-size:1.35rem;font-variant-numeric:tabular-nums}
.acc-ti .acc-ti-t{font-size:.92rem}
.acc-hero{background:linear-gradient(120deg,#0b5d6b,#05232d);border-color:rgba(0,200,206,.35)}
.acc-barra{margin-top:10px;height:7px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.acc-barra i{display:block;height:100%;width:72%;border-radius:9px;background:#00c8ce;transform-origin:left;animation:acc-avance 4s ease-in-out infinite}
@keyframes acc-avance{0%{transform:scaleX(.15)}55%,85%{transform:scaleX(1)}100%{transform:scaleX(.15)}}
.acc-dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acc-bars{display:flex;align-items:flex-end;gap:6px;height:66px;margin-top:10px}
.acc-bars i{flex:1;height:100%;border-radius:3px 3px 0 0;background:#2a6c7a;transform-origin:bottom;animation:acc-sube 2.6s ease-in-out infinite alternate}
.acc-bars i:nth-child(2n){background:#00c8ce}
.acc-bars i:nth-child(1){animation-delay:-.2s}.acc-bars i:nth-child(2){animation-delay:-.9s}.acc-bars i:nth-child(3){animation-delay:-1.4s}.acc-bars i:nth-child(4){animation-delay:-.5s}
.acc-bars i:nth-child(5){animation-delay:-2s}.acc-bars i:nth-child(6){animation-delay:-1.1s}.acc-bars i:nth-child(7){animation-delay:-1.7s}
@keyframes acc-sube{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.acc-dona{width:74px;height:74px;border-radius:50%;margin-top:10px;background:conic-gradient(#00c8ce 0 62%,#2a6c7a 62% 85%,rgba(255,255,255,.18) 85%);-webkit-mask:radial-gradient(circle,transparent 23px,#000 24px);mask:radial-gradient(circle,transparent 23px,#000 24px);animation:acc-gira 8s linear infinite}
@keyframes acc-gira{to{transform:rotate(360deg)}}
.acc-etqs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.acc-etqs span{font-size:.7rem;padding:4px 9px;border-radius:999px;background:rgba(0,200,206,.16);color:#7fe9ec;font-weight:600}
.acc-etqs span.r{background:rgba(255,79,147,.18);color:#ff8fbb;animation:acc-late 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.acc-halo,.acc-agua,.acc-vivo i,.acc-barra i,.acc-bars i,.acc-dona,.acc-etqs span.r{animation:none}}

/* Pantallas de acceso (Fernando, 23 de octubre de 2026): «Centro Empresarial Online» en una línea; acceso.js ajusta su tamaño para que llegue
   hasta el margen de la tarjeta y se achique con ella. */
.acc-ajustar{font-size:1rem;line-height:1.1}
