:root {
  --bg-dark: #0a0a0f;
  --bg-card: #14141f;
  --bg-card-hover: #1a1a2a;
  --accent: #ff6b35;
  --accent-glow: #ff8c42;
  --blue: #3b82f6;
  --purple: #8b5cf6;
  --text: #f0f0f5;
  --text-muted: #a0a0b0;
  --border: #2a2a3a;
  --success: #22c55e;
  --radius: 12px;
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Utilidad genérica: garantiza que CUALQUIER elemento con class="hidden"
   quede realmente oculto, sin depender de que exista una regla específica
   tipo ".x.hidden" para su tipo de elemento (antes solo existían variantes
   sueltas por componente, así que un elemento nuevo con "hidden" podía
   quedarse visible por descuido, como le pasó al botón de Admin). */
.hidden {
  display: none !important;
}

html {
  /* Red de seguridad general: ningún elemento suelto (texto largo sin
     espacios, una tabla ancha, etc.) puede provocar scroll horizontal de
     toda la página. Los contenidos que sí necesitan desplazarse en
     horizontal (tablas de admin, la tira de fotos destacadas...) lo hacen
     dentro de su propio contenedor con overflow-x, no en el body entero. */
  overflow-x: hidden;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-dark);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
}

/* Texto generado por usuarios (bios, descripciones, mensajes del foro...)
   puede incluir palabras o enlaces muy largos sin espacios — sin esto,
   podían desbordar su tarjeta/contenedor y forzar scroll horizontal. */
