/* ==========================================================================
   ESTILOS.CSS — EL ASPECTO DE TODA LA WEB
   --------------------------------------------------------------------------
   Está pensado "mobile first": primero para celular, que es como entra
   casi todo el mundo desde el QR. Al final hay ajustes para pantallas
   grandes.

   ORDEN DEL ARCHIVO:
    1. Variables (colores, tamaños)  ← lo más fácil de cambiar
    2. Base (reglas generales)
    3. Encabezado
    4. Pestañas de categorías
    5. Carta y tarjetas de platos
    6. Botones + / − de cantidad
    7. Barra de pedido (abajo)
    8. Mayordomo flotante y burbuja
    9. Paneles que suben desde abajo
   10. Chat
   11. Panel "Mi pedido"
   12. Pantalla "Pedido enviado"
   13. Botones generales
   14. Aviso flotante y fondo oscuro
   15. Pantallas grandes (computador)
   16. Fondo de marca y botón oculto (personalizar.js)

   NOMBRES DE CLASES: se usa el estilo "bloque__parte--variante".
   Ej: .tarjeta (bloque), .tarjeta__precio (una parte de la tarjeta),
       .tarjeta--agotada (una variante de la tarjeta).
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   Cambia un color aquí y cambia en TODA la web.
   Se usan así: color: var(--color-principal);
   ========================================================================== */
:root {
  /* Colores de la marca */
  --color-principal: #C8553D;        /* terracota: botones, detalles */
  --color-principal-oscuro: #A33F2B; /* al presionar botones */
  --color-principal-suave: #FBE6DF;  /* fondos suaves */

  /* Colores de texto */
  --color-texto: #2D2A26;            /* texto principal (casi negro) */
  --color-texto-suave: #6F6A64;      /* descripciones, textos secundarios */

  /* Fondos */
  --color-fondo: #FBF7F2;            /* fondo general (crema) */
  --color-fondo-pagina: #FBF7F2;     /* fondo de la PÁGINA. personalizar.js lo cambia
                                        con el botón oculto (sección 16) */
  --color-tarjeta: #FFFFFF;          /* fondo de tarjetas y paneles */
  --color-borde: #EDE6DD;            /* líneas suaves */

  /* Colores especiales */
  --color-whatsapp: #25A35A;         /* botón de enviar por WhatsApp */
  --color-vegetariano: #3E8E4F;
  --color-picante: #D9462E;
  --color-recomendado: #B7791F;
  --color-error: #C0392B;

  /* Bordes redondeados */
  --radio-pequeno: 10px;
  --radio-mediano: 16px;
  --radio-grande: 24px;

  /* Sombras */
  --sombra-suave: 0 2px 10px rgba(45, 42, 38, 0.06);
  --sombra-media: 0 8px 24px rgba(45, 42, 38, 0.14);

  /* Ancho máximo de la web en pantallas grandes */
  --ancho-maximo: 560px;

  /* Tipografía */
  --fuente: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}


/* ==========================================================================
   2. BASE — reglas que aplican a todo
   ========================================================================== */

/* Hace que el tamaño de cada caja incluya su relleno y borde
   (evita que las cosas se "salgan" de su espacio). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;               /* letra base: buena para leer en celular */
  line-height: 1.45;
  color: var(--color-texto);
  background: var(--color-fondo-pagina);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* quita el destello azul al tocar en Android */
  padding-bottom: 110px;         /* espacio para que la barra de pedido no tape el último plato */
}

/* Cuando hay un panel abierto, la página de atrás no se mueve */
body.sin-scroll {
  overflow: hidden;
}

/* Los botones heredan la letra de la página (por defecto no lo hacen) */
button,
input,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}


/* ==========================================================================
   3. ENCABEZADO — logo + nombre del restaurante
   ========================================================================== */
.encabezado {
  display: flex;                 /* pone logo y textos uno al lado del otro */
  align-items: center;
  gap: 14px;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 22px 16px 12px;
}

