/*
  styles.css — Álbum de Tadeo
  Temática: Grizzy and the Lemmings
  
  PALETA DE COLORES inspirada en la serie:
  Verde bosque profundo → fondo principal (el bosque donde vive Grizzy)
  Verde medio → elementos secundarios
  Naranja cálido → acento (el pelaje de Grizzy, los lemmings)
  Amarillo → highlights y detalles festivos
  Crema → texto sobre fondos oscuros
  
  ESTRUCTURA DEL CSS:
  1. Variables globales (Custom Properties)
  2. Reset y base
  3. Header
  4. Sección de subida
  5. Preview + stickers
  6. Feed de fotos (cards)
  7. Acciones de card (likes, comentarios, descargar)
  8. Modal de comentarios
  9. Modal de zoom
  10. Footer
  11. Animaciones
  12. Responsive (mobile first)
*/


/* ═══════════════════════════════════════════════════
   1. VARIABLES GLOBALES
   ═══════════════════════════════════════════════════
   
   Usamos CSS Custom Properties (variables) para toda la paleta.
   BENEFICIO CLAVE: Si Tadeo decide cambiar la temática a otro color,
   solo cambiás estas 10 líneas y el sitio entero se actualiza.
   Sin variables, tendrías que hacer find & replace en 300+ líneas.
*/
:root {
  /* Paleta principal */
  --color-bg:          #0d3320;   /* Verde bosque muy oscuro — fondo de página */
  --color-bg-card:     #122b1c;   /* Verde card — fondo de cada foto */
  --color-bg-surface:  #1a3d28;   /* Verde medio — superficies secundarias */
  --color-bg-input:    #0f2718;   /* Verde muy oscuro — inputs de texto */
  --color-accent:      #e8622a;   /* Naranja Grizzy — botones principales, likes activos */
  --color-accent-2:    #f5a623;   /* Amarillo cálido — detalles festivos, hover */
  --color-text:        #f0e8d8;   /* Crema — texto principal sobre fondo oscuro */
  --color-text-muted:  #8aaa95;   /* Verde grisáceo — texto secundario, placeholders */
  --color-border:      #2a5a3a;   /* Verde borde — separadores sutiles */
  --color-success:     #4caf7d;   /* Verde claro — confirmaciones */
  --color-danger:      #e05555;   /* Rojo suave — eliminar */

  /* Tipografías */
  --font-display: 'Bubblegum Sans', cursive;   /* Títulos grandes */
  --font-body:    'Nunito', sans-serif;         /* Texto general */

  /* Espaciados base (escala de 4px) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* Bordes redondeados */
  --radius-sm:   8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-full: 9999px;   /* Para elementos perfectamente ovalados */

  /* Sombras */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-btn:  0 4px 12px rgba(232, 98, 42, 0.35);

  /* Transición estándar para hover/interacciones */
  --transition: 0.2s ease;
}


/* ═══════════════════════════════════════════════════
   2. RESET Y BASE
   ═══════════════════════════════════════════════════
   
   Reset selectivo: solo reseteamos lo que sabemos que los navegadores
   manejan diferente. Un reset total (como normalize.css) es overkill
   para un proyecto de este tamaño.
*/

