/* ============================================================
   Casa Dani — Hoja de estilos
   Identidad propia: bar/restaurante cálido y casero
   Paleta: crema + burdeos + dorado + verde oliva
   ============================================================ */

:root {
  /* Marca */
  --crema: #f6efe1;
  --crema-card: #fffdf8;
  --crema-2: #efe6d2;
  --burdeos: #7b1e2b;
  --burdeos-osc: #5d1420;
  --oliva: #5c6b3c;
  --oliva-osc: #44512c;
  --dorado: #c19a3e;
  --dorado-claro: #d9bd6e;
  --dorado-osc: #9a7a2b;
  --carbon: #2c2622;
  --gris: #6f665c;
  --gris-claro: #9c9388;
  --linea: #e4d9c2;

  /* Estados (color = significado) */
  --c-libre: #97a07c;
  --c-nuevo: #c98a1b;
  --c-prep: #c2410c;
  --c-listo: #3f7d3f;
  --c-servido: #2e6e8e;
  --c-pendiente: #8a5a13;
  --c-cobrada: #707b6b;
  --c-incidencia: #b3261e;

  --sombra: 0 2px 10px rgba(60, 40, 20, .08);
  --sombra-fuerte: 0 8px 30px rgba(60, 40, 20, .18);
  --radio: 14px;
  --radio-sm: 9px;

  --serif: "Playfair Display", "Georgia", "Times New Roman", serif;
  --display: "Cinzel", "Playfair Display", "Georgia", serif;
  --sans: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--carbon);
  background: var(--crema);
  line-height: 1.5;
  font-size: 16px;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 .4em; color: var(--carbon); }
