/* ===========================================================================
   ESTILOS — Chin-Chin Gestión
   ---------------------------------------------------------------------------
   Una sola hoja, de arriba hacia abajo:
     1. Variables (paleta de la marca: bordo y dorado sobre crema)
     2. Base y tipografía
     3. Armazón: barra lateral, cabecera, contenido
     4. Piezas: botones, tarjetas, tablas, campos, etiquetas, avatares
     5. Modal y avisos
     6. Login
     7. Pantallas puntuales (inicio, stock, recetas, relevamientos, estadísticas)
     8. Responsive (celular y tablet)
   Sin modo oscuro a propósito: se usa en el local, en tablets y celulares, y
   conviene que se vea igual en todos.
   =========================================================================== */

:root {
  --bg: #f6f1e6;
  --surface: #ffffff;
  --surface-2: #faf5e9;
  --surface-3: #f0e2bd;
  --ink: #211609;
  --ink-muted: #6b5a41;
  --ink-soft: #9a8a6f;
  --rule: #e3d3a9;
  --rule-soft: #eee4cc;
  --maroon: #7c1220;
  --maroon-2: #4f0c16;
  --maroon-soft: #f6e3e5;
  --gold: #a97815;
  --gold-soft: #f7ecd0;
  --green: #3f6132;
  --green-soft: #e3eddd;
  --navy: #2b3d57;
  --navy-soft: #e1e7ef;
  --red: #b3261e;
  --red-soft: #f9e0de;
  --teal: #215048;
  --teal-soft: #dcebe6;
  --plum: #63325a;
  --sombra: 0 1px 2px rgba(33, 22, 9, .06), 0 4px 14px rgba(33, 22, 9, .06);
  --radio: 12px;
  --lateral: 248px;
  --fuente: 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --fuente-titulos: Georgia, 'Times New Roman', serif;
  --mono: 'Cascadia Mono', Consolas, 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body.con-modal { overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--fuente-titulos); margin: 0; font-weight: 700; line-height: 1.2; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .6rem; }