p, textarea, .card p, .comment, .forum-thread-body, .forum-thread-resumen,
.viewer-descripcion, .bio, .notif-item {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Header */
.header {
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  width: 120px;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 0 40px rgba(255, 107, 53, 0.35);
  border: 1px solid rgba(255, 140, 66, 0.25);
}

.brand h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  background: linear-gradient(90deg, #fff 0%, #ff8c42 50%, #ff6b35 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
}

.tagline {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 3px;
  margin-top: 4px;
}

.nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.nav-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.nav-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.nav-btn.active {
  background: linear-gradient(135deg, var(--accent), #e55a2b);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
}

/* ---- Menú hamburguesa (solo móvil) ----
   El botón está oculto por defecto (tablet/PC muestran el <nav> completo,
   siempre visible); a partir de 767px hacia abajo se muestra el botón y el
   propio <nav> pasa a ser un panel desplegable oculto por defecto. No hay
   ningún menú duplicado: es el mismo <nav id="main-nav"> en los dos casos,
   solo cambia cómo se presenta según el ancho de pantalla. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hasta 1023px (móvil Y tablet, ambos en vertical y horizontal): con 5-6
   botones + cuenta + notificaciones, una sola fila de menú no cabe con
   holgura hasta bien entrado el ancho de un portátil — probado en vivo a
   768px y 900px, donde la fila se rompía en líneas desiguales. Un
   hamburguesa limpio es la adaptación "a tablet" que pide el encargo, no
   una fila apretada que se parte mal. A partir de 1024px (portátil/PC) se
   comprobó que la fila completa cabe perfectamente y se muestra siempre. */
@media (max-width: 1023px) {
  .nav-toggle { display: flex; }
  .nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  /* Botones a ancho completo y más altos: objetivo táctil cómodo con el dedo */
  .nav .nav-btn {
    width: 100%;
    padding: 13px 16px;
    font-size: 1rem;
    text-align: center;
  }
}
/* Solo en el layout de cabecera apilada en columna (móvil, <768px): separa
   el botón hamburguesa al extremo derecho de la fila del logo. En tablet
   (768-1023px) la cabecera ya es una fila (logo | cuenta+notif+hamburguesa)
   gracias a la regla existente de más abajo, así que no hace falta. */
@media (max-width: 767px) {
  .logo-container { width: 100%; justify-content: space-between; }
}

/* Sections */
.section {
  display: none;
  animation: fadeIn 0.3s ease;
}

.section.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.section-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #e55a2b);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

.btn-secondary:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.btn-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

.btn-close:hover {
  color: var(--accent);
}

/* Forms */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.form-card.hidden {
  display: none;
}

.form-card h3 {
  margin-bottom: 16px;
  font-size: 1.2rem;
}

.form-card input,
.form-card textarea {
  width: 100%;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.form-card input:focus,
.form-card textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Preferencias de notificaciones (Mi cuenta → Configuración → Notificaciones) */
.notif-pref-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  cursor: pointer;
}

.notif-pref-row:last-of-type {
  border-bottom: none;
}

.notif-pref-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}

/* Tabla sencilla para el panel de administración (cola de emails, etc.) */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  white-space: nowrap;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.admin-table th {
  color: var(--text-muted);
  font-weight: 600;
}

/* Controles "‹ Anterior | 1 2 3 | Siguiente ›" de las secciones paginadas
   del panel admin. En móvil se ajustan para no desbordar la pantalla:
   los números se envuelven en varias líneas si hace falta, y el texto de
   los botones de extremo se puede quedar en solo el símbolo. */
.admin-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 14px 0 8px;
}
.admin-pagination .btn-sm {
  min-width: 34px;
  padding: 6px 10px;
}
.admin-pagination .btn-sm.active {
  background: var(--accent, #ff6b35);
  color: #fff;
  border-color: var(--accent, #ff6b35);
}
.admin-pagination .btn-sm:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (max-width: 480px) {
  .admin-pagination { gap: 4px; }
  .admin-pagination .btn-sm { min-width: 30px; padding: 5px 8px; font-size: 0.8rem; }
}

/* Pestañas de categoría en "Mis fotografías" del perfil */
.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.gallery-tab-btn {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--text-main, #fff);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}
.gallery-tab-btn.active {
  background: var(--accent, #ff6b35);
  border-color: var(--accent, #ff6b35);
  color: #fff;
}

/* Cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: all 0.25s;
  box-shadow: var(--shadow);
}

.card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 107, 53, 0.3);
  transform: translateY(-2px);
}

.card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--accent-glow);
}

.card .meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.card-media {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
  display: block;
}

.card-source {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.card-source a {
  color: var(--accent-glow);
  text-decoration: underline;
}

.field-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 4px 0 6px;
}

.card .comments,
.comments {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 8px;
}

.comment {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--accent);
}

.comment strong {
  color: var(--text);
}

.add-comment {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.add-comment input {
  flex: 1;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.85rem;
}

.add-comment button {
  background: var(--blue);
  border: none;
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}

/* Chat */
.chat-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) {
  .chat-layout { grid-template-columns: 1fr; }
}
.chat-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 16px;
}
@media (max-width: 860px) {
  .chat-sidebar { position: static; }
}
.chat-main { min-width: 0; }

.chat-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  height: 500px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
}

.message.own {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent), #e55a2b);
  color: white;
  border-bottom-right-radius: 4px;
}

.message.other {
  align-self: flex-start;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.message .author {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 2px;
  opacity: 0.85;
}

.message .time {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 4px;
  text-align: right;
}

/* Cita del mensaje al que se está respondiendo, dentro de la burbuja */
.chat-reply-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.78rem;
  padding: 4px 8px;
  margin-bottom: 6px;
  border-left: 3px solid currentColor;
  opacity: 0.8;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.12);
}
.chat-reply-quote .author { font-weight: 600; }

/* Acciones (Responder / Editar) bajo cada mensaje: discretas, aparecen al pasar el ratón */
.chat-msg-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.message:hover .chat-msg-actions,
.message:focus-within .chat-msg-actions { opacity: 1; }
.chat-msg-responder,
.chat-msg-editar {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  color: inherit;
  opacity: 0.8;
  padding: 0;
}
.chat-msg-responder:hover,
.chat-msg-editar:hover { opacity: 1; text-decoration: underline; }

/* Aviso "Respondiendo a…" sobre el campo de escribir */
.chat-reply-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--bg-dark);
  border-top: 1px solid var(--border);
}
.chat-reply-banner strong { color: var(--text); }
.chat-reply-banner button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.chat-reply-banner button:hover { color: var(--text); }

/* Edición en línea de un mensaje propio */
.chat-edit-textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: inherit;
  font: inherit;
  padding: 6px 8px;
}
.chat-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.chat-input-area {
  display: flex;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-dark);
}

.chat-input-area input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 0.95rem;
}

.chat-input-area input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Users */
.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.user-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: var(--shadow);
}

.user-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(255, 107, 53, 0.2);
}

.user-card .avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  overflow: hidden;
  color: white;
}