/* Círculo con el emoji del logo */
.encabezado__logo {
  display: grid;
  place-items: center;           /* centra el emoji */
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  font-size: 30px;
  background: var(--color-principal-suave);
  border-radius: 50%;
}

.encabezado__logo {
  overflow: hidden;              /* que la imagen del logo no se salga del círculo */
}

/* Si se sube un logo (botón oculto), la imagen llena el círculo */
.encabezado__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.encabezado__nombre {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
}

.encabezado__eslogan {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--color-texto-suave);
}


/* ==========================================================================
   4. PESTAÑAS DE CATEGORÍAS
   Se deslizan de lado y se quedan pegadas arriba al bajar.
   ========================================================================== */
.categorias {
  position: sticky;              /* se queda pegada arriba al hacer scroll */
  top: 0;
  z-index: 10;                   /* queda por encima de las tarjetas */
  display: flex;
  gap: 8px;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 10px 16px;
  overflow-x: auto;              /* permite deslizar de lado */
  /* Fondo casi sólido + efecto vidrio, para que se note el fondo de marca */
  background: color-mix(in srgb, var(--color-fondo-pagina) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  scrollbar-width: none;         /* oculta la barra de scroll (Firefox) */
}

.categorias::-webkit-scrollbar {
  display: none;                 /* oculta la barra de scroll (Chrome, Safari) */
}

/* Cada pestaña */
.categorias__boton {
  flex-shrink: 0;                /* no se encogen: mantienen su tamaño */
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;           /* el texto no se parte en dos líneas */
  background: var(--color-tarjeta);
  border: 1.5px solid var(--color-borde);
  border-radius: 999px;          /* forma de "píldora" */
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Pestaña de la categoría que se está viendo */
.categorias__boton--activa {
  color: #FFFFFF;
  background: var(--color-principal);
  border-color: var(--color-principal);
}


/* ==========================================================================
   5. CARTA Y TARJETAS DE PLATOS
   ========================================================================== */
.carta {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 4px 16px 0;
}

/* Cada sección de categoría (ej: "Entradas" con sus platos) */
.seccion {
  padding-top: 14px;
  scroll-margin-top: 64px;       /* al saltar a una categoría, no queda tapada por las pestañas */
}

.seccion__titulo {
  margin: 8px 0 12px;
  font-size: 20px;
  font-weight: 800;
}

/* ---- Tarjeta de un plato ---- */
.tarjeta {
  display: grid;
  grid-template-columns: 64px 1fr;  /* columna 1: emoji. Columna 2: textos */
  gap: 14px;
  margin-bottom: 12px;
  padding: 14px;
  background: var(--color-tarjeta);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-suave);
}

/* Círculo con el emoji del plato */
.tarjeta__imagen {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  font-size: 34px;
  background: var(--color-fondo);
  border-radius: var(--radio-mediano);
}

.tarjeta__nombre {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.tarjeta__descripcion {
  margin: 4px 0 8px;
  font-size: 14px;
  color: var(--color-texto-suave);
}

/* Fila de abajo: el botón "Agregar" (o el contador) alineado a la derecha.
   (Antes aquí iba también el precio; por ahora no se muestra.) */
.tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;     /* empuja el botón a la derecha */
  gap: 8px;
  grid-column: 1 / -1;           /* ocupa todo el ancho de la tarjeta */
}

/* Plato agotado: se ve gris y no se puede pedir */
.tarjeta--agotada {
  opacity: 0.55;
}

.tarjeta--agotada .tarjeta__imagen {
  filter: grayscale(1);
}

/* ---- Etiquetas pequeñas (Recomendado, Vegetariano, Picante...) ---- */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.etiqueta {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
}

.etiqueta--recomendado { color: var(--color-recomendado); background: #FDF1DC; }
.etiqueta--vegetariano { color: var(--color-vegetariano); background: #E4F3E7; }
.etiqueta--picante     { color: var(--color-picante);     background: #FDE5E0; }
.etiqueta--nuevo       { color: #2B6CB0;                  background: #E3EEFA; }
.etiqueta--agotado     { color: #FFFFFF;                  background: #8A847D; }


/* ==========================================================================
   6. BOTONES DE CANTIDAD
   - "Agregar" cuando el plato no está en el pedido.
   - "−  2  +" cuando ya está.
   ========================================================================== */
.boton-agregar {
  min-height: 44px;              /* 44px: tamaño mínimo cómodo para el dedo */
  padding: 0 20px;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--color-principal);
  border: none;
  border-radius: 999px;
  transition: transform 0.1s, background 0.2s;
}

.boton-agregar:active {
  transform: scale(0.95);        /* efecto de "hundirse" al tocar */
  background: var(--color-principal-oscuro);
}

.boton-agregar:disabled {
  background: #B9B2AA;
  cursor: not-allowed;
}

/* Contenedor de "−  2  +" */
.contador {
  display: flex;
  align-items: center;
  background: var(--color-principal-suave);
  border-radius: 999px;
}

.contador__boton {
  width: 44px;
  height: 44px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-principal);
  background: transparent;
  border: none;
  border-radius: 50%;
}

.contador__boton:active {
  background: rgba(200, 85, 61, 0.15);
}

.contador__numero {
  min-width: 24px;
  font-weight: 800;
  text-align: center;
}


/* ==========================================================================
   7. BARRA DE PEDIDO (fija abajo)
   ========================================================================== */
.barra-pedido {
  position: fixed;               /* siempre en la misma parte de la pantalla */
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom)); /* respeta la "rayita" de iPhone */
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(var(--ancho-maximo) - 32px);
  margin: 0 auto;
  padding: 14px 18px;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--color-texto);
  border: none;
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-media);
  /* Escondida por defecto (abajo, fuera de la pantalla) */
  transform: translateY(150%);
  transition: transform 0.3s ease;
}

