:root {
  --bg-panel: rgba(10, 14, 24, 0.72);
  --bg-panel-solid: #0d1220;
  --acento: #6ea8fe;
  --acento-suave: #3a5c9c;
  --texto: #eef1f8;
  --texto-tenue: #a8b2c7;
  --borde: rgba(255,255,255,0.08);
  --acento-editar: #f5a623;
}

* { box-sizing: border-box; }

/* Windows Edge (y Chrome en Windows) renderizan el desplegable de <option> con
   el fondo del sistema (blanco) salvo que se fije aquí explícitamente — el
   fondo oscuro puesto en cada <select> vale para la caja cerrada pero no para
   el desplegable en esa plataforma (macOS/iOS/Firefox sí lo respetan). Sin
   esto: texto claro invisible sobre blanco hasta pasar el ratón por encima. */
select option { background: var(--bg-panel-solid); color: var(--texto); }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: #05070d;
}

/* Fondo borroso y ampliado (cover) para rellenar los bordes sin recortar la foto real.
   "transition: background-image" no anima nada (esa propiedad no se interpola en CSS);
   el fundido real se hace con opacidad, revelando el fondo oscuro de la página. */
#carrusel-bg {
  position: fixed; inset: 0; z-index: -3;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
  filter: blur(35px) brightness(0.55) saturate(1.15);
  transform: scale(1.15); /* evita el borde claro que deja el blur en los cantos */
  pointer-events: none; /* por defecto no roba clics a las tarjetas/paneles de encima */
}
/* Solo en la pantalla de inicio (ver actualizarPantallaInicio en app.js) el carrusel
   es lo único que hay, así que ahí sí puede recibir el clic. */
body.pantalla-inicio #carrusel-bg, body.pantalla-inicio #carrusel-fg { pointer-events: auto; cursor: pointer; }
/* En la portada el carrusel (fixed, z-index negativo) va a sangre completa. El fondo
   opaco de body tapaba la franja del header + el main vacio y dejaba una banda negra
   entre el menu y la foto: aqui se hace transparente para que la foto suba hasta
   arriba (el header translucido queda por encima). Resto de vistas: body sigue opaco. */
body.pantalla-inicio { background: transparent; }
/* En la portada el menu tambien se hace transparente para que la foto quede a sangre
   detras de el. Sin panel opaco ni blur ni linea inferior; sombra de texto para que
   el menu siga legible sobre cualquier foto. Resto de vistas: header normal. */
body.pantalla-inicio header#cabecera {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
}

#carrusel-ayuda {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: -1;
  font-size: 0.75rem; color: var(--texto-tenue); background: rgba(10,14,24,0.6);
  padding: 4px 12px; border-radius: 999px; pointer-events: none;
  opacity: 0; transition: opacity 0.6s ease 1s;
}
body.pantalla-inicio #carrusel-ayuda { opacity: 1; }
/* Pantalla completa sin ningún hueco (cover); recorta un poco el borde según la
   proporción de cada foto, a cambio de que el marco nunca deje margen visible. */
#carrusel-fg {
  position: fixed; inset: 0; z-index: -2;
  background-size: cover; background-repeat: no-repeat; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
  filter: brightness(0.85) saturate(1.05);
  transform-origin: center center;
  transform: scale(1.0);
  pointer-events: none; /* misma razón que #carrusel-bg: no roba clics fuera de la pantalla de inicio */
}
@keyframes kbZoomIn { from { transform: scale(1.0); } to { transform: scale(1.12); } }
@keyframes kbZoomOut { from { transform: scale(1.12); } to { transform: scale(1.0); } }
#carrusel-fg.kb-in { animation: kbZoomIn 9.5s ease-in-out forwards; }
#carrusel-fg.kb-out { animation: kbZoomOut 9.5s ease-in-out forwards; }
@media (prefers-reduced-motion: reduce) {
  #carrusel-fg.kb-in, #carrusel-fg.kb-out { animation: none; }
}
#carrusel-bg::after {
  content: ""; position: fixed; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,13,0.25) 0%, rgba(5,7,13,0.6) 100%);
  z-index: -1;
}
#carrusel-caption {
  position: fixed; bottom: 18px; right: 24px; z-index: -1;
  font-size: 0.85rem; color: var(--texto-tenue);
  text-shadow: 0 1px 3px #000;
}

/* Icono de silencio de la música de portada: discreto, junto a la firma del objeto.
   Oculto y sin recibir clics salvo en la pantalla de inicio (igual que el carrusel). */
#btn-audio-portada {
  position: fixed; bottom: 46px; right: 24px; z-index: -1;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; line-height: 1; border-radius: 999px; border: 1px solid var(--borde);
  background: rgba(10,14,24,0.6); color: var(--texto-tenue); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
#btn-audio-portada:hover, #btn-audio-portada:focus-visible { color: var(--texto); border-color: var(--acento-suave); }
body.pantalla-inicio #btn-audio-portada { opacity: 1; pointer-events: auto; }

header#cabecera {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 28px;
  background: var(--bg-panel);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 10;
}
#marca { font-size: 1.25rem; font-weight: 600; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
#marca img { height: 22px; width: auto; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
/* Solo en la pantalla de inicio (carrusel): quien entra por primera vez y ve
   pasar las fotos sabe de un vistazo qué es esto y de quién, sin tener que
   tocar nada ni leer el FAQ. En el resto de pantallas no hace falta — ya se
   sabe qué se está usando, y la cabecera ya va apretada. */
#subtitulo-marca { display: none; font-size: 0.95rem; font-weight: 400; font-style: italic; color: var(--texto-tenue); }
body.pantalla-inicio #subtitulo-marca { display: block; }

/* Globo de un recorrido de bienvenida de varios pasos (ver iniciarRecorridoAyuda
   en app.js): apunta a un elemento distinto en cada paso (logo, FAQ, Álbum...),
   así que va en position:fixed y JS calcula left/top según el objetivo de turno,
   en vez de ir anclado dentro de un único contenedor como antes. Se muestra una
   vez por sesión de navegador hasta que el usuario interactúa con la cabecera. */