.user-card h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.user-card .especialidad {
  color: var(--accent-glow);
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.user-card .photos-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* User Detail */
.user-detail {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-top: 24px;
  box-shadow: var(--shadow);
}

.user-detail.hidden {
  display: none;
}

.user-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.user-header .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img,
.user-card .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.avatar-edit-btn {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-card);
  color: white;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-edit-btn.hidden { display: none; }

.user-header h3 {
  font-size: 1.4rem;
}

.user-header .bio {
  color: var(--text-muted);
  margin-top: 6px;
  font-size: 0.95rem;
}

.upload-section {
  background: var(--bg-dark);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.upload-section h4 {
  margin-bottom: 8px;
  color: var(--accent-glow);
}

.upload-section .hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Los campos de texto sueltos (título, descripción) no tenían ancho
   definido y usaban el tamaño por defecto del navegador (~170px) en vez
   de ocupar todo el ancho disponible, como sí hacen los mismos campos en
   .form-card — muy visible y feo en pantallas de móvil estrechas. */
.upload-section input[type="text"],
.upload-section textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.upload-section input[type="text"]:focus,
.upload-section textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Autocompletado de @usuario al escribir la descripción */
.mention-input-wrap { position: relative; }
.mention-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin-top: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow-y: auto;
}
.mention-suggestions.hidden { display: none; }
.mention-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 12px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
}
.mention-suggestion:hover,
.mention-suggestion.active { background: var(--bg-card-hover); }
.mention-suggestion .avatar-mini {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
}
.mention-suggestion .avatar-mini img { width: 100%; height: 100%; object-fit: cover; }

.file-input {
  width: 100%;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  margin-bottom: 12px;
}

.exif-preview {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.exif-preview.hidden {
  display: none;
}

.exif-preview h5 {
  color: var(--accent);
  margin-bottom: 10px;
}

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

.exif-item {
  background: var(--bg-dark);
  padding: 8px 10px;
  border-radius: 6px;
}

.exif-item span {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.exif-item strong {
  font-size: 0.9rem;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
/* minmax(200px,1fr) ya deja 1 fila por foto en la mayoría de móviles
   (~360-430px de ancho: apenas cabe una columna de 200px). Se fuerza a 2
   columnas explícitamente, que es lo que se pidió ("una o dos fotografías
   por fila según el tamaño") — con un mínimo aún más pequeño solo cuando
   la pantalla es realmente estrecha. */
@media (max-width: 640px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 320px) {
  .gallery { grid-template-columns: 1fr; }
}

/* Fila horizontal con desplazamiento (Nuevas, Destacadas, Populares, Toda
   la galería, y cada grupo dentro de "Todos los grupos"): una sola fila,
   nunca varias, con gesto táctil en móvil/tablet, rueda del ratón y
   arrastre con el ratón en PC. El desplazamiento afecta solo a esta fila,
   nunca a la página entera (overflow-x vive aquí, no en el body). */
.photo-row-wrap {
  position: relative;
}
.photo-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: thin;
}
.photo-row.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.photo-row::-webkit-scrollbar {
  height: 6px;
}
.photo-row::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 53, 0.4);
  border-radius: 4px;
}
.photo-row .photo-card,
.photo-row .featured-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .photo-row .photo-card,
  .photo-row .featured-card { flex-basis: 200px; }
}
@media (max-width: 640px) {
  .photo-row .photo-card,
  .photo-row .featured-card { flex-basis: 78vw; max-width: 320px; }
  .photo-row { gap: 12px; }
}