/* app.js agrega esta clase cuando hay platos en el pedido */
.barra-pedido--visible {
  transform: translateY(0);
}

/* Circulito con la cantidad de platos */
.barra-pedido__cantidad {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  font-size: 14px;
  background: var(--color-principal);
  border-radius: 999px;
}

.barra-pedido__texto {
  flex: 1;                       /* ocupa el espacio del medio */
  text-align: left;
}

/* Flechita a la derecha de la barra */
.barra-pedido__flecha {
  font-size: 20px;
}

/* Animación de "saltito" al agregar un plato */
.barra-pedido--salto {
  animation: saltito 0.35s ease;
}

@keyframes saltito {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(0) scale(1.04); }
}


/* ==========================================================================
   8. MAYORDOMO FLOTANTE + BURBUJA DE SALUDO
   ========================================================================== */
.mayordomo {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 25;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  transition: bottom 0.3s ease;
}

/* Cuando aparece la barra de pedido, el mayordomo sube para no taparla */
body.con-pedido .mayordomo {
  bottom: calc(92px + env(safe-area-inset-bottom));
}

/* Botón redondo con el dibujo */
.mayordomo__boton {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  padding: 0;
  background: none;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: var(--sombra-media);
  animation: flotar 3s ease-in-out infinite; /* se mueve suavecito para llamar la atención */
}

.mayordomo__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;             /* si es una foto subida, la recorta en círculo */
}

/* Avatar pequeño del chat cuando es una foto subida */
.chat__avatar-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Burbuja de texto del saludo */
.mayordomo__burbuja {
  position: relative;
  max-width: 220px;
  margin-bottom: 14px;
  padding: 12px 30px 12px 14px;
  font-size: 15px;
  font-weight: 700;
  background: var(--color-tarjeta);
  border-radius: var(--radio-mediano) var(--radio-mediano) 4px var(--radio-mediano);
  box-shadow: var(--sombra-media);
  cursor: pointer;
  /* Oculta por defecto. mayordomo.js la muestra al entrar. */
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;          /* oculta = no se puede tocar */
  transition: opacity 0.3s, transform 0.3s;
}