#globo-ayuda {
  position: fixed; z-index: 20; max-width: 260px;
  background: rgba(110,168,254,0.65); color: #05070d; font-weight: 600; font-size: 0.85rem;
  padding: 8px 14px; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
#globo-ayuda::after {
  content: ""; position: absolute; bottom: 100%; left: 20px;
  border: 7px solid transparent; border-bottom-color: rgba(110,168,254,0.65);
}
/* Variantes para objetivos pegados al borde inferior/derecho (el altavoz de la
   portada): el globo se voltea para no salirse de la ventana, y la flechita
   cambia de lado en consecuencia. */
#globo-ayuda.arriba::after { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: rgba(110,168,254,0.65); }
#globo-ayuda.derecha::after { left: auto; right: 20px; }
#globo-ayuda.visible { opacity: 1; }
#tabs { display: flex; gap: 8px; flex: 1; }
#enlace-ciclo-estelar {
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--acento);
  border: none; cursor: pointer;
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  background: rgba(110,168,254,0.08);
}
#enlace-ciclo-estelar:hover { color: var(--texto); background: var(--acento-suave); }
/* El menú de infografías cuelga del extremo derecho de la cabecera, así que se
   despliega hacia la izquierda para no salirse de la ventana. */
#menu-aprender .menu-opciones { left: auto; right: 0; }
.tab-btn {
  background: transparent; border: 1px solid transparent; color: var(--texto-tenue);
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.95rem;
}
.tab-btn:hover { color: var(--texto); background: rgba(255,255,255,0.05); }
.tab-btn.activo { color: var(--texto); background: var(--acento-suave); border-color: var(--acento); }

.menu-desplegable { position: relative; }
.menu-opciones {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 210px;
  background: var(--bg-panel-solid); border: 1px solid var(--borde); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.menu-opciones.oculto { display: none; }
.menu-opciones button {
  background: transparent; border: none; color: var(--texto); text-align: left;
  padding: 9px 12px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; white-space: nowrap;
}
.menu-opciones button:hover { background: rgba(255,255,255,0.08); }

.subvista-config { display: none; }
.subvista-config.activa { display: block; }

.caja-tunel-url {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 18px; max-width: 640px;
  background: rgba(110,168,254,0.08); border: 1px solid var(--acento-suave); border-radius: 10px;
  font-size: 0.85rem;
}
.caja-tunel-url.oculto { display: none; }
.caja-tunel-url-etiqueta { color: var(--texto-tenue); white-space: nowrap; }
.nota-lugar { width: 100%; margin: 0 0 2px; color: var(--texto-tenue); font-size: 0.8rem; }
.caja-tunel-url code { color: var(--acento); word-break: break-all; }
.caja-tunel-url button { padding: 5px 10px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; border: 1px solid var(--acento-suave); background: transparent; color: var(--texto); }

/* Tabla única de cuentas (editoras + lectoras): antes eran dos columnas de
   tarjetas, ya apretadas con solo 2 editores. Reutiliza el look de
   .tabla-objetos (catálogo) — la fila es clicable para seleccionarla, en vez
   de repetir los botones de acción en cada una; las acciones de la cuenta
   elegida salen una sola vez en #barra-acciones-usuario. */
.tabla-usuarios tbody tr:hover { background: rgba(255,255,255,0.05); }
.tabla-usuarios tbody tr.fila-seleccionada { background: rgba(255,255,255,0.09); }
/* No todas las columnas son ordenables (Mostrar álbum/Permitir imprimir/
   selección no tienen data-orden) — el cursor de "clicable" de .tabla-objetos
   asume que sí, aquí solo aplica a las que de verdad ordenan. */
.tabla-usuarios thead th:not([data-orden]) { cursor: default; }
.tabla-usuarios td input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.celda-seleccion-usuario { text-align: center; }
.celda-seleccion-usuario input[type="radio"] { width: 16px; height: 16px; cursor: pointer; }
.barra-acciones-usuario {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0; padding: 10px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--borde);
}
.barra-acciones-usuario.oculto { display: none; }
.barra-acciones-usuario strong { margin-right: 4px; }
.barra-acciones-usuario button {
  padding: 5px 10px; border-radius: 6px; font-size: 0.78rem; cursor: pointer;
  border: 1px solid var(--acento-suave); background: transparent; color: var(--texto);
}
.barra-acciones-usuario .btn-borrar-ref { border-color: #a34a4a !important; color: #ff8a8a; }
.solicitud-atendida { opacity: 0.5; }
.botones-anadir-usuario { display: flex; gap: 10px; margin: 12px 0 18px; }
.botones-anadir-usuario button { padding: 7px 14px; border-radius: 6px; cursor: pointer; border: 1px solid var(--acento-suave); background: transparent; color: var(--texto); }

.lista-usuarios { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.fila-usuario {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--bg-panel); border: 1px solid var(--borde); border-radius: 10px;
}
.fila-usuario span:first-child { font-weight: 600; flex: 1; }
.fila-usuario .fecha-usuario { color: var(--texto-tenue); font-size: 0.8rem; }
.fila-usuario button { padding: 5px 10px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; border: 1px solid var(--acento-suave); background: transparent; color: var(--texto); }

/* flex-wrap para que el título quede siempre en su propia línea (ancho 100%)
   y deje claro qué formulario es cuál cuando los dos botones de arriba llevan
   a formularios distintos con campos parecidos. */
/* Bug de fondo real (previo a hoy): nunca existió esta regla, así que
   classList.toggle('oculto') no ocultaba nada — los formularios de alta se
   veían siempre, se hubiera pulsado o no el botón "+ Añadir...". */
.form-usuario.oculto { display: none; }
.form-usuario { display: flex; flex-wrap: wrap; gap: 10px; max-width: 640px; }
.form-usuario h4 { width: 100%; margin: 0; }
.form-usuario input { flex: 1; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--borde); background: rgba(255,255,255,0.06); color: var(--texto); }
.form-usuario select { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--borde); background: rgba(255,255,255,0.06); color: var(--texto); }
.form-usuario button { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--acento); background: var(--acento-suave); color: var(--texto); cursor: pointer; }
.form-usuario [data-cancelar-form-usuario] { background: transparent; border-color: var(--texto-tenue); color: var(--texto-tenue); }
/* Campos que solo aplican al rol "editor" (nombre, equipo, flags de álbum):
   ancho completo (su propia línea) y en fila entre sí, igual que el resto del
   formulario — ocultos por completo si el rol elegido es "lector". */
