/* Athelier de Flores · Pedidos — estilos
   Estética: crema, arena y salvia. Mobile first. Sin estilos en línea (CSP estricta). */

@font-face { font-family: "Inter"; src: url("../fuentes/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fuentes/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --fondo: #F6F0E6;
  --fondo-2: #EFE6D8;
  --superficie: #FFFDF9;
  --borde: #E6DBCB;
  --borde-fuerte: #CDBDA4;
  --arena: #D9C7A7;
  --tinta: #2D2A26;
  --tinta-2: #5F574E;
  --tinta-3: #776C60;
  --salvia: #56755C;
  --salvia-oscura: #43604A;
  --salvia-clara: #DCE7D8;
  --salvia-suave: #EEF3EA;
  --dorado: #C98F45;
  --peligro: #B3261E;
  --peligro-fondo: #FCE4E0;
  --whatsapp: #1E7A46;

  --pend-f: #FBEFD6; --pend-t: #7A4B05; --pend-b: #E8C27A;
  --prep-f: #E9E6F8; --prep-t: #463F95; --prep-b: #B7B0EA;
  --listo-f: #DFF0E1; --listo-t: #22613A; --listo-b: #93C9A0;
  --entr-f: #E1ECEF; --entr-t: #2A5866; --entr-b: #9DC0CA;
  --canc-f: #F1E4E4; --canc-t: #7C3535; --canc-b: #D3A7A7;
  --sinpago-f: #FBE2E6; --sinpago-t: #8C1F36;
  --parcial-f: #FDEFD2; --parcial-t: #7A4B05;
  --pagado-f: #DFF0E1; --pagado-t: #22613A;
  --confirmar-f: #EFE5D3; --confirmar-t: #5C4A2E;
  --exced-f: #E1EAF8; --exced-t: #274C80;
  --atraso: #C0362C; --atraso-f: #FDE3DF; --atraso-t: #962015;

  --radio: 18px;
  --radio-m: 14px;
  --radio-s: 10px;
  --pill: 999px;
  --sombra: 0 1px 2px rgba(70, 52, 30, .05), 0 6px 18px rgba(70, 52, 30, .06);
  --sombra-alta: 0 10px 40px rgba(60, 45, 25, .18);
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulos: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --nav-alto: 66px;
  --abajo: env(safe-area-inset-bottom, 0px);
  --ancho-max: 880px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "cv11", "ss01";
}
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
p { margin: 0; }
a { color: var(--salvia-oscura); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(86, 117, 92, .55); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.chico { width: 16px; height: 16px; }
.ico.grande { width: 26px; height: 26px; }
.num { font-variant-numeric: tabular-nums; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sin-js { padding: 24px; text-align: center; }

/* ───────── Arranque ───────── */
.arranque { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--tinta-2); }
.arranque img { animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(.94); opacity: .8; } }

/* ───────── Botones ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: var(--radio-m);
  border: 1.5px solid transparent; background: none; cursor: pointer;
  font-weight: 600; font-size: 16px; line-height: 1.15; text-decoration: none; text-align: center;
  transition: background-color .15s, border-color .15s, transform .08s, box-shadow .15s;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primario { background: var(--salvia); color: #fff; box-shadow: 0 2px 8px rgba(67, 96, 74, .25); }
.btn-primario:hover { background: var(--salvia-oscura); }
.btn-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borde-fuerte); }
.btn-secundario:hover { border-color: var(--salvia); }
.btn-suave { background: var(--salvia-suave); color: var(--salvia-oscura); }
.btn-suave:hover { background: var(--salvia-clara); }
.btn-fantasma { color: var(--salvia-oscura); padding: 0 12px; }
.btn-fantasma:hover { background: var(--salvia-suave); }
.btn-peligro { background: var(--peligro); color: #fff; }
.btn-peligro-suave { background: var(--peligro-fondo); color: var(--atraso-t); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-bloque { width: 100%; }
.btn-grande { min-height: 56px; font-size: 17px; border-radius: 16px; }
.btn-chico { min-height: 38px; padding: 0 12px; font-size: 14px; border-radius: var(--radio-s); }
.btn-icono { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; color: var(--tinta-2); }
.btn-icono:hover { background: var(--fondo-2); }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"] > * { visibility: hidden; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid currentColor; border-color: rgba(255, 255, 255, .9) rgba(255, 255, 255, .9) transparent transparent;
  animation: girar .7s linear infinite;
}
.btn-secundario[aria-busy="true"]::after, .btn-suave[aria-busy="true"]::after, .btn-fantasma[aria-busy="true"]::after { border-color: var(--salvia) var(--salvia) transparent transparent; }
@keyframes girar { to { transform: rotate(360deg); } }
.girando { animation: girar .8s linear infinite; }

/* ───────── Marco general ───────── */
.marco { min-height: 100vh; }
.lateral { display: none; }
.principal { min-width: 0; }
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 6px;
  min-height: 60px; padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 6px 14px;
  background: rgba(246, 240, 230, .92); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.barra.con-borde { border-bottom-color: var(--borde); }
.barra-marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; margin-right: 2px; }
.barra-marca img { width: 32px; height: 32px; border-radius: 9px; }
.barra-volver { margin-left: -8px; }
.barra-titulos { flex: 1; min-width: 0; }
.barra-titulos h1 { font-family: var(--fuente-titulos); font-weight: 600; font-size: 21px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variation-settings: "SOFT" 50, "WONK" 0; }
.barra-titulos p { font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-acciones { display: flex; align-items: center; gap: 2px; }
.vista { padding: 8px 14px calc(var(--nav-alto) + var(--abajo) + 96px); max-width: var(--ancho-max); margin: 0 auto; outline: none; }
.vista.sin-fab { padding-bottom: calc(var(--nav-alto) + var(--abajo) + 28px); }

.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-alto) + var(--abajo)); padding-bottom: var(--abajo);
  background: rgba(255, 253, 249, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--borde);
}
.nav-inferior a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--tinta-2); text-decoration: none; font-size: 11.5px; font-weight: 600; position: relative;
}
.nav-inferior a .ico { width: 23px; height: 23px; }
.nav-inferior a[aria-current="page"] { color: var(--salvia-oscura); }
.nav-inferior a[aria-current="page"]::before {
  content: ""; position: absolute; top: 7px; width: 54px; height: 32px; border-radius: 16px; background: var(--salvia-clara); z-index: -1;
}
.nav-inferior a[aria-current="page"] .ico { stroke-width: 2.3; }

