/* ═══════════════════════════════════════════════════════════════
   kit.css · Chicken Market
   Todo el sistema de diseño en un archivo. Los colores salen del logo:
   negro cálido, dorado, blanco. Cambiar la paleta es tocar :root.

   Un solo tema, claro, a propósito: es un celular en un mostrador,
   muchas veces al sol. El modo oscuro duplica el trabajo de cada color
   y de cada prueba, y no resuelve ningún problema real de Cami.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Manrope';
  src:url('fuentes/manrope.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Oswald';
  src:url('fuentes/oswald.woff2') format('woff2');
  font-weight:200 700; font-style:normal; font-display:swap;
}

:root{
  /* marca */
  --negro:      #131210;
  --negro-2:    #1F1D18;
  --oro:        #D9A441;
  --oro-hondo:  #A9761A;   /* dorado legible sobre blanco */

  /* superficies */
  --fondo:      #FAF7F0;
  --card:       #FFFFFF;
  --oro-bg:     #FBF3E2;
  --fila-hover: #FCFAF5;

  /* texto */
  --tinta:      #26231C;
  --tinta-contra:#FFFFFF;
  --gris:       #8A8276;

  /* líneas */
  --linea:      #E9E2D4;
  --linea-suave:#F2ECE0;

  /* pares semánticos: un fondo de color va SIEMPRE con su -fg */
  --ok-bg:#E9F4EC;   --ok-fg:#2C6E42;   --ok-ln:#CBE6D3;
  --mal-bg:#FBE9EB;  --mal-fg:#A32B3C;  --mal-ln:#F0CDD4;
  --avi-bg:#FCF1E1;  --avi-fg:#96581A;  --avi-ln:#F0DFB0;
  --info-bg:#E9EFF5; --info-fg:#2C5F86; --info-ln:#CFE0EE;
  --neu-bg:#F0EDE6;  --neu-fg:#6B6459;

  --foco: 0 0 0 3px rgba(217,164,65,.42);
  --ease: cubic-bezier(.23,1,.32,1);
}

*{box-sizing:border-box;font-family:'Manrope','Segoe UI',Arial,sans-serif}
html,body{margin:0;padding:0}
body{
  background:var(--fondo);color:var(--tinta);
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* ── Enlaces ───────────────────────────────────────────────── */
/* Regla de una vez y para siempre: un <a> que ES una pieza de interfaz
   —un botón, una fila, una pestaña— no se subraya ni cambia de color.
   El subrayado queda solo para los enlaces que son texto adentro de una
   frase, que son los únicos donde el subrayado dice algo. */
a{color:inherit;text-decoration:none}
.ayuda a,.lead a,.vh a,p a{color:var(--oro-hondo);text-decoration:underline}

/* ── Estructura ────────────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:40;
  background:var(--negro);color:#F2EEE4;
  padding:10px 15px 12px;display:flex;align-items:center;gap:10px;
  padding-top:calc(10px + env(safe-area-inset-top));
}
.top .mk{
  width:30px;height:30px;border-radius:50%;flex:none;
  border:1px solid var(--oro);display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.5px;
}
.top .nom{
  font-family:'Oswald',sans-serif;font-size:15px;font-weight:400;
  letter-spacing:1.6px;text-transform:uppercase;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.top .dia{font-size:11.5px;font-weight:700;color:var(--oro);white-space:nowrap}
.top .volver{
  font-size:26px;line-height:1;color:var(--oro);flex:none;
  background:none;border:none;padding:0 6px 0 0;cursor:pointer;
}

.cuerpo{padding:14px 13px 22px;display:flex;flex-direction:column;gap:12px}
.cuerpo.conbarra{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
@media (min-width:760px){
  .cuerpo{max-width:820px;margin:0 auto;padding:20px 22px 32px}
}

/* ── Barra inferior ────────────────────────────────────────── */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--card);border-top:1px solid var(--linea);
  padding:7px 4px calc(9px + env(safe-area-inset-bottom));
}
.nav a{
  text-decoration:none;text-align:center;font-size:10.5px;font-weight:700;
  color:var(--gris);display:flex;flex-direction:column;align-items:center;gap:3px;
  min-height:44px;justify-content:center;
}
.nav a .ic{width:22px;height:22px;border-radius:7px;background:var(--neu-bg);display:block}
.nav a.on{color:var(--tinta)}
.nav a.on .ic{background:var(--negro);box-shadow:inset 0 0 0 2px var(--oro)}

/* ── Tipografía ────────────────────────────────────────────── */
h1{font-family:'Oswald',sans-serif;font-weight:600;font-size:23px;
   letter-spacing:1px;text-transform:uppercase;margin:0 0 4px;text-wrap:balance}
h2{font-family:'Oswald',sans-serif;font-weight:500;font-size:17px;
   letter-spacing:.9px;text-transform:uppercase;margin:0 0 8px}