.campos-rol-editor { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.campos-rol-editor.oculto { display: none; }
.campos-rol-editor label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--texto-tenue); white-space: nowrap; }

/* FAQ pública: pantalla completa con fondo sólido (mismo patrón que Mapa/Ciclo
   estelar) para que no se vea el carrusel de fondo alrededor del texto; el
   contenido interior se queda a un ancho de lectura cómodo, sin centrar (a la
   izquierda, no en columna centrada). */
#vista-faq {
  position: fixed; top: var(--alto-cabecera, 64px); left: 0; right: 0; bottom: 0;
  z-index: 1; margin: 0; background: var(--bg-panel-solid); overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: 24px 28px;
}
.faq-contenido { max-width: none; }
.faq-intro { color: var(--texto-tenue); font-size: 0.85rem; margin: 6px 0 18px; max-width: 640px; }
/* Posición fija en la esquina inferior DERECHA, a propósito distinta de la
   burbuja de "quién soy"/"Salir" (#quien-soy/#btn-logout), que vive en la
   izquierda — en el FAQ (sin imagen de fondo) las dos burbujas se pisaban al
   compartir la misma esquina. Mismo estilo visual que esas dos, por
   consistencia. */
.contacto-faq {
  position: fixed; bottom: 10px; right: 14px; z-index: 5;
  font-size: 0.72rem; color: var(--texto-tenue); background: rgba(10,14,24,0.6);
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--borde);
}
.contacto-faq a { color: var(--acento); }
#buscador-faq {
  display: block; width: 100%; max-width: 400px; margin-bottom: 16px;
  padding: 8px 12px; font-size: 0.9rem; border-radius: 8px; border: 1px solid var(--borde);
  background: rgba(255,255,255,0.06); color: var(--texto);
}
.faq-item {
  background: var(--bg-panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 8px; text-align: left;
}
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.faq-item p { margin: 8px 0 0; color: var(--texto-tenue); line-height: 1.5; white-space: pre-wrap; font-size: 0.85rem; }

/* FAQ: gestión (admin) */
.fila-faq { align-items: flex-start; }
.fila-faq .faq-editable { flex: 1; }
.fila-faq .faq-editable strong { display: block; margin-bottom: 4px; }
.fila-faq .faq-editable p { margin: 0; color: var(--texto-tenue); font-size: 0.85rem; white-space: pre-wrap; }
.form-faq { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin-top: 10px; }
.form-faq.oculto { display: none; }
.fila-faq.oculto { display: none; }
.form-faq input, .form-faq textarea {
  padding: 8px 10px; border-radius: 6px; border: 1px solid var(--borde);
  background: rgba(255,255,255,0.06); color: var(--texto); font-family: inherit;
}
.form-faq textarea { resize: vertical; }
.form-faq button { align-self: flex-start; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--acento); background: var(--acento-suave); color: var(--texto); cursor: pointer; }
.form-faq .acciones-editar { display: flex; gap: 8px; }
.form-faq [data-cancelar-editar-faq] { border-color: var(--texto-tenue); background: transparent; color: var(--texto-tenue); }

.buscador-config { position: relative; display: flex; gap: 10px; margin-bottom: 18px; }
.buscador-config input { flex: 1; padding: 10px 14px; font-size: 0.95rem; border-radius: 8px; border: 1px solid var(--borde); background: rgba(255,255,255,0.06); color: var(--texto); }
.buscador-config #btn-nuevo-objeto { padding: 0 16px; border-radius: 8px; border: 1px solid var(--acento); background: var(--acento-suave); color: var(--texto); cursor: pointer; white-space: nowrap; }

.fila-pdf { display: flex; gap: 10px; margin-top: 14px; }
.fila-pdf select {
  padding: 9px 12px; border-radius: 8px; border: 1px solid var(--borde);
  background: rgba(255,255,255,0.06); color: var(--texto); font-size: 0.9rem;
}
.fila-pdf button {
  padding: 9px 18px; border-radius: 8px; border: 1px solid var(--acento);
  background: var(--acento-suave); color: var(--texto); cursor: pointer; font-size: 0.9rem;
}
.fila-pdf button:disabled { opacity: 0.6; cursor: wait; }
.buscador-config .resultados-busqueda { top: calc(100% + 4px); left: 0; right: 140px; }

.form-editar-objeto { margin-bottom: 20px; }
.rejilla-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 16px; margin-bottom: 12px; }
.campo-editor { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--texto-tenue); }
.campo-editor input, .campo-editor textarea, .campo-editor select {
  padding: 7px 10px; border-radius: 6px; border: 1px solid var(--borde);
  background: rgba(255,255,255,0.06); color: var(--texto); font-family: inherit; font-size: 0.9rem;
}
.campo-editor textarea { resize: vertical; }
.ayuda-campo { color: var(--texto-tenue); font-size: 0.72rem; font-weight: 400; }
.campo-checkbox { flex-direction: row; align-items: center; gap: 8px; }
.campo-checkbox input { width: auto; }
.campo-ancho { margin-bottom: 12px; }
.campo-atributos { gap: 8px; }
.campo-atributos #filas-atributos { display: flex; flex-direction: column; gap: 6px; }
.fila-atributo { display: flex; gap: 8px; }
.fila-atributo .atributo-clave { flex: 0 0 220px; }
.fila-atributo .atributo-valor { flex: 1; }
.fila-atributo input {
  padding: 7px 10px; border-radius: 6px; border: 1px solid var(--borde);
  background: rgba(255,255,255,0.06); color: var(--texto); font-family: inherit; font-size: 0.9rem;
}
.fila-atributo .btn-quitar-atributo { padding: 0 12px; border-radius: 6px; cursor: pointer; line-height: 1; }
#btn-anadir-atributo { align-self: flex-start; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.acciones-editor { display: flex; gap: 10px; }
.acciones-editor button[type="submit"] { padding: 9px 18px; border-radius: 8px; border: 1px solid var(--acento); background: var(--acento-suave); color: var(--texto); cursor: pointer; }
.acciones-editor .btn-borrar-ref { padding: 9px 18px; border-radius: 8px; cursor: pointer; }