.fab {
  position: fixed; right: 16px; bottom: calc(var(--nav-alto) + var(--abajo) + 14px); z-index: 25;
  display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 22px 0 18px; border-radius: 18px;
  background: var(--salvia); color: #fff; font-weight: 700; font-size: 16.5px; text-decoration: none;
  box-shadow: 0 8px 24px rgba(67, 96, 74, .38), 0 2px 6px rgba(67, 96, 74, .25);
}
.fab .ico { width: 24px; height: 24px; stroke-width: 2.5; }
.fab:active { transform: scale(.97); }

@media (min-width: 960px) {
  .marco { display: grid; grid-template-columns: 256px 1fr; }
  .lateral {
    display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh;
    padding: 22px 16px; background: var(--superficie); border-right: 1px solid var(--borde);
  }
  .lateral .marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; text-decoration: none; color: inherit; }
  .lateral .marca img { width: 44px; height: 44px; border-radius: 12px; }
  .lateral .marca strong { display: block; font-family: var(--fuente-titulos); font-size: 19px; font-weight: 600; line-height: 1.1; }
  .lateral .marca small { color: var(--tinta-2); font-size: 13px; }
  .lateral .btn-primario { margin: 0 4px 14px; }
  .lateral nav { display: grid; gap: 2px; }
  .lateral nav a {
    display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 12px;
    color: var(--tinta-2); text-decoration: none; font-weight: 600;
  }
  .lateral nav a:hover { background: var(--fondo); color: var(--tinta); }
  .lateral nav a[aria-current="page"] { background: var(--salvia-clara); color: var(--salvia-oscura); }
  .lateral .pie { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--borde); font-size: 14px; color: var(--tinta-2); display: grid; gap: 8px; }
  .lateral .pie strong { color: var(--tinta); display: block; }
  .nav-inferior, .fab, .barra-marca { display: none; }
  .barra { padding: 14px max(28px, calc((100% - var(--ancho-max)) / 2 + 28px)) 10px; min-height: 72px; }
  .barra-titulos h1 { font-size: 26px; }
  .vista { padding: 8px 28px 48px; }
  .vista.sin-fab { padding-bottom: 48px; }
}

/* ───────── Pestañas / chips ───────── */
.pestanas { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-height: 42px; padding: 0 16px; border-radius: var(--pill);
  border: 1.5px solid var(--borde-fuerte); background: var(--superficie); color: var(--tinta);
  font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
  touch-action: manipulation;
}
.chip:hover { border-color: var(--salvia); }
.chip[aria-pressed="true"], .chip[aria-current="page"], .chip.activo {
  background: var(--salvia); border-color: var(--salvia); color: #fff;
}
.chip .contador-chip { background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 0 7px; font-size: 13px; }
.chip.suave[aria-pressed="true"] { background: var(--salvia-clara); color: var(--salvia-oscura); border-color: var(--salvia); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--fondo-2); border-radius: 14px; }
.segmentado button {
  min-height: 42px; border: 0; border-radius: 11px; background: none; font-weight: 600; font-size: 15px; color: var(--tinta-2); cursor: pointer; padding: 0 8px;
}
.segmentado button[aria-pressed="true"] { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 3px rgba(60, 45, 25, .15); }

/* ───────── Buscador y filtros ───────── */
.busqueda { display: flex; gap: 8px; margin-bottom: 12px; }
.campo-busqueda { position: relative; flex: 1; }
.campo-busqueda .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.campo-busqueda input { padding-left: 44px !important; }
.campo-busqueda .limpiar { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.boton-filtros { position: relative; }
.boton-filtros .insignia {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--salvia); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--fondo);
}
.filtros-activos { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.filtro-activo {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 6px 0 12px; border-radius: 999px;
  background: var(--salvia-clara); color: var(--salvia-oscura); font-size: 14px; font-weight: 600; border: 0; cursor: pointer;
}

/* ───────── Contadores ───────── */
.contadores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 520px) { .contadores { grid-template-columns: repeat(4, 1fr); } }
.contador {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 12px 14px; border-radius: var(--radio-m); border: 1.5px solid transparent; text-align: left; cursor: pointer;
  background: var(--superficie); box-shadow: var(--sombra); min-height: 70px;
}
.contador .ico { grid-row: span 2; width: 26px; height: 26px; }
.contador strong { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.contador span { font-size: 13.5px; font-weight: 600; }
.contador.e-pendiente { background: var(--pend-f); color: var(--pend-t); }
.contador.e-preparacion { background: var(--prep-f); color: var(--prep-t); }
.contador.e-listo { background: var(--listo-f); color: var(--listo-t); }
.contador.e-entregado { background: var(--entr-f); color: var(--entr-t); }
.contador[aria-pressed="true"] { border-color: currentColor; box-shadow: 0 0 0 2px currentColor inset; }

.alerta-atrasados {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 14px; padding: 12px 14px;
  border-radius: var(--radio-m); background: var(--atraso-f); color: var(--atraso-t); border: 1.5px solid #F3B7AE;
  text-decoration: none; font-weight: 600; cursor: pointer; text-align: left;
}
.alerta-atrasados .ico { color: var(--atraso); width: 24px; height: 24px; }
.alerta-atrasados span { flex: 1; }

/* ───────── Encabezado de grupo ───────── */
.grupo-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 2px 10px; }
.grupo-titulo h2 { font-family: var(--fuente-titulos); font-size: 19px; font-weight: 600; }
.grupo-titulo h2 .relativo { color: var(--salvia-oscura); }
.grupo-titulo small { color: var(--tinta-2); font-size: 14px; white-space: nowrap; }
.grupo-titulo.pasado h2 { color: var(--tinta-2); }

