@font-face{
  font-family: fotomaton;
  src: url("fonts/fuente.ttf");
}

body{
  margin:0;
  font-family: fotomaton, sans-serif;
}

/* ===================== */
/* INICIO */
/* ===================== */

.start-page{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#bccbdd;
}

#startButton{
  text-align:center;
  cursor:pointer;
}

.back-button {
    position: relative; /* O absolute si lo tienes así */
    z-index: 999999 !important; /* El número más alto posible */
    cursor: pointer;
    pointer-events: auto; /* Asegura que recibe el clic */
}

/* Asegura que el contenedor del menú no tape el botón */
.menu-box {
    position: relative;
    z-index: 10;
}
.start-img{
  width:600px;
  max-width:90vw;
  height:auto;
  display:block;
}

.start-text{
  text-align:center;
  animation:blink 2s infinite;
}
.fotomaton-container {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 400px; /* 👈 prueba con este valor */
}

#fotomaton {
  width: 1000px;       /* 👈 tamaño base */
  max-width: 80%;     /* 👈 adaptable en móvil */
  height: auto;
  display: block;
}
.texto-encima {
  position: absolute;
  top: 50%;   /* antes 70%, ahora centrado real */
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 2rem;
  text-align: center;
  animation: parpadeo 1s infinite;
}

@keyframes parpadeo {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ===================== */
/* MENU */
/* ===================== */

.bg{
  position:fixed;
  inset:0;
  background-image:url("img/fondo2.png");
  background-size:cover;
  background-position:center;
  z-index:-1;
}

.frame{
  display:flex;
  justify-content:center;
  margin-top:40px;
}

.panel{
  width:500px;
  max-width:90vw;
  height:auto;
  display:block;
}

.content{
  text-align:center;
  margin-top:20px;
}

.menu{
  display:flex;
  justify-content:center;
  gap:20px;
}

.category img{
  width:120px;
  display:block;
}

.fade-out {
  animation: fadeOut 0.6s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

.menu-screen {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 🔥 clave */
  padding-top: 65px; /* altura de tu imagen */
}

.menu-box {
  width: 650px;
  max-width: 90vw;
  /* Eliminamos el height: 500px fijo */
  min-height: 400px;
  height: auto; 
  background: #141310;
  border: 3px solid #d6cdc3;
  color: #d6cdc3;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 100px auto 40px auto; /* Centrado y con margen abajo */
  padding: 20px;
}

/* Añade esto para que el contenido no flote raro */
#menuContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.menu-box {
  margin-top: 100px;
}
.menu-box h2{
  margin-bottom:20px;
}

.menu-options{
  display:flex;
  justify-content:center;
  gap:40px;
}

.option{
  cursor:pointer;
  text-align:center;
}

.option img{
  width:180px;
  border-radius:10px;
  transition:transform 0.2s;
}

.option img:hover{
  transform:scale(1.05);
}
.frame-view{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
}

.frame-preview{
  max-width:80%;
  max-height:350px;
  object-fit:contain;
}

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:40px;
  cursor:pointer;
  color:#d6cdc3;
  user-select:none;
}

.arrow.left{
  left:10px;
}

.arrow.right{
  right:10px;
}

.arrow:hover{
  opacity:0.7;
}

.image-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.frame-preview{
  max-width:80%;
  max-height:350px;
  object-fit:contain;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* animación salida */
.fade-out-img{
  opacity:0;
  transform:translateX(-20px);
}

/* animación entrada */
.fade-in-img{
  opacity:1;
  transform:translateX(0);
}

.menu-box{
  width:650px;
  height:500px;
  background:#141310;
  border:3px solid #d6cdc3;
  color:#d6cdc3;

  display:flex;
  flex-direction:column;
  align-items:center;

  padding-top:20px;
}

/* zona central flexible */
#menuContent{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;

  margin-bottom: 40px; /* sube visualmente sin romper el botón */
}

.bottom-bar{
  width:100%;
  display:flex;
  justify-content:center;
  padding-bottom:20px;
}

/* flechas + imagen */
.frame-view{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
}

.frame-preview{
  max-width:80%;
  max-height:350px;
  object-fit:contain;
}

/* barra inferior fija */
.bottom-bar{
  width:100%;
  display:flex;
  justify-content:center;
  padding-bottom:20px;
}

/* botón volver */
.back-button{
  padding:10px 40px;
  border:2px solid #d6cdc3;
  background:#d6cdc3;
  color:#141310;
  cursor:pointer;
}

.back-button:hover{
  opacity:0.8;
}

.back-button {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.menu-box {
  position: relative;
}

.city-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;

  margin-top: 0px; /* 🔼 sube el bloque */
}

.back-like-button {
  min-width: 170px;
  padding: 14px 22px;
  border: 3px solid white;
  color: white;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: 0.2s;
}