.galeria-config.galeria-ref { flex-wrap: wrap; }
.galeria-config .ref-item img { height: 160px; }
.etiqueta-reciente {
  position: absolute; top: 6px; right: 6px; background: #b8860b; color: #05070d;
  font-size: 0.62rem; font-weight: 600; padding: 2px 7px; border-radius: 8px;
}
.form-nueva-imagen { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.form-nueva-imagen input[type="text"] { flex: 1; min-width: 160px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--borde); background: rgba(255,255,255,0.06); color: var(--texto); }
.form-nueva-imagen button { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--acento); background: var(--acento-suave); color: var(--texto); cursor: pointer; }

.tabla-scroll { overflow-x: auto; overflow-y: auto; max-height: 50vh; margin-top: 12px; border: 1px solid var(--borde); border-radius: 10px; }
.tabla-objetos { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; }
.tabla-objetos th, .tabla-objetos td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--borde); }
.tabla-objetos thead th {
  position: sticky; top: 0; background: var(--bg-panel-solid); cursor: pointer; user-select: none;
  color: var(--texto-tenue); font-weight: 600;
}
.tabla-objetos thead th:hover { color: var(--texto); }
.tabla-objetos thead th.orden-activo { color: var(--acento); }
.tabla-objetos thead th[data-direccion="asc"]::after { content: ' ▲'; }
.tabla-objetos thead th[data-direccion="desc"]::after { content: ' ▼'; }
.tabla-objetos tbody tr { cursor: pointer; }
.tabla-objetos tbody tr:hover { background: rgba(255,255,255,0.05); }

#usuario-selector select, .barra-filtros input, .barra-filtros select {
  background: rgba(255,255,255,0.06); border: 1px solid var(--borde); color: var(--texto);
  padding: 7px 10px; border-radius: 6px; font-size: 0.9rem;
}
#usuario-selector { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--texto-tenue); white-space: nowrap; }

main { padding: 24px 28px 60px; max-width: 1400px; margin: 0 auto; }
.vista { display: none; }
.vista.activa { display: block; }

.barra-filtros { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
#buscador { flex: 1; }

.boton-cargar-mas {
  display: block; margin: 20px auto 0; padding: 10px 22px; border-radius: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--acento-suave); color: var(--texto);
  cursor: pointer; font-size: 0.9rem;
}
.boton-cargar-mas:hover { background: var(--acento-suave); }
.boton-cargar-mas.oculto { display: none; }

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.card {
  background: var(--bg-panel); border: 1px solid var(--borde); border-radius: 12px;
  overflow: hidden; cursor: pointer; transition: transform 0.15s, border-color 0.15s;
}
.card:hover { transform: translateY(-3px); border-color: var(--acento); }
.card .thumb {
  width: 100%; aspect-ratio: 1; background: #0a0e18 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: var(--texto-tenue); font-size: 2rem;
}
.card .info { padding: 10px 12px; }
.card .codigo { font-weight: 600; }
.card .nombre { font-size: 0.85rem; color: var(--texto-tenue); }
.card .badge {
  display: inline-block; margin-top: 6px; font-size: 0.7rem; padding: 2px 8px;
  border-radius: 20px; background: var(--acento-suave); color: var(--texto);
}

.card.casilla-vacia {
  opacity: 0.4; filter: grayscale(1); border-style: dashed;
}
.card.casilla-vacia:hover { opacity: 0.65; transform: none; }
.card.casilla-vacia .thumb { font-size: 1.8rem; color: var(--texto-tenue); }
.card.casilla-vacia .codigo, .card.casilla-vacia .nombre { color: var(--texto-tenue); }

/* Álbum: marco siempre en blanco, haya o no foto real — solo la foto en sí se atenúa */
#grid-cromos .card { background: #f2f1ee; border-color: rgba(0,0,0,0.15); }
#grid-cromos .card .codigo { color: #14161c; }
#grid-cromos .card .nombre { color: #55585f; }
#grid-cromos .card .thumb { background-color: #e2e0da; }
#grid-cromos .card.casilla-vacia { opacity: 1; filter: none; border-style: solid; }
#grid-cromos .card.casilla-vacia:hover { opacity: 1; }
#grid-cromos .card.casilla-vacia .thumb { filter: grayscale(1); opacity: 0.55; }
#grid-cromos .card.casilla-vacia .codigo, #grid-cromos .card.casilla-vacia .nombre { color: #9a9a95; }

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); }
.modal.oculto { display: none; }
.modal-contenido {
  background: var(--bg-panel-solid); border: 1px solid var(--borde); border-radius: 14px;
  max-width: 900px; width: 92%; max-height: 88vh; overflow-y: auto; padding: 28px; position: relative;
}
.cerrar { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--texto); font-size: 1.2rem; cursor: pointer; }

/* Visor de foto ampliada: pantalla completa a propósito (el objetivo es maximizar
   el espacio para ver la foto grande), no la caja centrada de .modal-contenido.
   #visor-foto-marco no tiene ancho/alto fijo: se ajusta al tamaño real de la
   imagen (limitada por max-width/max-height), así la marca de agua (absolute,
   inset 0 dentro del marco) queda pegada a la foto y no a todo el hueco negro
   alrededor cuando la imagen no llena la pantalla. */
