/* Capa de marca para el lado del equipo: caja y panel del dueño de Naranjo’s.
   Misma identidad que marca.css (naranja, crema, azul marino, letra condensada en itálica),
   pero con prioridad en leer rápido: el resultado del escaneo sigue siendo verde / rojo.
   Solo cambia el aspecto, no el funcionamiento. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;1,700;1,800&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  --marca: #dd4d09;
  --marca-texto: #fffaf0;
  --naranja-osc: #c2410c;
  --crema: #fbf1de;
  --papel: #fffaf0;
  --marino: #1d2a5c;
  --amarillo: #ffc83d;
  --fondo: var(--crema);
  --superficie: var(--papel);
  --tinta: #2a1d14;
  --suave: #6e5a4a;
  --linea: #ecd9b9;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --franjas: repeating-linear-gradient(to bottom, var(--marca) 0 3px, transparent 3px 6px);
  --logo: url('fotos/app/logo.webp?v=2');
  font-family: 'Barlow', system-ui, sans-serif;
}
html { --marca: #dd4d09 !important; }
body { background: var(--crema); }

h1, h2, .titulo-chico, .cifra strong, .resultado h2 {
  font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
}

/* Logo en lugar del nombre escrito (el texto sigue ahí para lectores de pantalla). */
#c-negocio, #p-negocio, .cartel-negocio {
  font-size: 0; color: transparent; aspect-ratio: 900 / 486; background: var(--logo) left center / contain no-repeat;
}

/* ---------- Botones ---------- */
button.principal, .boton.principal {
  font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 3px 3px 0 var(--marino); border-radius: 14px;
}
button.principal:active, .boton.principal:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--marino); }
button, .boton { border-radius: 12px; border: 2px solid var(--linea); }
input, select, textarea { border: 2px solid var(--linea); background: #fff; border-radius: 12px; }

/* ---------- Tarjetas ---------- */
.tarjeta-ui { background: var(--papel); border: 2px solid var(--linea); border-radius: 18px; }
.tarjeta-ui h2, .titulo-chico { color: var(--marino); font-size: 22px; display: flex; align-items: center; gap: 10px; }
.tarjeta-ui > h2::after, .tarjeta-ui > .fila > h2::after, .titulo-chico::after {
  content: ''; flex: 1; height: 12px; min-width: 24px; background: var(--franjas);
}

/* =================== CAJA =================== */
/* Entrada del personal */
.entrar { background: var(--marca); background-image: repeating-linear-gradient(to bottom, transparent 0 46px, color-mix(in srgb, var(--naranja-osc) 55%, transparent) 46px 49px); }
.entrar form { box-shadow: 6px 6px 0 var(--marino); border: 0; position: relative; padding-top: 24px; }
.entrar form::before {
  content: ''; display: block; width: 62%; aspect-ratio: 900 / 486; margin: -4px 0 4px;
  background: var(--logo) left center / contain no-repeat;
}
.entrar h1 { color: var(--marino); font-size: 40px; }

/* Barra superior */
.caja .barra {
  background: var(--marino); color: var(--papel); border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 5px 0 var(--marca);
}
.caja #c-negocio { width: 132px; }
.caja #c-usuario { color: color-mix(in srgb, var(--papel) 75%, transparent); }
.caja .barra button, .caja .barra .boton { background: var(--papel); border-color: var(--papel); color: var(--marino); font-weight: 700; }

/* Escáner */
.escaner { background: var(--marino); border: 3px solid var(--marino); box-shadow: 5px 5px 0 var(--marca); }
.escaner-vacio {
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--marca) 22%, transparent), transparent 62%);
}
.escaner-vacio::before {
  content: ''; width: 96px; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--papel); transform: rotate(-6deg);
  background: url('fotos/app/mascota.webp') center / cover;
}
.escaner-vacio p:first-of-type { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1.05; max-width: 18ch; }
.escaner-vacio .suave { color: color-mix(in srgb, var(--papel) 70%, transparent); }
.caja .escaner-apagar {
  background: var(--papel); color: var(--marino); border: 0; box-shadow: 3px 3px 0 var(--marca);
  font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .03em;
}

/* Resultado: se queda verde / rojo para leerse de lejos; el premio va con la marca. */
.resultado h2 { font-size: clamp(40px, 11vw, 64px); line-height: .95; }
.resultado-icono {
  font-family: system-ui, sans-serif; font-weight: 800; font-size: 68px; width: 120px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: rgb(255 255 255 / .16); border: 4px solid #fff;
  max-width: none !important;
}
.resultado[data-tipo=premio] { background: var(--marca); }
.resultado[data-tipo=premio] .resultado-icono {
  font-size: 0; border-color: var(--papel); box-shadow: 5px 5px 0 var(--marino); transform: rotate(-6deg);
  background: url('fotos/app/mascota.webp') center / cover;
}
.resultado[data-tipo=premio] h2 { color: var(--papel); text-shadow: 3px 3px 0 var(--naranja-osc); }
.resultado button { font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; }
.resultado button.principal { background: var(--marino); border-color: var(--marino); box-shadow: none; }