.photo-row-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(18, 18, 24, 0.9);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.photo-row-arrow.left { left: -4px; }
.photo-row-arrow.right { right: -4px; }
.photo-row-arrow.hidden { display: none; }
.photo-row-arrow:hover { background: var(--accent, #ff6b35); }
/* En tablet/móvil el gesto táctil ya cubre el desplazamiento; las flechas
   solo tienen sentido con ratón (PC). */
@media (max-width: 900px) {
  .photo-row-arrow { display: none !important; }
}

.photo-card {
  background: var(--bg-dark);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

.photo-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.photo-card .photo-info {
  padding: 12px;
  font-size: 0.8rem;
}

.photo-card .photo-info .exif-mini {
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* Footer */
.footer {
  text-align: center;
  padding: 32px 0;
  margin-top: 40px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 600px) {
  .logo {
    width: 90px;
  }
  .brand h1 {
    font-size: 1.6rem;
  }
  .user-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .chat-container {
    height: 400px;
  }
}

/* Header right & Auth */
.header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.auth-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.9rem;
}

.user-badge .dot {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.modal.hidden { display: none; }

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 400px;
  position: relative;
  box-shadow: var(--shadow);
  /* Si el contenido es más alto que la pantalla (formularios largos, listas
     de EXIF, etc.), se desplaza dentro del propio modal en vez de
     desbordarse o quedar inalcanzable — nunca más alto que la ventana. */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

@media (max-width: 480px) {
  .modal-content { padding: 20px; }
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

.auth-tab.active {
  background: linear-gradient(135deg, var(--accent), #e55a2b);
  border-color: transparent;
  color: white;
}

.auth-form input,
.auth-form textarea {
  width: 100%;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.auth-form input:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.auth-form .hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 12px;
  text-align: center;
}

/* ---- Campo de contraseña con mostrar/ocultar ---- */
.password-field {
  position: relative;
}
.password-field input {
  padding-right: 42px !important;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 6px 8px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.pw-toggle:hover { opacity: 1; }

.auth-form .hint code {
  background: var(--bg-dark);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-glow);
}

.btn-primary.full {
  width: 100%;
  margin-top: 4px;
}

.error-msg {
  color: #f87171;
  font-size: 0.9rem;
  margin-top: 12px;
  text-align: center;
}

.error-msg.hidden { display: none; }

.success-msg {
  color: #4ade80;
  font-size: 0.9rem;
  margin-top: 12px;
  text-align: center;
}

.success-msg.hidden { display: none; }

.upload-status {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-dark);
  border-radius: 8px;
  font-size: 0.9rem;
}

.upload-status.hidden { display: none; }

.upload-status.success { border-left: 3px solid var(--success); }
.upload-status.error { border-left: 3px solid #f87171; }

.especialidad {
  color: var(--accent-glow);
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .header-right {
    flex-direction: row;
    width: auto;
    gap: 20px;
  }
}

/* Notifications */
.notif-wrap {
  position: relative;
}
.notif-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.1rem;
  position: relative;
}
.notif-btn:hover { border-color: var(--accent); }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.notif-badge.hidden { display: none; }
.notif-dropdown {
  position: absolute;
  top: 110%;
  right: 0;
  width: 320px;
  /* Nunca más ancho que la pantalla: en un teléfono estrecho, el botón de
     la campana puede no estar pegado al borde derecho real (el header se
     centra en columna en móvil), así que un ancho fijo de 320px podría
     salirse por la izquierda. calc() lo limita al ancho visible. */
  max-width: calc(100vw - 32px);
  max-height: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 100;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (max-width: 480px) {
  /* position:fixed con left+right (en vez de anclarlo al borde derecho del
     botón de la campana, que en móvil puede no estar pegado al borde de la
     pantalla porque el header se centra en columna): con left y right fijos
     el navegador calcula el ancho solo, así que SIEMPRE cabe en pantalla
     sin depender de dónde quedó la campana. El "top" lo pone app.js al
     abrirlo, midiendo la posición real del botón. */
  .notif-dropdown {
    position: fixed;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }
}
.notif-dropdown.hidden { display: none; }
.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8rem;
}
.notif-list {
  overflow-y: auto;
  max-height: 300px;
}
.notif-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: default;
}
.notif-item.unread {
  background: rgba(255, 107, 53, 0.08);
  color: var(--text);
}
.notif-item .time {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 4px;
}

/* Likes */
.like-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  margin-top: 8px;
}
.like-btn:hover { border-color: var(--accent); color: var(--text); }
.like-btn.liked {
  background: rgba(255, 107, 53, 0.15);
  border-color: var(--accent);
  color: var(--accent-glow);
}

.btn-sm {
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  margin-top: 8px;
}

.photo-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-danger {
  background: transparent;
  border: 1px solid #f87171;
  color: #f87171;
  padding: 6px 12px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 0.8rem;
}
.btn-danger:hover {
  background: rgba(248, 113, 113, 0.15);
}

/* Admin */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.stat-card .num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-glow);
}
.stat-card .label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.admin-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) {
  .admin-panels { grid-template-columns: 1fr 1fr; }
}
.admin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  gap: 8px;
}
.admin-row .meta { color: var(--text-muted); font-size: 0.8rem; }

/* ---- Aprobación de registros ---- */
.stat-card.alert {
  border-color: #f59e0b;
}
.stat-card.alert .num { color: #f59e0b; }

.admin-row.pending-row { align-items: flex-start; }
.admin-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  background: #f59e0b;
  color: #1a1200;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
}
.admin-badge.hidden { display: none; }