#modal-visor-foto {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.94);
}
#modal-visor-foto.oculto { display: none; }
#modal-visor-foto .cerrar { position: fixed; color: #fff; font-size: 1.6rem; }
/* Solo se muestra para cromos del álbum (no imágenes de referencia del
   catálogo, que son de terceros) — ver JS. */
#btn-compartir-foto {
  position: fixed; top: 14px; left: 14px; z-index: 151;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.3); color: #fff;
  padding: 7px 16px; border-radius: 999px; font-size: 0.85rem; cursor: pointer;
}
#btn-compartir-foto:hover { background: rgba(255,255,255,0.18); }
#btn-compartir-foto.oculto { display: none; }
#visor-foto-marco { position: relative; display: flex; max-width: 100vw; max-height: 88vh; overflow: hidden; }
#visor-foto-img {
  display: block; max-width: 100vw; max-height: 88vh; object-fit: contain;
  cursor: zoom-in; touch-action: none; user-select: none; transform-origin: 0 0;
}
#visor-foto-img.zoom-arrastrando { cursor: grabbing; }
#visor-foto-img.zoom-ampliado:not(.zoom-arrastrando) { cursor: grab; }
#visor-foto-img.oculto { display: none; }
#visor-foto-video { display: block; max-width: 100vw; max-height: 88vh; }
#visor-foto-video.oculto { display: none; }
/* Insignia ▶ sobre la miniatura de un cromo en vídeo, para distinguirlo a
   simple vista en la rejilla sin tener que abrirlo. */
.insignia-video {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
/* La imagen de fondo (SVG con el nombre del autor) la genera JS al abrir el
   visor, solo cuando quien mira no es el autor de la foto. */
#visor-foto-marca { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat; }
#visor-foto-marca.oculto { display: none; }
/* Pie de crédito, siempre visible (autor y terceros por igual) — mismo criterio
   que /ver-referencia para las imágenes del catálogo. */
#visor-foto-credito { color: #aaa; font-size: 0.85rem; padding: 10px 0 0; text-align: center; }

/* Bienvenida a pantalla completa: el texto es largo (el ensayo completo de "Pale
   Blue Dot", sin resumir) y no cabe en una caja centrada, así que ocupa toda la
   ventana con scroll — mismo patrón que Mapa/Ciclo estelar, no el de .modal-contenido. */
#modal-bienvenida { display: block; background: #05070d; }
#modal-bienvenida.oculto { display: none; }

#bienvenida-fondo {
  position: absolute; inset: 0;
  background-image: url(/bienvenida-foto-fondo.jpg);
  background-size: cover;
  /* 60% 55% = donde está el punto en la foto real (medido a mano en la imagen
     original) — así el recorte por pantallas distintas nunca se lo come. */
  background-position: 60% 55%;
}
/* Degradado más oscuro arriba/abajo (para leer el título, el texto y la firma) y
   más claro en la franja central, para que el punto respire y siga siendo el
   protagonista visual en vez de quedar tapado por el texto. */
#bienvenida-fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(5,7,13,0.82) 0%, rgba(5,7,13,0.45) 30%,
    rgba(5,7,13,0.35) 55%, rgba(5,7,13,0.5) 70%, rgba(5,7,13,0.88) 100%);
}

#bienvenida-scroll {
  position: absolute; inset: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
}
/* Ancho generoso (para que el texto quepa sin scroll en pantallas normales) pero
   nunca a sangre: min(...) deja siempre un margen a los lados por el que se ve
   la foto de fondo, aunque sea poco. */
.bienvenida-texto {
  width: 100%; max-width: min(1300px, 96vw); box-sizing: border-box;
  padding: 40px 0 0; color: var(--texto);
}
.bienvenida-texto h2 {
  text-align: center; font-size: 1.9rem; margin: 0 0 24px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.bienvenida-texto p {
  font-size: 0.95rem; line-height: 1.6; margin: 0 0 16px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
/* Empuja el penúltimo párrafo, el último y la firma (que vienen justo después en
   el flujo normal) unas dos líneas hacia abajo. Selector más específico que
   ".bienvenida-texto p" (que resetea margin-top a 0 con su shorthand) para que
   esto no se pierda por especificidad. */
.bienvenida-texto p.bienvenida-espacio-cierre { margin-top: 4.5rem; }
.bienvenida-firma {
  text-align: right; font-style: italic; color: var(--texto-tenue);
  font-size: 1rem; margin: 28px 0 0;
}

.bienvenida-controles {
  position: sticky; bottom: 0; width: 100%; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 16px 20px; margin-top: 32px; flex-wrap: wrap;
  background: linear-gradient(0deg, rgba(5,7,13,0.92) 55%, rgba(5,7,13,0));
}
.campo-bienvenida-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--texto-tenue); margin: 0;
}
.campo-bienvenida-check input { width: auto; }
#btn-bienvenida-continuar {
  margin: 0; padding: 9px 28px; border-radius: 8px;
  border: 1px solid var(--acento); background: var(--acento-suave); color: var(--texto);
  cursor: pointer; font-size: 0.9rem;
}
@media (max-width: 700px) {
  .bienvenida-texto { max-width: 94vw; }
  .bienvenida-texto h2 { font-size: 1.4rem; }
  .bienvenida-texto p { font-size: 0.88rem; }
}

.ficha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 14px 0; }
.ficha-grid div { font-size: 0.9rem; }
.ficha-grid b { color: var(--texto-tenue); font-weight: 500; }
.ficha-grid-compacta { margin: 10px 0 16px; padding: 12px 14px; background: rgba(255,255,255,0.03); border-radius: 10px; }
.descripcion-album { font-size: 0.88rem; color: var(--texto); margin: 0 0 16px; line-height: 1.4; }

.contador-messier { font-size: 0.9rem; font-weight: 400; color: var(--texto-tenue); }

.apunte-cromos { margin-top: 16px; padding: 12px 14px; background: rgba(110,168,254,0.08); border: 1px solid var(--acento-suave); border-radius: 10px; font-size: 0.9rem; }
.apunte-cromos a { color: var(--acento); cursor: pointer; text-decoration: underline; }