.back-like-button:hover {
  transform: scale(1.05);
}

.deco-fixed {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: 423px; /* 🔥 AÑADE ESTO */
}

.frame-preview {
  cursor: pointer;
}
.filtros {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.btn-simple {
  padding:10px 40px;
  border:2px solid #d6cdc3;
  background:#d6cdc3;
  color:#141310;
  cursor:pointer;
  transition:0.2s;
}

.btn-simple:hover {
  opacity:0.8;
}
.filtro-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.filtro-item img {
  width: 90px;
}

.filtro-item p {
  margin-top: 5px;
  font-size: 12px;
}
.filtros img {
  width: 150px;   /* ajusta a tu gusto (80–120 suele ir bien) */
  height: auto;
  cursor: pointer;
}

.filtros img:hover {
  transform: scale(1.1);
}


.camara-container {
  position: relative;
  width: 100%;
  max-width: 400px; /* ajusta a tu diseño */
  margin: auto;
  overflow: hidden;
}

.camara-container video {
  width: 100%;
  height: auto;
  display: block;
}

#contador {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: white;
  font-weight: bold;
  text-shadow: 0 0 10px black;
}

#flash {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

#mensajeUI {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background: rgba(0,0,0,0.6);
  padding: 8px 15px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
}

#startFotos {
  display: block;
  margin: 15px auto;
}

.fin .btn-volver {
  display: none;
}

.back-button,
.camera-button,
.upload-button {
  padding:10px 40px;
  border:2px solid #d6cdc3;
  background:#d6cdc3;
  color:#141310;
  cursor:pointer;
  transition:0.2s;
}

.back-button:hover,
.camera-button:hover,
.upload-button:hover {
  opacity:0.8;
}

#camaraBtn,
#uploadBtn,
.back-like-button,
#startFotos,
#btnImprimir {
  padding:10px 40px;
  border:2px solid #d6cdc3;
  background:#d6cdc3;
  color:#141310;
  cursor:pointer;
  transition:0.2s;
}

#camaraBtn:hover,
#uploadBtn:hover,
.back-like-button:hover,
#startFotos:hover,
#btnImprimir:hover {
  opacity:0.8;
}


/* Clase para limpiar la caja negra en el paso final */
.printing-mode {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 50px !important; /* Ajusta según la altura de tu logo Deco */
}

/* Contenedor de la tira para que parezca que sale de arriba */
.tira-impresa img {
    max-height: 70vh !important;
    max-width: 90vw !important; /* Evita que se salga por los lados en móvil */
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}