/* ---- Aviso de estado (visitante / pendiente de aprobación) ---- */
.status-banner {
  margin: 0 0 20px;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Accesos rápidos, iguales a los de la portada pero disponibles en toda la app */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}
.quick-action-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.quick-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent-glow);
  background: var(--bg-card-hover);
}
.status-banner.hidden { display: none; }
.status-banner.visitor {
  background: rgba(255, 140, 66, 0.1);
  border: 1px solid rgba(255, 140, 66, 0.35);
  color: var(--text);
}
.status-banner.pending {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--text);
}
.status-banner .btn-link {
  color: var(--accent-glow);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.user-badge.pending { border-color: #f59e0b; }
.user-badge.pending .dot { background: #f59e0b; }
.pending-tag {
  font-size: 0.75rem;
  color: #f59e0b;
  font-weight: 600;
}

.upload-pending-msg {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  padding: 12px 14px;
}
.upload-pending-msg.hidden { display: none; }
#upload-form-fields.hidden { display: none; }

/* ---- Registro: nombre + apellidos en la misma fila ---- */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-row-2 input { margin-bottom: 0; }
@media (max-width: 480px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* ========== FORO COMUNITARIO ========== */
.forum-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) {
  .forum-layout { grid-template-columns: 1fr; }
}

.forum-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 16px;
}
@media (max-width: 860px) {
  .forum-sidebar { position: static; }
}

.forum-sidebar-header h2 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.forum-legend {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

#btn-nuevo-hilo { margin-bottom: 18px; }

.forum-categories {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.forum-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

/* Fila de un elemento propio (categoría del foro, etc.): el botón + sus
   iconos de editar/borrar, visibles solo para quien lo creó (o el admin) */
.editable-item-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.editable-item-row .forum-cat-item { flex: 1; min-width: 0; }
.item-edit-btn,
.item-del-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 6px;
  border-radius: 6px;
  opacity: 0.65;
  transition: opacity 0.15s, background 0.15s;
}
.item-edit-btn:hover,
.item-del-btn:hover {
  opacity: 1;
  background: var(--bg-card-hover);
}
.forum-cat-item:hover { background: var(--bg-card-hover); }
.forum-cat-item.active {
  background: rgba(255, 107, 53, 0.12);
  border-color: rgba(255, 140, 66, 0.4);
  color: var(--accent-glow);
}
.forum-cat-count {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 1px 9px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.forum-main { min-width: 0; }

.forum-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}
.forum-search input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.95rem;
}
.forum-search input:focus { outline: none; border-color: var(--accent); }

.forum-recent-header { margin-bottom: 12px; }
.forum-recent-header h3 { color: var(--accent-glow); font-size: 1.1rem; }

.forum-threads {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.forum-thread-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.2s;
}
.forum-thread-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 107, 53, 0.3);
  transform: translateY(-1px);
}
.forum-thread-card h4 {
  margin: 8px 0 6px;
  font-size: 1.05rem;
  color: var(--text);
}
.forum-thread-resumen {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.forum-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
  background: rgba(255, 140, 66, 0.15);
  color: var(--accent-glow);
  border: 1px solid rgba(255, 140, 66, 0.3);
}
.forum-cat-badge.cat-anuncios { background: rgba(239, 68, 68, 0.14); color: #f87171; border-color: rgba(239, 68, 68, 0.3); }
.forum-cat-badge.cat-general { background: rgba(59, 130, 246, 0.14); color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
.forum-cat-badge.cat-tecnicas { background: rgba(139, 92, 246, 0.14); color: var(--purple); border-color: rgba(139, 92, 246, 0.3); }
.forum-cat-badge.cat-errores { background: rgba(245, 158, 11, 0.14); color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }
.forum-cat-badge.cat-critica { background: rgba(34, 197, 94, 0.14); color: var(--success); border-color: rgba(34, 197, 94, 0.3); }

/* Clasificación de una fotografía (Paisaje, Fauna, Retrato...) */
.foto-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  margin: 4px 0;
  border-radius: 50px;
  background: rgba(139, 92, 246, 0.14);
  color: var(--purple);
  border: 1px solid rgba(139, 92, 246, 0.3);
  width: fit-content;
}
.foto-cat-badge:empty,
.foto-cat-badge.hidden { display: none; }

.forum-thread-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.forum-thread-detail.hidden { display: none; }
.forum-thread-title {
  margin: 12px 0 6px;
  font-size: 1.4rem;
  color: var(--text);
}
.forum-thread-body {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 14px 0 16px;
  white-space: pre-wrap;
}

/* ========== VISOR DE FOTOS A PANTALLA COMPLETA ========== */
.photo-viewer {
  background: rgba(5, 5, 8, 0.97);
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

.viewer-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.viewer-image-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 24px;
}
#viewer-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.viewer-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  background: transparent;
  border: none;
  color: white;
  font-size: 2.5rem;
  width: 70px;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.viewer-prev { left: 0; }
.viewer-next { right: 0; }
.viewer-nav:hover { background: rgba(255, 255, 255, 0.08); }
.viewer-nav.hidden { visibility: hidden; }
@media (max-width: 700px) {
  .viewer-nav { width: 44px; font-size: 1.8rem; }
}

/* Panel lateral: título, autor, descripción, EXIF plegable */
.viewer-sidebar {
  position: relative;
  width: 340px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  padding: 28px 24px;
  overflow-y: auto;
  color: var(--text);
}
@media (max-width: 900px) {
  .viewer-body { flex-direction: column; }
  .viewer-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 40vh; }
  .viewer-image-wrap { padding: 12px; }
}
.viewer-sidebar .btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.5rem;
}
.viewer-sidebar h2 {
  font-size: 1.3rem;
  line-height: 1.35;
  margin: 4px 40px 16px 0;
}
.viewer-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.viewer-author.clickable { cursor: pointer; }
.viewer-author.clickable:hover #viewer-meta { color: var(--accent-glow); }
.viewer-author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
}
#viewer-meta {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: color 0.15s;
}
.viewer-descripcion {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-muted);
  white-space: pre-wrap;
}
.viewer-descripcion.hidden { display: none; }