*, *::before, *::after {
  box-sizing: border-box;
  /*
    box-sizing: border-box → padding y border se incluyen dentro del width.
    Sin esto, un div de width:100% con padding:16px mediría 100% + 32px,
    rompiendo el layout. Este es uno de los resets más importantes.
  */
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /*
    Base de 16px para que 1rem = 16px.
    Si el usuario agrandó su fuente del sistema, nosotros también escalamos.
  */
  scroll-behavior: smooth;
  /* Scroll suave al usar anclas (#id) */
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  /*
    min-height: 100vh → el body ocupa al menos toda la pantalla.
    Si hay poco contenido, el fondo verde llena todo igualmente.
  */
  line-height: 1.6;
  /*
    line-height: 1.6 → interlineado cómodo para leer en móvil.
    Sin unidad (no px ni em) → escala proporcionalmente con el tamaño de fuente.
  */
  overflow-x: hidden;
  /*
    Previene scroll horizontal accidental que suele aparecer
    cuando hay elementos con transform o animaciones.
  */

  /* Textura sutil de "hoja" para ambientar el bosque */
  background-image: 
    radial-gradient(ellipse at 20% 20%, rgba(26, 107, 60, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(14, 55, 30, 0.5) 0%, transparent 50%);
  /*
    Dos gradientes radiales superpuestos dan profundidad al fondo.
    No es un color plano — hay zonas más claras y más oscuras, como un bosque real.
  */
}

img {
  max-width: 100%;
  /*
    Las imágenes nunca se desbordan de su contenedor.
    Regla universal que evita fotos que rompen el layout en móvil.
  */
  display: block;
  /* Elimina el espacio blanco que los navegadores añaden debajo de las imágenes inline */
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
  /*
    Los botones no heredan la fuente del body por defecto.
    Esta línea asegura consistencia tipográfica.
  */
  font-size: inherit;
}

input, textarea {
  font-family: var(--font-body);
  font-size: inherit;
  outline: none;
  /*
    outline: none → eliminamos el borde azul del sistema.
    IMPORTANTE: siempre reemplazar con un :focus style propio para accesibilidad.
  */
}

input:focus, textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  /*
    Reemplazamos el outline nativo con uno de nuestro color de acento.
    Esto es accesibilidad: los usuarios de teclado necesitan ver dónde está el foco.
  */
}


/* ═══════════════════════════════════════════════════
   3. HEADER
   ═══════════════════════════════════════════════════ */

.site-header {
  text-align: center;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  position: relative;
  /*
    position: relative → contexto de posicionamiento para los bears decorativos
    que usan position: absolute para flotar sobre el header.
  */

  /* Franja decorativa en el fondo del header */
  background: linear-gradient(
    180deg,
    rgba(26, 107, 60, 0.6) 0%,
    transparent 100%
  );
  border-bottom: 2px solid var(--color-border);
}

.header-bears {
  position: absolute;
  top: var(--space-md);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  pointer-events: none;
  /*
    pointer-events: none → los emojis decorativos no interceptan clicks.
    Si el usuario hace click donde está el emoji, el click "atraviesa" el elemento
    y llega al contenido de abajo.
  */
}

.bear-deco {
  font-size: 2rem;
  opacity: 0.4;
  /* Sutiles: decorativos pero sin competir con el título */
  animation: bearBounce 3s ease-in-out infinite;
  /*
    Animación suave de rebote para dar vida a los ositos.
    Definida en la sección 11.
  */
}

.bear-left  { animation-delay: 0s; }
.bear-right { animation-delay: 1.5s; }
/* Desfasamos 1.5s para que no reboten al mismo tiempo */