.mayordomo__burbuja--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* La "x" para cerrar la burbuja */
.mayordomo__burbuja-cerrar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  color: var(--color-texto-suave);
  background: none;
  border: none;
}


/* ==========================================================================
   9. PANELES QUE SUBEN DESDE ABAJO ("bottom sheet")
   Se usan para el chat, el pedido y la confirmación.
   ========================================================================== */
.panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;        /* cabecera arriba, contenido, pie abajo */
  max-width: var(--ancho-maximo);
  height: 88vh;                  /* ocupa el 88% del alto de la pantalla */
  height: 88dvh;                 /* versión que respeta la barra del navegador en celular */
  margin: 0 auto;
  background: var(--color-tarjeta);
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
  /* Escondido: bajado fuera de la pantalla */
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.32s;
}

/* app.js agrega esta clase para mostrarlo */
.panel--abierto {
  transform: translateY(0);
  visibility: visible;
}

/* Variante más baja, para la confirmación y la personalización */
.panel--centro {
  height: auto;
  max-height: 88vh;
  max-height: 88dvh;
}

.panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--color-borde);
}

.panel__titulo {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

.panel__cerrar {
  width: 40px;
  height: 40px;
  font-size: 26px;
  line-height: 1;
  background: var(--color-fondo);
  border: none;
  border-radius: 50%;
}

/* Zona del medio, con scroll propio si el contenido es largo */
.panel__cuerpo {
  flex: 1;
  padding: 8px 16px 16px;
  overflow-y: auto;
}

.panel__pie {
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-borde);
}


/* ==========================================================================
   10. CHAT CON EL MAYORDOMO
   ========================================================================== */
.chat__identidad {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat__identidad strong {
  display: block;
  font-size: 17px;
}

.chat__avatar-mini {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.chat__avatar-mini svg {
  width: 100%;
  height: 100%;
}

/* Texto "En línea" con puntito verde */
.chat__estado {
  font-size: 13px;
  color: var(--color-vegetariano);
}

.chat__estado::before {
  content: "● ";
}

/* Zona con todos los mensajes */
.chat__mensajes {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  background: var(--color-fondo);
}

/* Burbuja de un mensaje */
.mensaje {
  max-width: 85%;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: var(--radio-mediano);
  white-space: pre-line;         /* respeta los saltos de línea del texto */
  animation: aparecer 0.25s ease;
}

/* Mensaje del mayordomo: a la izquierda, blanco */
.mensaje--mayordomo {
  align-self: flex-start;
  background: var(--color-tarjeta);
  border-bottom-left-radius: 4px;
  box-shadow: var(--sombra-suave);
}

/* Mensaje del cliente: a la derecha, color principal */
.mensaje--cliente {
  align-self: flex-end;
  color: #FFFFFF;
  background: var(--color-principal);
  border-bottom-right-radius: 4px;
}

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

/* "Escribiendo..." (tres puntitos animados) */
.mensaje--escribiendo span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 2px;
  background: var(--color-texto-suave);
  border-radius: 50%;
  animation: puntitos 1s infinite ease-in-out;
}

.mensaje--escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.mensaje--escribiendo span:nth-child(3) { animation-delay: 0.3s; }

@keyframes puntitos {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-4px); }
}

/* Mini-tarjetas de platos que recomienda el mayordomo dentro del chat */
.chat__platos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
  width: 85%;
}

.plato-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--color-tarjeta);
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-mediano);
  animation: aparecer 0.25s ease;
}

.plato-mini__emoji {
  font-size: 26px;
}

.plato-mini__info {
  flex: 1;
  min-width: 0;                  /* permite que el texto largo se corte bien */
}

.plato-mini__nombre {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

/* Indicación sugerida por el mayordomo (ej: "sin arroz") */
.plato-mini__nota {
  display: block;
  font-size: 13px;
  font-style: italic;
  color: var(--color-texto-suave);
}

.plato-mini__boton {
  min-height: 38px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--color-principal);
  border: none;
  border-radius: 999px;
}

