/* =====================================================================
   ConnectFlag — estilos compartidos (formulario público + panel admin)

   Paso 8 — pulida visual. La base (fondo oscuro, azul #145c9d,
   Poppins en todo el sitio, colores de clasificación White/
   Yellow/Blue/Green) se queda igual — eso ya estaba bien y los
   colores de clasificación son funcionales, no se tocan.

   Lo nuevo: un acento azul (la firma de la marca, usado con
   moderación: wordmark, foco de los campos, botón principal, estado
   activo del menú) y vidrio esmerilado (glassmorphism) en las
   tarjetas más importantes — login, resultado, KPIs, sidebar —
   flotando sobre un fondo con un resplandor ambiental sutil, en vez
   de un panel plano. El resto (filas de tabla, opciones de
   preguntas, tarjetas de aviso) se queda sólido a propósito: llenar
   de vidrio cada elemento se vuelve ruido, no elegancia.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --azul:        #145c9d;
  --azul-claro:  #2b7fd1;
  --azul-oscuro: #0a2540;
  --fondo:       #0a0e17;
  --panel:       #141c2c;
  --panel-borde: #26324a;
  --texto:       #e7ecf5;
  --texto-tenue: #93a1bd;

  --acento:       var(--azul-claro); /* antes dorado — ahora el acento es azul, según lo pedido */

  --vidrio-fondo: rgba(20, 28, 44, 0.72);
  --vidrio-borde: rgba(43, 127, 209, 0.16);

  --white:  #c9cdd6;
  --yellow: #e2b93b;
  --blue:   #2b7fd1;
  --green:  #3fae6a;

  --radio: 10px;
}

* { box-sizing: border-box; }

a { color: var(--azul-claro); text-decoration-color: rgba(43, 127, 209, 0.4); }
a:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 500px at 12% -8%, rgba(20, 63, 107, 0.35), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 15%, rgba(43, 127, 209, 0.08), transparent 55%),
    var(--fondo);
  background-attachment: fixed;
  color: var(--texto);
  font-family: 'Poppins', system-ui, sans-serif;
  line-height: 1.5;
}

