/* Estilos propios del módulo: solo maquetación, siempre con tokens de estilos.css */

/* Mosaico de ícono dentro de una celda o tarjeta, mismo lenguaje que .fila .ic */

/* ---------- Recetas ---------- */
.rec-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.rec-tarjeta{position:relative;display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:var(--r-3);text-decoration:none;color:inherit;
  background:var(--c-panel);backdrop-filter:var(--cristal-blur);-webkit-backdrop-filter:var(--cristal-blur);box-shadow:var(--s-2);
  transition:transform var(--t-media) var(--curva),box-shadow var(--t-media)}
.rec-tarjeta::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--c-cristal-reflejo);box-shadow:inset 0 0 0 1px var(--c-cristal-filo)}
.rec-tarjeta>*{position:relative}
.rec-tarjeta:hover{transform:translateY(-2px);box-shadow:var(--s-3)}
.rec-tarjeta:active{transform:scale(.98)}
.rec-cab{display:flex;gap:12px;align-items:center;min-width:0}
.rec-cab b{display:block;font:650 16px var(--fuente-titulo);letter-spacing:-.01em}
.rec-cab small{display:block;font:500 13px var(--fuente);color:var(--c-tinta-2)}
.rec-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rec-datos .dato b{font-size:15.5px}

.rec-lineas{display:flex;flex-direction:column}
.rec-linea{display:grid;grid-template-columns:minmax(0,1fr) 170px 110px 44px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--c-divisor)}
.rec-linea.cab{font:600 13px var(--fuente);color:var(--c-tinta-2);padding-top:0}
.rec-linea b{display:block;font:600 15px var(--fuente)}
.rec-linea small{display:block;font:500 12.5px var(--fuente);color:var(--c-tinta-2)}
.rec-linea .n{text-align:right;font-weight:650}
.rec-cant{display:flex;align-items:center;gap:8px}
.rec-cant input{width:100px;min-height:40px;text-align:right}
.rec-agrega{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.rec-agrega select{flex:1;min-width:200px}
.rec-costo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}

/* ---------- Compras ---------- */
.sug-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px;align-items:start}

/* ---------- Conteo ---------- */
.cnt-avance{margin-bottom:14px;padding:16px 20px}
.cnt-avance-txt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.cnt-avance-txt b{font:650 16px var(--fuente-titulo)}
.botella .vaso i{transition:height var(--t-media) var(--curva)}

/* ---------- Carta digital ---------- */
.cp-escena{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:start}
.cp-telefono-col{display:flex;flex-direction:column;align-items:center;gap:10px;position:sticky;top:84px}
.cp-pie{font:600 13.5px var(--fuente);color:var(--c-tinta-2)}
.cp-qr-zona{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start}
.cp-qr-marco{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;border-radius:var(--r-3);background:var(--c-hundido);box-shadow:var(--s-hundido)}
.cp-qr-marco b{font:650 15px var(--fuente)}
.cp-qr{display:block;border-radius:12px;box-shadow:0 10px 24px -14px oklch(0.2 0.03 225 / .5)}
.cp-liga{font-size:14px;word-break:break-all;color:var(--c-accion)}