/* Después de agregarlo, el botón se pone verde */
.plato-mini__boton--agregado {
  background: var(--color-vegetariano);
}

/* Fila de botones de respuesta rápida (se desliza de lado) */
.chat__sugerencias {
  display: flex;
  gap: 8px;
  padding: 10px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chat__sugerencias::-webkit-scrollbar {
  display: none;
}

.sugerencia {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-principal);
  white-space: nowrap;
  background: var(--color-principal-suave);
  border: none;
  border-radius: 999px;
}

/* Botones de respuesta dentro del chat (preguntas del mayordomo) */
.chat__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  max-width: 92%;
}
.chat__opcion {
  white-space: normal;
  text-align: left;
  cursor: pointer;
}
.chat__opcion:disabled {
  opacity: 0.45;
  cursor: default;
}
.chat__opcion--elegida:disabled {
  opacity: 1;
  color: #fff;
  background: var(--color-principal);
}

/* Caja de texto + botón enviar */
.chat__formulario {
  display: flex;
  gap: 8px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
}

.chat__entrada {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  font-size: 16px;               /* 16px o más evita que el iPhone haga zoom al escribir */
  background: var(--color-fondo);
  border: 1.5px solid var(--color-borde);
  border-radius: 999px;
  outline: none;
}

.chat__entrada:focus {
  border-color: var(--color-principal);
}

.chat__enviar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 18px;
  color: #FFFFFF;
  background: var(--color-principal);
  border: none;
  border-radius: 50%;
}


/* ==========================================================================
   11. PANEL "MI PEDIDO"
   ========================================================================== */
.pedido__lista {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;              /* quita los puntos de la lista */
}

/* Frase de ayuda arriba de la lista */
.pedido__ayuda {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--color-texto-suave);
}

/* Cada plato del pedido: arriba la fila (emoji, nombre, contador),
   abajo la cajita de indicaciones */
.pedido__item {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-borde);
}

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

.pedido__emoji {
  font-size: 28px;
}

.pedido__nombre {
  flex: 1;                       /* ocupa el espacio entre el emoji y el contador */
  min-width: 0;
  font-weight: 800;
}

/* Cajita de indicaciones de cada plato (ej: "sin arroz") */
.pedido__indicacion {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  font-size: 16px;               /* 16px evita el zoom automático del iPhone */
  background: var(--color-fondo);
  border: 1.5px dashed var(--color-borde); /* borde punteado = "opcional" */
  border-radius: var(--radio-pequeno);
  outline: none;
}

.pedido__indicacion:focus {
  border-style: solid;
  border-color: var(--color-principal);
}

/* Cuando ya tiene texto, se resalta un poco */
.pedido__indicacion:not(:placeholder-shown) {
  background: var(--color-principal-suave);
  border-color: transparent;
}

.pedido__indicacion::placeholder {
  color: #B3ACA4;
}

/* Mensaje cuando el pedido está vacío */
.pedido__vacio {
  padding: 30px 10px;
  color: var(--color-texto-suave);
  text-align: center;
}

/* "3 productos", encima del botón de enviar */
.pedido__resumen {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--color-texto-suave);
  text-align: center;
}

/* ---- Campos del formulario (notas, mesa) ---- */
.campo {
  display: block;
  margin-bottom: 14px;
}