.album-title {
  font-family: var(--font-display);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.title-top {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  /*
    clamp(mínimo, preferido, máximo) → tipografía fluida.
    En pantallas pequeñas usa 1.2rem, en grandes hasta 1.8rem,
    con el valor intermedio determinado por el ancho de la ventana.
    Evita que el título se vea gigante en desktop y minúsculo en móvil.
  */
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.title-name {
  font-size: clamp(3rem, 12vw, 5.5rem);
  color: var(--color-accent-2);
  /* Sombra de texto multicapa para efecto de profundidad caricaturesco */
  text-shadow:
    3px 3px 0 var(--color-accent),
    6px 6px 0 rgba(0,0,0,0.3);
  line-height: 1;
}

.album-subtitle {
  margin-top: var(--space-sm);
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════
   4. SECCIÓN DE SUBIDA
   ═══════════════════════════════════════════════════ */

.upload-section {
  max-width: 500px;
  /*
    Limitamos el ancho máximo en desktop.
    Sin esto, la sección se estiraría a todo el ancho y se vería rara.
  */
  margin: var(--space-xl) auto;
  padding: 0 var(--space-md);
}

.upload-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 2px dashed var(--color-border);
  /*
    Borde punteado → convención visual de "zona de carga" de archivos.
    Los usuarios reconocen este patrón intuitivamente.
  */
}

.file-input-hidden {
  display: none;
  /*
    El input nativo está completamente oculto.
    Lo activamos programáticamente con fileInput.click() en JS.
    No usamos visibility: hidden porque eso mantiene el espacio físico del elemento.
    display: none lo quita completamente del flujo del documento.
  */
}

.btn-upload {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow: var(--shadow-btn);
}

.btn-upload:hover {
  background: #d4541f;   /* Naranja más oscuro al hover */
  transform: translateY(-2px);
  /*
    translateY(-2px) → el botón "sube" 2px al hover.
    Da sensación de elevación, hace el botón parecer presionable.
  */
  box-shadow: 0 6px 20px rgba(232, 98, 42, 0.5);
}

.btn-upload:active {
  transform: translateY(0);
  box-shadow: var(--shadow-btn);
  /* Al presionar, el botón vuelve a su posición original */
}

.btn-icon {
  font-size: 1.4rem;
  /* Emoji más grande que el texto para jerarquía visual */
}


/* ═══════════════════════════════════════════════════
   5. PREVIEW + STICKERS
   ═══════════════════════════════════════════════════ */

.preview-container {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.preview-wrapper {
  position: relative;
  /*
    CLAVE PARA LOS STICKERS:
    position: relative aquí crea el "contexto de posicionamiento".
    Los stickers usan position: absolute con top/left en porcentajes.
    Estos porcentajes se calculan RELATIVOS a este contenedor.
    Sin el relative acá, los stickers se posicionarían relativo al body
    y aparecerían en lugares completamente incorrectos.
  */
  border-radius: var(--radius-md);
  overflow: hidden;
  /* overflow: hidden → los stickers que salgan fuera de la foto se recortan */
  line-height: 0;
  /* line-height: 0 elimina el espacio blanco debajo del <img> */
}

.preview-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.stickers-layer {
  position: absolute;
  inset: 0;
  /*
    inset: 0 es shorthand de:
    top: 0; right: 0; bottom: 0; left: 0;
    La capa de stickers cubre exactamente toda la imagen.
  */
  pointer-events: none;
  /*
    pointer-events: none en el contenedor → los clicks "atraviesan" la capa.
    Los stickers INDIVIDUALES tienen pointer-events: all para ser interactivos.
    Esto evita que la capa invisible bloquee interacciones con la imagen de abajo.
  */
}

/* Cada sticker individual sobre la foto */
.sticker-on-photo {
  position: absolute;
  /*
    Absolute dentro del preview-wrapper (que tiene position: relative).
    top/left se setean por JS en porcentajes para que funcione a cualquier tamaño.
  */
  width: 80px;
  height: 80px;
  cursor: grab;
  pointer-events: all;
  /* Este sticker sí captura eventos aunque el contenedor padre los ignore */
  user-select: none;
  /*
    Previene que al arrastrar el sticker se "seleccione" la imagen como texto.
    Sin esto, arrastrar crearía una selección azul molesta.
  */
  touch-action: none;
  /*
    touch-action: none → le decimos al navegador que no maneje este elemento
    con gestos táctiles nativos (scroll, zoom). Nuestro JS maneja el touch.
    Necesario para que el drag funcione en móvil sin que la página scrollee.
  */
  transition: transform 0.1s ease;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
  /* Sombra suave para que el sticker "flote" visualmente sobre la foto */
}

.sticker-on-photo:active {
  cursor: grabbing;
  transform: scale(1.1);
  /* Se agranda un poco al presionar — feedback visual del drag */
}

.sticker-on-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* object-fit: contain → la imagen del sticker mantiene su proporción */
  pointer-events: none;
  /* El <img> dentro no captura eventos, solo el div padre */
}

/* Botón de eliminar que aparece en cada sticker al hover */
.sticker-delete {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: var(--color-danger);
  color: white;
  border-radius: 50%;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Arranca invisible */
  transition: opacity var(--transition);
  pointer-events: all;
  z-index: 10;
}

.sticker-on-photo:hover .sticker-delete {
  opacity: 1;
  /* Se muestra solo al hacer hover sobre el sticker */
}

/* Panel selector de stickers */
.sticker-picker {
  background: var(--color-bg-input);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
}

.sticker-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sticker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  /* flex-wrap: wrap → los stickers van a la línea siguiente si no caben */
}

/* Cada opción de sticker en el selector */
.sticker-option {
  width: 60px;
  height: 60px;
  padding: var(--space-xs);
  background: var(--color-bg-surface);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticker-option:hover {
  border-color: var(--color-accent);
  transform: scale(1.1);
}

.sticker-option img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.btn-clear-stickers {
  margin-top: var(--space-sm);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  padding: 0;
  background: none;
}

.btn-clear-stickers:hover {
  color: var(--color-danger);
}

/* Input de nombre del autor */
.author-input-wrap {
  position: relative;
}

.author-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 0.95rem;
}

.author-input::placeholder {
  color: var(--color-text-muted);
}

/* Botones de confirmar / cancelar preview */
.preview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  /*
    grid de dos columnas iguales.
    Los dos botones (Publicar / Cancelar) ocupan el mismo ancho.
  */
}