/* ───────── Tarjeta de pedido ───────── */
.lista { display: grid; gap: 10px; }
@media (min-width: 960px) { .lista.dos-columnas { grid-template-columns: 1fr 1fr; } }
.tarjeta-pedido {
  position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 10px;
  padding: 13px 12px 13px 12px; border-radius: var(--radio); background: var(--superficie);
  box-shadow: var(--sombra); border: 1.5px solid transparent; overflow: hidden;
  transition: transform .12s, box-shadow .15s;
}
.tarjeta-pedido:hover { box-shadow: 0 2px 4px rgba(70, 52, 30, .06), 0 10px 26px rgba(70, 52, 30, .1); }
.tarjeta-pedido:active { transform: scale(.995); }
.tarjeta-pedido::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--borde); }
.tarjeta-pedido.e-pendiente::before { background: var(--pend-b); }
.tarjeta-pedido.e-preparacion::before { background: var(--prep-b); }
.tarjeta-pedido.e-listo::before { background: var(--listo-b); }
.tarjeta-pedido.e-entregado::before { background: var(--entr-b); }
.tarjeta-pedido.e-cancelado::before { background: var(--canc-b); }
.tarjeta-pedido.e-entregado, .tarjeta-pedido.e-cancelado { background: #FBF8F3; }
.tarjeta-pedido.e-cancelado .tp-cliente, .tarjeta-pedido.e-cancelado .tp-producto { text-decoration: line-through; text-decoration-color: rgba(124, 53, 53, .5); }
.tarjeta-pedido.atrasada { border-color: #EEA79D; background: #FFF8F6; }
.tarjeta-pedido.atrasada::before { background: var(--atraso); width: 6px; }
.tp-enlace { color: inherit; text-decoration: none; }
.tp-enlace::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tp-hora { display: flex; flex-direction: column; align-items: flex-start; padding-left: 4px; }
.tp-hora strong { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tp-hora small { font-size: 13px; color: var(--tinta-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.tp-hora .tp-fecha { font-size: 12.5px; font-weight: 700; color: var(--salvia-oscura); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.tp-hora.sin-hora strong { font-size: 14px; color: var(--tinta-2); font-weight: 600; line-height: 1.2; }
.tp-cuerpo { min-width: 0; display: grid; gap: 4px; align-content: start; }
.tp-fila { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.tp-cliente { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-num { font-size: 13px; color: var(--tinta-3); font-weight: 600; flex: none; font-variant-numeric: tabular-nums; }
.tp-producto { color: var(--tinta); font-size: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tp-entrega { display: flex; align-items: center; gap: 6px; color: var(--tinta-2); font-size: 14px; min-width: 0; }
.tp-entrega span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-entrega .ico { width: 17px; height: 17px; }
.tp-pie { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tp-accion { position: relative; z-index: 2; margin-left: auto; }
.tp-extras { display: inline-flex; gap: 6px; color: var(--tinta-3); }
.tp-extras .ico { width: 16px; height: 16px; }

/* ───────── Insignias ───────── */
.insignia {
  display: inline-flex; align-items: center; gap: 4px; min-height: 27px; padding: 0 9px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap; line-height: 1;
}
.insignia .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.insignia.grande { min-height: 36px; font-size: 15px; padding: 0 14px; }
.insignia.grande .ico { width: 18px; height: 18px; }
.e-pendiente .insignia-estado, .insignia.e-pendiente { background: var(--pend-f); color: var(--pend-t); }
.insignia.e-preparacion { background: var(--prep-f); color: var(--prep-t); }
.insignia.e-listo { background: var(--listo-f); color: var(--listo-t); }
.insignia.e-entregado { background: var(--entr-f); color: var(--entr-t); }
.insignia.e-cancelado { background: var(--canc-f); color: var(--canc-t); }
.insignia.p-sin_pagar { background: var(--sinpago-f); color: var(--sinpago-t); }
.insignia.p-parcial { background: var(--parcial-f); color: var(--parcial-t); }
.insignia.p-pagado { background: var(--pagado-f); color: var(--pagado-t); }
.insignia.p-confirmar { background: var(--confirmar-f); color: var(--confirmar-t); }
.insignia.p-excedente { background: var(--exced-f); color: var(--exced-t); }
.insignia.atrasado { background: var(--atraso); color: #fff; }
.insignia.neutra { background: var(--fondo-2); color: var(--tinta-2); }

/* ───────── Estados vacíos y carga ───────── */
.vacio { text-align: center; padding: 40px 20px 30px; color: var(--tinta-2); display: grid; justify-items: center; gap: 10px; }
.vacio .ilustracion { width: 88px; height: 88px; border-radius: 50%; background: var(--salvia-suave); display: grid; place-items: center; color: var(--salvia); margin-bottom: 4px; }
.vacio .ilustracion .ico { width: 40px; height: 40px; stroke-width: 1.6; }
.vacio strong { color: var(--tinta); font-size: 18px; font-family: var(--fuente-titulos); font-weight: 600; }
.cargando { display: grid; gap: 10px; }
.esqueleto { height: 104px; border-radius: var(--radio); background: linear-gradient(90deg, #EFE7DA 0%, #F7F2EA 50%, #EFE7DA 100%); background-size: 200% 100%; animation: brillo 1.2s ease-in-out infinite; }
@keyframes brillo { to { background-position: -200% 0; } }
.error-carga { text-align: center; padding: 28px 18px; display: grid; gap: 12px; justify-items: center; color: var(--tinta-2); }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 20px 0 6px; color: var(--tinta-2); font-size: 14px; }

/* ───────── Secciones / tarjetas de contenido ───────── */
.seccion { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; margin-bottom: 14px; }
.seccion > h2, .seccion-titulo {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 12px;
}
.seccion > h2 .ico, .seccion-titulo .ico { width: 18px; height: 18px; color: var(--salvia); }
.seccion-titulo .accion-titulo { margin-left: auto; text-transform: none; letter-spacing: 0; }
.dato { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 8px 0; }
.dato + .dato { border-top: 1px solid var(--fondo-2); }
.dato > .ico { color: var(--tinta-3); margin-top: 1px; }
.dato .etiqueta { display: block; font-size: 13px; color: var(--tinta-2); }
.dato .valor { display: block; font-weight: 600; font-size: 16px; word-break: break-word; }
.dato .extra { display: block; color: var(--tinta-2); font-size: 14.5px; margin-top: 2px; }
.dato .valor.grande { font-size: 19px; }
.dato .acciones-dato { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.texto-suave { color: var(--tinta-2); }
.texto-chico { font-size: 14px; }
.separador { height: 1px; background: var(--borde); margin: 14px 0; border: 0; }
.margen-arriba { margin-top: 14px; }
.margen-abajo { margin-bottom: 14px; }
.centrado { text-align: center; }
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.grilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ───────── Detalle de pedido ───────── */
.cabecera-pedido { display: grid; gap: 12px; margin: 6px 0 14px; }
.cabecera-pedido .insignias { display: flex; flex-wrap: wrap; gap: 8px; }
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 2px 0 4px; }
.paso { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); position: relative; }
.paso .bolita { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo-2); border: 2px solid var(--borde-fuerte); position: relative; z-index: 1; }
.paso .bolita .ico { width: 17px; height: 17px; }
.paso::before { content: ""; position: absolute; top: 16px; left: -50%; right: 50%; height: 3px; background: var(--borde-fuerte); }
.paso:first-child::before { display: none; }
.paso.hecho { color: var(--salvia-oscura); }
.paso.hecho .bolita { background: var(--salvia); border-color: var(--salvia); color: #fff; }
.paso.hecho::before, .paso.actual::before { background: var(--salvia); }
.paso.actual { color: var(--tinta); }
.paso.actual .bolita { background: var(--superficie); border-color: var(--salvia); color: var(--salvia-oscura); box-shadow: 0 0 0 4px var(--salvia-clara); }
.pasos.cancelado { opacity: .45; filter: grayscale(1); }
.acciones-estado { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

.producto { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 0; }
.producto + .producto { border-top: 1px solid var(--fondo-2); }
.producto .cantidad { min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px; background: var(--salvia-suave); color: var(--salvia-oscura); font-weight: 800; display: grid; place-items: center; font-size: 17px; }
.producto .nombre { font-weight: 700; }
.producto .detalle { color: var(--tinta-2); font-size: 15px; white-space: pre-line; }
.producto .precio { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.producto .precio small { display: block; color: var(--tinta-2); font-weight: 500; font-size: 13px; }
.preferencias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.preferencia { display: inline-block; background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: 3px 8px; font-size: 13.5px; line-height: 1.35; }
.preferencia b { font-weight: 600; color: var(--tinta-2); }

.dedicatoria { position: relative; padding: 14px 16px 14px 44px; border-radius: var(--radio-m); background: #FBF5EC; border: 1px dashed var(--arena); font-family: var(--fuente-titulos); font-size: 18px; line-height: 1.45; white-space: pre-line; }
.dedicatoria .ico { position: absolute; left: 14px; top: 16px; color: var(--dorado); }
.nota-interna { padding: 12px 14px; border-radius: var(--radio-m); background: var(--fondo); white-space: pre-line; }

.totales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.total-caja { padding: 12px; border-radius: var(--radio-m); background: var(--fondo); display: grid; gap: 2px; }
.total-caja span { font-size: 13px; color: var(--tinta-2); font-weight: 600; }
.total-caja strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.total-caja.saldo.p-sin_pagar, .total-caja.saldo.p-parcial { background: var(--sinpago-f); color: var(--sinpago-t); }
.total-caja.saldo.p-sin_pagar span, .total-caja.saldo.p-parcial span { color: inherit; }
.total-caja.saldo.p-pagado { background: var(--pagado-f); color: var(--pagado-t); }
.total-caja.saldo.p-pagado span { color: inherit; }
.total-caja.saldo.p-confirmar { background: var(--confirmar-f); color: var(--confirmar-t); }
.total-caja.saldo.p-excedente { background: var(--exced-f); color: var(--exced-t); }
.aviso-linea { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; margin-bottom: 12px; }
.aviso-linea .ico { margin-top: 1px; }
.aviso-linea.info { background: var(--exced-f); color: var(--exced-t); }
.aviso-linea.alerta { background: var(--parcial-f); color: var(--parcial-t); }
.aviso-linea.peligro { background: var(--atraso-f); color: var(--atraso-t); }
.aviso-linea.ok { background: var(--pagado-f); color: var(--pagado-t); }

.pago-item { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; }
.pago-item + .pago-item { border-top: 1px solid var(--fondo-2); }
.pago-item .medio { width: 40px; height: 40px; border-radius: 12px; background: var(--salvia-suave); color: var(--salvia-oscura); display: grid; place-items: center; }
.pago-item .monto { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 17px; }
.pago-item .meta { font-size: 13.5px; color: var(--tinta-2); }
.pago-item.anulado .monto, .pago-item.anulado .titulo-pago { text-decoration: line-through; color: var(--tinta-3); }
.pago-item.anulado .medio { background: var(--fondo-2); color: var(--tinta-3); }
.pago-item .motivo { font-size: 13.5px; color: var(--atraso-t); }

.botones-whatsapp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.botones-whatsapp .btn { justify-content: flex-start; min-height: 54px; font-size: 14.5px; padding: 0 12px; text-align: left; }
.botones-whatsapp .btn .ico { color: var(--whatsapp); }
.botones-whatsapp .btn.poco-relevante { color: var(--tinta-2); border-style: dashed; }
.botones-whatsapp .btn.poco-relevante .ico { color: var(--tinta-3); }
.texto-flex { flex: 1; min-width: 0; }
@media (max-width: 360px) { .botones-whatsapp { grid-template-columns: 1fr; } }

.fotos-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.foto-mini { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--fondo-2); border: 0; padding: 0; cursor: zoom-in; }
.foto-mini img { width: 100%; height: 100%; object-fit: cover; }
.foto-mini .quitar { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(30, 25, 20, .7); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.foto-mini .quitar .ico { width: 16px; height: 16px; }
.foto-mini .estado-subida { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 253, 249, .65); color: var(--salvia-oscura); }
.foto-mini.error .estado-subida { background: rgba(253, 227, 223, .85); color: var(--atraso-t); font-size: 12px; font-weight: 700; text-align: center; padding: 6px; }
.agregar-foto { aspect-ratio: 1; border-radius: 12px; border: 2px dashed var(--borde-fuerte); display: grid; place-items: center; align-content: center; gap: 4px; color: var(--salvia-oscura); cursor: pointer; background: var(--superficie); font-size: 13px; font-weight: 600; text-align: center; padding: 6px; }
.agregar-foto:hover { border-color: var(--salvia); background: var(--salvia-suave); }

.linea-tiempo { list-style: none; margin: 0; padding: 0; display: grid; }
.linea-tiempo li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; position: relative; padding-bottom: 14px; }
.linea-tiempo li::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--borde); }
.linea-tiempo li:last-child::before { display: none; }
.linea-tiempo .punto { width: 22px; height: 22px; border-radius: 50%; background: var(--fondo-2); display: grid; place-items: center; color: var(--tinta-2); }
.linea-tiempo .punto .ico { width: 12px; height: 12px; stroke-width: 3; }
.linea-tiempo .punto.e-pendiente { background: var(--pend-f); color: var(--pend-t); }
.linea-tiempo .punto.e-preparacion { background: var(--prep-f); color: var(--prep-t); }
.linea-tiempo .punto.e-listo { background: var(--listo-f); color: var(--listo-t); }
.linea-tiempo .punto.e-entregado { background: var(--entr-f); color: var(--entr-t); }
.linea-tiempo .punto.e-cancelado { background: var(--canc-f); color: var(--canc-t); }
.linea-tiempo .punto.pago { background: var(--pagado-f); color: var(--pagado-t); }
.linea-tiempo .punto.anulacion { background: var(--sinpago-f); color: var(--sinpago-t); }
.linea-tiempo .texto { font-size: 15px; }
.linea-tiempo .cuando { font-size: 13px; color: var(--tinta-2); }

/* ───────── Formularios ───────── */
.form-grupo { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo > label, .campo .etiqueta-campo { font-weight: 600; font-size: 15px; color: var(--tinta); }
.campo .opcional { font-weight: 500; color: var(--tinta-2); font-size: 13.5px; }
.campo .ayuda { font-size: 13.5px; color: var(--tinta-2); }
.campo .error-campo { font-size: 14px; color: var(--atraso-t); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.entrada, .campo input[type="text"], .campo input[type="tel"], .campo input[type="password"], .campo input[type="search"], .campo select, .campo textarea, .entrada-busqueda {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--borde-fuerte);
  background: #fff; font-size: 17px; line-height: 1.3; transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none;
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo select { background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus, .entrada-busqueda:focus { outline: none; border-color: var(--salvia); box-shadow: 0 0 0 4px rgba(86, 117, 92, .18); }
.campo.con-error input, .campo.con-error textarea, .campo.con-error select, .con-error .selector-fecha { border-color: var(--atraso); box-shadow: 0 0 0 3px rgba(192, 54, 44, .12); }
.entrada-peso { position: relative; }
.entrada-peso::before { content: "$"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tinta-2); font-weight: 600; font-size: 17px; pointer-events: none; }
.entrada-peso input { padding-left: 30px !important; font-variant-numeric: tabular-nums; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fila-campos.tres { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 380px) { .fila-campos.tres { grid-template-columns: 1fr 1fr; } }
.paso-cantidad { display: grid; grid-template-columns: 48px 1fr 48px; border: 1.5px solid var(--borde-fuerte); border-radius: 12px; overflow: hidden; background: #fff; height: 50px; }
.paso-cantidad button { border: 0; background: var(--fondo); font-size: 22px; font-weight: 600; cursor: pointer; color: var(--salvia-oscura); }
.paso-cantidad button:active { background: var(--salvia-clara); }
.paso-cantidad input { border: 0 !important; text-align: center; font-weight: 700; min-height: 0 !important; height: 100%; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-variant-numeric: tabular-nums; }

.item-form { border: 1.5px solid var(--borde); border-radius: var(--radio-m); padding: 14px; display: grid; gap: 12px; background: #FFFEFC; position: relative; }
.item-form + .item-form { margin-top: 12px; }
.item-form .cabecera-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: -4px; }
.item-form .cabecera-item strong { font-size: 14px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .05em; }
.item-form .subtotal-item { font-size: 14px; color: var(--tinta-2); text-align: right; font-variant-numeric: tabular-nums; }
details.preferencias-form summary { cursor: pointer; font-weight: 600; color: var(--salvia-oscura); list-style: none; display: flex; align-items: center; gap: 6px; min-height: 40px; }
details.preferencias-form summary::-webkit-details-marker { display: none; }
details.preferencias-form[open] summary .ico { transform: rotate(180deg); }
details.preferencias-form .form-grupo { padding-top: 8px; }

.opciones-modalidad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion-grande {
  display: grid; justify-items: center; gap: 6px; padding: 14px 10px; border-radius: var(--radio-m); border: 2px solid var(--borde-fuerte);
  background: #fff; cursor: pointer; font-weight: 700; text-align: center; min-height: 92px; align-content: center; font-size: 15px;
}
.opcion-grande .ico { width: 28px; height: 28px; color: var(--tinta-2); }
.opcion-grande[aria-pressed="true"] { border-color: var(--salvia); background: var(--salvia-suave); color: var(--salvia-oscura); box-shadow: 0 0 0 3px rgba(86, 117, 92, .15); }
.opcion-grande[aria-pressed="true"] .ico { color: var(--salvia); }

.selector-fecha { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--borde-fuerte); background: #fff; width: 100%; text-align: left; cursor: pointer; font-size: 17px; }
.selector-fecha .ico { color: var(--salvia); }
.selector-fecha strong { font-weight: 700; }
.selector-fecha.vacio { color: var(--tinta-3); }

.sugerencias { border: 1.5px solid var(--borde); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--sombra); }
.sugerencias button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 12px 14px; border: 0; background: none; text-align: left; cursor: pointer; min-height: 52px; }
.sugerencias button + button { border-top: 1px solid var(--fondo-2); }
.sugerencias button:hover, .sugerencias button:focus-visible { background: var(--salvia-suave); }
.sugerencias .ico { color: var(--tinta-3); }
.sugerencias small { color: var(--tinta-2); display: block; font-size: 13.5px; }
.cliente-elegido { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--salvia-suave); border: 1.5px solid var(--salvia-clara); }
.cliente-elegido .avatar, .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--salvia); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; font-size: 16px; }
.cliente-elegido div { flex: 1; min-width: 0; }
.cliente-elegido strong { display: block; }
.cliente-elegido small { color: var(--tinta-2); }

.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; cursor: pointer; font-weight: 600; }
.interruptor input { appearance: none; -webkit-appearance: none; width: 52px; height: 32px; border-radius: 16px; background: var(--borde-fuerte); position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.interruptor input:checked { background: var(--salvia); }
.interruptor input:checked::after { transform: translateX(20px); }

.barra-guardar {
  position: sticky; bottom: calc(var(--nav-alto) + var(--abajo) + 8px); z-index: 15; margin-top: 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 12px 12px 12px 16px; border-radius: 18px; background: rgba(255, 253, 249, .97); box-shadow: var(--sombra-alta); border: 1px solid var(--borde);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.barra-guardar .resumen-total { display: grid; gap: 1px; min-width: 0; }
.barra-guardar .resumen-total strong { font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.barra-guardar .resumen-total small { color: var(--tinta-2); font-size: 13px; line-height: 1.3; }
.barra-guardar .btn { min-height: 52px; padding: 0 18px; }
.solo-celular { display: inline; }
.solo-escritorio { display: none; }
@media (min-width: 600px) { .solo-celular { display: none; } .solo-escritorio { display: inline; } }
.barra-guardar .resumen-total .a-confirmar { color: var(--confirmar-t); }
@media (min-width: 960px) { .barra-guardar { bottom: 16px; } }

/* ───────── Calendario ───────── */
.cal-cabecera { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; }
.cal-cabecera h2 { flex: 1; font-family: var(--fuente-titulos); font-size: 21px; font-weight: 600; text-transform: capitalize; }
.cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: var(--superficie); padding: 10px; border-radius: var(--radio); box-shadow: var(--sombra); }
.cal-dia-semana { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--tinta-2); padding: 4px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.cal-dia {
  position: relative; aspect-ratio: 1 / 1.05; min-height: 46px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  display: grid; align-content: start; justify-items: center; padding-top: 6px; gap: 3px; font-variant-numeric: tabular-nums;
}
.cal-dia .n { font-size: 16px; font-weight: 600; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; }
.cal-dia.otro-mes { opacity: .38; }
.cal-dia:hover { background: var(--fondo); }
.cal-dia.hoy .n { background: var(--tinta); color: #fff; }
.cal-dia[aria-pressed="true"] { background: var(--salvia-clara); }
.cal-dia[aria-pressed="true"] .n { font-weight: 800; }
.cal-dia .cuenta { font-size: 11.5px; font-weight: 800; min-width: 22px; height: 20px; border-radius: 10px; padding: 0 6px; display: grid; place-items: center; background: var(--salvia); color: #fff; }
.cal-dia .cuenta.terminado { background: var(--entr-f); color: var(--entr-t); }
.cal-dia .cuenta.atrasado { background: var(--atraso); }
.cal-dia.pasado .n { color: var(--tinta-2); }
.cal-dia.hoy.pasado .n, .cal-dia.hoy .n { color: #fff; }
.cal-dia-leyenda { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.cal-dia-leyenda.verde { background: var(--salvia); }
.cal-dia-leyenda.gris { background: var(--entr-f); border: 1px solid var(--entr-b); }
.cal-dia-leyenda.rojo { background: var(--atraso); }
.semana-dia { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 14px; margin-bottom: 10px; }
.semana-dia.hoy { box-shadow: 0 0 0 2px var(--salvia), var(--sombra); }
.semana-dia header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.semana-dia header h3 { font-size: 16px; font-weight: 700; }
.semana-dia header h3 small { color: var(--tinta-2); font-weight: 600; margin-left: 6px; }
.fila-compacta { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--fondo-2); text-decoration: none; color: inherit; min-height: 52px; }
.fila-compacta:first-of-type { border-top: 0; }
.fila-compacta .hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.fila-compacta .quien { min-width: 0; }
.fila-compacta .quien strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-compacta .quien small { display: block; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.punto-estado { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.punto-estado.e-pendiente { background: var(--pend-b); } .punto-estado.e-preparacion { background: var(--prep-b); }
.punto-estado.e-listo { background: var(--listo-b); } .punto-estado.e-entregado { background: var(--entr-b); }

/* ───────── Para preparar ───────── */
.resumen-preparar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px; border-radius: var(--radio); background: var(--salvia-suave); border: 1.5px solid var(--salvia-clara); margin-bottom: 14px; }
.resumen-preparar .titulo { width: 100%; font-weight: 700; color: var(--salvia-oscura); display: flex; align-items: center; gap: 8px; }
.resumen-preparar .cosa { background: #fff; border-radius: 10px; padding: 6px 12px; font-weight: 700; }
.resumen-preparar .cosa b { font-size: 18px; color: var(--salvia-oscura); margin-right: 4px; }
.bloque-preparar { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; margin-bottom: 14px; border-left: 6px solid var(--borde); break-inside: avoid; page-break-inside: avoid; }
.bloque-preparar.e-pendiente { border-left-color: var(--pend-b); }
.bloque-preparar.e-preparacion { border-left-color: var(--prep-b); }
.bloque-preparar.e-listo { border-left-color: var(--listo-b); opacity: .9; }
.bloque-preparar.e-entregado { border-left-color: var(--entr-b); opacity: .7; }
.bloque-preparar.atrasada { border-left-color: var(--atraso); }
.bloque-preparar header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.bloque-preparar header .hora { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; min-width: 66px; }
.bloque-preparar header .hora small { display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); margin-top: 3px; }
.bloque-preparar header .quien { flex: 1; min-width: 0; }
.bloque-preparar header .quien strong { font-size: 17px; display: block; }
.bloque-preparar header .quien small { color: var(--tinta-2); display: block; }
.bloque-preparar .items-preparar { display: grid; gap: 8px; margin: 8px 0; }
.item-preparar { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 10px; border-radius: 12px; background: var(--fondo); }
.item-preparar .cant { height: 48px; border-radius: 12px; background: var(--salvia); color: #fff; font-size: 22px; font-weight: 800; display: grid; place-items: center; }
.item-preparar .nombre { font-weight: 700; font-size: 16.5px; }
.bloque-preparar .tarjeta-texto { margin-top: 10px; }
.bloque-preparar .acciones-preparar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.casilla-impresion { display: none; }

/* ───────── Clientes ───────── */
.tarjeta-cliente { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); }
.tarjeta-cliente .datos { min-width: 0; }
.tarjeta-cliente strong { display: block; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta-cliente small { display: block; color: var(--tinta-2); font-size: 14px; }
.tarjeta-cliente .derecha { display: grid; justify-items: end; gap: 4px; }

/* ───────── Ajustes ───────── */
.lista-ajustes { display: grid; }
.fila-ajuste { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--fondo-2); }
.fila-ajuste:first-child { border-top: 0; }
.fila-ajuste .texto { flex: 1; min-width: 0; }
.fila-ajuste .texto small { display: block; color: var(--tinta-2); font-size: 13.5px; }
.variables { display: flex; flex-wrap: wrap; gap: 6px; }
.variables code { background: var(--fondo); border: 1px solid var(--borde); border-radius: 6px; padding: 2px 6px; font-size: 13px; cursor: help; }
.plantilla textarea { min-height: 150px; }
.plantilla + .plantilla { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fondo-2); }
.registro-auditoria { font-size: 14px; }
.registro-auditoria li { padding: 6px 0; border-top: 1px solid var(--fondo-2); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.registro-auditoria ul { padding: 0; margin: 0; }
.registro-auditoria .cuando { color: var(--tinta-2); white-space: nowrap; }

/* ───────── Diálogos / hojas ───────── */
dialog.hoja {
  border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; max-height: 92vh; color: inherit;
  position: fixed; inset: auto 0 0 0; border-radius: 22px 22px 0 0; background: var(--superficie);
  box-shadow: var(--sombra-alta); overflow: hidden; display: none;
}
dialog.hoja[open] { display: flex; flex-direction: column; animation: subir .22s ease-out; }
dialog.hoja::backdrop { background: rgba(40, 32, 22, .45); }
@keyframes subir { from { transform: translateY(40px); opacity: .4; } }
.hoja-cabecera { display: flex; align-items: center; gap: 8px; padding: 16px 12px 8px 20px; }
.hoja-cabecera::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--borde-fuerte); }
.hoja-cabecera h2 { flex: 1; font-family: var(--fuente-titulos); font-size: 21px; font-weight: 600; }
.hoja-cuerpo { padding: 6px 20px 16px; overflow-y: auto; overscroll-behavior: contain; }
.hoja-pie { display: flex; gap: 10px; padding: 12px 20px calc(14px + var(--abajo)); border-top: 1px solid var(--fondo-2); background: var(--superficie); }
.hoja-pie > * { flex: 1 1 0; min-width: 0; }
.hoja-pie > .btn-primario, .hoja-pie > .btn-whatsapp, .hoja-pie > .btn-peligro { flex: 1.6 1 0; }
.avisos.en-dialogo { position: fixed; bottom: calc(96px + var(--abajo)); }
@media (min-width: 700px) {
  dialog.hoja { inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 860px); border-radius: 22px; height: fit-content; }
  dialog.hoja.ancha { width: min(760px, calc(100vw - 32px)); }
  .hoja-cabecera::before { display: none; }
  @keyframes subir { from { transform: translateY(14px) scale(.98); opacity: 0; } }
}
dialog.visor { background: rgba(20, 16, 12, .94); width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; }
dialog.visor[open] { display: grid; place-items: center; }
dialog.visor img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
dialog.visor .cerrar-visor { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; background: rgba(255, 255, 255, .15); color: #fff; }
.mensaje-previa { width: 100%; min-height: 220px; font-size: 16px; line-height: 1.45; border-radius: 14px; padding: 14px; border: 1.5px solid var(--borde-fuerte); background: #F3FBF4; font-family: var(--fuente); resize: vertical; }
.burbuja-destino { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--fondo); margin-top: 8px; }
.burbuja-destino small { display: block; }

/* ───────── Avisos (toasts) ───────── */
.avisos { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-alto) + var(--abajo) + 84px); z-index: 1000; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
@media (min-width: 960px) { .avisos { bottom: 24px; left: 280px; } }
.aviso {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; width: min(560px, 100%);
  padding: 12px 12px 12px 16px; border-radius: 14px; background: #2E2B27; color: #fff; box-shadow: var(--sombra-alta);
  font-weight: 600; font-size: 15px; animation: aparecer .2s ease-out;
}
.aviso.ok .ico { color: #9FDCA9; }
.aviso.error { background: #8E1F16; }
.aviso.error .ico { color: #FFD3CC; }
.aviso span { flex: 1; }
.aviso button { background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 10px; min-height: 38px; padding: 0 14px; font-weight: 700; cursor: pointer; }
.aviso.saliendo { opacity: 0; transform: translateY(8px); transition: all .2s; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } }

.aviso-inactividad {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%); z-index: 1100;
  width: min(520px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
  border-radius: 16px; background: #2E2B27; color: #fff; box-shadow: var(--sombra-alta); font-weight: 600;
}
.aviso-inactividad .ico { color: #F2C77B; }
.aviso-inactividad span { flex: 1; }

/* ───────── Ingreso ───────── */
.pantalla-ingreso { min-height: 100vh; display: grid; place-items: center; padding: 24px 18px calc(24px + var(--abajo)); background:
  radial-gradient(120% 60% at 50% -10%, #E7EFE2 0%, rgba(231, 239, 226, 0) 60%), var(--fondo); }
.caja-ingreso { width: min(420px, 100%); display: grid; gap: 22px; }
.marca-ingreso { display: grid; justify-items: center; gap: 12px; text-align: center; }
.marca-ingreso img { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 10px 30px rgba(67, 96, 74, .28); }
.marca-ingreso h1 { font-family: var(--fuente-titulos); font-weight: 600; font-size: 32px; letter-spacing: -.015em; }
.marca-ingreso p { color: var(--tinta-2); }
.tarjeta-ingreso { background: var(--superficie); border-radius: 22px; box-shadow: var(--sombra); padding: 22px; display: grid; gap: 16px; }
.campo-clave { position: relative; }
.campo-clave .ver-clave { position: absolute; right: 3px; top: 3px; }
.nota-seguridad { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--tinta-2); padding: 0 6px; }
.nota-seguridad .ico { color: var(--salvia); flex: none; margin-top: 1px; }
.mensaje-error { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--atraso-f); color: var(--atraso-t); font-weight: 600; font-size: 15px; }
.mensaje-info { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--parcial-f); color: var(--parcial-t); font-weight: 600; font-size: 15px; }

/* ───────── Menú contextual ───────── */
.menu-acciones { display: grid; gap: 4px; }
.menu-acciones button, .menu-acciones a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: 12px; border: 0; background: none; text-align: left; cursor: pointer; font-weight: 600; text-decoration: none; color: inherit; font-size: 16px; }
.menu-acciones button:hover, .menu-acciones a:hover { background: var(--fondo); }
.menu-acciones .peligro { color: var(--peligro); }
.menu-acciones .ico { color: var(--tinta-2); }
.menu-acciones .peligro .ico { color: var(--peligro); }
.lista-estados { display: grid; gap: 8px; }
.lista-estados button { justify-content: flex-start; }

/* ───────── Impresión («Para preparar») ───────── */
.solo-impresion { display: none; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff; font-size: 12pt; }
  .lateral, .barra, .nav-inferior, .fab, .avisos, .no-imprimir, .acciones-preparar, .pestanas, .busqueda { display: none !important; }
  .marco { display: block; }
  .vista { padding: 0; max-width: none; }
  .solo-impresion { display: block; }
  .encabezado-impresion { border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; }
  .encabezado-impresion h1 { font-family: var(--fuente-titulos); font-size: 20pt; }
  .resumen-preparar { background: none; border: 1px solid #999; }
  .resumen-preparar .cosa { border: 1px solid #ccc; }
  .bloque-preparar { box-shadow: none; border: 1px solid #999; border-left-width: 5px; margin-bottom: 8px; padding: 10px; }
  .item-preparar { background: none; border: 1px solid #ddd; }
  .item-preparar .cant { background: #fff; color: #000; border: 2px solid #000; }
  .casilla-impresion { display: inline-block; width: 16px; height: 16px; border: 2px solid #000; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
  .fotos-grilla { grid-template-columns: repeat(4, 90px); }
  .insignia { border: 1px solid #999; }
  .dedicatoria { background: none; }
  a { text-decoration: none; color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Ajustes finos de tarjetas y formularios */
.chips-tipo .chip { min-height: 38px; padding: 0 13px; font-size: 14.5px; }
.pago-item .titulo-pago { font-size: 15.5px; }
.tp-pie .tp-accion { margin-left: auto; }
@media (min-width: 960px) { .avisos.en-dialogo { left: 12px; bottom: 24px; } }