.buscador-cromos { position: relative; margin-bottom: 18px; }
/* Mismo look & feel que #buscador/.barra-filtros del Catálogo (fondo oscuro,
   borde tenue) — antes no fijaba color propio y salía con el blanco por
   defecto del navegador, inconsistente con el resto de la app. */
.buscador-cromos input {
  width: 100%; padding: 10px 14px; font-size: 0.95rem;
  background: rgba(255,255,255,0.06); border: 1px solid var(--borde); border-radius: 6px; color: var(--texto);
}
.resultados-busqueda {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--bg-panel-solid); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden;
  max-height: 300px; overflow-y: auto;
}
.resultados-busqueda.oculto { display: none; }
.resultado-item { padding: 10px 14px; cursor: pointer; font-size: 0.9rem; border-bottom: 1px solid var(--borde); }
.resultado-item:last-child { border-bottom: none; }
.resultado-item:hover { background: rgba(255,255,255,0.06); }
.resultado-item .rcodigo { font-weight: 600; }
.resultado-item .rnombre { color: var(--texto-tenue); font-size: 0.82rem; }

.panel-objeto { background: var(--bg-panel); border: 1px solid var(--acento-suave); border-radius: 12px; padding: 20px; margin-bottom: 24px; position: relative; }
.panel-objeto.oculto { display: none; }
.panel-objeto .cerrar-panel { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--texto); font-size: 1.1rem; cursor: pointer; }

.galeria-ref { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.galeria-ref .ref-item { position: relative; flex-shrink: 0; }
.galeria-ref .ref-item img { height: 140px; border-radius: 8px; display: block; }
.galeria-ref .ref-item.es-portada img { outline: 2px solid var(--acento); outline-offset: 2px; }
.galeria-ref .etiqueta-portada {
  position: absolute; bottom: 6px; left: 6px; background: var(--acento); color: #05070d;
  font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 10px;
}
.galeria-ref .etiqueta-fuente {
  position: absolute; top: 6px; left: 6px; right: 6px; background: rgba(5,7,13,0.75); color: var(--texto);
  font-size: 0.62rem; padding: 2px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-align: center;
}
.galeria-ref .ref-item.baja-calidad img { opacity: 0.4; filter: grayscale(0.6); }
.galeria-ref .etiqueta-baja-calidad {
  position: absolute; bottom: 6px; left: 6px; right: 6px; background: #7d2f2f; color: #fff;
  font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-align: center;
}
.galeria-ref .ref-acciones {
  position: absolute; bottom: 6px; left: 6px; right: 6px; display: flex; gap: 4px;
  opacity: 0; transition: opacity 0.15s;
}
.galeria-ref .ref-item:hover .ref-acciones { opacity: 1; }
.galeria-ref .ref-acciones button {
  flex: 1; font-size: 0.68rem; padding: 3px 4px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--acento-suave); background: rgba(5,7,13,0.8); color: var(--texto);
}
.galeria-ref .btn-borrar-ref { border-color: #a34a4a !important; color: #ff8a8a; }

.lista-cromos { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.cromo-card { width: 160px; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 8px; border: 1px solid var(--borde); }
.cromo-card img { width: 100%; border-radius: 6px; aspect-ratio: 1; object-fit: cover; }
.cromo-card .meta { font-size: 0.72rem; color: var(--texto-tenue); margin-top: 6px; line-height: 1.4; }
.cromo-card button { margin-top: 6px; width: 100%; font-size: 0.75rem; padding: 4px; border-radius: 6px; border: 1px solid var(--acento); background: transparent; color: var(--acento); cursor: pointer; }
/* Miniatura clicable: reinicia el estilo genérico de .cromo-card button (que es
   para los botones de acción de abajo) — aquí solo envuelve la imagen. */
.cromo-card button.miniatura-cromo, .ref-item button.miniatura-cromo { position: relative; margin: 0; padding: 0; border: none; background: none; display: block; width: 100%; cursor: pointer; }
.cromo-card.vigente { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
/* Color deliberadamente distinto al de "vigente" (azul) — si no, no se distingue a
   simple vista cuál se está editando cuando además hay una tarjeta vigente. */
.cromo-card.editando { border-color: var(--acento-editar); box-shadow: 0 0 0 2px var(--acento-editar); position: relative; }
.cromo-card.editando::before {
  content: 'Editando'; position: absolute; top: -9px; left: 8px;
  background: var(--acento-editar); color: #1a1200; font-size: 0.65rem; font-weight: 700;
  padding: 1px 7px; border-radius: 5px;
}
.cromo-card .etiqueta-vigente { color: var(--acento); font-weight: 600; font-size: 0.72rem; }
.cromo-card .acciones-cromo { display: flex; gap: 4px; }
.cromo-card .acciones-cromo button { margin-top: 6px; }

/* Formulario de subida y de edición comparten esta rejilla ancha (#zona-formulario-cromo,
   NO la tarjeta estrecha del cromo — ahí no cabe cómodamente un formulario de varios campos). */
.barra-modo-album { margin-top: 14px; }
#btn-modo-anadir {
  padding: 9px 20px; border-radius: 8px; border: 1px solid var(--acento);
  background: transparent; color: var(--acento); cursor: pointer; font-size: 0.9rem; font-weight: 600;
}
#btn-modo-anadir:hover { background: var(--acento-suave); color: var(--texto); }

form.subida, .form-editar-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; background: rgba(255,255,255,0.04); padding: 14px; border-radius: 10px; }
form.subida input, form.subida button, form.subida textarea,
.form-editar-foto input, .form-editar-foto button, .form-editar-foto textarea {
  padding: 8px; border-radius: 6px; border: 1px solid var(--borde); background: rgba(255,255,255,0.06); color: var(--texto); font: inherit;
}
form.subida textarea, .form-editar-foto textarea { grid-column: span 2; resize: vertical; }
form.subida > button { grid-column: span 2; background: var(--acento-suave); border-color: var(--acento); cursor: pointer; }
.nota-exif { grid-column: span 2; font-size: 0.78rem; color: var(--acento); margin: 0; }
.nota-exif.oculto { display: none; }
.pista-modo-album { color: var(--texto-tenue); font-size: 0.9rem; margin-top: 16px; padding: 14px; background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px dashed var(--borde); }
form.subida .acciones-editar, .form-editar-foto .acciones-editar { grid-column: span 2; display: flex; gap: 8px; }
form.subida .acciones-editar button, .form-editar-foto .acciones-editar button { flex: 1; background: var(--acento-suave); border-color: var(--acento); cursor: pointer; }
form.subida [data-cancelar-subida], .form-editar-foto [data-cancelar-editar] { background: transparent; border-color: var(--texto-tenue); color: var(--texto-tenue); }

.pendiente-card img { width: 100%; border-radius: 8px 8px 0 0; }
.pendiente-card .acciones { display: flex; gap: 8px; padding: 8px; }
.pendiente-card .acciones button { flex: 1; padding: 6px; border-radius: 6px; border: none; cursor: pointer; }
.btn-aprobar { background: #2f7d4f; color: white; }
.btn-rechazar { background: #7d2f2f; color: white; }

.aviso-lector { font-size: 0.8rem; color: var(--texto-tenue); margin-top: 8px; }

#quien-soy {
  position: fixed; bottom: 10px; left: 14px; z-index: 5;
  font-size: 0.72rem; color: var(--texto-tenue); background: rgba(10,14,24,0.6);
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--borde);
  pointer-events: none; user-select: none;
}
#quien-soy.oculto { display: none; }
.barra-cuenta.oculto { display: none; }

/* Pantalla completa (como Catálogo o Álbum), no una imagen que abra fuera de la app:
   ocupa todo el viewport por debajo de la cabecera, con la imagen entera visible. */
#vista-mapa {
  position: fixed; top: var(--alto-cabecera, 64px); left: 0; right: 0; bottom: 0;
  z-index: 1; margin: 0; padding: 0; background: #05070d;
  overflow: hidden; /* recorta la imagen cuando se hace zoom/pan, en vez de desbordar */
}
#vista-mapa.activa { display: flex; align-items: center; justify-content: center; }
#vista-mapa img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  cursor: zoom-in; touch-action: none; user-select: none;
  transform-origin: 0 0;
}
#vista-mapa img.zoom-arrastrando { cursor: grabbing; }
#vista-mapa img.zoom-ampliado:not(.zoom-arrastrando) { cursor: grab; }
#vista-mapa-ayuda {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; color: var(--texto-tenue); background: rgba(10,14,24,0.6);
  padding: 4px 12px; border-radius: 999px; pointer-events: none;
  transition: opacity 0.4s ease;
}
#vista-mapa.zoom-oculta-ayuda #vista-mapa-ayuda { opacity: 0; }