@keyframes slideDown {
    from { transform: translateY(-100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.final-buttons {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.tira-impresa img {
  max-height: 60vh !important; /* Limita la altura al 60% de la pantalla */
  width: auto !important;
  object-fit: contain;
}

.tira-impresa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* Contenedor principal para que nada se desborde */
#app-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}

/* El canvas de previsualización debe ser flexible */
canvas {
    width: 100% !important; /* Se adapta al ancho del móvil */
    height: auto !important;
    display: block;
    border-radius: 8px;
}

#camera-container {
    width: 100%;
    max-width: 465px; /* Para que coincida con el ancho de tu recorte */
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
}

#video-feed {
    width: 100%;
    height: auto;
    object-fit: cover; /* Para que la cámara rellene el contenedor */
}

/* Solo para móviles */
@media (max-width: 480px) {

  /* 1. INICIO (Mantenemos tus 400px) */
  .fotomaton-container {
    margin-top: 4px !important;
  }
  #fotomaton {
    width: 1000px !important;
    max-width: 90% !important;
  }

  /* 2. CAJA NEGRA */
 .menu-box {
    margin: 100px 10px !important; /* 10px de margen a los lados */
    width: calc(100% - 20px) !important; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Sube el contenido al inicio */
    padding-top: 30px !important; /* Controla qué tan arriba quieres que empiece */
  }

  /* 3. PRIMER MENÚ (Tour y Disco) - UNO AL LADO DEL OTRO */
  /* Usamos flex-row para que salgan en horizontal */
  .menu-options {
    display: flex !important;
    flex-direction: row !important; 
    justify-content: center !important;
    gap: 15px !important;
    flex-wrap: nowrap !important; /* Evita que se bajen */
  }

  .category img, .option[onclick*="seleccionarTipo"] img {
    width: 130px !important; /* Ajustado para que quepan dos juntos */
    height: auto !important;
  }

  /* 4. CIUDADES Y FILTROS - EN VERTICAL (Para que no se salgan) */
  /* Forzamos vertical solo cuando son ciudades o filtros */
  .filtros {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Tamaño de filtros (GRANDES) */
  .filtros img, .filtro-item img {
    width: 80px !important;
  }
  .eleccion {
    display: flex !important;
    flex-direction: column !important; /* Uno encima de otro para que sea más fácil pulsar */
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 0 10px !important;
  }

  /* 1. Contenedor de ciudades: Grid de 2 columnas para ahorrar espacio vertical */
 .city-menu {
    display: flex !important;
    flex-wrap: wrap !important; /* Permite que los botones bajen de fila */
    justify-content: center !important; /* ¡CENTRA TODO! Incluida la última ciudad */
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }

  /* 5. Los botones de ciudad: quitamos anchos fijos */
 .city-button {
    /* Calculamos el 50% menos el gap para que quepan 2 por fila */
    flex: 0 1 calc(50% - 10px) !important; 
    min-width: 120px !important; /* Evita que se encojan demasiado */
    
    padding: 12px 5px !important;
    font-size: 1.2rem !important;
    text-align: center;
    box-sizing: border-box !important;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Si solo hay uno en la última fila, se centrará gracias al justify-content del padre */
  }

  /* 3. Asegurar que el botón volver tenga su sitio */
  #backButton {
    position: relative; /* O fixed si quieres que siempre esté visible abajo */
    z-index: 100;
    margin-top: 10px;
  }
}
  
@media (max-width: 480px) {
  /* 1. Subimos todo el contenedor de la cámara */
  #cameraWrapper {
    justify-content: flex-start !important; /* En lugar de center, para que empiece arriba */
    padding-top: 10px !important;
    min-height: auto !important; /* Quitamos el min-height que lo empujaba hacia abajo */
  }

  /* 2. Reducimos el espacio encima del botón EMPEZAR */
#cameraWrapper {
    padding-top: 0 !important;
    margin-top: -10px !important; /* Margen negativo para forzar la subida */
  }
  /* 3. El cuadro de la cámara (camZone) */
  #camZone {
    width: 95% !important; /* Un poco más ancho para que se vea mejor */
    max-width: 320px !important; /* Pero que no se pase */
    margin: 0 auto !important; /* Centrado horizontal total */
    aspect-ratio: 4/3 !important; /* Proporción de cámara clásica */
    box-shadow: 0 0 20px rgba(0,0,0,0.3) !important;
  }

  /* 4. Subir el texto de "Prepárate" */
  #infoText {
    margin-top: 10px !important;
    font-size: 0.75rem !important;
  }

  /* 5. Asegurar que el título de la página no ocupe espacio si está oculto */
  #menuTitle {
    margin-bottom: 5px !important;
  }
}




  /* 5. BOTÓN VOLVER */
  .back-button {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 10px 40px !important;
    font-size: 14px !important;
  }


/* --- ESTILOS DE LA RANURA DE IMPRESIÓN --- */
.boca-impresora {
  position: relative;
  width: auto; /* Se ajustará al ancho de la tira */
  max-width: 90%;
  margin: 0 auto;
  padding: 10px; /* Espacio para que respire */
  background: #1a1a1a; /* Un gris muy oscuro, casi negro */
  border-radius: 8px; /* Bordes suaves */
  
  /* Sombra interna para dar profundidad a la ranura */
  box-shadow: 
    inset 0 4px 6px rgba(0,0,0,0.7), /* Profundidad arriba */
    inset 0 -2px 3px rgba(255,255,255,0.1), /* Ligero brillo abajo */
    0 10px 20px rgba(0,0,0,0.5); /* Sombra externa de la caja */
    
  border: 1px solid #2a2a2a;
  overflow: hidden; /* Vital: para que la tira "salga" de dentro */
  line-height: 0;
}

/* El hueco real por donde sale el papel */
.ranura-papel {
  position: relative;
  width: 100%;
  height: 8px; /* Grosor de la ranura */
  background: #000; /* Negro absoluto por dentro */
  border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,1);
  z-index: 2; /* Por encima de la tira cuando empieza a salir */
}

/* --- ANIMACIÓN ACTUALIZADA DE LA TIRA --- */
@keyframes imprimirTiraPro {
  0% { 
    transform: translateY(-100%); /* Empieza totalmente escondida arriba */
    clip-path: inset(0 0 100% 0); /* Y recortada al 100% */
  }
  10% {
    transform: translateY(-90%); /* Los primeros mm salen despacio */
    clip-path: inset(0 0 90% 0);
  }
  100% { 
    transform: translateY(0%); /* Termina en su sitio */
    clip-path: inset(0 0 0% 0); /* Totalmente visible */
  }
}

.animacion-imprimir-pro {
  animation: imprimirTiraPro 5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; /* 5 segundos, más realista */
  will-change: transform, clip-path;
  z-index: 1; /* Por debajo de la ranura física */
}

/* --- ANIMACIÓN DE BOTONES (Igual que antes pero ajustada a 5s) --- */
.botones-finales {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
  animation-delay: 5.3s; /* Aparecen tras la impresión */
}

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