a { color: var(--burdeos); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
p { margin: 0 0 1em; }

.contenedor { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 18px; }
.contenedor-ancho { max-width: 1320px; }

/* ---------------- Botones ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  padding: .7em 1.3em; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .08s ease, background .15s, box-shadow .15s;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--burdeos); color: #fff; }
.btn-primario:hover { background: var(--burdeos-osc); color: #fff; }
.btn-secundario { background: transparent; color: var(--burdeos); border-color: var(--burdeos); }
.btn-secundario:hover { background: rgba(123, 30, 43, .07); color: var(--burdeos); }
.btn-oliva { background: var(--oliva); color: #fff; }
.btn-oliva:hover { background: var(--oliva-osc); color: #fff; }
.btn-dorado { background: var(--dorado); color: #fff; }
.btn-dorado:hover { background: var(--dorado-osc); color: #fff; }
.btn-fantasma { background: #fff; color: var(--carbon); border-color: var(--linea); }
.btn-fantasma:hover { background: var(--crema); }
.btn-peligro { background: #fff; color: var(--c-incidencia); border-color: var(--c-incidencia); }
.btn-peligro:hover { background: var(--c-incidencia); color: #fff; }
.btn-bloque { width: 100%; }
.btn-grande { font-size: 1.15rem; padding: .9em 1.4em; }
.btn-sm { font-size: .85rem; padding: .5em .9em; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- Logo ---------------- */
.logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo .logo-emblema { flex: 0 0 auto; }
.logo .logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo .logo-sup { font-family: var(--display); font-size: .62rem; letter-spacing: .28em; color: var(--dorado-osc); text-transform: uppercase; margin-bottom: .25em; }
.logo .logo-nombre { font-family: var(--display); font-size: 1.32rem; font-weight: 700; letter-spacing: .04em; color: var(--burdeos); text-transform: uppercase; }
.logo.logo-claro .logo-nombre { color: #fff; }
.logo.logo-claro .logo-sup { color: var(--dorado-claro); }
.logo.logo-vert { flex-direction: column; gap: .4rem; text-align: center; }
.logo.logo-vert .logo-text { align-items: center; }

/* ---------------- Badges / etiquetas ---------------- */
.tag { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .25em .6em; border-radius: 999px; line-height: 1.4; }
.tag-casero { background: #f3ead2; color: #8a6d1f; }
.tag-recomendado { background: #f5dde0; color: var(--burdeos); }
.tag-nuevo { background: #dceadd; color: #2f6b39; }
.tag-picante { background: #f7ddd4; color: #b23b16; }
.tag-singluten { background: #e6ecf3; color: #2c5d80; }
.tag-vegetariano { background: #e3eedb; color: #4a6a2e; }
.tag-prov { background: #efe7d6; color: #8a7a52; border: 1px dashed #c9b78c; }

/* Chip de estado (pedidos / mesas) */
.chip { display: inline-flex; align-items: center; gap: .4em; font-size: .8rem; font-weight: 700;
  padding: .3em .75em; border-radius: 999px; color: #fff; white-space: nowrap; }
.chip::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: rgba(255,255,255,.85); }
.est-nuevo, .ms-recibido { background: var(--c-nuevo); }
.est-prep, .ms-cocina { background: var(--c-prep); }
.est-listo, .ms-listo { background: var(--c-listo); }
.est-servido { background: var(--c-servido); }
.ms-pendiente { background: var(--c-pendiente); }
.est-cancelado { background: var(--c-cobrada); }
.ms-libre { background: var(--c-libre); }
.ms-cobrada { background: var(--c-cobrada); }
.chip-incidencia { background: var(--c-incidencia); }

/* ---------------- Topbar interna (panel/cocina/caja) ---------------- */
.topbar { background: var(--burdeos); color: #fff; position: sticky; top: 0; z-index: 50; box-shadow: var(--sombra); }
.topbar-inner { display: flex; align-items: center; gap: 1rem; padding: .55rem 18px; flex-wrap: wrap; }
.topbar nav { display: flex; gap: .3rem; flex-wrap: wrap; margin-left: auto; }
.topbar nav a { color: rgba(255,255,255,.85); font-weight: 600; font-size: .92rem; padding: .45em .8em; border-radius: 999px; }
.topbar nav a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.topbar nav a.activo { background: #fff; color: var(--burdeos); }

/* Reloj grande */
.reloj { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; padding: .15rem .9rem; background: rgba(0,0,0,.16); border-radius: 12px; }
.reloj .reloj-hora { font-family: var(--display); font-size: 1.9rem; font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.reloj .reloj-fecha { font-size: .72rem; text-transform: capitalize; opacity: .9; margin-top: .15em; }
.reloj-xl .reloj-hora { font-size: 2.6rem; }

/* ---------------- Tarjetas genéricas ---------------- */
.card { background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.card-p { padding: 1.1rem 1.2rem; }
.seccion { padding: 3.2rem 0; }
.seccion-titulo { text-align: center; margin-bottom: 2rem; }
.seccion-titulo h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.seccion-titulo .sub { color: var(--gris); max-width: 640px; margin: 0 auto; }
.eyebrow { display: inline-block; font-family: var(--display); letter-spacing: .25em; text-transform: uppercase; font-size: .72rem; color: var(--dorado-osc); margin-bottom: .6rem; }

/* ============================================================
   WEB PÚBLICA
   ============================================================ */
.web-header { position: sticky; top: 0; z-index: 40; background: rgba(246,239,225,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.web-header .contenedor { display: flex; align-items: center; gap: 1rem; padding-top: .6rem; padding-bottom: .6rem; }
.web-header nav { margin-left: auto; display: flex; gap: 1.3rem; align-items: center; }
.web-header nav a { color: var(--carbon); font-weight: 600; font-size: .95rem; }
.web-header nav .btn { color: #fff; }
.web-nav-links { display: flex; gap: 1.3rem; }

.hero { position: relative; padding: 4.5rem 0 4rem; text-align: center;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(193,154,62,.16), transparent 60%),
    linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%); }
.hero .eyebrow { font-size: .8rem; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); margin-bottom: .35em; }
.hero .lema { font-size: clamp(1.05rem, 2.5vw, 1.35rem); color: var(--gris); max-width: 620px; margin: 0 auto 2rem; }
.hero-botones { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.hero-emblema { margin: 0 auto 1.5rem; }

.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.paso { text-align: center; padding: 1.6rem 1.2rem; }
.paso .num { width: 54px; height: 54px; border-radius: 50%; background: var(--burdeos); color: #fff; font-family: var(--display);
  font-size: 1.5rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.paso h3 { font-size: 1.2rem; }
.paso p { color: var(--gris); margin: 0; }

.bloque-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.lista-check { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.lista-check li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.3rem; height: 1.3rem; background: var(--oliva); color: #fff; border-radius: 50%; font-size: .8rem; display: flex; align-items: center; justify-content: center; }

.tarjeta-destacada { background: linear-gradient(160deg, var(--burdeos), var(--burdeos-osc)); color: #fff; border-radius: var(--radio); padding: 2.2rem; }
.tarjeta-destacada h3 { color: #fff; }
.tarjeta-destacada .btn { margin-top: 1rem; }

/* Mini-carta destacada en la home */
.mini-carta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.mini-cat { text-align: center; padding: 1.4rem .8rem; border-radius: var(--radio); background: var(--crema-card); border: 1px solid var(--linea); }
.mini-cat .emoji { font-size: 2rem; }
.mini-cat h4 { margin: .5rem 0 .1rem; font-size: 1.05rem; }
.mini-cat span { color: var(--gris); font-size: .85rem; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.info-card h3 { display: flex; align-items: center; gap: .5rem; }
.horario-tabla { width: 100%; border-collapse: collapse; }
.horario-tabla td { padding: .5rem 0; border-bottom: 1px dashed var(--linea); }
.horario-tabla td:last-child { text-align: right; color: var(--gris); }

.web-footer { background: var(--carbon); color: #d9cfc0; padding: 2.5rem 0 1.5rem; }
.web-footer a { color: var(--dorado-claro); }
.web-footer .pie-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 1.5rem; }
.web-footer .nota-prov { font-size: .8rem; opacity: .7; border-top: 1px solid rgba(255,255,255,.12); padding-top: 1rem; }

.aviso-prov { background: #fbf3df; border: 1px dashed #d9bd6e; color: #7a6322; padding: .35em .7em; border-radius: 8px; font-size: .82rem; display: inline-block; }

/* ============================================================
   CARTA DIGITAL (cliente / móvil)
   ============================================================ */
.carta-top { background: var(--burdeos); color: #fff; padding: .8rem 0; position: sticky; top: 0; z-index: 30; }
.carta-top .contenedor { display: flex; align-items: center; gap: 1rem; }
.btn-volver-top { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; border: 1px solid rgba(255,255,255,.3); transition: background .15s; }
.btn-volver-top:hover { background: rgba(255,255,255,.28); }
.mesa-badge { margin-left: auto; background: #fff; color: var(--burdeos); font-weight: 700; padding: .4em .9em; border-radius: 999px; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.mesa-badge small { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.mesa-badge b { font-size: 1.1rem; }

.cat-nav { position: sticky; top: 56px; z-index: 25; background: var(--crema); border-bottom: 1px solid var(--linea); }
.cat-nav-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: .6rem 18px; max-width: 1000px; margin: 0 auto; }
.cat-nav-inner button { background: var(--crema-card); border: 1px solid var(--linea); border-radius: 999px; padding: .45em .9em; font-size: .9rem; font-weight: 600; color: var(--carbon); cursor: pointer; display: inline-flex; gap: .35em; align-items: center; }
.cat-nav-inner button.activo { background: var(--burdeos); color: #fff; border-color: var(--burdeos); }
/* Botón "Categorías" (se muestra solo en móvil para plegar/desplegar) */
.cat-toggle { display: none; width: 100%; align-items: center; justify-content: space-between; gap: .5rem; background: var(--crema-card); border: none; border-bottom: 1px solid var(--linea); padding: .7rem 18px; font-size: 1rem; font-weight: 700; color: var(--burdeos); cursor: pointer; }
.cat-toggle .cat-toggle-flecha { transition: transform .2s; }
.cat-nav.abierta .cat-toggle .cat-toggle-flecha { transform: rotate(180deg); }

.cat-bloque { padding-top: 1.6rem; }
.cat-bloque h2 { font-size: 1.5rem; display: flex; align-items: center; gap: .5rem; border-bottom: 2px solid var(--dorado); padding-bottom: .3rem; margin-bottom: 1rem; }

.productos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.prod-card { display: flex; gap: .9rem; background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem; box-shadow: var(--sombra); }
.prod-card.agotado { opacity: .55; }
.prod-foto { flex: 0 0 84px; width: 84px; height: 84px; border-radius: var(--radio-sm); overflow: hidden; background: var(--crema-2); }
.prod-foto img, .prod-foto svg { width: 100%; height: 100%; object-fit: cover; }
.prod-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.prod-nombre { font-weight: 700; font-size: 1.02rem; }
.prod-desc { font-size: .82rem; color: var(--gris); margin: .15rem 0 .35rem; }
.prod-tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .4rem; }
.prod-precios { margin-top: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.precio-btn { display: inline-flex; flex-direction: column; align-items: center; border: 1.5px solid var(--burdeos); color: var(--burdeos); background: #fff; border-radius: 10px; padding: .3em .6em; font-weight: 700; cursor: pointer; line-height: 1.15; min-width: 64px; }
.precio-btn small { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); font-weight: 600; }
.precio-btn:hover { background: var(--burdeos); color: #fff; }
.precio-btn:hover small { color: rgba(255,255,255,.85); }
.precio-btn.sm { border-color: var(--gris-claro); color: var(--gris); }
.badge-agotado { font-size: .72rem; font-weight: 700; color: var(--c-incidencia); border: 1px solid var(--c-incidencia); border-radius: 6px; padding: .1em .5em; align-self: flex-start; }

/* Carrito flotante */
.carrito-fab { position: fixed; right: 16px; bottom: 16px; z-index: 60; background: var(--oliva); color: #fff; border: none; border-radius: 999px; padding: .9em 1.3em; font-size: 1.05rem; font-weight: 700; box-shadow: var(--sombra-fuerte); cursor: pointer; display: flex; align-items: center; gap: .6em; }
.carrito-fab .cuenta { background: #fff; color: var(--oliva); border-radius: 999px; min-width: 1.6em; height: 1.6em; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.carrito-fab[hidden] { display: none; }

/* Panel deslizante / modales */
.overlay { position: fixed; inset: 0; background: rgba(40,30,20,.5); z-index: 70; display: flex; justify-content: flex-end; }
.overlay[hidden] { display: none; }
.overlay.centrado { align-items: center; justify-content: center; padding: 16px; }
.drawer { background: var(--crema); width: min(460px, 100%); height: 100%; display: flex; flex-direction: column; box-shadow: var(--sombra-fuerte); }
.drawer-head { padding: 1rem 1.2rem; background: var(--burdeos); color: #fff; display: flex; align-items: center; justify-content: space-between; }
.drawer-head h3 { color: #fff; margin: 0; }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.2rem; }
.drawer-foot { padding: 1rem 1.2rem; border-top: 1px solid var(--linea); background: var(--crema-card); }
.cerrar-x { background: rgba(255,255,255,.18); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; line-height: 1; }

.modal { background: var(--crema-card); border-radius: var(--radio); width: min(560px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: var(--sombra-fuerte); }
.modal-head { padding: 1rem 1.2rem; border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { margin: 0; }
.modal-body { padding: 1.2rem; }
.modal-foot { padding: 1rem 1.2rem; border-top: 1px solid var(--linea); display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }

/* Líneas del carrito */
.linea-item { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px dashed var(--linea); }
.linea-item .li-info { flex: 1 1 auto; min-width: 0; }
.linea-item .li-nombre { font-weight: 700; }
.linea-item .li-meta { font-size: .8rem; color: var(--gris); }
.linea-item .li-precio { font-weight: 700; white-space: nowrap; }
.cant { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; }
.cant button { width: 30px; height: 30px; border: none; background: var(--crema-2); font-size: 1.1rem; cursor: pointer; color: var(--carbon); }
.cant span { min-width: 30px; text-align: center; font-weight: 700; }

.total-fila { display: flex; justify-content: space-between; align-items: baseline; margin: .3rem 0; }
.total-fila.grande { font-size: 1.4rem; font-weight: 700; border-top: 2px solid var(--dorado); padding-top: .6rem; margin-top: .6rem; }
.total-fila.grande .euros { font-family: var(--serif); color: var(--burdeos); }

textarea, input[type="text"], input[type="number"], select {
  width: 100%; font-family: var(--sans); font-size: 1rem; padding: .6em .7em;
  border: 1px solid var(--linea); border-radius: 10px; background: #fff; color: var(--carbon);
}
textarea:focus, input:focus, select:focus { outline: 2px solid var(--dorado); border-color: var(--dorado); }
label.campo { display: block; font-weight: 600; font-size: .9rem; margin: .8rem 0 .3rem; }

/* Confirmación */
.confirm-box { text-align: center; padding: 2.5rem 1.5rem; }
.confirm-box .tick { width: 84px; height: 84px; border-radius: 50%; background: var(--oliva); color: #fff; font-size: 2.6rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem; }

/* ============================================================
   PANEL INTERNO (layout)
   ============================================================ */
.panel-body { background: var(--crema); min-height: 100vh; }
.panel-main { padding: 1.4rem 0 3rem; }
.modulo { display: none; }
.modulo.activo { display: block; }
.modulo h1 { font-size: 1.8rem; }
.modulo > .sub-mod { color: var(--gris); margin-top: -.4rem; margin-bottom: 1.4rem; }

/* Dashboard cards */
.metricas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.metrica { background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra); border-left: 5px solid var(--dorado); }
.metrica .m-label { font-size: .82rem; color: var(--gris); font-weight: 600; }
.metrica .m-valor { font-family: var(--serif); font-size: 2rem; font-weight: 700; line-height: 1.1; margin-top: .2rem; }
.metrica .m-sub { font-size: .78rem; color: var(--gris-claro); }
.metrica.m-nuevo { border-left-color: var(--c-nuevo); }
.metrica.m-prep { border-left-color: var(--c-prep); }
.metrica.m-listo { border-left-color: var(--c-listo); }
.metrica.m-servido { border-left-color: var(--c-servido); }
.metrica.m-dinero { border-left-color: var(--oliva); }
.metrica.m-pendiente { border-left-color: var(--c-pendiente); }
.metrica.m-incidencia { border-left-color: var(--c-incidencia); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.bloque-titulo { display: flex; align-items: center; justify-content: space-between; margin: 2rem 0 1rem; gap: 1rem; flex-wrap: wrap; }
.bloque-titulo h2 { margin: 0; font-size: 1.35rem; }

/* Grid de mesas */
.mesas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
.mesa-card { background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem; box-shadow: var(--sombra); cursor: pointer; border-top: 5px solid var(--c-libre); transition: transform .08s; }
.mesa-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-fuerte); }
.mesa-card.e-recibido { border-top-color: var(--c-nuevo); }
.mesa-card.e-cocina { border-top-color: var(--c-prep); }
.mesa-card.e-listo_servir { border-top-color: var(--c-listo); }
.mesa-card.e-pendiente_cobrar { border-top-color: var(--c-pendiente); }
.mesa-card.e-libre { border-top-color: var(--c-libre); opacity: .85; }
.mesa-card .mc-top { display: flex; align-items: baseline; justify-content: space-between; }
.mesa-card .mc-num { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; }
.mesa-card .mc-zona { font-size: .75rem; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.mesa-card .mc-total { font-size: 1.15rem; font-weight: 700; color: var(--burdeos); margin: .4rem 0; }
.mesa-card .mc-estado { margin-top: .3rem; }
.mesa-card .mc-tiempo { font-size: .72rem; color: var(--gris-claro); margin-top: .35rem; }

/* Tabla genérica */
.tabla { width: 100%; border-collapse: collapse; background: var(--crema-card); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.tabla th, .tabla td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla th { background: var(--crema-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.tabla tr:last-child td { border-bottom: none; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .acciones { display: flex; gap: .35rem; flex-wrap: wrap; }

/* Productos (gestión) */
.prod-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.prod-admin { background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio); padding: .85rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .4rem; }
.prod-admin.es-oculto { opacity: .5; }
.prod-admin .pa-top { display: flex; gap: .6rem; align-items: center; }
.prod-admin .pa-foto { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; background: var(--crema-2); }
.prod-admin .pa-nombre { font-weight: 700; line-height: 1.15; }
.prod-admin .pa-cat { font-size: .73rem; color: var(--gris); text-transform: uppercase; }
.prod-admin .pa-precios { font-size: .9rem; color: var(--burdeos); font-weight: 600; }
.prod-admin .pa-acciones { display: flex; gap: .35rem; margin-top: auto; flex-wrap: wrap; }

.filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .7rem; }
.filtros select, .filtros input { width: auto; min-width: 160px; }

/* Barra de filtros rápidos (siempre visible): Ver todos / visibles / agotados / ocultos */
.filtros-rapidos { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; }
.filtros-rapidos .fr-label { font-weight: 700; color: var(--gris); margin-right: .2rem; }
.filtros-rapidos .btn.activo { background: var(--oliva); color: #fff; border-color: var(--oliva); }
.aviso-ocultos { background: var(--crema-card); border: 1px solid var(--dorado); border-left: 5px solid var(--dorado); border-radius: var(--radio); padding: .7rem 1rem; margin: 0 0 1.2rem; font-weight: 600; box-shadow: var(--sombra); }

/* Caja de ayuda */
.ayuda-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.ayuda-item { background: var(--crema-card); border: 1px solid var(--linea); border-left: 5px solid var(--dorado); border-radius: var(--radio); padding: 1rem 1.1rem; }
.ayuda-item h4 { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.ayuda-item p { margin: 0; color: var(--gris); font-size: .9rem; }

/* ============================================================
   COCINA
   ============================================================ */
.cocina-body { background: #211d1a; color: #f3ece0; min-height: 100vh; }
.cocina-body .topbar { background: #15110e; }
.cocina-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.2rem 18px 3rem; align-items: start; }
.coc-col { background: rgba(255,255,255,.04); border-radius: var(--radio); padding: .9rem; min-height: 200px; }
.coc-col h2 { color: #fff; font-size: 1.2rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.coc-col h2 .conteo { margin-left: auto; background: rgba(255,255,255,.15); border-radius: 999px; padding: .1em .6em; font-size: .9rem; }
.coc-col.col-nuevo h2 { color: #ffcf7a; }
.coc-col.col-prep h2 { color: #ff9b6a; }
.coc-col.col-listo h2 { color: #9fe39f; }

.ticket { background: #fffdf7; color: var(--carbon); border-radius: var(--radio); padding: .9rem; margin-bottom: .9rem; box-shadow: var(--sombra-fuerte); border-left: 6px solid var(--c-nuevo); }
.ticket.t-prep { border-left-color: var(--c-prep); }
.ticket.t-listo { border-left-color: var(--c-listo); }
.ticket .tk-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ticket .tk-mesa { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; }
.ticket .tk-mesa small { font-size: .7rem; color: var(--gris); font-family: var(--sans); text-transform: uppercase; letter-spacing: .05em; display: block; }
.ticket .tk-tiempo { font-weight: 700; font-variant-numeric: tabular-nums; }
.ticket .tk-tiempo.alerta { color: var(--c-incidencia); }
.ticket .tk-num { font-size: .75rem; color: var(--gris-claro); }
.ticket ul.tk-items { list-style: none; padding: 0; margin: .7rem 0; }
.ticket ul.tk-items li { display: flex; gap: .5rem; padding: .25rem 0; border-bottom: 1px dotted var(--linea); }
.ticket ul.tk-items .cant-x { font-weight: 700; color: var(--burdeos); min-width: 1.8em; }
.ticket .item-obs { font-size: .8rem; color: var(--c-prep); font-style: italic; }
.ticket .tk-obs { background: #fbf3df; border-radius: 8px; padding: .4rem .6rem; font-size: .85rem; margin: .4rem 0; }
.ticket .tk-acciones { display: flex; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; }
.coc-vacio { color: rgba(255,255,255,.4); text-align: center; padding: 2rem 0; font-style: italic; }

/* ============================================================
   CAJA
   ============================================================ */
.caja-cols { display: grid; grid-template-columns: 320px 1fr; gap: 1.2rem; align-items: start; padding-top: 1.2rem; }
.caja-lista { display: flex; flex-direction: column; gap: .6rem; }
.caja-mesa-btn { text-align: left; background: var(--crema-card); border: 1px solid var(--linea); border-left: 5px solid var(--c-pendiente); border-radius: var(--radio-sm); padding: .7rem .9rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.caja-mesa-btn.sel { outline: 2px solid var(--burdeos); }
.caja-mesa-btn .cm-num { font-weight: 700; font-family: var(--serif); font-size: 1.2rem; }
.caja-mesa-btn .cm-total { font-weight: 700; color: var(--burdeos); }
.caja-mesa-btn.e-listo_servir { border-left-color: var(--c-listo); }
.caja-mesa-btn.e-cocina { border-left-color: var(--c-prep); }
.caja-mesa-btn.e-recibido { border-left-color: var(--c-nuevo); }

.cuenta-panel { background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.3rem; }
.cuenta-pedido { margin-bottom: 1rem; }
.cuenta-pedido h4 { display: flex; justify-content: space-between; font-size: .95rem; color: var(--gris); border-bottom: 1px solid var(--linea); padding-bottom: .3rem; }
.cuenta-pedido table { width: 100%; border-collapse: collapse; }
.cuenta-pedido td { padding: .3rem 0; }
.cuenta-pedido td.num { text-align: right; font-variant-numeric: tabular-nums; }
.totales-dia { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .7rem; }
.total-mini { background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio-sm); padding: .7rem .8rem; }
.total-mini .tm-label { font-size: .75rem; color: var(--gris); }
.total-mini .tm-valor { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; }

.pago-opciones { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.pago-opciones label { border: 1.5px solid var(--linea); border-radius: 999px; padding: .45em .9em; cursor: pointer; font-weight: 600; font-size: .92rem; }
.pago-opciones input { position: absolute; opacity: 0; }
.pago-opciones label.sel { background: var(--burdeos); color: #fff; border-color: var(--burdeos); }

.estado-vacio { text-align: center; color: var(--gris); padding: 3rem 1rem; }
.estado-vacio .emoji { font-size: 2.5rem; display: block; margin-bottom: .5rem; }

/* ============================================================
   BRANDING / QR
   ============================================================ */
.brand-section { padding: 2rem 0; border-bottom: 1px solid var(--linea); }
.paleta { display: flex; gap: .8rem; flex-wrap: wrap; }
.color-muestra { width: 110px; }
.color-muestra .swatch { height: 70px; border-radius: 10px; border: 1px solid rgba(0,0,0,.1); }
.color-muestra .c-nombre { font-weight: 600; font-size: .85rem; margin-top: .3rem; }
.color-muestra .c-hex { font-size: .78rem; color: var(--gris); font-family: monospace; }

.qr-toolbar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; margin: 1rem 0; }
.qr-toolbar .crece { flex: 1 1 280px; }

/* Carta física A4 */
.a4 { width: 210mm; max-width: 100%; min-height: 297mm; background: var(--crema-card); margin: 1.5rem auto; box-shadow: var(--sombra-fuerte); padding: 22mm 18mm; position: relative; border: 1px solid var(--linea); }
.a4-carta { text-align: center; }
.a4-carta .emblema-grande { margin: 0 auto 1rem; }
.a4-carta h1 { font-family: var(--display); font-size: 2.6rem; color: var(--burdeos); letter-spacing: .04em; }
.a4-carta .a4-eslogan { color: var(--gris); font-size: 1.05rem; margin-bottom: 2rem; }
.a4-carta .qr-grande { margin: 1.5rem auto; width: 220px; height: 220px; }
.a4-carta .a4-instr { max-width: 420px; margin: 1rem auto; }
.a4-carta .a4-aviso { background: var(--burdeos); color: #fff; display: inline-block; padding: .5em 1.2em; border-radius: 999px; font-weight: 700; }

/* Tarjetas QR por mesa (grid imprimible) */
.qr-mesas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8mm; }
.qr-mesa-card { border: 1.5px dashed var(--dorado-osc); border-radius: var(--radio); padding: 10mm 6mm; text-align: center; background: var(--crema-card); break-inside: avoid; }
.qr-mesa-card .qm-mesa { font-family: var(--display); font-size: 2rem; color: var(--burdeos); font-weight: 700; }
.qr-mesa-card .qm-canvas { margin: .7rem auto; width: 150px; height: 150px; }
.qr-mesa-card .qm-canvas img, .qr-mesa-card .qm-canvas canvas { width: 100% !important; height: 100% !important; }
.qr-mesa-card .qm-texto { font-weight: 600; }
.qr-mesa-card .qm-sub { font-size: .8rem; color: var(--gris); }
.qr-mesa-card .qm-url { font-size: .68rem; color: var(--gris-claro); word-break: break-all; margin-top: .4rem; font-family: monospace; }

/* ============================================================
   Utilidades
   ============================================================ */
.txt-centro { text-align: center; }
.txt-gris { color: var(--gris); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.2rem; } .mt-3 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1.2rem; }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: .6rem; } .gap-2 { gap: 1.2rem; }
.entre { justify-content: space-between; } .centrado-v { align-items: center; }
.crece { flex: 1 1 auto; }
.oculto, [hidden] { display: none !important; }
.pill-info { background: var(--crema-2); border-radius: 999px; padding: .3em .8em; font-size: .85rem; color: var(--gris); display: inline-flex; gap: .4em; align-items: center; }
.euros { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 920px) {
  .bloque-2col, .info-grid, .grid-2 { grid-template-columns: 1fr; }
  .mini-carta { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: 1fr; }
  .web-footer .pie-cols { grid-template-columns: 1fr; }
  .cocina-cols { grid-template-columns: 1fr; }
  .caja-cols { grid-template-columns: 1fr; }
  .reloj .reloj-hora { font-size: 1.5rem; }
  .reloj-xl .reloj-hora { font-size: 2rem; }
}
@media (max-width: 640px) {
  .web-nav-links { display: none; }
  .seccion { padding: 2.2rem 0; }
  .productos-grid { grid-template-columns: 1fr; }
  .qr-mesas-grid { grid-template-columns: 1fr; }
  .topbar nav a { font-size: .82rem; padding: .4em .6em; }
  .reloj { padding: .1rem .6rem; }
  /* Categorías de la carta: botón "Categorías" + cuadrícula de 2 columnas plegable */
  .cat-toggle { display: flex; }
  .cat-nav-inner { display: none; grid-template-columns: 1fr 1fr; gap: .45rem; padding: .6rem 14px .8rem; max-width: none; }
  .cat-nav.abierta .cat-nav-inner { display: grid; }
  .cat-nav-inner button { justify-content: center; width: 100%; padding: .6em .5em; }
}

/* ============================================================
   Impresión (branding / QR)
   ============================================================ */
@media print {
  body { background: #fff; }
  .no-print, .topbar, .web-header, .qr-toolbar, .web-footer { display: none !important; }
  .a4 { box-shadow: none; border: none; margin: 0; width: auto; min-height: auto; padding: 12mm; }
  .qr-mesa-card { border-style: solid; }
  @page { size: A4; margin: 10mm; }
}

/* ============================================================
   AMPLIACIÓN — zonas, camareros, servido parcial, comandas
   ============================================================ */
:root { --c-servidoparcial: #b5791f; }

.ms-servidoparcial { background: var(--c-servidoparcial); }
.mesa-card.e-servido_parcial { border-top-color: var(--c-servidoparcial); }
.caja-mesa-btn.e-servido_parcial { border-left-color: var(--c-servidoparcial); }
.caja-mesa-btn.e-pendiente_cobrar { border-left-color: var(--c-pendiente); }

.zona-titulo, .qr-zona-titulo { grid-column: 1 / -1; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--burdeos); border-bottom: 2px solid var(--dorado); padding-bottom: .25rem; margin: 1.1rem 0 .2rem; }

.mesa-card .mc-cam { font-size: .76rem; color: var(--oliva-osc); font-weight: 600; margin-top: .35rem; }
.mesa-card .mc-cam.sin { color: var(--gris-claro); font-style: italic; }

.caja-mesa-btn .cm-sub { font-size: .72rem; color: var(--gris); font-weight: 400; }

.ticket .tk-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: .15rem 0 .1rem; }
.ticket .tk-zona, .ticket .tk-cliente, .ticket .tk-cam { font-size: .72rem; font-weight: 700; padding: .12em .55em; border-radius: 999px; }
.ticket .tk-zona { background: var(--crema-2); color: var(--gris); }
.ticket .tk-cliente { background: #eadff0; color: #6b3a86; }
.ticket .tk-cam { background: #e3eedb; color: var(--oliva-osc); }
.ticket .tk-cam.sin { background: #f3ddd9; color: var(--c-incidencia); }

.mm-item { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; border-bottom: 1px dotted var(--linea); cursor: pointer; }
.mm-item input { flex: 0 0 auto; width: 18px; height: 18px; }
.mm-item .mm-item-tx { flex: 1 1 auto; }
.mm-item .mm-item-precio { font-weight: 700; white-space: nowrap; }
.mm-item.servido .mm-item-tx { text-decoration: line-through; color: var(--gris-claro); }

.grid-mesas-zonas { max-height: 50vh; overflow-y: auto; }
.zona-grupo { margin-bottom: 1rem; }
.zona-grupo h4 { margin: 0 0 .4rem; font-size: 1rem; color: var(--burdeos); border-bottom: 1px solid var(--linea); padding-bottom: .2rem; }
.zona-botones { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: .4rem; }
.zona-botones .btn { padding: .5em .2em; }

.cam-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.cam-tab { background: var(--crema-card); border: 1px solid var(--linea); border-radius: 999px; padding: .5em 1em; font-weight: 600; font-size: .92rem; cursor: pointer; color: var(--carbon); display: inline-flex; align-items: center; gap: .4em; }
.cam-tab:hover { background: var(--crema); }
.cam-tab.activo { background: var(--burdeos); color: #fff; border-color: var(--burdeos); }
.cam-tab .cam-tab-n { background: rgba(0,0,0,.12); border-radius: 999px; padding: 0 .5em; font-size: .8rem; }
.cam-tab.activo .cam-tab-n { background: rgba(255,255,255,.25); }
.cam-tab-add { border-style: dashed; color: var(--oliva); }

.cam-bloque { margin-bottom: 2rem; }
.cam-h2 { font-size: 1.3rem; margin-bottom: .8rem; }
.cam-equipo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.cam-card { background: var(--crema-card); border: 1px solid var(--linea); border-left: 5px solid var(--oliva); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); }
.cam-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cam-nombre { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; }
.cam-badge { background: var(--crema-2); color: var(--gris); border-radius: 999px; padding: .15em .7em; font-size: .8rem; font-weight: 600; }
.cam-stats { display: flex; justify-content: space-between; color: var(--gris); font-size: .85rem; margin: .5rem 0; }
.cam-stats span:last-child { color: var(--burdeos); font-weight: 700; }
.cam-codigos { font-size: .8rem; color: var(--gris); min-height: 2.4em; }
.cam-card-acciones { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }

.cam-zonas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.cam-zona-card { background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); }
.cam-zona-nombre { font-weight: 700; margin-bottom: .5rem; }

.cam-sala-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cam-sala-stats { display: flex; gap: .6rem; flex-wrap: wrap; }
.cam-sala-stats .total-mini { display: flex; flex-direction: column; }
.cam-sala-stats .tm-label { font-size: .72rem; color: var(--gris); }
.cam-sala-stats .tm-valor { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; }

.cam-ped { border: 1px solid var(--linea); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .6rem; }
.cam-ped-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.cam-quitar { background: none; border: none; color: var(--c-incidencia); cursor: pointer; font-size: .9rem; padding: 0 .2em; }

/* ============================================================
   FASE 4 — fotos con fallback, estados de producto, seguridad
   ============================================================ */

/* Foto real superpuesta al dibujo de color (si la foto falla, se ve el dibujo) */
.prod-foto, .prod-admin .pa-foto { position: relative; }
.prod-admin .pa-foto img, .prod-admin .pa-foto svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Estado del producto en el panel (Visible / Agotado / Oculto) */
.pa-estado { display: inline-flex; align-items: center; gap: .3em; font-size: .74rem; font-weight: 700; padding: .15em .65em; border-radius: 999px; align-self: flex-start; }
.pa-estado.es-visible { background: #e3eedb; color: var(--oliva-osc); }
.pa-estado.es-agotado { background: #fbe7e2; color: var(--c-incidencia); }
.pa-estado.es-oculto  { background: var(--crema-2); color: var(--gris); }

/* Sección Seguridad / Copias */
.seg-aviso { background: #fbe7e2; border: 1px solid var(--c-incidencia); color: #8a2a1a; border-radius: var(--radio); padding: .9rem 1.1rem; font-weight: 600; margin-bottom: 1.2rem; }
.seg-panel { background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem; box-shadow: var(--sombra); }
.seg-estado-box { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.seg-punto { width: 16px; height: 16px; border-radius: 50%; background: var(--oliva); flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(92,107,60,.18); }
.seg-punto.mal { background: var(--c-incidencia); box-shadow: 0 0 0 4px rgba(193,60,40,.18); }
.seg-estado-tx { font-weight: 700; font-size: 1.1rem; }
.seg-metricas { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0 1.2rem; }
.seg-stat { background: var(--crema); border: 1px solid var(--linea); border-radius: 12px; padding: .6rem .9rem; min-width: 130px; }
.seg-stat .s-label { font-size: .75rem; color: var(--gris); font-weight: 600; }
.seg-stat .s-valor { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.seg-stat.alerta .s-valor { color: var(--c-incidencia); }
.seg-acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.seg-emergencia { margin-top: 1.4rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem; }
.seg-em-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.seg-em-mesa { border: 1px solid var(--linea); border-radius: 10px; padding: .7rem .9rem; margin-bottom: .7rem; break-inside: avoid; }
.seg-em-mesa h4 { margin: 0 0 .15rem; font-size: 1.05rem; }
.seg-em-meta { font-size: .82rem; color: var(--gris); margin-bottom: .4rem; }
.seg-em-mesa table { width: 100%; border-collapse: collapse; }
.seg-em-mesa td { padding: .18rem .3rem; border-bottom: 1px dotted var(--linea); font-size: .9rem; }
.seg-em-mesa td.num { text-align: right; white-space: nowrap; font-weight: 600; }
.seg-em-total { display: flex; justify-content: space-between; font-weight: 700; margin-top: .4rem; padding-top: .3rem; border-top: 2px solid var(--dorado); }

/* Aviso de categoría vacía / con productos ocultos */
.aviso-vacio { grid-column: 1 / -1; background: var(--crema-card); border: 1px solid var(--dorado); border-radius: var(--radio); padding: 1.3rem 1.4rem; box-shadow: var(--sombra); }
.aviso-vacio .av-tx { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; margin: 0 0 .3rem; }
.aviso-vacio .sub { margin: 0 0 1rem; }
.aviso-vacio .av-acciones { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Barra de gestión de productos ocultos */
.ocultos-barra { background: var(--crema-card); border: 1px solid var(--dorado); border-radius: var(--radio); padding: .9rem 1.1rem; margin-bottom: 1.2rem; box-shadow: var(--sombra); }
.ocultos-barra .ob-fila { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ocultos-barra .ob-fila + .ob-fila { margin-top: .7rem; }
.ocultos-barra .ob-cab { justify-content: space-between; }
.ocultos-barra .ob-titulo { font-family: var(--serif); font-size: 1.15rem; }
.ocultos-barra .ob-masivo { border-top: 1px dashed var(--linea); padding-top: .7rem; }

/* Casilla de selección en las tarjetas de producto oculto */
.prod-admin.seleccionable { border-color: var(--dorado); }
.pa-check { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; font-size: .9rem; margin-bottom: .5rem; cursor: pointer; }
.pa-check input { width: 18px; height: 18px; }

/* Historial de cambios de la carta */
.hist-prod { margin-top: 1.4rem; }
.hist-prod table { margin-top: .6rem; }

/* Impresión exclusiva del resumen de emergencia */
@media print {
  body.imprimir-emergencia * { visibility: hidden; }
  body.imprimir-emergencia #seg-emergencia, body.imprimir-emergencia #seg-emergencia * { visibility: visible; }
  body.imprimir-emergencia #seg-emergencia { position: absolute; left: 0; top: 0; width: 100%; border: none; padding: 0; }
  body.imprimir-emergencia .seg-em-imprimir { display: none !important; }
}

/* ============================================================
   Login por PIN (panel central) + badge de rol + Pedidos desde mesa
   ============================================================ */
.login-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, var(--crema) 0%, var(--crema-2) 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 1.2rem;
}
.login-card {
  background: var(--crema-card); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 2rem 2.2rem; width: 100%; max-width: 420px; text-align: center;
}
.login-titulo { font-family: var(--serif); color: var(--burdeos); margin: .4rem 0 .3rem; font-size: 1.5rem; }
.login-sub { color: var(--gris); margin: 0 0 1.2rem; }
.login-pin {
  width: 100%; max-width: 220px; padding: .9rem 1rem; font-size: 2rem;
  text-align: center; letter-spacing: .6rem; border: 2px solid var(--linea);
  border-radius: var(--radio); background: #fff; font-family: var(--mono, monospace);
}
.login-pin:focus { outline: none; border-color: var(--dorado); }
.login-msg { color: var(--burdeos); font-weight: 600; margin: .8rem 0 0; }
.login-btn { display: block; margin: 1.2rem auto 0; min-width: 200px; }
.login-ayuda { margin-top: 1.4rem; text-align: left; color: var(--gris); font-size: .9rem; }
.login-ayuda summary { cursor: pointer; font-weight: 600; }
.login-ayuda ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.login-ayuda li { margin: .25rem 0; }

.rol-badge {
  background: var(--oliva); color: #fff; padding: .25rem .6rem;
  border-radius: 999px; font-size: .8rem; font-weight: 600;
}

/* Pedidos desde mesa */
.pedidos-mesa-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 1rem; }
.pm-mesa-card { background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.2rem; box-shadow: var(--sombra); }
.pm-mesa-card h3 { font-family: var(--serif); color: var(--burdeos); margin: 0 0 .8rem; font-size: 1.2rem; }
.pm-pedido { background: #fff; border-left: 4px solid var(--dorado); border-radius: 8px; padding: .7rem .9rem; margin-bottom: .7rem; }
.pm-cab { font-size: .9rem; color: var(--gris); margin-bottom: .4rem; }
.pm-items { margin: .2rem 0 .5rem; padding-left: 1.2rem; }
.pm-items li { margin: .15rem 0; }
.pm-tot { font-weight: 700; color: var(--burdeos); }
.pm-nota { background: var(--crema-2); padding: .3rem .5rem; border-radius: 6px; margin-top: .4rem; font-style: italic; font-size: .9rem; }

/* ============================================================
   Barra admin (siempre visible cuando rol=admin en páginas no-panel)
   ============================================================ */
#admin-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--oliva); color: #fff;
  padding: .45rem .9rem; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap;
  font-size: .88rem; box-shadow: var(--sombra);
}
#admin-bar .ab-label {
  background: rgba(0,0,0,.18); padding: .2rem .55rem; border-radius: 999px;
  font-weight: 700; font-size: .78rem; margin-right: .5rem;
}
#admin-bar a {
  color: rgba(255,255,255,.92); padding: .25em .65em; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
#admin-bar a:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
#admin-bar a.activo { background: #fff; color: var(--oliva); }
#admin-bar button[data-salir] {
  margin-left: auto; background: rgba(0,0,0,.22); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  padding: .25em .85em; font-weight: 600; cursor: pointer;
}
#admin-bar button[data-salir]:hover { background: rgba(0,0,0,.45); }

/* Pedidos pendientes de servir (camareros) */
.pendientes-servir-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-top: .8rem; }
.ps-card { background: var(--crema-card); border: 1px solid var(--linea); border-left: 5px solid var(--c-listo); border-radius: var(--radio); padding: .8rem 1rem; box-shadow: var(--sombra); }
.ps-card.ps-incid { border-left-color: var(--c-incidencia); background: #fdf3f1; }
.ps-cab { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .4rem; }
.ps-cab .ps-hora { margin-left: auto; font-size: .85rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.ps-items { margin: .2rem 0 .5rem; padding-left: 1.2rem; }
.ps-items li { margin: .15rem 0; }
.ps-nota { background: #fde9e2; border-radius: 6px; padding: .35rem .6rem; margin-bottom: .5rem; font-size: .9rem; }
.ps-acciones { display: flex; flex-wrap: wrap; gap: .3rem; }

/* Caja: aviso pendiente de servir */
.aviso-caja { background: #fbe7c8; border: 1px solid var(--c-pendiente); color: #6a4109; padding: .55rem .8rem; border-radius: 8px; margin: .6rem 0; font-size: .92rem; }

/* Contabilidad */
.metrica { background: var(--crema-card); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem 1rem; box-shadow: var(--sombra); }
.metrica .mt-label { font-size: .78rem; text-transform: uppercase; color: var(--gris); letter-spacing: .04em; }
.metrica .mt-valor { font-family: var(--display); font-size: 1.6rem; color: var(--burdeos); font-variant-numeric: tabular-nums; }
.metricas { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.desc-lista { list-style: none; padding: 0; margin: .6rem 0; }
.desc-lista li { background: var(--crema-card); border-left: 5px solid var(--linea); border-radius: 8px; padding: .55rem .85rem; margin-bottom: .35rem; }
.desc-lista li.d-warn { border-left-color: var(--c-pendiente); background: #fdf6e3; }
.desc-lista li.d-err  { border-left-color: var(--c-incidencia); background: #fbe7e2; }
.desc-lista li.d-info { border-left-color: var(--c-servido); background: #e7eff4; }
.ok-box { background: #e6f0d9; border: 1px solid var(--c-listo); color: #355a23; padding: .8rem 1rem; border-radius: var(--radio); font-weight: 600; }

/* Estado incidencia (chip) */
.est-incidencia { background: var(--c-incidencia); }

/* ============================================================
   Modal genérico Casa Dani (incidencia / invitado)
   ============================================================ */
.ui-modal-ov {
  position: fixed; inset: 0; background: rgba(44,38,34,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 1rem;
}
.ui-modal-card {
  background: var(--crema-card); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra-fuerte);
  padding: 1.6rem 1.8rem; width: 100%; max-width: 480px;
}
.ui-modal-titulo { font-family: var(--serif); color: var(--burdeos); margin: 0 0 1rem; font-size: 1.4rem; }
.ui-modal-label { display: block; font-weight: 600; margin: .7rem 0 .35rem; color: var(--carbon); }
.ui-modal-select, .ui-modal-textarea {
  width: 100%; padding: .65rem .8rem; border: 2px solid var(--linea);
  border-radius: 10px; background: #fff; font: inherit; color: var(--carbon);
}
.ui-modal-select:focus, .ui-modal-textarea:focus { outline: none; border-color: var(--dorado); }
.ui-modal-textarea { resize: vertical; min-height: 60px; }
.ui-modal-msg { color: var(--c-incidencia); font-weight: 600; margin: .6rem 0 0; }
.ui-modal-acciones { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.4rem; }

/* Item bloqueado en modal de mesa (camareros) */
.mm-item-bloqueada { opacity: .55; }
.cam-ped-bloqueada { border-left: 4px solid var(--c-pendiente); padding-left: .6rem; }

/* Título del módulo en el topbar (segunda fila minimalista cuando es admin) */
.topbar-titulo { font-family: var(--serif); font-size: 1.25rem; margin-left: .6rem; }

/* ============================================================
   Barra de sincronización (última actualización + actualizar ahora)
   ============================================================ */
#sync-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: #fffdf8; border-bottom: 1px solid var(--linea);
  padding: .35rem .9rem; font-size: .85rem; color: var(--gris);
  position: sticky; top: 0; z-index: 40;
}
#sync-bar .sync-estado {
  display: inline-block; width: .65rem; height: .65rem; border-radius: 50%;
  background: var(--gris-claro);
}
#sync-bar .sync-estado.ok { background: var(--c-listo); }
#sync-bar .sync-estado.err { background: var(--c-incidencia); animation: blink 1.2s linear infinite; }
@keyframes blink { 50% { opacity: .35; } }
#sync-bar .sync-ult { flex: 1; }

/* ============================================================
   Carta pública — modo ver vs modo pedir
   ============================================================ */
.aviso-modo-ver {
  background: linear-gradient(180deg, var(--crema-2) 0%, var(--crema) 100%);
  border-bottom: 1px solid var(--linea);
  padding: .7rem 0;
  font-size: .92rem;
  color: var(--carbon);
}
.aviso-modo-ver strong { color: var(--burdeos); }
.aviso-modo-ver em { color: var(--oliva); font-style: normal; font-weight: 600; }

/* Botón fijo "Pedir desde mi mesa" (solo en modo ver) */
.pedir-fab {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 60;
  background: var(--burdeos); color: #fff;
  border: 2px solid var(--burdeos-osc);
  border-radius: 999px; padding: .85rem 1.6rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  box-shadow: 0 10px 24px rgba(60, 40, 20, .25);
  cursor: pointer; white-space: nowrap;
}
.pedir-fab:hover { background: var(--burdeos-osc); }
.pedir-fab:active { transform: translateX(-50%) translateY(1px); }

/* Foto real del plato (img tag dentro de .prod-foto) */
.prod-foto-real {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; border-radius: inherit;
  background: var(--crema-2);
}

/* Precio sin botón (modo ver) */
.precio-info {
  display: inline-flex; align-items: baseline; gap: .35em;
  font-weight: 700; color: var(--burdeos);
  background: var(--crema-card); border: 1px solid var(--linea);
  border-radius: 999px; padding: .35em .8em;
  font-size: .95rem;
}
.precio-info small { color: var(--gris); font-weight: 600; font-size: .75em; text-transform: uppercase; letter-spacing: .04em; }
.precio-info span { font-family: var(--display); }

/* En modo ver, dejar espacio inferior para el botón fijo */
body.modo-ver #carta-main { padding-bottom: 7rem; }

/* ============================================================
   Selector de mesa simplificado (T1 + I1) con estado libre/ocupada
   ============================================================ */
.mesa-opcion {
  display: block; width: 100%; text-align: left;
  background: var(--crema-card); border: 2px solid var(--linea);
  border-radius: var(--radio); padding: 1rem 1.2rem;
  margin-bottom: .8rem; cursor: pointer; transition: border-color .15s, transform .08s;
  font-family: var(--sans); font-size: 1rem;
}
.mesa-opcion:hover { border-color: var(--oliva); transform: translateY(-1px); }
.mesa-opcion:active { transform: translateY(1px); }
.mesa-opcion.ocupada { opacity: .65; cursor: not-allowed; }
.mesa-opcion.ocupada:hover { border-color: var(--linea); transform: none; }
.mesa-opcion .mo-nombre { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--burdeos); }
.mesa-opcion .mo-zona { font-size: .82rem; color: var(--gris); margin-top: .2rem; }
.mesa-opcion .mo-estado { display: inline-block; margin-top: .5rem; padding: .25em .7em; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.mesa-opcion .mo-libre { background: #e6f0d9; color: #355a23; border: 1px solid var(--c-listo); }
.mesa-opcion .mo-ocupada { background: #fbe7c8; color: #6a4109; border: 1px solid var(--c-pendiente); }
.mesa-aviso { margin-top: 1rem; color: var(--gris); font-size: .9rem; line-height: 1.45; }
.mesa-sin-libres { background: var(--crema-card); border: 1px solid var(--c-pendiente); border-radius: var(--radio); padding: 1.2rem; }

/* ============================================================
   Recuadros del Resumen clicables + panel detalle
   ============================================================ */
.metrica-click { cursor: pointer; transition: transform .08s, box-shadow .15s, border-color .15s; }
.metrica-click:hover { transform: translateY(-2px); box-shadow: var(--sombra-fuerte); border-color: var(--dorado); }
.metrica-click .m-ver-detalle { font-size: .72rem; color: var(--oliva); margin-top: .35rem; font-weight: 700; opacity: .8; }
.metrica-click.metrica-activa { border-color: var(--burdeos); box-shadow: 0 0 0 2px var(--burdeos); }
.resumen-detalle { margin-top: 1rem; padding: 1rem 1.2rem; }
.resumen-detalle .rd-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.resumen-detalle .rd-cab strong { font-family: var(--serif); font-size: 1.1rem; color: var(--burdeos); }
.resumen-detalle .rd-cuerpo { overflow-x: auto; }

/* ============================================================
   Modal "Nuevo pedido manual" — pedido por camarero desde panel
   ============================================================ */
.modal-grande { width: 100%; max-width: 760px; max-height: 92vh; display: flex; flex-direction: column; }
.modal-grande .modal-body { overflow-y: auto; flex: 1; }
.modal-foot { display: flex; gap: .5rem; justify-content: flex-end; padding: 1rem 1.2rem; border-top: 1px solid var(--linea); }
.pm-resultados { max-height: 240px; overflow-y: auto; margin-top: .4rem; border: 1px solid var(--linea); border-radius: 10px; padding: .4rem; background: #fffdf8; }
.pm-prod { display: flex; gap: .6rem; align-items: center; justify-content: space-between; padding: .5rem; border-bottom: 1px dashed var(--linea); }
.pm-prod:last-child { border-bottom: none; }
.pm-prod-info { flex: 1; min-width: 0; }
.pm-prod-info strong { color: var(--burdeos); }
.pm-prod-vars { display: flex; gap: .3rem; flex-wrap: wrap; }
.pm-lineas { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; }
.pm-linea { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; background: var(--crema-card); border: 1px solid var(--linea); border-radius: 10px; padding: .5rem .7rem; }
.pm-l-cant { display: flex; gap: .3rem; align-items: center; }
.pm-l-cant span { min-width: 22px; text-align: center; font-weight: 700; }
.pm-l-precio { font-weight: 700; color: var(--burdeos); min-width: 70px; text-align: right; }

/* ============================================================
   Navegador de carta dentro del modal "Nuevo pedido manual"
   ============================================================ */
.pm-carta-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; margin: .4rem 0 .6rem; }
.pm-cat-btn {
  display: flex; align-items: center; gap: .5rem;
  background: var(--crema-card); border: 2px solid var(--linea);
  border-radius: 10px; padding: .55rem .7rem;
  cursor: pointer; font-family: var(--sans); font-size: .92rem; font-weight: 600;
  text-align: left; transition: border-color .12s, background .12s;
}
.pm-cat-btn:hover { border-color: var(--oliva); background: #fff; }
.pm-cat-btn.abierta { border-color: var(--burdeos); background: var(--burdeos); color: #fff; }
.pm-cat-btn.abierta .pm-cat-n { background: rgba(255,255,255,.25); color: #fff; }
.pm-cat-ico { font-size: 1.2rem; }
.pm-cat-nombre { flex: 1; }
.pm-cat-n { background: var(--crema-2); color: var(--gris); padding: .1em .55em; border-radius: 999px; font-size: .78rem; font-weight: 700; }

/* ============================================================
   Botón flotante "❓ Ayuda" + modal de guía completa
   ============================================================ */
.ayuda-boton {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70;
  background: var(--burdeos); color: #fff;
  border: 2px solid var(--burdeos-osc); border-radius: 999px;
  padding: .65rem 1.1rem; font-weight: 700; font-family: var(--sans);
  font-size: .95rem; cursor: pointer;
  box-shadow: 0 6px 18px rgba(60,40,20,.25);
}
.ayuda-boton:hover { background: var(--burdeos-osc); }

.ayuda-ov { position: fixed; inset: 0; background: rgba(44,38,34,.55); z-index: 9990; display: flex; align-items: flex-start; justify-content: center; padding: 1.2rem; overflow-y: auto; }
.ayuda-card { background: var(--crema-card); border-radius: var(--radio); max-width: 920px; width: 100%; padding: 1.4rem 1.6rem; box-shadow: var(--sombra-fuerte); margin: 1rem 0; }
.ayuda-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.ayuda-head h2 { font-family: var(--serif); color: var(--burdeos); margin: 0; }
.ayuda-intro { color: var(--gris); font-size: .92rem; margin-bottom: 1rem; }
.ayuda-toc { display: flex; flex-wrap: wrap; gap: .35rem; padding: .8rem; background: var(--crema-2); border-radius: 10px; margin-bottom: 1.2rem; }
.ayuda-toc-btn { background: #fff; border: 1px solid var(--linea); border-radius: 999px; padding: .3em .8em; cursor: pointer; font-size: .82rem; font-weight: 600; }
.ayuda-toc-btn:hover { border-color: var(--burdeos); color: var(--burdeos); }
.ayuda-bloque { background: #fff; border: 1px solid var(--linea); border-radius: 10px; margin-bottom: .7rem; }
.ayuda-bloque > summary { padding: .8rem 1rem; cursor: pointer; font-family: var(--serif); font-size: 1.08rem; color: var(--burdeos); list-style: none; user-select: none; }
.ayuda-bloque > summary::-webkit-details-marker { display: none; }
.ayuda-bloque > summary::before { content: "▸ "; color: var(--dorado); }
.ayuda-bloque[open] > summary::before { content: "▾ "; }
.ayuda-bloque[open] > summary { background: var(--crema); border-bottom: 1px solid var(--linea); }
.ayuda-ico { margin-right: .3em; }
.ayuda-cuerpo { padding: .9rem 1.2rem 1.1rem; line-height: 1.55; }
.ayuda-cuerpo h4 { font-family: var(--serif); color: var(--burdeos); margin: 1rem 0 .35rem; font-size: 1rem; }
.ayuda-cuerpo ul, .ayuda-cuerpo ol { margin: .35rem 0 .8rem 1.3rem; padding: 0; }
.ayuda-cuerpo li { margin: .25rem 0; }
.ayuda-cuerpo code { background: var(--crema-2); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.ayuda-cuerpo kbd { background: #fff; border: 1px solid var(--linea); border-radius: 4px; padding: .05em .35em; font-size: .82em; font-family: monospace; }
.ayuda-tabla { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .9rem; }
.ayuda-tabla th, .ayuda-tabla td { border: 1px solid var(--linea); padding: .4em .6em; text-align: left; }
.ayuda-tabla th { background: var(--crema-2); }
.ayuda-flujo { counter-reset: paso; list-style: none; padding: 0; }
.ayuda-flujo li { counter-increment: paso; padding: .35em 0 .35em 2em; position: relative; }
.ayuda-flujo li::before { counter: paso; content: counter(paso); position: absolute; left: 0; top: .3em; background: var(--oliva); color: #fff; width: 1.4em; height: 1.4em; border-radius: 50%; text-align: center; font-weight: 700; font-size: .85em; line-height: 1.4em; }
.ayuda-consejo { background: #fdf6e3; border-left: 4px solid var(--dorado); padding: .55em .8em; border-radius: 6px; margin: .6em 0; font-size: .92rem; }
.ayuda-cita { background: #fbe7c8; border-left: 4px solid var(--c-pendiente); margin: .5em 0; padding: .4em .8em; font-size: .9rem; border-radius: 4px; }

@media (max-width: 640px) {
  .ayuda-card { padding: 1rem; }
  .ayuda-boton { padding: .55rem .9rem; font-size: .88rem; }
}

/* Cuenta de Caja desglosada por pedido (con hora + camarero) */
.cuenta-pedido { border: 1px solid var(--linea); border-radius: 8px; padding: .55rem .7rem; margin-bottom: .55rem; background: var(--crema-card); }
.cuenta-ped-cab { border-bottom: 1px dashed var(--linea); padding-bottom: .3rem; margin-bottom: .4rem; font-size: .9rem; }
.cuenta-ped-cab strong { color: var(--burdeos); }
.total-fila.sub { font-size: .82rem; color: var(--gris); padding: .1em 0; }

/* ============================================================
   Asignación múltiple de camareros por zona (checkboxes)
   ============================================================ */
.cam-zona-chks { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .7rem; }
.cam-zona-chk {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #fff; border: 1.5px solid var(--linea); border-radius: 999px;
  padding: .3em .75em; cursor: pointer; font-size: .85rem; font-weight: 600;
  user-select: none; transition: border-color .12s, background .12s;
}
.cam-zona-chk:hover { border-color: var(--oliva); }
.cam-zona-chk.marcada { background: var(--oliva); color: #fff; border-color: var(--oliva-osc); }
.cam-zona-chk.marcada:hover { background: var(--oliva-osc); }
.cam-zona-chk input { margin: 0; cursor: pointer; }
.cam-zona-acciones { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ===== Selector de periodo (caja / contabilidad) ===== */
.periodo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin: .8rem 0 1rem; }
.periodo-tabs { display: inline-flex; flex-wrap: wrap; gap: .3rem; background: var(--crema-card); padding: .3rem; border-radius: 12px; border: 1px solid var(--linea); }
.periodo-tabs button { background: transparent; border: 0; padding: .45rem .85rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--carbon); font-family: inherit; }
.periodo-tabs button:hover { background: rgba(0,0,0,.05); }
.periodo-tabs button.activo { background: var(--burdeos); color: #fff; }
.periodo-extra { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.periodo-extra input[type="date"] { padding: .4rem .6rem; border: 1px solid var(--linea); border-radius: 8px; font-family: inherit; }

/* Tarjeta resumen clicable (caja) */
.total-mini-c { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .85rem; background: var(--crema-card); border: 1px solid var(--linea); border-radius: 12px; cursor: pointer; text-align: left; min-width: 130px; font-family: inherit; transition: transform .08s, box-shadow .08s, border-color .08s; }
.total-mini-c:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.06); border-color: var(--dorado); }
.total-mini-c.activa { border-color: var(--burdeos); background: #fff; box-shadow: 0 0 0 2px rgba(123,30,43,.15); }
.total-mini-c .tm-label { font-size: .72rem; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.total-mini-c .tm-valor { font-size: 1.25rem; font-weight: 700; color: var(--burdeos); }
.total-mini-c .tm-sub { font-size: .72rem; color: var(--gris); }
.totales-dia { display: flex; flex-wrap: wrap; gap: .55rem; }

/* Panel de detalle al hacer click en una tarjeta */
.cj-det-box { margin-top: 1rem; border: 1px solid var(--linea); border-radius: 14px; padding: 1rem 1.1rem; background: #fffdf8; }
.cj-det-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.cj-det-res { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .88rem; color: var(--gris); padding: .5rem 0 .8rem; border-bottom: 1px dashed var(--linea); margin-bottom: .6rem; }
.cj-det-res strong { color: var(--burdeos); }

/* ===== Resumen panel: tarjetas de actividad reciente (mejor en tablet) ===== */
.resumen-2col { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; }
@media (max-width: 1100px) { .resumen-2col { grid-template-columns: 1fr; } }

.actividad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }
.act-card { background: #fffdf8; border: 1px solid var(--linea); border-radius: 12px; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .45rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.act-card-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.act-card-cab strong { color: var(--burdeos); font-size: 1rem; }
.act-card-items { list-style: none; padding: 0; margin: 0; font-size: .88rem; line-height: 1.35; max-height: 6.5em; overflow: hidden; }
.act-card-items li { padding: .1rem 0; border-bottom: 1px dashed transparent; }
.act-card-pie { display: flex; justify-content: space-between; align-items: center; padding-top: .35rem; border-top: 1px dashed var(--linea); }
.act-card-pie .euros { font-weight: 700; color: var(--burdeos); }