.campo__etiqueta {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.campo__etiqueta em {
  font-style: normal;
  font-weight: 400;
  color: var(--color-texto-suave);
}

.campo__entrada {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  background: var(--color-fondo);
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  outline: none;
  resize: none;
}

.campo__entrada:focus {
  border-color: var(--color-principal);
}

/* Campo de mesa: más grande y centrado */
.campo__entrada--mesa {
  max-width: 140px;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}

/* ---- Botones "En la mesa" / "Para llevar" ---- */
.opciones-entrega {
  display: grid;
  grid-template-columns: 1fr 1fr; /* dos botones del mismo ancho */
  gap: 8px;
}

.opcion-entrega {
  min-height: 48px;
  font-weight: 700;
  background: var(--color-fondo);
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* El botón elegido */
.opcion-entrega--activa {
  color: var(--color-principal);
  background: var(--color-principal-suave);
  border-color: var(--color-principal);
}

/* Oculta el campo de mesa cuando es "Para llevar" (app.js pone esta clase) */
.campo--oculto {
  display: none;
}

/* Texto de ejemplo dentro de los campos (más clarito, para que no parezca escrito) */
.campo__entrada::placeholder {
  font-weight: 400;
  color: #B3ACA4;
}

/* Mensaje de error (oculto hasta que falte la mesa) */
.campo__error {
  display: none;
  margin-top: 6px;
  font-size: 14px;
  color: var(--color-error);
}

.campo--error .campo__entrada {
  border-color: var(--color-error);
  animation: temblor 0.35s;
}

.campo--error .campo__error {
  display: block;
}

@keyframes temblor {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}


/* ==========================================================================
   12. PANTALLA "PEDIDO ENVIADO"
   ========================================================================== */
.enviado {
  padding: 32px 24px calc(24px + env(safe-area-inset-bottom));
  text-align: center;
}

.enviado__icono {
  font-size: 56px;
}

.enviado h2 {
  margin: 8px 0;
  font-size: 24px;
}

.enviado p {
  margin: 0 0 22px;
  color: var(--color-texto-suave);
}


/* ==========================================================================
   13. BOTONES GENERALES
   ========================================================================== */
.boton {
  display: block;
  width: 100%;
  min-height: 54px;
  font-size: 17px;
  font-weight: 800;
  border: none;
  border-radius: var(--radio-mediano);
  transition: transform 0.1s, filter 0.2s;
}

.boton:active {
  transform: scale(0.98);
  filter: brightness(0.92);
}

.boton--principal {
  color: #FFFFFF;
  background: var(--color-principal);
}

.boton--whatsapp {
  color: #FFFFFF;
  background: var(--color-whatsapp);
}

.boton--whatsapp:disabled {
  background: #B9B2AA;
}

/* Botón que parece un enlace (ej: "Vaciar pedido") */
.boton--texto {
  min-height: 44px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-texto-suave);
  background: none;
}


/* ==========================================================================
   14. AVISO FLOTANTE Y FONDO OSCURO
   ========================================================================== */

/* Aviso tipo "✓ Agregado al pedido" (aparece arriba y se va solo) */
.aviso {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 60;
  padding: 10px 18px;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
  background: var(--color-texto);
  border-radius: 999px;
  box-shadow: var(--sombra-media);
  opacity: 0;
  transform: translate(-50%, -20px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}

.aviso--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Fondo oscuro detrás de los paneles */
.fondo-oscuro {
  position: fixed;
  inset: 0;                      /* ocupa toda la pantalla */
  z-index: 30;
  background: rgba(30, 27, 24, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.fondo-oscuro--visible {
  opacity: 1;
  visibility: visible;
}


/* ==========================================================================
   16. FONDO DE MARCA Y BOTÓN OCULTO (personalizar.js)
   ========================================================================== */

/* Capa del fondo: ocupa toda la pantalla y queda DETRÁS de todo */
.fondo-marca {
  position: fixed;
  inset: -40px;                  /* un poco más grande, para que el difuminado no deje bordes */
  z-index: -1;                   /* detrás del contenido */
  pointer-events: none;          /* no se puede tocar: los clics pasan al contenido */
}

/* La imagen o el video dentro de la capa.
   personalizar.js cambia opacity (visibilidad), filter (difuminado)
   y object-fit (toda la pantalla o centrado). */
.fondo-marca img,
.fondo-marca video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Si el color de fondo es oscuro, los textos que van directo sobre
   el fondo (nombre del restaurante, títulos) se ponen blancos */
body.tema-oscuro .encabezado__nombre,
body.tema-oscuro .seccion__titulo {
  color: #FFFFFF;
}

body.tema-oscuro .encabezado__eslogan {
  color: rgba(255, 255, 255, 0.8);
}

/* Botón oculto: invisible en la esquina superior derecha */
.boton-oculto {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 70;                   /* por encima de todo */
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 20px;
  background: transparent;
  border: none;
  opacity: 0;                    /* invisible */
  transition: opacity 0.2s;
}

/* Al pasar el mouse por la esquina, aparece suavemente:
   un círculo oscuro con el ⚙️, para que se vea bien sobre cualquier fondo
   (claro u oscuro). */
.boton-oculto:hover {
  opacity: 1;
  background: radial-gradient(circle, rgba(45, 42, 38, 0.85) 0 19px, transparent 20px);
  /* El círculo oscuro (radio 19px) va centrado en el botón de 48px */
}

/* ---- Controles del panel de personalización ---- */
.personalizar__ayuda {
  margin: 8px 0 16px;
  font-size: 14px;
  color: var(--color-texto-suave);
}

.personalizar__color {
  width: 72px;
  height: 48px;
  padding: 4px;
  background: var(--color-tarjeta);
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-pequeno);
  cursor: pointer;
}

/* Pestañas del panel de ajustes (Fondo / Negocio / Mayordomo) */
.personalizar__pestanas {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 4 pestañas en 2 filas de 2 */
  gap: 6px;
  padding: 12px 16px 0;
}

.personalizar__pestanas .opcion-entrega {
  min-height: 42px;
  padding: 0 4px;
  font-size: 13px;
  white-space: nowrap;           /* que "Mayordomo" no se parta en dos líneas */
}

/* Lista de negocios en la pestaña Demo */
.lista-negocios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 12px;
}

/* Cada negocio: botón grande con emoji y nombre */
.negocio-opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 800;
  text-align: left;
  background: var(--color-fondo);
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-mediano);
}