/* Misma pantalla completa que el mapa, pero con la infografía en un iframe (es una
   página propia, con su propia cabecera interna, así que convive con la de Bortle1). */
#vista-ciclo {
  position: fixed; top: var(--alto-cabecera, 64px); left: 0; right: 0; bottom: 0;
  z-index: 1; margin: 0; padding: 0; background: #070a14;
}
#vista-ciclo.activa { display: block; }
#iframe-ciclo { width: 100%; height: 100%; border: none; display: block; }

/* Ajustes solo para pantallas estrechas (móvil) — no toca ninguna regla anterior,
   así que el aspecto en PC queda exactamente igual que hasta ahora. */
@media (max-width: 700px) {
  header#cabecera { flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px; }
  #marca { font-size: 1.05rem; }
  #tabs { flex-wrap: wrap; }
  #enlace-ciclo-estelar { font-size: 0.85rem; padding: 6px 10px; }
  #menu-config .menu-opciones { left: auto; right: 0; }

  main { padding: 16px 14px 40px; }

  .barra-filtros { flex-wrap: wrap; }
  .barra-filtros input, .barra-filtros select, #usuario-selector, #usuario-selector select {
    flex: 1 1 100%; width: 100%; white-space: normal;
  }

  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }

  .fila-pdf { flex-wrap: wrap; }
  .fila-pdf select, .fila-pdf button { flex: 1 1 100%; }

  .form-usuario { flex-wrap: wrap; }
  .form-usuario input, .form-usuario button { flex: 1 1 100%; }

  .ficha-grid { grid-template-columns: 1fr; }

  form.subida, .form-editar-foto { grid-template-columns: 1fr; }
  form.subida button, .nota-exif, form.subida textarea,
  .form-editar-foto .acciones-editar, .form-editar-foto textarea { grid-column: span 1; }

  .modal-contenido { padding: 18px; width: 94%; }
}

/* ---------- Login modal + avisos in-app (sustituyen al Basic Auth y a los alert() del navegador) ---------- */
#modal-login .modal-contenido.login-caja,
#modal-aviso .modal-contenido.aviso-caja,
#modal-confirm .modal-contenido.aviso-caja,
#modal-prompt .modal-contenido.aviso-caja,
#modal-solicitar-acceso .modal-contenido.aviso-caja,
#modal-recuperar .modal-contenido.aviso-caja,
#modal-cambiar-password .modal-contenido.aviso-caja {
  max-width: 380px; width: 90%; text-align: center; padding: 32px 28px;
}
/* Confirmacion en verde del enlace de recuperacion. Ojo: en esta hoja NO hay una
   regla generica para .oculto, cada elemento necesita la suya o se queda visible
   (mismo fallo que ya paso con el visor de video). */
.recuperar-ok {
  font-size: 0.82rem; color: #a8e8bd; background: rgba(95, 206, 126, 0.12);
  border-left: 2px solid #5fce7e; border-radius: 6px; padding: 10px 12px;
  margin-top: 10px; text-align: left;
}
.recuperar-ok.oculto { display: none; }
/* Cada uno necesita SU regla: no hay .oculto generico en esta hoja. */
#form-recuperar.oculto { display: none; }
#recuperar-cerrar.oculto { display: none; }
.pista-recuperar.oculto { display: none; }