.btn-confirm {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-success);
  color: white;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.95rem;
  transition: background var(--transition), transform var(--transition);
}

.btn-confirm:hover { background: #3a9a6a; transform: translateY(-1px); }

.btn-cancel {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-input);
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid var(--color-border);
  transition: background var(--transition);
}

.btn-cancel:hover { background: var(--color-danger); color: white; }

/* Barra de progreso de subida */
.upload-progress {
  padding: var(--space-sm);
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-bg-input);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-success), var(--color-accent-2));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
  /*
    transition en width → la barra crece suavemente a medida que sube el archivo.
    Sin esta transición, la barra saltaría de 0% a 100% bruscamente.
  */
}

.progress-text {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-xs);
}


/* ═══════════════════════════════════════════════════
   6. FEED DE FOTOS
   ═══════════════════════════════════════════════════ */

.feed-section {
  max-width: 500px;
  margin: 0 auto var(--space-xl);
  padding: 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  /*
    Feed vertical tipo Instagram: una columna, gap entre cards.
    En desktop se podría convertir a grid de 2 columnas,
    pero para este tipo de álbum íntimo el feed vertical es más apropiado.
  */
}

.empty-state {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--color-text-muted);
}

.empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

/* Card de cada foto */
.photo-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  animation: cardEntrance 0.4s ease both;
  /*
    animation both → aplica el estado inicial de la animación ANTES de que
    empiece y el estado final DESPUÉS de que termine.
    Evita el "flash" de la card apareciendo antes de que empiece la animación.
  */
}

/* Info del autor arriba de la foto */
.card-header {
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.card-author {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-accent-2);
}

.card-time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Contenedor de la imagen de la card */
.card-img-wrap {
  position: relative;
  cursor: zoom-in;
  /* cursor: zoom-in → indica que al clickear se puede ver más grande */
}

.card-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.card-img-wrap:hover .card-img {
  transform: scale(1.01);
  /* Zoom sutil al hover — da sensación de interactividad */
}


/* ═══════════════════════════════════════════════════
   7. ACCIONES DE CARD (likes, comentarios, descargar, eliminar)
   ═══════════════════════════════════════════════════ */

.card-actions {
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* Botones de acción individuales */
.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition), transform var(--transition);
}

.action-btn:hover {
  color: var(--color-text);
  background: rgba(255,255,255,0.05);
}

.action-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  /* flex-shrink: 0 → el ícono no se achica si el texto es largo */
  transition: transform 0.15s ease;
}

/* Like activo → el corazón se pone rojo y el texto cambia */
.action-btn.liked {
  color: #e05555;
}

.action-btn.liked svg {
  fill: #e05555;
  stroke: #e05555;
}

.action-btn.liked:hover svg {
  transform: scale(1.2);
  /* El corazón crece al hover cuando ya está activo */
}

/* Animación del "pop" al dar like */
@keyframes likePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.action-btn.like-animate svg {
  animation: likePop 0.3s ease;
}

/* Botón de eliminar — va a la derecha */
.btn-delete-card {
  margin-left: auto;
  /* margin-left: auto → empuja el botón de eliminar al extremo derecho */
  color: var(--color-text-muted);
  font-size: 1rem;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  opacity: 0;
  /*
    Arranca invisible. Solo se ve al hacer hover sobre la card.
    Previene eliminaciones accidentales — mismo patrón que iOS.
  */
  transition: opacity var(--transition), color var(--transition);
}

.photo-card:hover .btn-delete-card {
  opacity: 1;
}

.btn-delete-card:hover {
  color: var(--color-danger);
  background: rgba(224, 85, 85, 0.1);
}

/* Preview de comentarios debajo de las acciones */
.card-comments-preview {
  padding: 0 var(--space-md) var(--space-sm);
}

.comments-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  cursor: pointer;
  font-weight: 600;
}

