/* =====================================================================
   acceso.css: página de acceso (acceso.html). Siempre en oscuro:
   entrar con Google, buscar la empresa y pedir acceso.
   ===================================================================== */

/* ---------- Página ---------- */
body{margin:0;background:#101113;color:#fff;
  font-family:'Hanken Grotesk',-apple-system,system-ui,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ambar-claro);text-decoration:none}
a:hover{color:#fff}

.pagina-acceso{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* Halo ámbar que se mueve despacio en la esquina superior izquierda. */
@keyframes halo-flota{0%,100%{opacity:.4;transform:translate(-8%,-6%) scale(1)}50%{opacity:.8;transform:translate(6%,4%) scale(1.12)}}
.halo-fondo{position:absolute;width:640px;height:640px;left:-160px;top:-220px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,161,58,.22) 0%,rgba(16,17,19,0) 70%);animation:halo-flota 8s ease-in-out infinite}

/* ---------- Cabecera ---------- */
.cabecera-acceso{position:relative;z-index:2}
.cabecera-acceso-contenido{max-width:1080px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.cabecera-acceso-enlaces{display:flex;gap:20px;flex-wrap:wrap;justify-content:flex-end}
.cabecera-acceso-enlaces a{font-size:15px;color:rgba(255,255,255,.7)}

/* Logo en su versión para fondo oscuro. */
.logo{display:flex;align-items:center;gap:9px;color:#fff}
.logo:hover{color:#fff}
.logo-isotipo path{fill:none;stroke-width:7.5;stroke-linecap:round}
.logo-isotipo .barra-1{stroke:#8C9096}
.logo-isotipo .barra-2{stroke:#C9CDD2}
.logo-isotipo .barra-3{stroke:#F0B457}
.logo-texto{font-family:'Archivo',sans-serif;font-size:20px;letter-spacing:-.6px;font-weight:500}
.logo-texto b{font-weight:700}

/* ---------- Zona central: un paso visible cada vez ---------- */
.contenido-acceso{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px 64px}
.contenido-acceso-caja{width:100%;max-width:460px}

@keyframes paso-entra{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
.paso{animation:paso-entra 620ms var(--curva) both}
/* Paso en forma de tarjeta (pendiente, con acceso, standby). */
.paso-tarjeta{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:28px}

.acceso-titulo{font-family:'Archivo',sans-serif;font-size:34px;line-height:1.1;letter-spacing:-1.2px;font-weight:700;margin:0}
.acceso-titulo-mediano{font-size:30px;line-height:1.14;letter-spacing:-1px;margin-top:22px}
.acceso-titulo-tarjeta{font-size:27px;line-height:1.16;letter-spacing:-.9px;margin-top:18px}
.acceso-texto{font-size:16px;line-height:1.6;color:rgba(255,255,255,.68);margin:10px 0 0}
.acceso-texto-grande{font-size:16.5px;margin-top:12px}
.acceso-texto-suave{color:rgba(255,255,255,.65)}
.acceso-dato{font-size:14.5px;color:rgba(255,255,255,.6)}
.acceso-error{font-size:13.5px;color:#FFB4AE;min-height:1.2em;margin-top:12px}

/* Icono redondo de las tarjetas: reloj (pendiente), check (con acceso), candado (standby). */
.icono-estado{width:52px;height:52px;border-radius:26px;display:flex;align-items:center;justify-content:center}
.icono-pendiente{background:rgba(240,180,87,.18);color:var(--ambar-claro)}
.icono-pendiente svg{animation:gira 4s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.icono-correcto{background:rgba(48,209,88,.16);color:#30D158}
.icono-bloqueado{background:rgba(255,59,48,.18);color:#FF8A82}

/* ---------- Botones ---------- */
.boton-google{width:100%;border:none;background:#fff;color:#17181A;font-size:16.5px;font-weight:600;padding:15px 18px;border-radius:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:11px}
.boton-google:hover{filter:brightness(.94)}
.boton-google-letra{width:22px;height:22px;border-radius:11px;background:#17181A;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}

.boton-ambar{display:block;width:100%;box-sizing:border-box;text-align:center;border:none;background:var(--ambar-claro);color:#17181A;font-size:16.5px;font-weight:600;padding:15px;border-radius:15px;cursor:pointer}
.boton-ambar.desactivado{background:rgba(240,180,87,.45)}   /* aún no se ha elegido empresa */
a.boton-ambar:hover{color:#17181A;background:var(--ambar)}    /* enlaces: se oscurece el ámbar */
button.boton-ambar:hover{filter:brightness(.94)}               /* botón: se oscurece todo */
a.boton-ambar{margin-top:22px}

.boton-borde{display:block;width:100%;box-sizing:border-box;text-align:center;margin-top:10px;border:1px solid rgba(255,255,255,.16);background:none;
  color:rgba(255,255,255,.75);font-size:15px;font-weight:600;padding:13px;border-radius:15px;cursor:pointer}
.boton-borde:hover{color:#fff}

/* ---------- Paso 1: entrar ---------- */
.caja-google{margin-top:26px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:24px}
.caja-google .acceso-error{min-height:0}
.acceso-legal{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.5);margin-top:14px}

.acceso-notas{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.acceso-nota{display:flex;gap:10px;align-items:flex-start}
.acceso-nota span{font-size:15px;line-height:1.55;color:rgba(255,255,255,.6)}
.acceso-nota::before{content:'·';color:var(--ambar-claro);flex:none}

/* ---------- Paso 2: elegir empresa ---------- */
.usuario-conectado{display:flex;align-items:center;gap:12px}
.avatar-iniciales{width:42px;height:42px;border-radius:21px;background:linear-gradient(180deg,#5B5F66,#17181A);color:#fff;font-size:15px;font-weight:600;
  display:flex;align-items:center;justify-content:center;flex:none}
.usuario-email{font-size:16px;font-weight:600}
.usuario-estado{font-size:13.5px;color:rgba(255,255,255,.55)}

.buscador-empresa{margin-top:20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:15px;padding:0 14px}
.buscador-empresa input{flex:1;min-width:0;border:none;outline:none;background:none;padding:14px 0;font-size:16px;color:#fff}

.lista-empresas{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.empresa{text-align:left;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;border-radius:15px;padding:14px 16px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16px;font-weight:600;
  transition:border-color 300ms var(--curva),background 300ms var(--curva)}
.empresa.elegida{border-color:rgba(240,180,87,.5);background:rgba(240,180,87,.14)}
.empresa.elegida::after{content:'✓';flex:none;color:var(--ambar-claro)}
.sin-empresas{padding:16px;border-radius:15px;background:rgba(255,255,255,.05);font-size:15px;color:rgba(255,255,255,.6);text-align:center}

/* ---------- Paso 3: solicitud pendiente ---------- */
.datos-solicitud{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.estado-pendiente{color:var(--ambar-claro)}
.paso-pendiente .boton-borde{margin-top:22px;color:rgba(255,255,255,.8)}

/* ---------- Paso con acceso ---------- */
.dato-sesion{margin-top:16px}

/* ---------- Paso standby (impago) ---------- */
.paso-tarjeta.tarjeta-standby{background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.32)}
.tarjeta-standby .acceso-texto{color:rgba(255,255,255,.72)}
.tarjeta-standby .boton-borde{color:rgba(255,255,255,.8)}

/* ---------- Cargando ---------- */
.acceso-cargando{text-align:center;font-size:16px;color:rgba(255,255,255,.65)}

/* ---------- Pie ---------- */
.pie-acceso{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.1)}
.pie-acceso-contenido{max-width:1080px;margin:0 auto;padding:22px 24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.pie-acceso-copyright{font-size:13.5px;color:rgba(255,255,255,.45)}
.pie-acceso-enlaces{display:flex;flex-wrap:wrap;gap:18px}
.pie-acceso-enlaces a{font-size:13.5px;color:rgba(255,255,255,.55)}

/* Paso "contratar" */
.resumen-plan{margin-top:18px;padding:20px 22px}
.resumen-plan-precio{font-family:'Archivo',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;color:#fff}
.resumen-plan .acceso-texto{margin-top:4px}
.etiqueta-campo{display:block;margin-top:22px;font-size:14px;font-weight:600;color:rgba(255,255,255,.8)}
.etiqueta-campo + .buscador-empresa{margin-top:8px}
.enlace-acceso{margin-top:8px;padding:6px 0;border:none;background:none;color:var(--ambar-claro);font:inherit;font-size:15px;font-weight:600;cursor:pointer}

/* Entrar con código por correo */
.separador-correo{display:flex;align-items:center;gap:12px;margin:22px 0 4px;font-size:13.5px;color:rgba(255,255,255,.5)}
.separador-correo::before,.separador-correo::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}
.boton-codigo{margin-top:14px}
.entrada-codigo{letter-spacing:.3em;font-size:20px}
.enlaces-codigo{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}