/* Estilo común · Ensaladas que se Venden (portada, calculadora y kit) */
:root{
  --verde:#1f5e34;--verde-osc:#164427;--verde-claro:#e7f1e3;--verde-medio:#cfe3c8;
  --amarillo:#ffd23f;--amarillo-suave:#fff3c4;
  --crema:#fff8e7;--papel:#ffffff;--linea:#e6dcc2;
  --tinta:#1f2a22;--suave:#5c6b5f;--rojo:#b3261e;--rojo-claro:#fde7e5;
  --radio:16px;--sombra:0 2px 10px rgba(31,94,52,.08);
  --toque:48px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--tinta);font:16px/1.45 'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;overflow-x:hidden;min-height:100vh;min-height:100dvh}
h1,h2,h3,.titulo{font-family:'Baloo 2','Nunito',system-ui,sans-serif;line-height:1.1;color:var(--verde);margin:0}
h2{font-size:1.5rem}
h3{font-size:1.15rem}
p{margin:.4em 0}
a{color:var(--verde)}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px;border-radius:8px}
.oculto{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* contenedor */
.envoltura{width:100%;max-width:880px;margin:0 auto;padding:0 16px}

/* cabecera */
.cabecera{background:var(--verde);color:#fff;padding:12px 0 14px}
.cabecera .envoltura{display:flex;align-items:center;gap:12px}
.cabecera .marca-ico{flex:none;width:44px;height:44px;border-radius:12px;background:var(--amarillo);display:grid;place-items:center}
.cabecera .marca-ico svg{width:30px;height:30px}
.cabecera .textos{flex:1;min-width:0}
.cabecera .nombre-app{font-family:'Baloo 2','Nunito',sans-serif;font-weight:700;font-size:1.15rem;line-height:1.1;color:#fff}
.cabecera .sub{font-size:.85rem;color:var(--amarillo);font-weight:800;line-height:1.2}
.cabecera .negocio{font-size:.8rem;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-cab{flex:none;min-height:44px;min-width:44px;border-radius:12px;border:2px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-weight:800;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn-cab svg{width:20px;height:20px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--toque);padding:10px 18px;border-radius:14px;border:0;font-weight:800;font-size:1rem;cursor:pointer;text-decoration:none;text-align:center;line-height:1.2}
.btn svg{width:20px;height:20px;flex:none}
.btn-pri{background:var(--verde);color:#fff}
.btn-pri:active{background:var(--verde-osc)}
.btn-ama{background:var(--amarillo);color:var(--verde-osc)}
.btn-sec{background:var(--papel);color:var(--verde);border:2px solid var(--verde-medio)}
.btn-peligro{background:var(--papel);color:var(--rojo);border:2px solid #f0c9c5}
.btn-peligro.lleno{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.btn-ancho{width:100%}
.btn-chico{min-height:40px;padding:6px 12px;font-size:.92rem;border-radius:12px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-icono{min-width:var(--toque);min-height:var(--toque);padding:0;border-radius:12px;border:0;background:transparent;color:var(--suave);cursor:pointer;display:inline-grid;place-items:center}
.btn-icono svg{width:22px;height:22px}
.btn-icono:hover{background:var(--rojo-claro);color:var(--rojo)}
.fila-btns{display:flex;flex-wrap:wrap;gap:10px}
.fila-btns>.btn{flex:1 1 180px}

/* tarjetas */
.tarjeta{background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);border:1px solid var(--linea);padding:16px;margin:0 0 14px}
.tarjeta.verde{background:var(--verde-claro);border-color:var(--verde-medio)}
.tarjeta.amarilla{background:var(--amarillo-suave);border-color:#f3dd8a}

/* formularios */
.campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.campo>span,.etq{font-size:.86rem;font-weight:800;color:var(--suave)}
.campo input,.campo select,.campo textarea,.entrada{width:100%;min-width:0;min-height:var(--toque);padding:10px 12px;border:2px solid var(--linea);border-radius:12px;background:#fff;font-size:1rem}
.campo textarea{min-height:88px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 3px rgba(255,210,63,.6)}
.rejilla{display:grid;gap:10px;align-items:end}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:360px){.r3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* pie */
.pie{text-align:center;color:var(--suave);font-size:.85rem;padding:22px 16px 30px}
.pie b{color:var(--verde)}

/* aviso flotante */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:12px 18px;border-radius:14px;font-weight:700;z-index:90;max-width:calc(100% - 32px);box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:none}

/* ventana de confirmación dentro de la página */
.velo{position:fixed;inset:0;background:rgba(20,30,22,.55);display:flex;align-items:flex-end;justify-content:center;z-index:80;padding:16px}
@media (min-width:600px){.velo{align-items:center}}
.dialogo{background:#fff;border-radius:20px;max-width:440px;width:100%;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.dialogo h3{margin-bottom:6px}
.dialogo .fila-btns{margin-top:16px}