.comments-count:hover {
  color: var(--color-text);
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════
   8. MODAL DE COMENTARIOS
   ═══════════════════════════════════════════════════ */

/* ── Sistema de visibilidad de modales ──────────────────────────
   Usamos clases .is-open en lugar del atributo [hidden] de HTML.
   El atributo hidden fuerza display:none y al quitarlo algunos navegadores
   móviles no respetan el display:flex que necesitan estos elementos.
   Con opacity + pointer-events controlamos visibilidad sin tocar display.
*/

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

.modal-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  z-index: 101;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: opacity 0.25s ease, transform 0.3s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.modal-content {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  /*
    Solo los dos bordes superiores son redondeados.
    Los inferiores van pegados al borde de la pantalla (0 radio).
  */
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-height: 85vh;
  overflow-y: auto;
  /*
    overflow-y: auto → scroll vertical si los comentarios no entran.
    El modal tiene altura máxima y el contenido scrollea adentro.
  */
  animation: slideUp 0.3s ease;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-accent-2);
}

.btn-close-modal {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-input);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background var(--transition), color var(--transition);
}

.btn-close-modal:hover {
  background: var(--color-danger);
  color: white;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 40vh;
  overflow-y: auto;
  /* El listado de comentarios tiene su propio scroll interno */
}

/* Item individual de comentario */
.comment-item {
  background: var(--color-bg-input);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  animation: fadeIn 0.2s ease;
}

.comment-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.comment-item-author {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-accent-2);
}

.comment-item-time {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.comment-item-text {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.5;
}

/* Formulario de nuevo comentario */
.comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.comment-input {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  width: 100%;
  resize: none;
  /* resize: none → el textarea no se puede redimensionar manualmente */
}

.comment-input::placeholder {
  color: var(--color-text-muted);
}

.btn-send-comment {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.95rem;
  transition: background var(--transition), transform var(--transition);
}

.btn-send-comment:hover {
  background: #d4541f;
  transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════
   9. MODAL DE ZOOM
   ═══════════════════════════════════════════════════ */

.zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.zoom-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.zoom-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
}

.btn-close-zoom {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.15);
  color: white;
  border-radius: 50%;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.btn-close-zoom:hover {
  background: var(--color-danger);
}


/* ═══════════════════════════════════════════════════
   10. FOOTER
   ═══════════════════════════════════════════════════ */

.site-footer {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-xl);
}

.footer-text {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  /*
    Fuente chica y color muted: discreto, no compite con el álbum.
  */
}

.footer-link {
  color: var(--color-accent-2);
  text-decoration: none;
  font-weight: 700;
  transition: color var(--transition);
}

.footer-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════
   11. ANIMACIONES
   ═══════════════════════════════════════════════════ */

@keyframes bearBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
  /* Los ositos suben 8px y bajan suavemente en loop */
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(20px);
    /*
      Las cards aparecen deslizándose desde abajo.
      Da sensación de "llegada" de cada foto nueva.
    */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    /* El modal empieza completamente fuera de pantalla (abajo) */
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  /* Pulsación para el indicador de "en vivo" */
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

/* Indicador visual de "en vivo" (Firebase conectado) */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--color-success);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--space-xs);
}

.live-dot {
  width: 7px;
  height: 7px;
  background: var(--color-success);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════
   
   Filosofía mobile-first: el CSS base ya está pensado para móvil.
   Los breakpoints AGREGAN estilos para pantallas más grandes.
   No los sobreescriben.
*/

/* Tablet y desktop (768px+) */
@media (min-width: 768px) {

  .upload-section,
  .feed-section {
    max-width: 600px;
    /* Un poco más de ancho en tablet */
  }

  .modal-overlay {
    /* En desktop, el modal es centrado en lugar de bottom sheet */
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 500px;
    max-height: 80vh;
  }

  .modal-content {
    border-radius: var(--radius-lg);
    /* En desktop todos los bordes son redondeados */
    animation: fadeIn 0.2s ease;
    /* Reemplazamos slideUp por fadeIn en desktop (más apropiado) */
  }

  .btn-delete-card {
    /* En desktop el botón de eliminar siempre es visible (no hay hover en touch) */
    opacity: 0.5;
  }
}

/* Desktop grande (1024px+) */
@media (min-width: 1024px) {
  .feed-section {
    max-width: 500px;
    /* Mantenemos el feed angosto incluso en desktop */
    /* Los álbumes de fotos se ven mejor en columna única */
  }
}