h1, h2, h3 { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; margin: 0 0 .4em; }
h2 { font-size: 1.9rem; color: #fff; }
h3 { font-size: 1.3rem; color: #fff; }

.contenedor { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.contenedor-ancho { max-width: 1100px; margin: 0 auto; padding: 0 20px; width: 100%; }

.topbar {
  background: linear-gradient(120deg, var(--azul), var(--azul-oscuro));
  padding: 18px 0;
  border-bottom: 1px solid rgba(43, 127, 209, 0.35);
}
.topbar-inner { display: flex; align-items: baseline; gap: 12px; }
.marca {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff; /* respaldo si el navegador no soporta el degradado de abajo */
  background: linear-gradient(100deg, #fff, var(--acento) 60%, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .marca { color: #fff; }
}
.submarca { color: #cfe0f4; font-size: .95rem; }
.topbar-inner a.salir { color: #cfe0f4; }
.topbar-inner a.salir:hover { color: #fff; }

main { padding: 32px 0 80px; }

.ayuda { color: var(--texto-tenue); font-size: .93rem; margin-top: -8px; }

.aviso {
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: var(--radio);
  padding: 16px 18px;
  color: var(--texto-tenue);
}
.aviso-info { border-color: var(--azul-claro); color: #cfe0f4; }
.aviso-error { border-color: #b3432f; color: #f3c9c0; }

/* ---------- formulario ---------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } }

.campo { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; color: var(--texto-tenue); }
.campo-ancho { margin-top: 14px; }

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--texto);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(43, 127, 209, 0.22);
}

fieldset.pregunta {
  border: 1px solid var(--panel-borde);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin: 0 0 18px;
}
fieldset.pregunta[data-rama], fieldset.pregunta[data-dependiente] {
  display: none; /* panel/etapa.php las revela con JS según la respuesta de control */
}
fieldset.pregunta legend {
  padding: 0 6px;
  font-weight: 500;
  color: #fff;
}

.opciones { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

.opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: .92rem;
  transition: border-color .15s, background .15s;
}
.opcion:hover { border-color: var(--acento); }
.opcion input { margin-top: 3px; accent-color: var(--acento); }
.opcion:has(input:checked) { border-color: var(--acento); background: #101a26; }

/* ---------- progreso ---------- */

.progreso { margin: 22px 0 26px; }
.progreso-barra { height: 6px; border-radius: 4px; background: var(--panel-borde); overflow: hidden; }
.progreso-relleno { height: 100%; width: 0%; background: linear-gradient(90deg, var(--azul), var(--acento)); transition: width .25s; }
.progreso-texto { margin-top: 8px; font-size: .85rem; color: var(--texto-tenue); }

.paso[hidden] { display: none; }

/* ---------- botones ---------- */

.navegacion { display: flex; justify-content: space-between; margin-top: 28px; }
.boton {
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow .15s, transform .1s, background .15s;
}
.boton-primario {
  background: linear-gradient(135deg, var(--azul-claro), var(--azul));
  color: #fff;
  margin-left: auto;
}
.boton-primario:hover { box-shadow: 0 0 0 3px rgba(43, 127, 209, 0.35); }
.boton-primario:active { transform: translateY(1px); }
.boton-secundario { background: transparent; color: var(--texto-tenue); border: 1px solid var(--panel-borde); }
.boton-secundario:hover { color: var(--texto); border-color: var(--texto-tenue); }

/* ---------- vidrio esmerilado (glassmorphism) ----------
   Reservado para las tarjetas "hero" de cada pantalla — no para
   cada elemento repetido (filas de tabla, opciones, avisos). */

.tarjeta-resultado,
.login-caja,
.registro-caja,
.kpi,
.panel-sidebar,
.panel-nav-escritorio,
.panel-nav-movil,
.panel-drawer,
.panel-nav-dropdown {
  background: var(--vidrio-fondo);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--vidrio-borde);
}

/* ---------- resultado ---------- */

.tarjeta-resultado {
  border-radius: 18px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.puntaje-grande { font-family: 'Poppins', system-ui, sans-serif; font-size: 4rem; font-weight: 700; margin: 6px 0; }

.insignia {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
}
.insignia-white  { background: rgba(201,205,214,.15); color: var(--white); border: 1px solid var(--white); }
.insignia-yellow { background: rgba(226,185,59,.15);  color: var(--yellow); border: 1px solid var(--yellow); }
.insignia-blue   { background: rgba(43,127,209,.15);  color: var(--blue); border: 1px solid var(--blue); }
.insignia-green  { background: rgba(63,174,106,.15);  color: var(--green); border: 1px solid var(--green); }

.bloques-resultado { text-align: left; margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.bloque-fila { display: flex; flex-direction: column; gap: 4px; }
.bloque-fila-cab { display: flex; justify-content: space-between; font-size: .88rem; color: var(--texto-tenue); }
.bloque-barra { height: 8px; border-radius: 4px; background: var(--panel-borde); overflow: hidden; }
.bloque-barra-relleno { height: 100%; background: linear-gradient(90deg, var(--azul), var(--acento)); }

/* ---------- admin ---------- */

.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
.admin-header a.salir { color: var(--texto-tenue); text-decoration: none; font-size: .9rem; }
.admin-header a.salir:hover { color: var(--acento); }

/* Dos filas, no una columna: la de arriba con los 3 KPIs generales
   (Registrados/Completados/En Proceso) en 3 columnas, y justo debajo
   otra fila con los 4 de clasificación (White/Yellow/Blue/Green) en
   4 columnas. Flexbox (no grid) a propósito, por compatibilidad. En
   celular se bajan a 2 columnas para que no se apreten (3 queda 2+1,
   4 queda 2+2). */
.tarjetas-kpi { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.tarjetas-kpi-fila { display: flex; gap: 14px; }
.tarjetas-kpi-fila .kpi { flex: 1; min-width: 0; }
@media (max-width: 600px) {
  .tarjetas-kpi-fila { flex-wrap: wrap; }
  .tarjetas-kpi-fila .kpi { flex: 1 1 calc(50% - 7px); }
}
.kpi { border-radius: 12px; padding: 16px 18px; }
.kpi .num { font-family: 'Poppins', system-ui, sans-serif; font-size: 2.1rem; font-weight: 700; color: #fff; }
.kpi .etq { font-size: .82rem; color: var(--texto-tenue); }

.filtros { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.filtros select { min-width: 180px; }

/* Un solo botón de "Filtros" que abre los dos selects (sector y
   clasificación) en un desplegable, en vez de dos selects sueltos en
   la fila — mismo mecanismo (y mismo fondo de vidrio) que los
   desplegables de perfil/notificaciones del nav. */
.filtro-desplegable { position: relative; display: inline-block; margin-bottom: 16px; }
/* .panel-nav-dropdown.filtro-panel (dos clases) le gana en
   especificidad a la regla base .panel-nav-dropdown (right:0) sin
   importar el orden en el archivo. Se abre hacia la DERECHA (left:0)
   en vez de hacia la izquierda: el botón "Filtros" queda pegado al
   borde izquierdo del contenido (justo después del sidebar en PC, o
   del padding en celular), así que abrir hacia la izquierda lo sacaba
   de la pantalla — en celular se veía cortado contra el borde, y en
   PC quedaba tapado detrás del sidebar fijo (que pinta por encima por
   estar en un contexto de apilamiento más alto). Hacia la derecha
   siempre hay espacio de sobra en ambos casos. */
.panel-nav-dropdown.filtro-panel { left: 0; right: auto; min-width: 260px; padding: 16px; }
.filtro-panel select { width: 100%; box-sizing: border-box; }

table.tabla-admin { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 12px; overflow: hidden; }
table.tabla-admin th, table.tabla-admin td { padding: 10px 14px; text-align: left; font-size: .9rem; border-bottom: 1px solid var(--panel-borde); }
table.tabla-admin th { color: var(--texto-tenue); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
table.tabla-admin tr:last-child td { border-bottom: none; }
table.tabla-admin tr:hover { background: #1b2740; }
table.tabla-admin a { color: var(--acento); text-decoration: none; }
table.tabla-admin a:hover { text-decoration: underline; }

/* Filas clickeables (ej. "Empresas evaluadas" -> ver todas sus
   respuestas). El hover ya lo da tr:hover de arriba; esto solo pone
   el cursor para que se note que la fila entera es clickeable. */
table.tabla-admin tr.fila-clic { cursor: pointer; }

.login-caja {
  max-width: 380px;
  margin: 90px auto;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.login-caja form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

/* ---------- login empresario: hero de dos columnas con video ----------
   Solo para body.pagina-login (login.php). Las reglas de .login-caja
   de arriba siguen igual para admin/login.php, admin/cambiar_password.php
   y panel/cambiar_password.php — aquí solo se sobreescribe dentro del
   contexto .login-hero-form, no se toca la clase base. */

body.pagina-login { min-height: 100vh; min-height: 100dvh; }

/* z-index en 0 (no negativo) a propósito: un z-index negativo en un
   elemento fixed hijo de un <body> sin posicionar puede terminar
   pintado detrás del fondo del propio body en algunos navegadores.
   Con el video en 0 y todo el contenido explícitamente en 1 por
   encima, el orden queda garantizado sin depender de ese detalle. */
.login-video-wrap {
  position: fixed;
  inset: 0;
  height: 100vh;  /* respaldo si el navegador no entiende 100dvh */
  height: 100dvh; /* se recalcula solo cuando la barra de direcciones del
                      celular aparece/desaparece al hacer scroll — con
                      100vh a secas, esa barra deja un hueco negro abajo
                      hasta que el navegador vuelve a acomodar el layout. */
  z-index: 0;
  overflow: hidden;
  background: var(--fondo);
}
.login-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.login-video-velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,14,23,.94) 0%, rgba(10,14,23,.80) 40%, rgba(10,14,23,.58) 100%),
    radial-gradient(ellipse 700px 500px at 100% 15%, rgba(43,127,209,.10), transparent 55%);
}

.login-marca { position: fixed; top: 26px; left: 36px; z-index: 1; }
.login-marca-img { display: block; height: 54px; width: auto; }

.login-hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 110px 40px 60px;
}

.login-hero-texto h1 {
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 18px;
  max-width: 480px;
}
.login-hero-texto p { color: var(--texto-tenue); font-size: 1.05rem; line-height: 1.6; max-width: 440px; }

.login-hero-form { display: flex; justify-content: center; width: 100%; min-width: 0; }
.login-hero-form .login-caja { margin: 0 auto; width: 100%; max-width: 380px; }

/* Botón de ancho completo, reutilizable en <button> y <a> por igual. */
.boton-ancho { display: block; width: 100%; text-align: center; text-decoration: none; box-sizing: border-box; }

/* Dentro del hero de login, "Entrar" ocupa todo el ancho de la
   tarjeta en vez del layout "Atrás / Siguiente" de space-between que
   usa .navegacion en el formulario de etapas — se sobreescribe solo
   aquí, .navegacion se queda igual para panel/etapa.php. */
.login-hero-form .navegacion { display: block; margin-top: 26px; }
.login-hero-form .boton-primario { margin-left: 0; }

/* "Crear una cuenta" más llamativo que un .boton-secundario normal:
   borde y texto en blanco puro, en vez del gris tenue de por defecto. */
.boton-crear-cuenta { color: #fff; border-color: #fff; }
.boton-crear-cuenta:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Aviso de "olvidé mi contraseña": texto simple alineado a la
   izquierda (no botón, no centrado), con el link en azul claro para que
   "Escríbenos por WhatsApp" resalte dentro de la frase. */
.login-recuperar-aviso { margin-top: 14px; text-align: left; }
.login-recuperar-aviso a { color: var(--acento); font-weight: 600; }
.login-recuperar-aviso a:hover { color: var(--azul); }

.separador { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--texto-tenue); font-size: .8rem; }
.separador-linea { flex: 1; height: 1px; background: var(--panel-borde); }

/* Campo de contraseña con botón de mostrar/ocultar (el "ojito").
   El botón se ancla con top:0/bottom:0 (no top:50%+transform) para
   que su alto siempre coincida exacto con el del campo — el truco
   de translateY(-50%) es más frágil entre navegadores/zoom y es lo
   que lo dejaba corrido. También se apaga el ícono nativo que
   algunos navegadores (sobre todo en el celular) agregan solos
   dentro de los campos de contraseña, para que no choque con el
   nuestro. */
.campo-password-wrap { position: relative; }
.campo-password-wrap input { width: 100%; box-sizing: border-box; padding-right: 44px; }
.boton-ver-password {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--texto-tenue);
  line-height: 0;
}
.boton-ver-password:hover { color: var(--texto); }
.boton-ver-password svg { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.boton-ver-password .icono-ojo-cerrado { display: none; }
.boton-ver-password.mostrando .icono-ojo-abierto { display: none; }
.boton-ver-password.mostrando .icono-ojo-cerrado { display: block; }

/* Apaga el ícono nativo de mostrar/generar contraseña de Edge y de
   Chrome/Safari (autocompletado con contraseña guardada) — si no,
   compite por el mismo espacio con nuestro ojito y se ve roto. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input::-webkit-credentials-auto-fill-button,
input::-webkit-strong-password-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

@media (max-width: 1024px) {
  body.pagina-login { overflow-x: hidden; }
  .login-hero { grid-template-columns: 1fr; padding: 96px 20px 40px; }
  .login-hero-texto { display: none; }
  .login-marca { left: 50%; transform: translateX(-50%); }
}

/* Arregla el campo de contraseña (y cualquier input) mostrándose
   blanco/sin estilo cuando el navegador lo autocompleta — el navegador
   pisa el fondo normal con el suyo propio al detectar una contraseña
   guardada. Este truco (sombra interna gigante + delay de transición)
   es el estándar para forzar el fondo oscuro también en ese estado. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--panel) inset !important;
  box-shadow: 0 0 0 1000px var(--panel) inset !important;
  -webkit-text-fill-color: var(--texto) !important;
  caret-color: var(--texto);
  transition: background-color 9999s ease-in-out 0s;
}

.detalle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 18px 0 28px; font-size: .92rem; }
.detalle-grid div span { color: var(--texto-tenue); display: block; font-size: .78rem; }
@media (max-width: 620px) { .detalle-grid { grid-template-columns: 1fr; } }

.respuestas-lista { display: flex; flex-direction: column; gap: 10px; }
.respuesta-item { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 8px; padding: 10px 14px; font-size: .88rem; }
.respuesta-item .pregunta { color: var(--texto-tenue); font-size: .82rem; }

/* ---------- panel del empresario (sidebar tipo Claude) ---------- */

.panel-layout { display: flex; min-height: calc(100vh - 64px); }

.panel-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--vidrio-borde);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
}
.panel-progreso { margin-bottom: 18px; padding: 0 6px; }
.panel-progreso .progreso-texto { margin-top: 6px; }

.panel-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.panel-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  color: var(--texto-tenue);
  text-decoration: none;
  font-size: .92rem;
  transition: background .15s, border-color .15s, color .15s;
}
.panel-menu-item:hover { background: rgba(255,255,255,0.05); color: var(--texto); }
.panel-menu-item.activo { background: rgba(43, 127, 209, 0.12); border-left-color: var(--acento); color: #fff; font-weight: 500; }

.panel-menu-check {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--panel-borde);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  color: var(--texto-tenue);
}
.panel-menu-check.hecho { background: var(--green); border-color: var(--green); color: #06210f; font-weight: 700; }

@media (max-width: 760px) {
  .panel-layout { flex-direction: column; }
  .panel-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--vidrio-borde); }
}

/* ---------- registro: mismo fondo de video + vidrio que el login ----------
   Reutiliza las clases .login-video-wrap / .login-marca / .pagina-login
   del login (el nombre quedó como "login-" pero ya las usan ambas
   páginas — son solo clases de CSS, no algo que el usuario vea). */

.registro-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 110px 20px 60px;
}

.registro-caja {
  width: 100%;
  max-width: 880px;
  height: fit-content;
  border-radius: 18px;
  padding: 36px 40px 44px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  /* Desenfoque más suave que el de .login-caja a propósito: esta
     tarjeta es mucho más grande y se mueve con el scroll sobre el
     video (la de login no se mueve, cabe en una sola pantalla), así
     que el desenfoque fuerte aquí es bastante más pesado para el
     navegador. Si con esto todavía se siente lento, el video en sí
     puede ser el cuello de botella y valdría la pena revisar su peso. */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

@media (max-width: 760px) {
  .registro-shell { padding: 96px 16px 40px; }
  .registro-caja { padding: 26px 20px 34px; border-radius: 14px; }
}

/* Campo "¿Cuál?" que se revela con Tipo de sociedad / Caja de
   compensación — arranca oculto, el JS de ui.js lo muestra. */
/* .campo ya trae su propio display (flex), que por especificidad le
   gana al atributo hidden si no se refuerza explícitamente — por eso
   el campo "¿Cuál?" se quedaba visible siempre en vez de solo cuando
   ui.js lo revela. */
[data-otro-de] { margin-top: 10px; }
[data-otro-de][hidden] { display: none; }

/* "Crear cuenta" de ancho completo, igual que "Entrar" en el login. */
.registro-caja .navegacion { display: block; margin-top: 26px; }
.registro-caja .boton-primario { margin-left: 0; }

/* Desplegable propio para Departamento y Caja de compensación —
   reemplaza al <datalist> nativo, que no se mostraba de forma
   confiable en todos los navegadores. */
.campo-autocompletar { position: relative; }
.campo-autocompletar input { width: 100%; box-sizing: border-box; }
.autocompletar-lista {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 4px 0 0;
  padding: 6px;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.autocompletar-lista li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .92rem;
  color: var(--texto);
}
.autocompletar-lista li:hover { background: rgba(255, 255, 255, 0.06); }

/* Registro en PC: fondo de imagen fija en vez del video, por
   rendimiento (el video, más pesado, se queda solo para celular,
   donde no se reportó lag). ui.js se encarga de no reproducir el
   video en absoluto en este ancho, para no gastar ancho de banda ni
   CPU de más. */
@media (min-width: 761px) {
  body.pagina-registro .login-video-wrap {
    background-image: url('../media/modelo_banner.jpg');
    background-size: cover;
    background-position: center;
  }
  body.pagina-registro .login-video { display: none; }
}

/* Vista de "Cuenta creada": centrada verticalmente en la pantalla en
   vez de pegada arriba (el contenido es corto, se veía muy cerca del
   logo). El formulario largo no usa esta clase, se queda con su
   scroll normal. */
.registro-shell-centrado { align-items: center; }

/* Sin el borde azul del .aviso-info normal — se ve más elegante
   neutro aquí, es solo esta confirmación puntual. */
.aviso-registro-exito { border-color: var(--panel-borde); }

/* ===================== panel: navegación nueva ===================== */

.panel-main {
  padding: 84px 20px 50px;
  max-width: 900px;
}

/* ---- PC: sidebar fijo a la izquierda ---- */
.panel-nav-escritorio { display: none; }

@media (min-width: 761px) {
  .panel-nav-escritorio {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    padding: 22px 14px;
    border-right: 1px solid var(--vidrio-borde);
    border-radius: 0;
    z-index: 20;
  }
  .panel-nav-movil, .panel-drawer, .panel-drawer-velo { display: none !important; }
  .panel-main { margin-left: 240px; padding: 40px 48px 60px; max-width: 1400px; }
}

.panel-nav-logo { padding: 4px 10px 18px; display: block; text-decoration: none; }
.panel-nav-logo img { height: 40px; display: block; }

.panel-menu-escritorio { flex: 1; overflow-y: auto; margin-top: 14px; }

.panel-nav-perfil { position: relative; margin-top: auto; padding-top: 12px; }
.panel-nav-perfil-boton {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--texto);
  text-align: left;
}
.panel-nav-perfil-boton:hover { background: rgba(255, 255, 255, 0.06); }
.panel-nav-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--acento);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  font-weight: 600;
}
.panel-nav-perfil-nombre {
  flex: 1;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-nav-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 220px;
  z-index: 25;
  padding: 6px;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  /* Más opaco que el vidrio compartido a propósito: el drawer se ve
     "acentuado" porque tiene un velo oscuro detrás que atenúa el resto
     de la página — estos desplegables chicos no tienen ese velo, así
     que necesitan un fondo más sólido para leerse igual de marcados. */
  background: rgba(20, 28, 44, 0.96);
}
.panel-nav-dropdown-arriba {
  top: auto;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-top: 0;
  margin-bottom: 8px;
}
.panel-nav-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--texto);
  text-decoration: none;
  font-size: .9rem;
}
.panel-nav-dropdown a:hover { background: rgba(255, 255, 255, 0.06); }

/* ---- Celular: barra fija arriba + drawer con las etapas ---- */
.panel-nav-movil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 68px;
  padding: 0 14px;
  z-index: 30;
  border-radius: 0;
  border-width: 0 0 1px 0;
}
.panel-nav-logo-movil { height: 34px; }

.panel-nav-iconos-derecha { position: relative; display: flex; align-items: center; gap: 8px; }

.panel-nav-icono {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--panel-borde);
  color: var(--texto);
  cursor: pointer;
  flex-shrink: 0;
}
.panel-nav-icono:hover { background: rgba(255, 255, 255, 0.1); }
.panel-nav-icono svg { width: 20px; height: 20px; display: block; }

.panel-drawer-velo {
  position: fixed;
  top: 68px; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 35;
}
.panel-drawer {
  position: fixed;
  top: 68px; left: 0; bottom: 0;
  width: min(280px, 82vw);
  padding: 20px 16px 24px;
  border-radius: 0;
  border-width: 0 1px 0 0;
  z-index: 40;
  overflow-y: auto;
}

@media (max-width: 760px) {
  .panel-main { padding: 84px 16px 40px; }
}

/* Perfil: "Cancelar" y "Guardar cambios" del mismo ancho entre sí. */
.navegacion-mismo-ancho { gap: 12px; }
.navegacion-mismo-ancho .boton { flex: 1; }

/* Insignia de notificaciones sin leer, sobre el ícono de la campana.
   Uso azul (el acento) en vez del rojo típico de este tipo de
   insignias, para no salirme de la paleta de marca — si prefieres
   rojo para que llame más la atención, es un cambio de una línea. */
.panel-nav-insignia {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.panel-nav-dropdown-notificaciones { width: 300px; max-height: 320px; overflow-y: auto; }
.panel-nav-notificacion { padding: 10px 12px; border-radius: 8px; }
.panel-nav-notificacion p { margin: 0 0 4px; font-size: .88rem; color: var(--texto); }
.panel-nav-notificacion-fecha { font-size: .75rem; color: var(--texto-tenue); }
.panel-nav-notificacion.no-leida { background: rgba(43, 127, 209, 0.08); }
.panel-nav-notificacion + .panel-nav-notificacion { border-top: 1px solid var(--panel-borde); margin-top: 2px; }

/* Botones apilados y del mismo ancho (etapa.php: "Guardar y
   continuar" arriba, "Volver al panel" abajo). */
.navegacion-apilada { display: flex; flex-direction: column; gap: 10px; }
.navegacion-apilada .boton { width: 100%; box-sizing: border-box; text-align: center; }

/* ---------- panel: inicio (tarjeta de progreso + tips) ---------- */

.panel-progreso-card {
  margin-top: 24px;
  padding: 24px 26px;
  border-radius: var(--radio);
  background: var(--panel);
  border: 1px solid var(--panel-borde);
}
.panel-progreso-card-texto h3 { margin: 0 0 4px; font-size: 1.2rem; }
.panel-progreso-card-texto .ayuda { margin-top: 0; }
.panel-progreso-card .progreso-barra { margin: 16px 0 18px; }
.panel-progreso-card .boton-ancho { max-width: 320px; }

.panel-tips { margin-top: 32px; }
.panel-tips h3 { font-size: 1.1rem; margin-bottom: 14px; }
.panel-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
/* En PC, una sola columna (ficha por ficha, como en celular) — con 7
   fichas, una grilla de varias columnas deja la última suelta y no se
   ve bien. Va después de la regla base a propósito, para que si gane. */
@media (min-width: 761px) {
  .panel-tips-grid { grid-template-columns: 1fr; }
}
.panel-tip-card {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--panel-borde);
}
.panel-tip-card h4 { margin: 0 0 6px; font-size: .95rem; color: #fff; }
.panel-tip-card p { margin: 0; font-size: .85rem; color: var(--texto-tenue); line-height: 1.5; }

/* ---------- admin: mismo tratamiento visual que el panel del empresario ----------
   Reutiliza body.pagina-panel (blobs de fondo) y .login-caja (vidrio) que ya
   existían para el empresario. No se reutiliza el hero con video de login.php
   porque ese es texto de venta para el empresario — el admin no lo necesita,
   solo la misma paleta/tipografía/vidrio. .admin-shell únicamente sube el
   contenido por encima de los blobs (position + z-index), la tarjeta se
   sigue centrando con el margin:auto que ya trae .login-caja. */
.admin-shell { position: relative; z-index: 1; }

.admin-login-marca { text-align: center; margin-bottom: 22px; }
.admin-login-logo { height: 40px; display: block; margin: 0 auto 10px; }
.admin-login-etiqueta { display: block; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-tenue); }

/* ---------- panel: fondo con blobs suaves, para que no se vea tan plano ---------- */
.panel-main { position: relative; z-index: 1; }

body.pagina-panel::before,
body.pagina-panel::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
}
body.pagina-panel::before {
  top: -120px; left: 22%;
  width: 420px; height: 420px;
  background: rgba(20, 63, 107, 0.45);
}
body.pagina-panel::after {
  bottom: -140px; right: 6%;
  width: 480px; height: 480px;
  background: rgba(43, 127, 209, 0.20);
}

/* Encabezado de bienvenida del inicio del panel, un poco más grande
   que un h2 normal (1.9rem en el resto del sitio). */
.panel-titulo-bienvenida { font-size: 2.3rem; }

/* Aviso de tratamiento de datos en el perfil — un poco más marcado
   que un .ayuda normal, para que se lea como aviso y no como texto
   de relleno. */
.panel-aviso-datos {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--acento);
  background: rgba(43, 127, 209, 0.06);
  border-radius: 0 8px 8px 0;
}

/* Pie de página del inicio del panel — línea delgada y sutil, solo
   aparece al final del contenido (no es fijo, se ve al hacer scroll).
   Centrado en celular; en PC, una frase a cada lado. */
.panel-footer {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--panel-borde);
  color: var(--texto-tenue);
  font-size: .8rem;
  line-height: 1.7;
  text-align: center;
}
.panel-footer p { margin: 0; }

@media (min-width: 761px) {
  .panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

/* Campo de "monto exacto" que se revela debajo de una pregunta de
   opción única (Finanzas: ingresos, activos) — ver monto_exacto en
   scoring_config.json. */
.campo-monto-exacto { margin-top: 12px; }
.campo-monto-exacto-tope { display: block; margin-top: 4px; }