.viewer-exif-panel {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.viewer-exif-panel.hidden { display: none; }
.viewer-exif-panel h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.viewer-exif-panel .exif-mini {
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Barra inferior: agrupada y centrada bajo la fotografía (no bajo toda la
   pantalla ni bajo el panel lateral), flotando sobre el borde inferior de
   la imagen. */
.viewer-toolbar {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 18px;
  background: rgba(10, 10, 14, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 999px;
  flex-wrap: wrap;
  max-width: calc(100% - 32px);
  /* Sin esto, un flex en position:absolute con flex-wrap calcula su ancho
     "auto" a partir del hijo más ancho (como si ya hubiera decidido partir
     en varias líneas) en vez de intentar caber en una sola fila primero;
     max-width sigue permitiendo que envuelva si de verdad no cabe. */
  width: max-content;
}
.viewer-toolbar-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.viewer-toolbar-btn:hover { border-color: var(--accent); color: var(--accent-glow); }

/* En móvil, "ℹ️ Info de imagen" y "🔗 Compartir" no caben con el texto: se
   deja solo el icono para que toda la barra quepa en una fila, sin tapar
   media foto. */
@media (max-width: 480px) {
  .viewer-toolbar {
    gap: 8px;
    padding: 8px 12px;
    bottom: 10px;
  }
  .viewer-toolbar .btn-label { display: none; }
  .viewer-toolbar-btn { padding: 7px 10px; }
  .viewer-star { font-size: 1rem; }
  .viewer-views { display: none; }
}

.viewer-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}
.viewer-rating-stars { display: flex; }
.viewer-star {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 1px;
  line-height: 1;
  transition: color 0.1s;
}
.viewer-star.filled,
.viewer-star.preview { color: var(--accent-glow); }
.viewer-rating-value {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-left: 2px;
}

.viewer-views {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.viewer-counter {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ========== Panel de Admin: pestañas ========== */
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.admin-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 10px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active {
  color: var(--accent-glow);
  border-bottom-color: var(--accent);
}
.admin-tab-panel.hidden { display: none; }

/* ========== LANDING (optimizado: GPU-friendly) ========== */
.landing {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text);
  /* Aísla pintado del resto de la página */
  contain: layout style paint;
}

/* Pausar animaciones cuando la portada está oculta */
.landing.hidden,
.landing.hidden * {
  animation-play-state: paused !important;
}

.landing-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.landing-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* filter estático (no animado) — más barato que animar blur */
  filter: blur(2px) brightness(0.45);
  transform: translate3d(0, 0, 0) scale(1.06);
  animation: bgKenBurns 28s linear infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
}

/* Solo transform → capa GPU */
@keyframes bgKenBurns {
  0%   { transform: translate3d(0, 0, 0) scale(1.06); }
  100% { transform: translate3d(-1.2%, 0.8%, 0) scale(1.12); }
}

.landing-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(10, 10, 15, 0.78) 0%,
    rgba(20, 12, 8, 0.55) 45%,
    rgba(10, 10, 15, 0.88) 100%
  );
  /* sin animación de opacity continua */
  pointer-events: none;
}