.fila-caja { border-bottom: 2px dashed var(--linea); }
.pedido-caja { background: var(--papel); }
.pedido-caja[data-estado=pagado] { border-color: var(--marca); box-shadow: 4px 4px 0 var(--marca); }
.pedido-folio { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 24px; text-transform: uppercase; color: var(--marino); }
.demo { border: 2px dashed var(--marca); }

/* =================== PANEL DEL DUEÑO =================== */
.sin-acceso { background: var(--marca); }
.sin-acceso .tarjeta-ui { box-shadow: 6px 6px 0 var(--marino); border: 0; }
.sin-acceso h1 { color: var(--marino); font-size: 34px; }

.cabecera {
  background: var(--marino); color: var(--papel); border-radius: 22px; padding: 18px 20px 14px;
  box-shadow: 0 6px 0 var(--marca); align-items: center;
}
.cabecera > div:first-child { display: grid; gap: 4px; }
#p-tipo { color: var(--amarillo); font-family: var(--display); font-style: italic; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; opacity: 1; }
#p-negocio { width: 170px; }
.cabecera > .fila .boton, .cabecera > .fila button { background: var(--papel); border-color: var(--papel); color: var(--marino); font-weight: 700; }

.panel .pestanas { background: rgb(255 255 255 / .07); border: 0; border-top: 0; border-radius: 14px; order: 3; flex-basis: 100%; }
.panel .pestanas button {
  background: none; color: color-mix(in srgb, var(--papel) 78%, transparent);
  font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .03em;
}
.panel .pestanas button[aria-current=page] { background: var(--amarillo); color: var(--marino); }
/* Texto chico sobre naranja: el tono oscuro para que se lea (5:1); los botones grandes conservan el naranja de la marca. */
.globo-pestana, .foto-botones .principal { background: var(--naranja-osc); border-color: var(--naranja-osc); color: var(--papel); }

/* Cifras: como estampas */
.cifra { background: var(--papel); border: 2px solid var(--marino); border-radius: 18px; box-shadow: 4px 4px 0 var(--marino); min-width: 0; container-type: inline-size; }
/* El tamaño se ajusta al ancho de la tarjeta para que "$191,996" nunca se salga. */
.cifra strong { font-size: clamp(24px, 23cqi, 44px); line-height: 1; color: var(--marca); white-space: nowrap; padding-right: .08em; }
.cifra span { color: var(--marino); font-weight: 600; }
.cifra-accion { background: var(--amarillo); border-color: var(--marino); }
.cifra-accion strong { color: var(--marino); }

.grafica { border-bottom: 3px solid var(--marino); }
.grafica div { background: var(--marca); border-radius: 4px 4px 0 0; }
.grafica div:hover { background: var(--marino); }

.tabla th { font-family: var(--display); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; color: var(--marino); border-bottom: 2px solid var(--marino); }
.tabla td { border-bottom: 1px dashed var(--linea); }
.pildora.si { background: color-mix(in srgb, var(--amarillo) 40%, var(--papel)); color: var(--marino); }

.chip-filtro { border: 2px solid var(--marino); color: var(--marino); background: var(--papel); font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.chip-filtro[aria-pressed=true] { background: var(--marino); border-color: var(--marino); color: var(--papel); }
.dia-reservas h2 { font-size: 24px; }
.cat-panel { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 19px; color: var(--marca); letter-spacing: .02em; }
.platillo-panel, .fila-panel, .lista-simple li { border-bottom: 1px dashed var(--linea); }
.platillo-panel strong, .fila-panel strong { color: var(--marino); }

/* QR de mostrador: un cartel con la marca, listo para imprimir */
.cartel {
  background: var(--marca); color: var(--papel); border: 0; border-radius: 26px; padding: 30px 26px 26px;
  box-shadow: 8px 8px 0 var(--marino); position: relative; overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cartel::after {
  content: ''; position: absolute; top: 18px; right: 18px; width: 86px; aspect-ratio: 1; border-radius: 50%;
  border: 4px solid var(--papel); transform: rotate(8deg); background: url('fotos/app/mascota.webp') center / cover;
}
.cartel-negocio { width: 58%; justify-self: start; }
.cartel h2 { color: var(--papel); font-size: 40px; line-height: 1.05; text-shadow: 3px 3px 0 var(--naranja-osc); justify-self: start; text-align: left; }
.cartel-qr { background: var(--papel); padding: 14px; border-radius: 18px; box-shadow: 5px 5px 0 var(--marino); }
.cartel p:last-child { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 20px; color: var(--amarillo); }

.dialogo { background: var(--crema); }
.dialogo h2 { color: var(--marino); font-size: 30px; }