.negocio-opcion span {
  font-size: 24px;
}

/* El negocio que se está mostrando */
.negocio-opcion--activa {
  color: var(--color-principal);
  background: var(--color-principal-suave);
  border-color: var(--color-principal);
}

.negocio-opcion--activa::after {
  content: "✓ Mostrando";
  margin-left: auto;             /* empuja el texto a la derecha */
  font-size: 13px;
}

.personalizar__ayuda code {
  font-size: 13px;
  word-break: break-all;         /* que el link largo no se salga */
}

/* Fila con la vista previa redonda + el botón de subir imagen */
.personalizar__imagen {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Circulito que muestra el logo o avatar actual */
.personalizar__vista {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  overflow: hidden;
  font-size: 28px;
  background: var(--color-principal-suave);
  border-radius: 50%;
}

.personalizar__vista img,
.personalizar__vista svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fila con los dos selectores de color (Fondo y Botones) */
.personalizar__colores {
  display: flex;
  gap: 24px;
}

/* Interruptor "Ajustar los colores automáticamente" */
.personalizar__interruptor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  font-weight: 700;
  background: var(--color-principal-suave);
  border-radius: var(--radio-pequeno);
  cursor: pointer;
}

.personalizar__interruptor input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--color-principal);
}

.personalizar__archivo {
  width: 100%;
  font-size: 15px;
}

.personalizar__rango {
  width: 100%;
  accent-color: var(--color-principal); /* color de la barrita deslizable */
}


/* ==========================================================================
   15. PANTALLAS GRANDES (computador o tablet)
   Todo lo de aquí solo aplica si la pantalla mide 600px o más de ancho.
   ========================================================================== */
@media (min-width: 600px) {
  /* El mayordomo se alinea con el borde derecho de la carta centrada */
  .mayordomo {
    right: calc(50% - var(--ancho-maximo) / 2 + 16px);
  }

  /* Los paneles se ven como una tarjeta flotante */
  .panel {
    bottom: 16px;
    border-radius: var(--radio-grande);
  }
}

/* Si la persona tiene activado "reducir movimiento" en su celular,
   se quitan las animaciones (accesibilidad). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}