/* ============================================================
   ESTILOS GLOBALES — Vertical Producciones
   Paleta: fondo #333333, texto #f1f1f1, acento #ffff00
   Fuente: Montserrat (Google Fonts)
   ============================================================ */

/* Importamos la fuente Montserrat desde Google */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;800&display=swap');

/* --- Reset básico: eliminamos márgenes y padding por defecto --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Variables de color: cambiando acá se cambia en toda la app --- */
:root {
  --fondo:        #333333;  /* fondo principal */
  --fondo-2:      #222222;  /* cards y paneles secundarios */
  --fondo-input:  #2a2a2a;  /* inputs y formularios */
  --borde:        #444444;  /* bordes y separadores */
  --texto:        #f1f1f1;  /* texto principal */
  --amarillo:     #ffff00;  /* acento — usar con moderación */
  --negro:        #111111;  /* texto sobre fondo amarillo */
  --verde:        #4ade80;  /* estado unlocked / éxito */
  --rojo:         #f87171;  /* errores / eliminar */
}

/* --- Estilos base del body --- */
body {
  background-color: var(--fondo);
  color: var(--texto);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  min-height: 100vh;
}

/* --- Links --- */
a {
  color: var(--texto);
  text-decoration: none;
}

a:hover {
  color: var(--amarillo);
}

/* --- Botón primario (acción principal) --- */
.btn-primario {
  background-color: var(--texto);
  color: var(--negro);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primario:hover {
  background-color: var(--amarillo);
  color: var(--negro);
}

/* --- Botón secundario (acción secundaria) --- */
.btn-secundario {
  background-color: transparent;
  color: var(--texto);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--borde);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.btn-secundario:hover {
  border-color: var(--texto);
}

/* --- Botón de peligro (eliminar) --- */
.btn-peligro {
  background-color: transparent;
  color: var(--rojo);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--rojo);
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-peligro:hover {
  background-color: var(--rojo);
  color: var(--negro);
}

/* --- Badge de estado --- */
.badge {
  display: inline-block;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
}

.badge-locked {
  background-color: var(--amarillo);
  color: var(--negro);
}

.badge-unlocked {
  background-color: var(--verde);
  color: var(--negro);
}

/* --- Card genérica --- */
.card {
  background-color: var(--fondo-2);
  border: 1px solid var(--borde);
  padding: 1.5rem;
}

/* --- Input y select --- */
input, select, textarea {
  background-color: var(--fondo-input);
  color: var(--texto);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  border: 1px solid var(--borde);
  padding: 0.6rem 0.8rem;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--texto);
}

/* --- Label de formulario --- */
label {
  display: block;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--texto);
}

/* --- Barra de progreso --- */
.progreso-barra {
  background-color: var(--fondo-input);
  border: 1px solid var(--borde);
  height: 6px;
  width: 100%;
  overflow: hidden;
}

.progreso-relleno {
  background-color: var(--amarillo);
  height: 100%;
  transition: width 0.3s ease;
}

/* --- Mensaje de error --- */
.error-msg {
  color: var(--rojo);
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

/* --- Separador horizontal --- */
hr {
  border: none;
  border-top: 1px solid var(--borde);
  margin: 1.5rem 0;
}

/* --- Utilidades de texto --- */
.texto-chico    { font-size: 0.8rem; }
.texto-mediano  { font-size: 0.95rem; }
.texto-muted    { color: #888888; }
.texto-verde    { color: var(--verde); }
.texto-rojo     { color: var(--rojo); }
.texto-amarillo { color: var(--amarillo); }
.negrita        { font-weight: 700; }
.centrado       { text-align: center; }

/* --- Tutorial de bienvenida --- */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 3000;
  display: flex;
  overflow-y: auto;
  padding: 1.5rem 1rem;
}

.tutorial-contenido {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  max-width: 520px;
  width: 100%;
  padding: 2rem 1.5rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tutorial-titulo {
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

.tutorial-lista {
  list-style: none;
  text-align: left;
  width: 100%;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.tutorial-lista li {
  font-size: 0.88rem;
  line-height: 1.55;
}

.tutorial-lista li strong {
  font-weight: 700;
}

.tutorial-whatsapp {
  font-size: 0.88rem;
  color: #aaa;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.btn-whatsapp {
  display: inline-block;
  background: #25D366;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-whatsapp:hover {
  background: #1da851;
  color: #fff;
}

/* --- Botón de ayuda fijo (esquina inferior derecha) --- */
.btn-ayuda {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--amarillo);
  color: var(--negro);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s;
  line-height: 1;
}

/* --- Grilla masonry (flex justificado, como Google Fotos) --- */
.galeria-masonry {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}

.galeria-masonry::after {
  content: '';
  flex-grow: 999999999;
}

.masonry-item {
  position: relative;
  height: var(--row-height, 220px);
  flex-grow: var(--ar, 1);
  flex-basis: calc(var(--row-height, 220px) * var(--ar, 1));
  overflow: hidden;
  cursor: pointer;
  background-color: #222;
}

.masonry-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  min-width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 1024px) {
  :root { --row-height: 200px; }
}

@media (max-width: 768px) {
  :root { --row-height: 160px; }
}

@media (max-width: 480px) {
  :root { --row-height: 120px; }
}

/* --- Marca de agua (galerías bloqueadas) --- */
.marca-agua {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 400px;
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 2;
}