/* Destellos: solo transform + opacity, sin blur animado en bucle */
.landing::before,
.landing::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.landing::before {
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.5) 0%, transparent 70%);
  top: 12%;
  left: 10%;
  opacity: 0.4;
  animation: floatGlowA 14s ease-in-out infinite;
}

.landing::after {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%);
  bottom: 10%;
  right: 8%;
  opacity: 0.35;
  animation: floatGlowB 16s ease-in-out infinite;
}

@keyframes floatGlowA {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.35; }
  50%      { transform: translate3d(16px, -20px, 0); opacity: 0.5; }
}

@keyframes floatGlowB {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.3; }
  50%      { transform: translate3d(-14px, 12px, 0); opacity: 0.45; }
}

.landing-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 32px 20px 80px;
  max-width: 640px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.landing-logo {
  width: min(280px, 70vw);
  height: auto;
  border-radius: 20px;
  /* sombra estática — no animar box-shadow */
  box-shadow: 0 12px 40px rgba(255, 107, 53, 0.35);
  border: 1px solid rgba(255, 140, 66, 0.3);
  margin-bottom: 20px;
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.9);
  animation: logoReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

@keyframes logoReveal {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.landing-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  font-weight: 700;
  letter-spacing: 4px;
  /* degradado estático (sin animar background-position) */
  background: linear-gradient(90deg, #fff 0%, #ff8c42 50%, #ff6b35 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: fadeSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
  will-change: transform, opacity;
}

.landing-tagline {
  font-size: 0.9rem;
  letter-spacing: 4px;
  color: var(--text-muted);
  margin-bottom: 20px;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: fadeSlideUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
  will-change: transform, opacity;
}

.landing-lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(240, 240, 245, 0.9);
  margin-bottom: 22px;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: fadeSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
  will-change: transform, opacity;
}

@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.landing-phrases {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}

.landing-phrases span {
  background: rgba(255, 107, 53, 0.12);
  border: 1px solid rgba(255, 140, 66, 0.35);
  color: var(--accent-glow);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  cursor: pointer;
  user-select: none;
  transform: translate3d(0, 12px, 0) scale(0.96);
  animation: chipIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: transform 0.2s ease, background 0.2s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.landing-phrases span:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 2px;
}

.landing-phrases span:nth-child(1) { animation-delay: 0.9s; }
.landing-phrases span:nth-child(2) { animation-delay: 1.02s; }
.landing-phrases span:nth-child(3) { animation-delay: 1.14s; }

.landing-phrases span:hover {
  transform: translate3d(0, -2px, 0) scale(1.03);
  background: rgba(255, 107, 53, 0.2);
}

@keyframes chipIn {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.btn-hero {
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  border: none;
  font-family: inherit;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: btnIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.landing-actions .btn-hero:nth-child(1) { animation-delay: 1.25s; }
.landing-actions .btn-hero:nth-child(2) { animation-delay: 1.35s; }
.landing-actions .btn-hero:nth-child(3) { animation-delay: 1.45s; }

@keyframes btnIn {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.btn-hero.primary {
  background: linear-gradient(135deg, var(--accent), #e55a2b);
  color: white;
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.35);
}

.btn-hero.primary:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 12px 32px rgba(255, 107, 53, 0.45);
}

.btn-hero.primary:active {
  transform: translate3d(0, 0, 0);
}

.btn-hero.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
}

.btn-hero.secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent);
  transform: translate3d(0, -2px, 0);
}

.btn-hero.ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
}

.btn-hero.ghost:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Tras la entrada, liberar will-change */
.landing.is-ready .landing-logo,
.landing.is-ready .landing-title,
.landing.is-ready .landing-tagline,
.landing.is-ready .landing-lead,
.landing.is-ready .landing-phrases span,
.landing.is-ready .btn-hero {
  will-change: auto;
}

