/* Estilos propios: só o que Tailwind non cobre ben — pantalla de carga,
   animacións de entrada, textura e detalles de accesibilidade. */

/* ---------- Pantalla de carga ----------
   Vai con CSS puro e non con Tailwind: ten que verse ANTES de que
   Tailwind remate de compilar no navegador, se non hai un parpadeo. */
#cargando {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #FBF7F0;
  animation: saida-carga .35s ease-out .15s forwards;
}
.escuro #cargando { background: #14100D; }

.marca-carga {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #D6452F;
  color: #fff;
  display: grid;
  place-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  animation: latexo 1.1s ease-in-out infinite;
}

@keyframes latexo {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.08) rotate(-5deg); }
}

@keyframes saida-carga {
  to { opacity: 0; visibility: hidden; }
}

/* ---------- Entrada das vistas ---------- */
.anim-entrada {
  opacity: 0;
  animation: subir .5s cubic-bezier(.22, .8, .3, 1) forwards;
}

@keyframes subir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Fotografía dos pratos ----------
   A ilustración vectorial vai sempre debaixo. Se a foto carga, aparece
   por riba cun fundido; se non carga, non se nota nada. */
.foto-prato {
  transition: opacity .6s ease;
}
.foto-prato.foto-ok {
  opacity: 1;
}

/* ---------- Tarxetas ---------- */
.tarxeta {
  transition: transform .35s cubic-bezier(.22, .8, .3, 1), box-shadow .35s ease, border-color .25s ease;
}
.tarxeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -18px rgba(25, 20, 16, .35);
}
.escuro .tarxeta:hover {
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7);
}

.tarxeta-hoxe {
  transition: box-shadow .4s ease;
}
.tarxeta-hoxe:hover {
  box-shadow: 0 20px 46px -24px rgba(25, 20, 16, .4);
}

.cela {
  transition: transform .25s ease, border-color .25s ease;
}
.cela:hover {
  transform: translateY(-2px);
}

/* ---------- Foco visible e coherente ---------- */
:focus-visible {
  outline: 2px solid #D6452F;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Barra de desprazamento discreta ---------- */
@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: rgba(25,20,16,.22) transparent; }
  .escuro * { scrollbar-color: rgba(251,247,240,.2) transparent; }
}

/* ---------- Nada de desbordamento horizontal ---------- */
html, body { overflow-x: clip; }

/* Os bloques anchos (grellas, táboas) desprázanse dentro de si mesmos */
.desprazable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Tipografía ---------- */
.font-display {
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -.015em;
}

/* ---------- Respectar quen non quere movemento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .anim-entrada { opacity: 1; transform: none; }
  .tarxeta:hover, .cela:hover { transform: none; }
}

/* ---------- Impresión: que a receita saia limpa ---------- */
@media print {
  #cabeceira, #barra-inferior, #toasts, #cargando { display: none !important; }
  body { background: #fff; padding: 0; }
  .panel-modal { max-height: none !important; overflow: visible !important; box-shadow: none !important; }
}