.et{font-size:10.5px;font-weight:700;letter-spacing:1.1px;
    text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.lead{color:var(--gris);font-size:14px;margin:0 0 10px;max-width:62ch}
.plata{font-size:29px;font-weight:800;letter-spacing:-.9px;line-height:1.05;
       font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.verde{color:var(--ok-fg)} .rojo{color:var(--mal-fg)} .oro{color:var(--oro-hondo)}

/* ── Tarjetas ──────────────────────────────────────────────── */
.tarjeta{background:var(--card);border:1px solid var(--linea);
         border-radius:15px;padding:14px 15px}
.tarjeta.dest{background:var(--negro);border-color:var(--negro);color:#F2EEE4;
              position:relative;overflow:hidden}
.tarjeta.dest::after{content:"";position:absolute;right:-34px;top:-34px;
  width:104px;height:104px;border-radius:50%;border:1px solid rgba(217,164,65,.35)}
.tarjeta.dest .et{color:#8F8878}
.tarjeta.dest .plata{color:var(--oro)}
.tarjeta .pie{font-size:11.5px;color:var(--gris);margin-top:5px}
.tarjeta.dest .pie{color:#9A9184}
.par{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.par .plata{font-size:19px;letter-spacing:-.5px}

/* Botón de WhatsApp. Va SIEMPRE adentro de una .fila, y por eso la fila
   tiene que ser un <div> y no un <a>: un enlace adentro de otro enlace
   es HTML inválido, el navegador cierra el de afuera al encontrarlo y
   todo lo que sigue se cae fuera de la tarjeta. */
.wsp{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;border-radius:12px;
  background:var(--ok-bg);color:var(--ok-fg);
  transition:filter .14s,transform .08s var(--ease);
}
.wsp svg{width:22px;height:22px;display:block}
.wsp:active{transform:scale(.94)}
.wsp:hover{filter:brightness(.97)}
.wsp:focus-visible{outline:none;box-shadow:var(--foco)}

/* fila tocable con chevron */
.fila{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--linea);border-radius:15px;
  padding:12px 14px;min-height:56px;cursor:pointer;
  font-family:inherit;font-size:inherit;color:inherit;
  transition:background .14s,border-color .14s;
}
.fila:active{background:var(--fila-hover)}
.fila .txt{flex:1;min-width:0}
.fila .t1{font-size:14px;font-weight:700;letter-spacing:-.1px}
.fila .t2{font-size:11.5px;color:var(--gris);margin-top:2px}
.fila .mont{font-size:15px;font-weight:800;white-space:nowrap;
            font-variant-numeric:tabular-nums}
.fila .chev{color:var(--oro-hondo);font-size:19px;font-weight:800;line-height:1}

/* ── Botones · mínimo 48 px, se usan con una mano ──────────── */
/* Sirve igual para <button> y para <a>: sin el text-decoration los
   botones que son enlaces salen subrayados. */
.b{
  font-family:inherit;font-size:15px;font-weight:800;
  min-height:48px;padding:12px 18px;border-radius:13px;
  border:none;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;text-decoration:none;text-align:center;
  transition:transform .08s var(--ease),filter .15s,background .15s;
}
.b:active{transform:scale(.97)}
.b:focus-visible{outline:none;box-shadow:var(--foco)}
.b:disabled{opacity:.5;cursor:default;transform:none}
.b-pri{background:var(--negro);color:#F2EEE4}
.b-oro{background:var(--oro);color:#231D0C}
.b-gho{background:var(--oro-bg);color:var(--oro-hondo);border:1px solid #EEDFBE}
.b-lin{background:var(--card);color:var(--tinta);border:1px solid var(--linea)}
.b-mal{background:var(--card);color:var(--mal-fg);border:1px solid var(--mal-ln)}
.b-wsp{background:var(--ok-bg);color:var(--ok-fg);border:1px solid var(--ok-ln)}
.b-wsp svg{width:21px;height:21px;flex:none}
.b-pri:hover,.b-oro:hover{filter:brightness(1.07)}
.b-gho:hover,.b-lin:hover{filter:brightness(.98)}
.b-mal:hover{background:var(--mal-bg)}
.b-ancho{width:100%}
.b-sm{font-size:13px;min-height:38px;padding:8px 14px;border-radius:10px}

/* ── Campos ────────────────────────────────────────────────── */
label{display:block;font-size:12.5px;font-weight:700;color:var(--gris);
      margin-bottom:6px;letter-spacing:.2px}
.inp{
  width:100%;font-family:inherit;font-size:16px;font-weight:600;
  min-height:50px;padding:13px 15px;
  border:1.5px solid var(--linea);border-radius:13px;
  background:var(--card);color:var(--tinta);
  transition:border-color .15s,box-shadow .15s;
}
/* 16px no es capricho: abajo de eso, iOS hace zoom al enfocar el campo */
.inp:focus{outline:none;border-color:var(--oro);box-shadow:var(--foco)}
.inp::placeholder{color:#B4ACA0}
.ayuda{font-size:12px;color:var(--gris);margin-top:6px;line-height:1.45}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:inherit;font-size:13.5px;font-weight:700;
  min-height:44px;padding:10px 15px;border-radius:12px;
  background:var(--card);border:1px solid var(--linea);color:var(--gris);
  cursor:pointer;transition:background .14s,color .14s,border-color .14s;
}
.chip:focus-visible{outline:none;box-shadow:var(--foco)}
.chip.on{background:var(--negro);border-color:var(--negro);color:#F2EEE4}
.chip.on::before{content:"\2713\00a0";color:var(--oro)}

/* ── Estados ───────────────────────────────────────────────── */
.badge{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;padding:4px 9px;border-radius:20px;vertical-align:middle;
}
.badge.ok{background:var(--ok-bg);color:var(--ok-fg)}
.badge.mal{background:var(--mal-bg);color:var(--mal-fg)}
.badge.avi{background:var(--avi-bg);color:var(--avi-fg)}
.badge.info{background:var(--info-bg);color:var(--info-fg)}
.badge.neu{background:var(--neu-bg);color:var(--neu-fg)}

.aviso{
  background:var(--avi-bg);border:1px solid var(--avi-ln);color:var(--avi-fg);
  font-size:13px;padding:12px 15px;border-radius:12px;line-height:1.45;
}
.error{
  background:var(--mal-bg);border:1px solid var(--mal-ln);color:var(--mal-fg);
  font-size:13.5px;padding:12px 15px;border-radius:12px;line-height:1.45;
}
.exito{
  background:var(--ok-bg);border:1px solid var(--ok-ln);color:var(--ok-fg);
  font-size:13.5px;padding:12px 15px;border-radius:12px;line-height:1.45;
}
[hidden]{display:none !important}

/* Vacío: dos frases, y la segunda dice POR QUÉ está vacío */
.vacio{text-align:center;padding:34px 22px;color:var(--gris)}
.vacio .vt{font-size:15px;font-weight:800;color:var(--tinta);margin-bottom:6px}
.vacio .vh{font-size:13px;max-width:40ch;margin:0 auto;line-height:1.5}

/* ── Pregunta que no se puede deshacer ─────────────────────── */
/* Solo se usa modal cuando la acción es irreversible. Todo lo demás
   avisa con un toast que se va solo y no bloquea nada. */
.modalbg{
  position:fixed;inset:0;z-index:210;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(28,24,18,.5);
  padding:0;opacity:0;pointer-events:none;transition:opacity .18s;
}
.modalbg.ver{opacity:1;pointer-events:auto}
@media (min-width:600px){ .modalbg{align-items:center;padding:20px} }
.modal{
  background:var(--card);border-radius:20px 20px 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  width:min(440px,100%);
  box-shadow:0 -20px 60px -20px rgba(28,24,18,.5);
  transform:translateY(14px);transition:transform .2s var(--ease);
  display:flex;flex-direction:column;gap:12px;
}
.modalbg.ver .modal{transform:none}
@media (min-width:600px){ .modal{border-radius:20px} }
.modal h3{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:18px;
  letter-spacing:.8px;text-transform:uppercase;margin:0;
}
.modal .cuerpo-modal{font-size:14px;color:var(--gris);line-height:1.5;margin:0}
.modal .acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── Aviso flotante ────────────────────────────────────────── */
.toast{
  position:fixed;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:200;max-width:420px;margin:0 auto;
  padding:14px 17px;border-radius:14px;background:var(--card);
  font-size:14px;font-weight:600;color:var(--tinta);line-height:1.45;
  box-shadow:0 20px 46px -16px rgba(48,40,28,.45);
  border-left:4px solid var(--ok-fg);
  transform:translateY(20px);opacity:0;pointer-events:none;
  transition:transform .3s var(--ease),opacity .3s;
}
.toast.ver{transform:none;opacity:1}
.toast.mal{border-left-color:var(--mal-fg)}

/* ── Errores de JavaScript, a la vista ─────────────────────── */
/* Cami no abre la consola: si algo falla, la pantalla queda en blanco y
   llama diciendo "no anda". Con esto saca una foto y la foto alcanza. */
#jserr{
  background:#2B1116;color:#FFD9DF;font-family:ui-monospace,Consolas,monospace;
  font-size:11.5px;white-space:pre-wrap;padding:12px 14px;line-height:1.5;
}

.version{
  text-align:center;font-size:11px;color:var(--gris);
  padding:14px 0 4px;letter-spacing:.3px;
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}