.landing-scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
  animation:
    scrollIn 0.5s ease 1.7s forwards,
    bounce 2.4s ease-in-out 2s infinite;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: border-color 0.2s, background 0.2s;
}

.landing-scroll:hover {
  border-color: var(--accent);
  background: rgba(255, 107, 53, 0.25);
}

@keyframes scrollIn {
  to { opacity: 1; }
}

@keyframes bounce {
  0%, 100% { transform: translate3d(-50%, 0, 0); }
  50%      { transform: translate3d(-50%, 8px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-bg-img,
  .landing::before,
  .landing::after,
  .landing-logo,
  .landing-title,
  .landing-tagline,
  .landing-lead,
  .landing-phrases span,
  .btn-hero,
  .landing-scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
  .landing-bg-img {
    transform: scale(1.06);
    filter: blur(2px) brightness(0.45);
  }
  .landing-scroll {
    transform: translate3d(-50%, 0, 0);
  }
}

.app.hidden { display: none; }
.landing.hidden { display: none; }

.info-modal-content {
  max-width: 520px;
}

.info-modal-content h2 {
  margin-bottom: 12px;
  color: var(--accent-glow);
}

.info-intro {
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.6;
}

.info-list {
  list-style: none;
  margin-bottom: 16px;
}

.info-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.info-list li strong {
  color: var(--text);
}

.info-list code {
  background: var(--bg-dark);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-glow);
  font-size: 0.85rem;
}

.info-closing {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.logo-container {
  cursor: pointer;
}

/* ========== Fotos destacadas ========== */
.landing-featured {
  margin-top: 36px;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: fadeSlideUp 0.7s ease 1.5s forwards;
}

.landing-featured-title {
  font-size: 1.15rem;
  color: var(--accent-glow);
  margin-bottom: 4px;
}

.landing-featured-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.featured-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.featured-track::-webkit-scrollbar {
  height: 6px;
}
.featured-track::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 53, 0.4);
  border-radius: 4px;
}

.featured-card {
  flex: 0 0 180px;
  scroll-snap-align: start;
  background: rgba(20, 20, 30, 0.85);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s;
}

.featured-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 107, 53, 0.5);
}

.featured-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  background: #111;
}

.featured-card .fc-body {
  padding: 10px;
  font-size: 0.8rem;
}

.featured-card .fc-name {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.featured-card .fc-meta {
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

/* Info discreta del ranking en cada tarjeta de "Fotografías destacadas":
   estrellas + nº de valoraciones (nunca la puntuación interna). */
.featured-card .fc-rating {
  color: var(--accent-glow);
  font-size: 0.78rem;
  margin-top: 4px;
}

/* Botón "Cargar más" de cada pestaña de Explorar */
.explorar-loadmore {
  margin-top: 20px;
}
.explorar-loadmore.hidden {
  display: none;
}

/* Explorar: Nuevas / Destacadas / Populares se apilan una debajo de otra,
   directamente visibles; Todas / Generales quedan dentro de su propio
   bloque, ocultas hasta pulsar el botón. */
.explorar-block {
  margin-bottom: 40px;
}
.explorar-block:last-child {
  margin-bottom: 0;
}
.explorar-block-header {
  margin-bottom: 16px;
}
.explorar-block-header h3 {
  font-size: 1.25rem;
  color: var(--accent-glow);
  margin-bottom: 4px;
}
.explorar-block-header .section-sub {
  margin-top: 0;
}
#explorar-tab-grupos,
#explorar-tab-galeria {
  margin-top: 16px;
}

.explorar-grupo {
  margin-bottom: 32px;
}
.explorar-grupo:last-child {
  margin-bottom: 0;
}
.explorar-grupo-titulo {
  font-size: 1.05rem;
  color: var(--accent-glow);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1));
}
.explorar-grupo-count {
  color: var(--text-muted);
  font-weight: normal;
  font-size: 0.85rem;
}
.explorar-grupo-grid {
  margin-top: 0;
}

.featured-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 12px;
  width: 100%;
  text-align: center;
}

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

.featured-grid .featured-card {
  flex: none;
}

.featured-grid .featured-card img {
  height: 180px;
}

.section-sub {
  width: 100%;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: -8px;
  margin-bottom: 8px;
}

.rank-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, var(--accent), #e55a2b);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  z-index: 1;
}

.featured-card {
  position: relative;
}