/* Contenido del teléfono: siempre claro, es la pantalla del cliente */
.telefono .pantalla{position:relative;font-family:var(--fuente);display:flex;flex-direction:column}
.cp-cab{padding:46px 20px 22px;color:var(--p-blanco);background:linear-gradient(160deg,var(--p-cenote-700),var(--p-marino-700));position:relative}
.cp-fila{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cp-logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:oklch(1 0 0 / .18);box-shadow:inset 0 1px 0 oklch(1 0 0 / .3)}
.cp-idioma{display:flex;padding:3px;border-radius:10px;background:oklch(0 0 0 / .2)}
.cp-idioma button{border:0;background:none;color:oklch(1 0 0 / .8);font:650 12.5px var(--fuente);padding:5px 10px;border-radius:8px;cursor:pointer}
.cp-idioma button.activo{background:var(--p-blanco);color:var(--p-n-800)}
.cp-cab small{font:500 13px var(--fuente);color:oklch(1 0 0 / .82)}
.cp-cab h3{font:700 26px var(--fuente-titulo);letter-spacing:-.02em;margin:2px 0 12px}
.cp-lugar{display:inline-flex;align-items:center;gap:8px;font:500 13.5px var(--fuente);color:oklch(1 0 0 / .9)}
.cp-sec{padding:18px 0 4px}
.cp-sec h4,.cp-cats{padding:0 20px}
.cp-sec h4{font:700 16px var(--fuente-titulo);color:var(--p-n-800);margin-bottom:10px}
.cp-dest{display:flex;gap:10px;overflow-x:auto;padding:0 20px 10px;scrollbar-width:none}
.cp-dest::-webkit-scrollbar{display:none}
.cp-dest-t{flex:none;width:150px;padding:14px;border-radius:16px;background:var(--p-blanco);box-shadow:0 8px 20px -12px oklch(0.3 0.04 220 / .35),0 0 0 1px var(--p-n-200);display:flex;flex-direction:column;gap:10px}
.cp-dest-t b{font:650 14px/1.25 var(--fuente);color:var(--p-n-800)}
.cp-dest-t span{font:700 14px var(--fuente);color:var(--p-cenote-600)}
.cp-cats{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--p-n-200);margin-top:6px}
.cp-cats::-webkit-scrollbar{display:none}
.cp-cats button{flex:none;border:0;background:none;cursor:pointer;font:600 14px var(--fuente);color:var(--p-n-600);padding:12px 8px;position:relative}
.cp-cats button.activo{color:var(--p-n-800)}
.cp-cats button.activo::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--p-cenote-600)}
.cp-lista{padding:4px 20px}
.cp-prod{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--p-n-150)}
.cp-prod b{display:block;font:600 14.5px var(--fuente);color:var(--p-n-800)}
.cp-prod small{display:block;font:500 12.5px var(--fuente);color:var(--p-n-600);margin-top:2px}
.cp-prod.agot{opacity:.5}
.cp-precio{text-align:right;flex:none}
.cp-precio b{color:var(--p-n-800)}
.cp-iva{font:500 12px var(--fuente);color:var(--p-n-600);padding:10px 20px 90px}
.cp-botones{position:sticky;bottom:0;margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px 18px;
  background:oklch(0.985 0.005 210 / .78);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 -1px 0 var(--p-n-200)}
.cp-botones button{min-height:46px;border-radius:14px;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font:650 13.5px var(--fuente);
  background:var(--p-blanco);color:var(--p-n-800);box-shadow:0 0 0 1px var(--p-n-200),0 6px 14px -10px oklch(0.3 0.04 220 / .4);transition:transform var(--t-rapida)}
.cp-botones button svg{color:var(--p-cenote-600)}
.cp-botones button.sol{background:var(--p-cenote-600);color:var(--p-blanco);box-shadow:0 8px 18px -8px oklch(0.52 0.12 205 / .8)}
.cp-botones button.sol svg{color:var(--p-blanco)}
.cp-botones button:active{transform:scale(.96)}

@media (max-width:1280px){
  .rec-linea{grid-template-columns:minmax(0,1fr) 150px 96px 40px}
}
@media (max-width:1000px){
  .cp-escena{grid-template-columns:1fr}
  .cp-telefono-col{position:static}
  .cp-qr-zona{grid-template-columns:1fr}
  .sug-rejilla{grid-template-columns:1fr}
  .rec-linea{grid-template-columns:minmax(0,1fr) 130px 40px}
  .rec-linea .n{display:none}
}

.var-cab{grid-template-columns:320px minmax(0,1fr)}
.var-total{display:flex;flex-direction:column;justify-content:center;gap:6px}
@media (max-width:1000px){.var-cab{grid-template-columns:1fr}}
.cp-escena>*{min-width:0}