a { color: var(--maroon); }
code { font-family: var(--mono); font-size: .9em; background: var(--surface-3); padding: .05em .35em; border-radius: 4px; }
pre.error { white-space: pre-wrap; color: var(--red); font-family: var(--mono); font-size: .85rem; }
small, .suave { color: var(--ink-muted); }
.mono { font-family: var(--mono); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.centro { text-align: center; }
.cargando { padding: 4rem; text-align: center; color: var(--ink-muted); }
[hidden] { display: none !important; }

/* ---------- 3. Armazón ---------- */
.app { display: flex; min-height: 100vh; }
.lateral {
  width: var(--lateral); flex: 0 0 var(--lateral);
  background: linear-gradient(180deg, var(--maroon) 0%, var(--maroon-2) 100%);
  color: #fbf0dd;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* El logo va centrado y solo: sin el rótulo "Gestión" al lado, dejarlo
   pegado a la izquierda lo hacía parecer desalineado con el resto del menú.
   El botón de cerrar del celular se saca del flujo para que no lo corra. */
.marca { display: flex; align-items: center; justify-content: center; position: relative; padding: 1.1rem 1.1rem .9rem; }
.marca-logo {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: #fbf0dd; color: var(--maroon); font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .02em; flex: 0 0 auto;
}
.marca-logo.grande { width: 64px; height: 64px; font-size: 1.6rem; border-radius: 16px; background: var(--maroon); color: #fbf0dd; }
.marca-imagen { width: 132px; height: auto; background: #fbf0dd; border-radius: 10px; padding: 6px 10px; flex: 0 0 auto; }
.marca-cerrar { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: rgba(251, 240, 221, .8); }
.marca-cerrar:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lateral-usuario { display: flex; align-items: center; gap: .65rem; margin: 0 .8rem .6rem; padding: .7rem .6rem; background: rgba(0, 0, 0, .18); border-radius: 10px; }
.lateral-usuario strong { display: block; font-size: .92rem; }
.lateral-usuario small { display: block; color: rgba(251, 240, 221, .7); font-size: .75rem; }
.ver-como { display: flex; flex-direction: column; gap: .25rem; margin: 0 .8rem .6rem; font-size: .75rem; color: rgba(251, 240, 221, .75); text-transform: uppercase; letter-spacing: .06em; }
.ver-como select { background: rgba(0, 0, 0, .25); color: #fbf0dd; border: 1px solid rgba(251, 240, 221, .25); border-radius: 8px; padding: .4rem .5rem; font-size: .9rem; text-transform: none; letter-spacing: 0; }
/* La casilla del root para esconder los módulos que todavía no están
   terminados. Va pegada al selector "ver como" porque son lo mismo: las dos
   herramientas que tiene el dueño para mirar la app con otros ojos. */
.solo-listos { display: flex; align-items: center; gap: .5rem; margin: 0 .8rem .7rem; font-size: .78rem; color: rgba(251, 240, 221, .75); cursor: pointer; }
.solo-listos input { width: 15px; height: 15px; accent-color: var(--gold); flex: 0 0 auto; cursor: pointer; }
.menu { display: flex; flex-direction: column; padding: .2rem .6rem; gap: 2px; flex: 1; }
.menu-item {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 9px;
  color: rgba(251, 240, 221, .85); text-decoration: none; font-size: .93rem; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit;
}
.menu-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.menu-item.activo { background: #fbf0dd; color: var(--maroon); font-weight: 600; }
.menu-item .icono { width: 20px; height: 20px; flex: 0 0 auto; }
.menu-cuenta { margin-left: auto; background: var(--gold); color: #fff; font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; font-weight: 700; }
.menu-salir { margin: .4rem .6rem 1rem; }
.lateral-fondo { display: none; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cabecera {
  display: flex; align-items: center; gap: .8rem; padding: .7rem 1.4rem; background: var(--surface);
  border-bottom: 1px solid var(--rule-soft); position: sticky; top: 0; z-index: 10;
}
.cabecera-titulo { font-family: var(--fuente-titulos); font-size: 1.1rem; font-weight: 700; }
.cabecera-espacio { flex: 1; }
.campana { position: relative; }
.campana-cuenta { position: absolute; top: 2px; right: 2px; background: var(--red); color: #fff; font-size: .65rem; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; }
.contenido { padding: 1.4rem; max-width: 1180px; width: 100%; }
.solo-movil { display: none; }

/* ---------- 4. Piezas ---------- */
.icono { width: 18px; height: 18px; vertical-align: -3px; }
.boton {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 9px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.boton:hover { background: var(--surface-2); border-color: var(--ink-soft); }
.boton:disabled { opacity: .5; cursor: default; }
.boton-primario { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.boton-primario:hover { background: var(--maroon-2); border-color: var(--maroon-2); }
.boton-peligro { background: var(--red); color: #fff; border-color: var(--red); }
.boton-peligro:hover { background: #8f1d16; }
.boton-suave { background: var(--surface-3); border-color: transparent; }
.boton-chico { padding: .3rem .6rem; font-size: .82rem; }
.boton-ancho { width: 100%; justify-content: center; }
.boton-icono { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; }
.boton-icono:hover { background: var(--surface-3); color: var(--ink); }
.boton-icono .icono { width: 20px; height: 20px; }
.boton-icono.solo-movil { display: none; }
.boton-texto { background: none; border: 0; color: var(--maroon); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.encabezado .subtitulo { color: var(--ink-muted); margin: .2rem 0 0; }
.encabezado-acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.tarjeta { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--radio); padding: 1.1rem 1.2rem; box-shadow: var(--sombra); margin-bottom: 1.1rem; }
.tarjeta > h2, .tarjeta > h3 { margin-bottom: .7rem; }
.tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; flex-wrap: wrap; }
.tarjeta-cabecera h2, .tarjeta-cabecera h3 { margin: 0; }
.grilla { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grilla-2 { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.grilla .tarjeta, .grilla-2 .tarjeta { margin-bottom: 0; }
.kpis { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1.1rem; }
.kpi { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--radio); padding: .9rem 1rem; box-shadow: var(--sombra); }
.kpi small { display: block; color: var(--ink-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.kpi strong { display: block; font-size: 1.65rem; font-family: var(--fuente-titulos); line-height: 1.15; margin-top: .15rem; }
.kpi .kpi-pie { font-size: .8rem; color: var(--ink-muted); margin-top: .2rem; }
.kpi.alerta strong { color: var(--red); }
.kpi.ok strong { color: var(--green); }
.kpi.dorado strong { color: var(--gold); }

.tabla-marco { overflow-x: auto; border: 1px solid var(--rule-soft); border-radius: var(--radio); background: var(--surface); }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.tabla th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); background: var(--surface-2); font-weight: 600; white-space: nowrap; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: #fffdf7; }
.tabla tr.fila-enlace { cursor: pointer; }
.tabla td.acciones { white-space: nowrap; text-align: right; }
.tabla-compacta th, .tabla-compacta td { padding: .35rem .5rem; font-size: .85rem; }
.tabla input[type=number], .tabla input[type=text] { width: 100%; min-width: 80px; }
.tabla .positivo { color: var(--green); font-weight: 600; }
.tabla .negativo { color: var(--red); font-weight: 600; }
.tabla .cero { color: var(--ink-soft); }

.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.campo label { font-size: .82rem; font-weight: 600; color: var(--ink-muted); }
.campo .req { color: var(--red); margin-left: .15rem; }
.campo small { font-size: .78rem; }
.campo-check { flex-direction: row; align-items: center; gap: .5rem; }
.campo-check span { font-size: .92rem; color: var(--ink); font-weight: 500; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], input[type=email], select, textarea {
  font: inherit; padding: .5rem .65rem; border: 1px solid var(--rule); border-radius: 9px; background: #fff; color: var(--ink); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(124, 18, 32, .35); outline-offset: 1px; border-color: var(--maroon); }
textarea { resize: vertical; min-height: 70px; }
.fila-campos { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fila-campos .campo { margin-bottom: .3rem; }
.acciones-derecha { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.acciones-izquierda { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.barra-filtros { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.barra-filtros .buscador { position: relative; flex: 1; min-width: 200px; max-width: 380px; }
.barra-filtros .buscador input { padding-left: 2.2rem; }
.barra-filtros .buscador .icono { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }
.barra-filtros select { width: auto; }

.etiqueta { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
.etiqueta-neutra { background: var(--surface-3); color: var(--ink-muted); }
.etiqueta-ok { background: var(--green-soft); color: var(--green); }
.etiqueta-alerta { background: var(--gold-soft); color: #7a5508; }
.etiqueta-peligro { background: var(--red-soft); color: var(--red); }
.etiqueta-info { background: var(--navy-soft); color: var(--navy); }
.etiqueta-cocina { background: var(--maroon-soft); color: var(--maroon); }
.etiqueta-salon { background: var(--teal-soft); color: var(--teal); }

.avatar { display: inline-grid; place-items: center; border-radius: 50%; font-weight: 700; color: #fff; background: var(--navy); flex: 0 0 auto; }
.avatar-md { width: 36px; height: 36px; font-size: .8rem; }
.avatar-sm { width: 26px; height: 26px; font-size: .65rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.avatar-cocinero, .avatar-encargado_cocina { background: var(--maroon); }
.avatar-encargado_salon, .avatar-vendedor { background: var(--teal); }
.avatar-supervisor { background: var(--gold); }
.avatar-dueno { background: var(--plum); }
.avatar-admin { background: var(--ink); }
.persona { display: inline-flex; align-items: center; gap: .45rem; }
.persona small { display: block; line-height: 1.1; }

.vacio { text-align: center; padding: 2.4rem 1rem; color: var(--ink-muted); background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--radio); }
.vacio .icono { width: 40px; height: 40px; color: var(--ink-soft); margin-bottom: .5rem; }
.vacio p { margin-bottom: .8rem; }

.pestanas { display: flex; gap: .3rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { background: none; border: 0; border-bottom: 2px solid transparent; padding: .55rem .8rem; font: inherit; font-weight: 600; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.plegable summary { cursor: pointer; color: var(--ink-muted); font-size: .85rem; margin-top: .5rem; }
.pestana.activa { color: var(--maroon); border-bottom-color: var(--maroon); }
.pestana-cuenta { background: var(--surface-3); border-radius: 999px; padding: 0 .45rem; font-size: .75rem; }

.alerta-caja { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: 10px; background: var(--gold-soft); color: #5e4206; margin-bottom: 1rem; }
.alerta-caja.peligro { background: var(--red-soft); color: var(--red); }
.alerta-caja.info { background: var(--navy-soft); color: var(--navy); }
.alerta-caja.ok { background: var(--green-soft); color: var(--green); }
.alerta-caja .icono { flex: 0 0 auto; margin-top: 2px; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: .55rem 0; border-bottom: 1px solid var(--rule-soft); display: flex; gap: .6rem; align-items: center; justify-content: space-between; }
.lista li:last-child { border-bottom: 0; }
.lista-simple li { justify-content: flex-start; }

.pasos { padding-left: 1.3rem; margin: 0; }
.pasos li { margin-bottom: .4rem; }

/* ---------- 5. Modal y avisos ---------- */
#modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; }
.modal-fondo { position: absolute; inset: 0; background: rgba(33, 22, 9, .45); }
.modal-caja { position: relative; background: var(--surface); border-radius: 16px; width: min(560px, 100%); max-height: calc(100vh - 2rem); overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.modal-ancha { width: min(860px, 100%); }
.modal-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem .6rem; position: sticky; top: 0; background: var(--surface); }
.modal-cuerpo { padding: .2rem 1.2rem 1.2rem; }
.modal-texto { font-size: 1rem; }
.avisos { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .5rem; }
.aviso { background: var(--ink); color: #fff; padding: .65rem 1rem; border-radius: 10px; box-shadow: var(--sombra); opacity: 0; transform: translateY(8px); transition: all .25s; max-width: 340px; font-size: .92rem; }
.aviso-visible { opacity: 1; transform: none; }
.aviso-ok { background: var(--green); }
.aviso-error { background: var(--red); }
.aviso-info { background: var(--navy); }

/* ---------- 6. Login ---------- */
body.sin-sesion .app { display: block; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(900px 500px at 20% -10%, rgba(169, 120, 21, .18), transparent), var(--bg); }
.login-caja { width: min(420px, 100%); background: var(--surface); border-radius: 20px; padding: 2rem 1.8rem 1.4rem; box-shadow: 0 10px 40px rgba(33, 22, 9, .12); }
.login-marca { text-align: center; margin-bottom: 1.4rem; }
.login-marca h1 { font-size: 1.9rem; margin-top: .6rem; color: var(--maroon); }
.login-marca p { color: var(--ink-muted); margin: 0; }
.login-error { color: var(--red); font-size: .9rem; margin: -.3rem 0 .8rem; }
.login-pie { font-size: .82rem; color: var(--ink-muted); text-align: center; margin: 1rem 0 .4rem; }
.login-o { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 .8rem; color: var(--ink-soft); font-size: .82rem; }
.login-o::before, .login-o::after { content: ''; flex: 1; height: 1px; background: var(--rule-soft); }
.boton-google { justify-content: center; gap: .6rem; background: #fff; border-color: var(--rule); font-weight: 600; }
.boton-google:hover { background: var(--surface-2); }
.icono-google { width: 18px; height: 18px; flex: 0 0 auto; }
.login-aclaracion { text-align: center; font-size: .78rem; color: var(--ink-soft); margin: .5rem 0 0; }
.login-prueba { margin-top: .6rem; font-size: .85rem; }
.login-prueba summary { cursor: pointer; color: var(--ink-muted); }
.login-prueba table { margin: .5rem 0; }
.login-prueba .boton { margin-top: .3rem; }

/* ---------- 6b. Elegir rol (lo primero que ve el administrador) ---------- */
body.sin-armazon .app { display: block; }
.elegir { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(900px 500px at 20% -10%, rgba(169, 120, 21, .18), transparent), var(--bg); }
.elegir-caja { width: min(560px, 100%); background: var(--surface); border-radius: 20px; padding: 1.8rem 1.6rem 1.4rem; box-shadow: 0 10px 40px rgba(33, 22, 9, .12); }
.elegir-logo { width: 150px; max-width: 55%; height: auto; display: block; margin: 0 auto .8rem; }
.elegir-caja h1 { text-align: center; font-size: 1.5rem; }
.elegir-bajada { text-align: center; color: var(--ink-muted); margin: .3rem 0 1.2rem; }
.elegir-roles { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; }
.rol-tarjeta {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  padding: .7rem .9rem; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--surface); font: inherit; color: inherit; cursor: pointer;
}
.rol-tarjeta:hover { background: var(--surface-2); border-color: var(--ink-soft); }
.rol-tarjeta.actual { border-color: var(--maroon); background: var(--maroon-soft); }
.rol-texto { flex: 1; min-width: 0; }
.rol-texto strong { display: block; font-size: .98rem; }
.rol-texto small { display: block; color: var(--ink-muted); font-size: .82rem; line-height: 1.3; }
.rol-propio { color: var(--maroon); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.rol-flecha { color: var(--ink-soft); flex: 0 0 auto; }
.rol-tilde { color: var(--maroon); display: inline-grid; place-items: center; flex: 0 0 auto; }

/* ---------- 7. Pantallas puntuales ---------- */
.inicio-saludo { margin-bottom: 1.2rem; }
.inicio-saludo h1 { font-size: 1.6rem; }
/* La bienvenida reemplaza al cartel de "no hay nada para mostrar": tiene que
   leerse como un recibimiento, no como un hueco. De ahí el borde dorado y el
   fondo crema, en vez del gris de los vacíos. */
.bienvenida { border-left: 3px solid var(--gold); background: var(--gold-soft); }
.bienvenida h2 { margin: 0 0 .4rem; font-size: 1.15rem; color: var(--maroon); }
.bienvenida p { margin: 0; max-width: 52ch; line-height: 1.5; }
.accesos-rapidos { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.nota { padding: .8rem 1rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--rule-soft); margin-bottom: .7rem; }
.nota.fijada { background: var(--gold-soft); border-color: #ecd9a5; }
.nota.resuelta { opacity: .6; }
.nota-cabecera { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; font-size: .85rem; color: var(--ink-muted); }
.nota-cabecera strong { color: var(--ink); }
.nota-texto { white-space: pre-wrap; }
.nota-acciones { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.notificacion { display: flex; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--rule-soft); align-items: flex-start; }
.notificacion:last-child { border-bottom: 0; }
.notificacion.leida { opacity: .55; }
.notificacion .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--maroon); margin-top: 7px; flex: 0 0 auto; }
.notificacion.leida .punto { background: var(--rule); }
.notificacion small { display: block; }
.stock-barra { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; min-width: 70px; }
.stock-barra i { display: block; height: 100%; background: var(--green); }
.stock-barra.bajo i { background: var(--gold); }
.stock-barra.sin i { background: var(--red); }
.receta-tarjeta { display: flex; flex-direction: column; gap: .4rem; cursor: pointer; }
.receta-tarjeta h3 { font-size: 1.1rem; }
.receta-datos { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-muted); }
.receta-datos b { color: var(--ink); }
.ingrediente-fila { display: grid; grid-template-columns: 1fr 110px 36px; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.ingrediente-fila select { width: 100%; }
.produccion-dia { margin-bottom: 1.2rem; }
.produccion-dia h3 { margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.orden { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--rule-soft); border-radius: 10px; margin-bottom: .5rem; flex-wrap: wrap; }
.orden.terminada { opacity: .75; }
.orden .orden-nombre { flex: 1; min-width: 160px; }
.orden .orden-nombre strong { display: block; }
.orden .orden-nombre small { display: block; }
.contraste-resumen { display: flex; gap: 1rem; flex-wrap: wrap; }
.bitacora-fila small { white-space: nowrap; }
.perfil-cabecera { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.grafico { width: 100%; height: auto; display: block; font-family: var(--fuente); }
.grafico text { font-size: 11px; fill: var(--ink-muted); }
.grafico .eje { stroke: var(--rule); stroke-width: 1; }
.grafico .barra { fill: var(--maroon); }
.grafico .barra-2 { fill: var(--gold); }
.grafico .linea { fill: none; stroke: var(--maroon); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .linea-2 { fill: none; stroke: var(--gold); stroke-width: 2.2; }
.grafico .area { fill: rgba(124, 18, 32, .08); }
.grafico .punto { fill: var(--surface); stroke: var(--maroon); stroke-width: 2; }
.leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--ink-muted); margin-top: .4rem; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: .3rem; }
.barras-h { display: flex; flex-direction: column; gap: .45rem; }
.barras-h .fila { display: grid; grid-template-columns: 1fr 2fr auto; gap: .6rem; align-items: center; font-size: .88rem; }
.barras-h .fila .pista { height: 10px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.barras-h .fila .pista i { display: block; height: 100%; background: var(--maroon); border-radius: 5px; }
.barras-h .fila .pista.dorada i { background: var(--gold); }
.chip-dif { font-weight: 700; }
.bloque-titulo td { background: var(--surface-2); font-weight: 700; color: var(--maroon); font-size: .85rem; letter-spacing: .03em; }
.roles-check { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.roles-check label { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; }
.roles-check input:disabled + span { opacity: .6; }
.pedido-proveedor { margin-bottom: 1.1rem; }
.pedido-proveedor .tarjeta-cabecera h3 { display: flex; align-items: center; gap: .5rem; }
.pedido-texto { white-space: pre-wrap; font-family: var(--mono); font-size: .85rem; background: var(--surface-2); border: 1px solid var(--rule-soft); border-radius: 10px; padding: .8rem 1rem; }
.tabla input.pedir { max-width: 90px; }
.chip-dif.mas { color: var(--green); }
.chip-dif.menos { color: var(--red); }

/* ---------- 7b. Pie "desarrollado por" y barra inferior del celular ---------- */
.pie { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: 1.2rem 1rem 1.4rem; color: var(--ink-soft); font-size: .8rem; margin-top: auto; }
.pie-gfcode { display: inline-flex; align-items: center; opacity: .85; }
.pie-gfcode:hover { opacity: 1; }
.pie-gfcode img { height: 17px; width: auto; display: block; }
.login .pie { margin-top: .4rem; }
.login-logo { width: 190px; max-width: 70%; height: auto; display: block; margin: 0 auto .4rem; }
.solo-movil-flex { display: none; }

/* ---------- 7c. Carta digital ---------- */
.carta-categoria { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 1rem; overflow: hidden; }
.carta-categoria > .tarjeta-cabecera { padding: .9rem 1rem; margin: 0; border-bottom: 1px solid var(--rule-soft); }
.carta-categoria.oculto { opacity: .55; }
.carta-categoria.oculto > .tarjeta-cabecera { background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(33, 22, 9, .035) 8px, rgba(33, 22, 9, .035) 16px); }
.carta-volanta { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.carta-grupo { padding: .5rem 1rem .2rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-weight: 600; }
.carta-items { list-style: none; margin: 0; padding: 0; }
.carta-item { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-top: 1px solid var(--rule-soft); }
.carta-item:first-child { border-top: 0; }
.carta-item.oculto { opacity: .5; }
.carta-foto { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; background: var(--surface-3); }
.carta-foto-vacia { width: 44px; height: 44px; border-radius: 9px; flex: 0 0 auto; background: var(--surface-3); color: var(--ink-soft); display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.carta-foto-rota { background: var(--surface-3); object-fit: contain; padding: 10px; }
.carta-item-texto { flex: 1; min-width: 0; }
.carta-item-texto strong { display: block; font-size: .95rem; }
.carta-item-texto small { display: block; color: var(--ink-muted); font-size: .82rem; line-height: 1.3; }
.carta-etiquetas { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; }
.carta-precio { font-family: var(--mono); font-size: .9rem; white-space: nowrap; text-align: right; flex: 0 0 auto; }
.carta-precio small { display: block; color: var(--ink-soft); font-size: .72rem; }
.carta-acciones { display: flex; gap: .15rem; flex: 0 0 auto; align-items: center; }
.carta-pie { padding: .6rem 1rem; border-top: 1px solid var(--rule-soft); background: var(--surface-2); }
.kpi-chico strong { font-size: 1.3rem; }
.campo-grupo { border: 1px solid var(--rule-soft); border-radius: 10px; padding: .7rem .8rem; margin: 0 0 .85rem; }
.campo-grupo > legend { font-size: .82rem; font-weight: 600; color: var(--ink-muted); padding: 0 .3rem; }
.fila-precio { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* ---------- 8. Celular y tablet ----------
   En el celular la app se simplifica: barra inferior con lo principal de
   cada rol, menú completo en un cajón, botones grandes, una columna, modales
   que suben desde abajo y tablas que se deslizan con la primera columna fija. */
@media (max-width: 900px) {
  :root { --lateral: 290px; }
  html { font-size: 16px; }
  .app { display: block; }
  .lateral { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: transform .2s; height: 100vh; height: 100dvh; }
  .lateral.abierta { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .4); }
  .lateral-fondo.visible { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 39; }
  .solo-movil, .boton-icono.solo-movil { display: inline-grid; }
  .solo-movil-flex { display: flex; }
  .menu-item { padding: .75rem .8rem; font-size: 1rem; }
  .cabecera { padding: .45rem .7rem; gap: .5rem; }
  .cabecera-titulo { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cabecera .etiqueta { display: none; }
  .principal { min-height: 100vh; min-height: 100dvh; }
  .contenido { padding: .9rem .8rem 1rem; }
  /* Sin barra inferior, el pie no tiene que dejarle lugar: el hueco de 64 px
     que había acá era para que el último renglón no quedara tapado. */
  .pie { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }

  /* Más simple: una columna, menos texto, botones grandes */
  .encabezado { margin-bottom: .9rem; }
  .encabezado h1 { font-size: 1.35rem; }
  .encabezado .subtitulo { display: none; }
  .encabezado-acciones { width: 100%; }
  .encabezado-acciones .boton, .accesos-rapidos .boton { flex: 1 1 auto; justify-content: center; }
  .accesos-rapidos .boton:nth-child(n+4) { display: none; }   /* en el celular, solo los tres primeros accesos */
  .boton { min-height: 44px; padding: .55rem .9rem; }
  .boton-chico { min-height: 36px; }
  .boton-icono { width: 42px; height: 42px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi { padding: .7rem .8rem; }
  .kpi strong { font-size: 1.35rem; }
  .kpi small { font-size: .68rem; }
  .kpi .kpi-pie { font-size: .74rem; }
  .grilla, .grilla-2, .fila-campos { grid-template-columns: 1fr; }
  .tarjeta { padding: .9rem .9rem; border-radius: 12px; }
  .barra-filtros .buscador { max-width: none; flex-basis: 100%; }
  .barra-filtros select { flex: 1; }
  input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], input[type=email], select, textarea { font-size: 16px; padding: .6rem .7rem; min-height: 44px; }
  .pestanas { gap: 0; }
  .pestana { padding: .6rem .6rem; font-size: .9rem; }

  /* Tablas: se deslizan, la primera columna queda fija */
  .tabla th, .tabla td { padding: .5rem .55rem; font-size: .88rem; }
  .tabla th:first-child, .tabla td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--rule-soft); }
  .tabla th:first-child { background: var(--surface-2); }
  .tabla td.acciones .boton span, .tabla td.acciones .boton-chico span { display: none; }

  /* Modales como hoja que sube desde abajo */
  #modal { place-items: end center; padding: 0; }
  .modal-caja { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 18px 18px 0 0; }
  .modal-ancha { width: 100%; }
  .modal-cabecera { padding: .8rem 1rem .4rem; }
  .modal-cuerpo { padding: .2rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .acciones-derecha { flex-direction: column-reverse; }
  .acciones-derecha .boton { width: 100%; justify-content: center; }

  .avisos { left: .8rem; right: .8rem; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .aviso { max-width: none; }
  .ingrediente-fila { grid-template-columns: 1fr 84px 36px; }
  .barras-h .fila { grid-template-columns: 1fr 1.2fr auto; font-size: .82rem; }
  .orden { padding: .7rem .8rem; }
  /* La carta en el celular: la foto y el precio se mantienen, las acciones
     bajan a su propia línea para que entren los dedos. */
  .carta-item { flex-wrap: wrap; row-gap: .4rem; padding: .7rem .8rem; }
  .carta-item-texto { flex: 1 1 60%; }
  .carta-precio { text-align: left; }
  .carta-acciones { flex-basis: 100%; justify-content: flex-end; gap: .25rem; }
  .carta-acciones .boton-icono { width: 38px; height: 38px; }
  .fila-precio { grid-template-columns: 1fr; }
  .login { padding: 1rem .8rem; align-content: start; }
  .login-caja { padding: 1.6rem 1.2rem 1rem; }
}
@media print {
  .lateral, .cabecera, .encabezado-acciones, .boton, .avisos { display: none !important; }
  .contenido { padding: 0; max-width: none; }
  body { background: #fff; }
}

/* ---------------------------------------------------------------------------
   Foto de un artículo de la carta
   ---------------------------------------------------------------------------
   El input de archivo del navegador queda escondido y lo dispara un botón:
   el de fábrica no se puede estilar y escribe "Sin archivos seleccionados".
   La vista previa se muestra al mismo alto que la carta de las mesas (220 px)
   para que lo que se ve acá sea lo que ve el cliente.
   ------------------------------------------------------------------------ */

.foto-acciones {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: -.4rem 0 .6rem;
}

.foto-vista {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: var(--crema, #faf5e9);
  border: 1px solid var(--borde, #e4d9c3);
  border-radius: .6rem;
  margin-bottom: .8rem;
}

.foto-vista[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Plegar categorías en el editor de la carta
   ---------------------------------------------------------------------------
   Con 121 artículos, tenerlos todos abiertos deja una pantalla por la que hay
   que bajar un rato largo. Las categorías arrancan cerradas y se abre la que
   interesa. La flecha gira para decir en qué estado está.
   ------------------------------------------------------------------------ */

.carta-plegar {
  background: none;
  border: 0;
  padding: .15rem;
  margin-right: .3rem;
  cursor: pointer;
  color: inherit;
  line-height: 0;
  vertical-align: middle;
}

.carta-plegar:hover { opacity: .7; }

.carta-plegar .icono {
  transition: transform .15s ease;
}

/* ---------------------------------------------------------------------------
   Elegir el color de una categoría
   ------------------------------------------------------------------------ */

.colores {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
}

.color-opcion {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  font-size: .9rem;
}

.color-muestra {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .15);
  display: inline-block;
  flex-shrink: 0;
}

/* El color elegido se marca con un anillo, que se ve igual de bien en
   cualquiera de los seis colores. */
.color-opcion input:checked + .color-muestra {
  box-shadow: 0 0 0 2px var(--crema, #faf5e9), 0 0 0 4px currentColor;
}

.campo-ayuda { margin: -.3rem 0 .6rem; font-size: .85rem; }

/* ---------------------------------------------------------------------------
   Vista previa del cartel de la categoría
   ---------------------------------------------------------------------------
   Es la misma composición que ve el cliente: foto de fondo, velo del color
   elegido, volanta, título y subtítulo centrados. Así se elige el color o la
   foto mirando el resultado. Encima van solo dos botones, uno en cada punta.
   ------------------------------------------------------------------------ */

.cat-vista {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: .6rem;
  padding: 1.5rem 3rem;
  text-align: center;
  color: #f6ead9;
  min-height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-vista::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--foto, none);
  background-size: cover;
  background-position: center;
}

/* El mismo velo que usa la carta, para que el color se vea igual que allá. */
.cat-vista::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acento) 60%, #1a1108) 0%,
    color-mix(in srgb, var(--acento) 82%, #1a1108) 100%);
  opacity: .87;
}

.cat-vista-volanta {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid rgba(246, 234, 217, .7);
  padding: .18rem .5rem;
  margin-bottom: .5rem;
}

.cat-vista-titulo { margin: 0; font-size: 1.5rem; color: #fff; line-height: 1.15; }
.cat-vista-nota { margin: .3rem 0 0; font-style: italic; font-size: .9rem; color: rgba(246, 234, 217, .9); }
.cat-vista-raya { display: block; height: 3px; width: 48px; background: #f6ead9; margin: .7rem auto 0; }
.cat-vista-dato { display: block; margin-top: .45rem; font-size: .75rem; color: rgba(246, 234, 217, .8); }

.cat-vista-boton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(26, 17, 8, .4);
  border: 1px solid rgba(246, 234, 217, .35);
  border-radius: 50%;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f6ead9;
  cursor: pointer;
  padding: 0;
}

.cat-vista-boton:hover { background: rgba(26, 17, 8, .6); }
.cat-vista-boton.izquierda { left: .6rem; }
.cat-vista-boton.derecha { right: .6rem; }

.cat-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .9rem 0 .2rem;
}

/* ---------------------------------------------------------------------------
   Elegir color: la ruedita del sistema más los seis de la marca
   ------------------------------------------------------------------------ */

.colores { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }

.colores input[type="color"] {
  width: 3rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--borde, #e4d9c3);
  border-radius: .4rem;
  background: none;
  cursor: pointer;
}

.color-marca {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .15);
  cursor: pointer;
  padding: 0;
}

.color-marca:hover { transform: scale(1.12); }

/* ---------------------------------------------------------------------------
   Recortador de fotos
   ------------------------------------------------------------------------ */

.recortador {
  position: fixed;
  inset: 0;
  z-index: 200;            /* por encima del formulario, que está en 100 */
  background: rgba(26, 17, 8, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.recortador-caja {
  background: var(--crema, #faf5e9);
  border-radius: .7rem;
  padding: 1rem;
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
}

.recortador-ayuda { margin: 0 0 .7rem; font-size: .88rem; }

.recortador-marco {
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid var(--borde, #e4d9c3);
  border-radius: .4rem;
  overflow: hidden;
  touch-action: none;      /* el dedo arrastra la foto, no desplaza la página */
}

.recortador-marco canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.recortador-marco canvas:active { cursor: grabbing; }

.recortador-zoom { display: flex; align-items: center; gap: .6rem; margin: .8rem 0; font-size: .9rem; }
.recortador-zoom input { flex: 1; }
.recortador-botones { display: flex; justify-content: flex-end; gap: .5rem; }

/* ---------------------------------------------------------------------------
   El editor de la carta en el celular
   ---------------------------------------------------------------------------
   A 400 px de ancho los botones se salían de la fila y los títulos quedaban
   apretados contra ellos. Acá se acomoda: el cartel de la categoría baja de
   altura, los botones de acción pasan a ocupar el ancho completo repartidos,
   y la fila de cada artículo pasa a dos líneas en vez de pelear por el
   espacio.
   ------------------------------------------------------------------------ */

@media (max-width: 560px) {
  .cat-vista {
    padding: 1.1rem 2.6rem;
    min-height: 6rem;
  }

  .cat-vista-titulo { font-size: 1.15rem; }
  .cat-vista-nota { font-size: .8rem; }
  .cat-vista-boton { width: 1.9rem; height: 1.9rem; }
  .cat-vista-boton.izquierda { left: .35rem; }
  .cat-vista-boton.derecha { right: .35rem; }

  /* Los botones de acción se reparten el ancho en vez de desbordarse. */
  .cat-acciones { gap: .35rem; }
  .cat-acciones .boton { flex: 1 1 auto; justify-content: center; }

  /* La barra de filtros en columna: el buscador entero arriba y los
     controles debajo, sin que el selector quede de 3 cm. */
  .barra-filtros { flex-direction: column; align-items: stretch; }
  .barra-filtros .buscador,
  .barra-filtros select { width: 100%; }

  /* Cada artículo: foto y nombre arriba, precio y botones abajo. Antes todo
     iba en una línea y los botones se escapaban del borde. */
  .carta-item { flex-wrap: wrap; row-gap: .5rem; }
  .carta-item .carta-precio { margin-left: auto; }
  .carta-item .acciones-derecha { width: 100%; justify-content: flex-end; }

  /* El modal, de borde a borde: en una pantalla chica cada milímetro cuenta. */
  .modal-caja { width: 100%; max-width: 100%; border-radius: .5rem; }

  .foto-vista { height: 150px; }
}

/* ---------------------------------------------------------------------------
   Elegir el color: muestra grande, atajos de marca y barras RGB
   ---------------------------------------------------------------------------
   La muestra de arriba es la prueba: se ve el color elegido antes de guardar.
   Las barras son el selector RGB dibujado por la app, no el del sistema: el
   del sistema cambia de un teléfono a otro y en algunos no abre.
   ------------------------------------------------------------------------ */

.color-prueba {
  height: 3.2rem;
  border-radius: .45rem;
  border: 1px solid var(--borde, #e4d9c3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .7rem;
}

.color-prueba span {
  background: rgba(255, 255, 255, .92);
  color: #211609;
  font-family: ui-monospace, monospace;
  font-size: .82rem;
  padding: .12rem .5rem;
  border-radius: .25rem;
  letter-spacing: .04em;
}

.color-canal {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .45rem;
  font-size: .85rem;
}

.color-canal span { flex: 0 0 3.2rem; }
.color-canal input[type="range"] { flex: 1; min-width: 0; }

.color-canal output {
  flex: 0 0 2.4rem;
  text-align: right;
  font-family: ui-monospace, monospace;
  font-size: .8rem;
  color: var(--ink-muted, #6b5a41);
}

.color-hex { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; font-size: .85rem; }
.color-hex span { flex: 0 0 3.2rem; }
.color-hex input { flex: 1; font-family: ui-monospace, monospace; }

/* Los tres botones de la derecha del cartel: subir, bajar y editar. */
.cat-vista-botones {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: .3rem;
}

.cat-vista-botones.derecha { right: .6rem; }
.cat-vista-botones .cat-vista-boton { position: static; transform: none; }
.cat-vista-boton:disabled { opacity: .35; cursor: default; }

@media (max-width: 560px) {
  .cat-vista { padding-left: 2.4rem; padding-right: 6.2rem; }
  .cat-vista-botones.derecha { right: .3rem; gap: .2rem; }
  .color-canal span, .color-hex span { flex-basis: 2.6rem; }
}

/* ---------------------------------------------------------------------------
   Lo que está oculto, y agregar artículos dentro de su categoría
   ------------------------------------------------------------------------ */

/* El resumen de la carta: un renglón bajo, no una fila de tarjetas.
   ---------------------------------------------------------------------------
   Arriba de la carta la información que vale es "esto ve el cliente, esto
   no". Ocupaba cuatro tarjetas con el mismo peso visual que la carta misma y
   empujaba las categorías abajo del pliegue, sobre todo en el celular. Ahora
   las dos cifras van en una pastilla que se toca, y el último cambio es una
   etiqueta fina que ni compite. */
.carta-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-bottom: 1rem;
}

.resumen-cifras {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  font-size: .85rem;
  color: var(--ink-muted);
  line-height: 1;
}
.resumen-cifras b { font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }

.resumen-cifras.tocable { cursor: pointer; }
.resumen-cifras.tocable:hover,
.resumen-cifras.tocable:focus-visible {
  border-color: var(--maroon);
  box-shadow: 0 3px 12px -8px rgba(33, 22, 9, .6);
}

.cifra { display: inline-flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.cifra-alerta b { color: var(--maroon); }
.cifra-separador { width: 1px; height: 1.1em; background: var(--rule); }
.cifra-ver { display: inline-flex; color: var(--ink-muted); }
.cifra-ver svg { width: 15px; height: 15px; }

/* La marca de agua del último cambio: está para consultarla, no para leerla. */
.resumen-sello { font-size: .74rem; color: var(--ink-muted); opacity: .75; }

/* En el celular la pastilla toma el ancho entero y las dos cifras se separan
   a las puntas. Centrada y angosta quedaba flotando en el medio con aire
   muerto a los costados, y además es el botón que abre la lista de lo
   oculto: cuanto más grande, más fácil de acertar con el dedo. */
@media (max-width: 560px) {
  .carta-resumen { gap: .4rem; }
  .resumen-cifras { width: 100%; justify-content: space-between; padding: .55rem .9rem; }
  /* Con las cifras separadas a las puntas, la rayita del medio ya no separa
     nada: separa el espacio. */
  .cifra-separador { display: none; }
  .resumen-sello { width: 100%; }
}

/* Botones propios de la pantalla, en la barra de arriba junto a la campana. */
.cabecera-acciones { display: flex; align-items: center; gap: .15rem; }
.cabecera-acciones .boton-icono { text-decoration: none; }

/* Un encabezado sin título es solo la bajada: no necesita el aire que separa
   un titular del contenido. */
.encabezado.sin-titulo { margin-bottom: .8rem; }
.encabezado.sin-titulo .subtitulo { margin-top: 0; }

/* Crear una categoría, debajo del selector de categorías. */
.agregar-categoria { margin: -.4rem 0 1.1rem; }
@media (max-width: 560px) {
  .agregar-categoria .boton { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Flyers: el otro tipo de artículo
   ------------------------------------------------------------------------ */

/* La miniatura de un flyer se muestra entera, no recortada al cuadrado: un
   flyer es vertical y con "cover" se vería nada más que una franja del medio,
   que es justo lo que no permite reconocerlo en la lista. */
.carta-foto-flyer { object-fit: contain; background: var(--surface-2); padding: 2px; }

.aviso-flyer {
  margin: 0 0 .9rem;
  padding: .6rem .75rem;
  border-left: 3px solid var(--navy);
  background: var(--navy-soft);
  border-radius: 0 8px 8px 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ink);
}

.oculto-titulo { margin: 1.1rem 0 .4rem; font-size: .95rem; }
.oculto-lista { list-style: none; margin: 0; padding: 0; }

.oculto-fila {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--borde, #e4d9c3);
  padding: .6rem .2rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  color: inherit;
  font: inherit;
}

.oculto-fila:hover { background: rgba(124, 18, 32, .05); }

/* El botón de agregar va al final de la categoría, a la derecha: el artículo
   nace ya dentro de la categoría donde se está mirando. */
.cat-agregar { display: flex; justify-content: flex-end; margin-top: .9rem; }

/* Al llegar desde la lista de ocultos, el destino se resalta un momento para
   no tener que buscarlo con la vista. */
.recien-llegado {
  animation: resaltar 2s ease;
  border-radius: .4rem;
}

@keyframes resaltar {
  0%, 60% { box-shadow: 0 0 0 3px var(--dorado, #a97815); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .recien-llegado { animation: none; box-shadow: 0 0 0 3px var(--dorado, #a97815); }
}

/* El rótulo del bloque de flyers, para que no se confunda con un grupo de
   platos: es un afiche a todo el ancho, no una fila de la carta. */
.carta-grupo-flyer { color: var(--navy); }

/* ---------------------------------------------------------------------------
   Uso de la carta: qué miran los clientes
   ------------------------------------------------------------------------ */

.uso-columnas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.uso-aclaracion { font-size: .82rem; margin: .2rem 0 .8rem; }

.uso-lista { list-style: none; margin: 0; padding: 0; counter-reset: puesto; }

/* Cada fila lleva a su categoría en la carta: ver que un plato no lo mira
   nadie sirve poco si después hay que ir a buscarlo a mano. */
.uso-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 2.6rem;
  align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
}
.uso-fila:last-child { border-bottom: 0; }
.uso-fila:hover .uso-nombre { color: var(--maroon); }

.uso-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }

/* La barra se mide contra el más tocado, no contra el total: lo que interesa
   es comparar entre sí. */
.uso-barra { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.uso-barra i { display: block; height: 100%; background: var(--maroon); border-radius: 999px; }

.uso-veces { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; }

@media (max-width: 560px) {
  .uso-fila { grid-template-columns: minmax(0, 1fr) 58px 2.2rem; }
}

/* El total de aperturas del menú: el número grande de la pantalla de uso. */
.aperturas { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.aperturas-numero { font-family: var(--fuente-titulos); font-size: 2.1rem; color: var(--maroon); font-variant-numeric: tabular-nums; }
.aperturas-rotulo { margin-left: .4rem; font-size: .95rem; color: var(--ink-muted); }
.aperturas-nota { flex: 1 1 260px; font-size: .78rem; margin: 0; line-height: 1.45; }

/* La sugerencia en la lista del editor: sin foto, con el rótulo de arriba
   como primera línea. */
.carta-foto-sugerencia { color: var(--green); }
.carta-foto-sugerencia svg { width: 20px; height: 20px; }
.carta-rotulo { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem !important; font-weight: 700; color: var(--green) !important; }

/* El renglón de un grupo en el editor: su nombre a la izquierda y lo que se
   le puede hacer a la derecha. Antes esto se editaba adentro del formulario
   de la categoría, que era esconderlo. */
.grupo-fila { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.grupo-fila .carta-grupo { padding: 0 1rem; margin: 0; flex: 1; min-width: 0; }
.grupo-fila .carta-grupo-suelto { color: var(--ink-soft); font-style: italic; text-transform: none; letter-spacing: 0; }
.grupo-acciones { display: flex; align-items: center; flex: 0 0 auto; padding-right: .6rem; }
.grupo-acciones .boton-icono { width: 30px; height: 30px; }
.grupo-acciones .boton-icono .icono { width: 16px; height: 16px; }
.grupo-acciones .boton-icono:disabled { opacity: .3; cursor: default; }

/* Los grupos tienen que saltar a la vista como lo que son: los titulares que
   parten la categoría. Antes eran un texto gris más, del mismo peso que la
   descripción de un plato, y había que leer para distinguirlos. */
.grupo-fila {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: .35rem .2rem .35rem 0;
}
.grupo-fila .carta-grupo { color: #7a5508; font-size: .78rem; }
.grupo-fila .carta-grupo-suelto { color: var(--ink-soft); }
.grupo-fila .boton-icono { color: #7a5508; }
.grupo-fila .boton-icono:hover { background: rgba(169, 120, 21, .18); }

/* El arroba fijo pegado al campo de Instagram: se ve cómo se escribe y no se
   puede borrar. */
.con-prefijo { display: flex; align-items: stretch; }
.con-prefijo .prefijo {
  display: grid; place-items: center; padding: 0 .6rem;
  border: 1px solid var(--rule); border-right: 0; border-radius: 9px 0 0 9px;
  background: var(--surface-2); color: var(--ink-muted); font-weight: 700;
}
.con-prefijo input { border-radius: 0 9px 9px 0; }

/* La lista de correos que reciben copia de las sugerencias. */
.fila-correo { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.fila-correo input { flex: 1; }

/* La foto de perfil que viene de Google. */
.avatar-foto { object-fit: cover; padding: 0; }