/* Aviso de cromos nuevos de otros. La portada no se toca: el punto vive en la
   cabecera y se apaga al abrir el album, asi que nunca anuncia algo ya visto. */
.punto-novedades {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px;
  padding: 0 5px; margin: 0 5px 0 2px; border-radius: 999px;
  background: var(--acento); color: #0a0e18;
  font-size: 0.68rem; font-weight: 800; line-height: 1; vertical-align: 1px;
}
.punto-novedades.oculto { display: none; }
.aviso-novedades {
  margin: 10px 0 4px; padding: 10px 14px; border-radius: 8px;
  background: var(--acento-suave); border-left: 2px solid var(--acento);
  color: var(--texto); font-size: 0.88rem;
}
.aviso-novedades.oculto { display: none; }
#recuperar-cerrar { width: 100%; margin-top: 14px; }
.pista-recuperar { font-size: 0.76rem; color: var(--texto-tenue); margin: 14px 0 0; }
.link-solicitar-acceso {
  display: block; width: 100%; margin-top: 16px; padding: 0; background: none; border: none;
  color: var(--texto-tenue); font-size: 0.82rem; text-decoration: underline; cursor: pointer;
}
.link-solicitar-acceso:hover { color: var(--texto); }
#form-solicitar-acceso, #form-cambiar-password, #form-recuperar { display: flex; flex-direction: column; gap: 12px; text-align: left; }
#form-solicitar-acceso h3, #form-cambiar-password h3, #form-recuperar h3 { margin: 0 0 4px; text-align: center; }
#form-solicitar-acceso input, #form-solicitar-acceso textarea,
#form-cambiar-password input, #form-recuperar input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 0.95rem; font-family: inherit;
  border-radius: 8px; border: 1px solid var(--borde); background: var(--bg-panel-solid); color: var(--texto); resize: vertical;
}
#form-solicitar-acceso input:focus, #form-solicitar-acceso textarea:focus,
#form-cambiar-password input:focus, #form-recuperar input[type="text"]:focus { outline: none; border-color: var(--acento); }
.acciones-solicitar-acceso { display: flex; gap: 10px; margin-top: 6px; }
.acciones-solicitar-acceso button {
  flex: 1; padding: 11px; border-radius: 8px; border: 1px solid var(--acento);
  background: var(--acento-suave); color: var(--texto); font-size: 0.95rem; cursor: pointer;
}
.acciones-solicitar-acceso button:hover { background: var(--acento); }
.acciones-solicitar-acceso .btn-secundario:hover { background: transparent; }
/* Honeypot: campo real, tabulable si no se oculta bien, así que se saca de la
   vista con posición en vez de display:none (algunos bots ignoran los display
   none al rellenar formularios). Un humano nunca lo ve ni lo toca. */
.campo-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.login-marca { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.4rem; font-weight: 600; margin-bottom: 6px; }
.login-marca img { height: 34px; }
.login-sub { color: var(--texto-tenue); font-size: 0.9rem; margin: 0 0 20px; }
#form-login { display: flex; flex-direction: column; gap: 12px; }
#form-login input {
  width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 0.95rem;
  border-radius: 8px; border: 1px solid var(--borde); background: var(--bg-panel-solid); color: var(--texto);
}
#form-login input:focus { outline: none; border-color: var(--acento); }
#form-login button {
  margin-top: 4px; padding: 11px; border-radius: 8px; border: 1px solid var(--acento);
  background: var(--acento-suave); color: var(--texto); font-size: 0.95rem; cursor: pointer;
}
#form-login button:hover { background: var(--acento); }
.login-error {
  color: #ff9a9a; font-size: 0.85rem; text-align: left;
  background: rgba(255,80,80,0.1); border: 1px solid rgba(255,80,80,0.35); border-radius: 8px; padding: 8px 11px;
}
/* Faltaba esta regla (mismo patrón de bug que .form-usuario.oculto): la caja
   de error nunca se ocultaba de verdad, se veía vacía en todo login normal. */
.login-error.oculto { display: none; }
.aviso-caja p { margin: 0 0 20px; color: var(--texto); font-size: 0.95rem; line-height: 1.5; white-space: pre-line; }
#aviso-ok, #confirm-ok, #prompt-ok {
  padding: 9px 28px; border-radius: 8px; border: 1px solid var(--acento);
  background: var(--acento-suave); color: var(--texto); cursor: pointer; font-size: 0.9rem;
}
.acciones-centradas { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.btn-grande {
  padding: 14px 36px; border-radius: 10px; border: 1px solid var(--acento);
  background: var(--acento-suave); color: var(--texto); cursor: pointer; font-size: 1.05rem; font-weight: 600;
}
.btn-grande:hover { background: var(--acento); }
.botones-confirm { display: flex; gap: 10px; justify-content: center; }
.btn-secundario {
  padding: 9px 28px; border-radius: 8px; border: 1px solid var(--borde);
  background: transparent; color: var(--texto-tenue); cursor: pointer; font-size: 0.9rem;
}
.btn-secundario:hover { color: var(--texto); border-color: var(--texto-tenue); }
#prompt-input {
  width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 0.95rem; margin-bottom: 16px;
  border-radius: 8px; border: 1px solid var(--borde); background: var(--bg-panel-solid); color: var(--texto);
}
#prompt-input:focus { outline: none; border-color: var(--acento); }
#aviso-ok:hover, #confirm-ok:hover, #prompt-ok:hover { background: var(--acento); }
.barra-cuenta {
  position: fixed; bottom: 36px; left: 14px; z-index: 6;
  display: flex; gap: 8px;
}
.barra-cuenta button {
  font-size: 0.72rem; color: var(--texto-tenue); background: rgba(10,14,24,0.6);
  border: 1px solid var(--borde); border-radius: 999px; padding: 3px 11px; cursor: pointer;
}
.barra-cuenta button:hover { color: var(--texto); border-color: var(--acento-suave); }