/* ════════════════════════════════════════════════════════════════
   CALCULADORA DE COSTOS

   Es el modelo de KFB Kiosco (docs/calculadora-modelo.html) trasladado a
   Gastro. El modelo es una maqueta: usa nombres de clase propios (.caja, .n,
   .fila) que no son los que dibuja el JS de verdad (.section, .stat-box,
   .calc-fila). Acá van los mismos valores con los nombres reales.

   Los dos proyectos comparten los nombres de las variables —--gold, --serif,
   --bg-surface, --r-lg— así que los colores salen solos y la página sigue el
   tema claro y el oscuro sin una regla duplicada.
════════════════════════════════════════════════════════════════ */

/* ── Portada ─────────────────────────────────────────────────── */
.calcpub-hero { max-width: 1120px; margin: 0 auto; padding: 3.5rem 1.5rem 0; }
.calcpub-hero h1 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  font-weight: 600;
  margin: 12px 0 6px;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.calcpub-bajada { color: var(--text-sub); max-width: 66ch; margin: 0 0 12px; font-size: .92rem; line-height: 1.6; }
.calcpub-chico { font-size: .84rem; }

/* ── Caja principal ──────────────────────────────────────────── */
.calcpub-caja { max-width: 1120px; margin: 0 auto; padding: 12px 1.5rem 4rem; }

/* Bloques */
.section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.section h3 { font-family: var(--serif); font-size: 1rem; font-weight: 600; margin: 0 0 3px; }
.sub { color: var(--text-sub); font-size: .79rem; margin: 0 0 14px; line-height: 1.55; }

.secciones-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .secciones-par { grid-template-columns: 1fr; } }

/* ── Selector de reparto ─────────────────────────────────────── */
.calc-comun {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.calc-campo { display: block; }
.calc-campo > span {
  display: block; font-size: .71rem; color: var(--text-sub);
  font-weight: 600; margin-bottom: 4px;
}
.calc-comun .sub { margin: 10px 0 0; }

/* ── Campos ──────────────────────────────────────────────────── */
.calcpub-caja input[type=text],
.calcpub-caja input[type=number],
.calcpub-caja input[type=email],
.calcpub-caja select {
  width: 100%; box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 7px 9px;
  font-family: var(--sans); font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
/* Los números a la derecha: las columnas de plata se leen de un vistazo, con
   las unidades una debajo de la otra. */
.calcpub-caja input[type=number] { text-align: right; }
.calcpub-caja input:focus,
.calcpub-caja select:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: transparent; }
.calcpub-caja select option { background: var(--bg-surface); color: var(--text); }
/* En el celular, por debajo de 16px Safari hace zoom solo al tocar el campo y
   descoloca la pantalla entera. */
@media (max-width: 640px) {
  .calcpub-caja input, .calcpub-caja select { font-size: 16px; }
}

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.form-field { display: block; }
.form-field label {
  display: flex; align-items: center; gap: 2px;
  font-size: .71rem; color: var(--text-sub); font-weight: 600; margin-bottom: 4px;
}
.form-field .sub { margin: 4px 0 0; }

/* ── Filas de gastos y de platos ─────────────────────────────── */
.calc-fila {
  display: grid; grid-template-columns: minmax(0,1fr) 122px 32px;
  gap: 8px; align-items: center; margin-bottom: 7px;
}
.calc-fila4 { grid-template-columns: minmax(0,1fr) 108px 108px 32px; }
.calc-fila.calc-cab, .calc-r.calc-cab {
  font-size: .63rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-sub); font-weight: 700; margin-bottom: 6px;
}
.calc-cab span { display: flex; align-items: center; gap: 2px; }

.calc-quitar {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 1rem; padding: 4px; border-radius: var(--r-sm);
}
.calc-quitar:hover { color: var(--error); background: var(--bg-hover); }

.btn-add {
  background: none; border: 1px dashed var(--border); color: var(--text-sub);
  border-radius: var(--r-sm); padding: 7px; width: 100%; cursor: pointer;
  font-family: var(--sans); font-size: .79rem; margin-top: 4px;
}
.btn-add:hover { border-color: var(--gold); color: var(--gold); }

.calc-total { margin-top: 10px; font-size: .79rem; color: var(--text-sub); }

/* ── El ? — se abre al tocarlo. En un celular no hay mouse. ──── */
.calc-ayuda {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--bg-card); color: var(--text-sub);
  font-size: .62rem; font-weight: 700; line-height: 1; cursor: pointer;
  vertical-align: middle; font-family: var(--sans);
  text-transform: none; letter-spacing: normal; flex: 0 0 auto;
}
.calc-ayuda:hover { border-color: var(--gold); color: var(--gold); }
.calc-ayuda:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* El globo del ?. Sin esta regla el texto de ayuda caía suelto al pie de la
   página, sin fondo ni posición: por eso los ? parecían rotos. */
.calc-globo {
  position: fixed; z-index: 60; display: none;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--bg-surface); border: 1px solid var(--border-accent);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  font-size: .8rem; line-height: 1.45; color: var(--text);
  font-weight: 400; text-transform: none; letter-spacing: normal;
}
.calc-globo.abierto { display: block; }

/* ── Los números ─────────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin: 6px 0 16px; }
.stat-box { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px 15px; }
.stat-label {
  display: flex; align-items: center; gap: 2px;
  font-size: .63rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-sub); font-weight: 700;
}
/* El número en sans y bien pesado, no en serif: son cifras para leer rápido,
   no un título. El tracking negativo las junta para que el ojo las tome como
   una sola cosa. */
.stat-value {
  font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1.15; margin-top: 4px; letter-spacing: -.02em;
}
.stat-sub { font-size: .72rem; color: var(--text-sub); margin-top: 2px; line-height: 1.4; }

/* El punto de equilibrio es EL número de la pantalla. */
.calc-destacada { border-color: var(--border-accent); background: rgba(201,169,110,.09); }
.calc-destacada .stat-value { color: var(--gold); }
.calc-buena { border-color: rgba(34,197,94,.4); }
.calc-buena .stat-value { color: var(--green); }
.calc-mala { border-color: rgba(196,75,75,.45); }
.calc-mala .stat-value { color: var(--error); }
.mal, .rojoTxt { color: var(--error); }
.bien, .verde  { color: var(--green); }
.ojo, .ambar   { color: var(--warning); }

.calc-nota {
  margin-top: 14px; padding: 12px 15px; font-size: .81rem; color: var(--text-sub);
  background: var(--bg-card); border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0; line-height: 1.6;
}
.calc-nota b { color: var(--text); }

/* ── Tabla del detalle ───────────────────────────────────────── */
.calc-tabla { margin-top: 10px; }
.calc-r {
  display: grid; grid-template-columns: minmax(120px,2fr) repeat(5, minmax(72px,1fr));
  gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--border);
  font-size: .82rem; font-variant-numeric: tabular-nums; align-items: center;
}
/* Con el food cost son siete columnas. El nombre del plato cede ancho antes
   que los números, que no se pueden partir sin volverse ilegibles. */
.calc-t7 .calc-r {
  grid-template-columns: minmax(105px,1.6fr) repeat(6, minmax(62px,1fr));
  gap: 6px; font-size: .78rem;
}
.calc-r > span:not(:first-child) { text-align: right; }
.calc-r:last-child { border-bottom: none; }

/* En el celular la tabla no entra, ni con seis columnas ni con siete. Cada fila pasa a ser una
   ficha y el nombre de la columna se lee del data-col. */
@media (max-width: 720px) {
  .calc-r { grid-template-columns: 1fr; gap: 2px; padding: 12px 6px; }
  .calc-r.calc-cab { display: none; }
  .calc-r > span:not(:first-child) { text-align: left; display: flex; justify-content: space-between; }
  .calc-r > span[data-col]:not(:first-child)::before {
    content: attr(data-col); color: var(--text-sub); font-size: .74rem;
  }
  .calc-r > span:first-child { font-weight: 700; margin-bottom: 4px; }
}

/* En el celular el nombre del plato se lleva un renglón entero: con las
   columnas del escritorio le quedaban 70 píxeles y no entra "Milanesa
   napolitana". */
@media (max-width: 560px) {
  .calc-fila, .calc-fila4 { grid-template-columns: minmax(0,1fr) 88px 32px; gap: 6px; }
  .calc-fila4 > input:first-child { grid-column: 1 / -1; }
  .calc-fila4.calc-cab { display: none; }
}

/* ── Dejar el mail ───────────────────────────────────────────── */
.calcpub-mail {
  background: var(--bg-surface); border: 1px solid var(--border-accent);
  border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 16px;
}
.calcpub-mail h3 { font-family: var(--serif); font-size: 1rem; font-weight: 600; margin: 0 0 3px; }
.calcpub-mail > p { color: var(--text-sub); font-size: .79rem; margin: 0 0 14px; max-width: 66ch; line-height: 1.55; }
/* CUATRO hijos: nombre, mail, WhatsApp y el botón. La grilla declaraba TRES
   columnas, así que el botón se caía a una segunda fila y quedaba pisando el
   campo del nombre. Y el WhatsApp caía en la columna `auto`, que se estiraba
   con el texto de ayuda de adentro: por eso ese campo salía tres veces más
   ancho que los otros dos y los dejaba mostrando «Andres - P» y «marcosram».

   Se vio cargando la calculadora como la carga un dueño de bar. Es la última
   pantalla antes de que alguien deje el mail: acá un formulario desprolijo se
   paga en leads que no entran. */
.calcpub-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto; gap: 10px; align-items: end; }
@media (max-width: 900px) { .calcpub-form { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 620px) { .calcpub-form { grid-template-columns: 1fr; } }
.calcpub-opt { color: var(--text-muted); font-weight: 400; }
/* El texto de ayuda del WhatsApp no tenía ni una línea de CSS: era un <span>
   suelto, o sea inline, al lado del campo. Va abajo y chico, como una nota. */
.calcpub-ayuda {
  display: block; margin-top: 5px;
  font-size: .68rem; line-height: 1.35; color: var(--text-muted);
}
.calcpub-enviar {
  background: var(--gold); border: 1px solid var(--gold); border-style: solid;
  color: #1a1a1a; font-weight: 700; padding: 8px 18px;
  width: auto; white-space: nowrap; margin-top: 0;
}
.calcpub-enviar:hover { background: #d4b882; border-color: #d4b882; color: #1a1a1a; }

.form-status { margin-top: 10px; font-size: .8rem; min-height: 1.1em; }
.form-status.ok    { color: var(--green); }
.form-status.error { color: var(--error); }

/* ── El cierre, al final de todo ──────────────────────────────
   Grande y con un solo botón: el visitante ya vio sus números, y lo único
   que le queda por decidir es si sigue. */
.calcpub-cierre {
  margin-top: 16px; margin-bottom: 16px; text-align: center;
  background: rgba(201,169,110,.06); border: 1px solid var(--border-accent);
  border-radius: var(--r-lg); padding: 34px 24px 30px;
}
.calcpub-cierre h2 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.1rem); margin: 0 0 10px;
  text-wrap: balance;
}
.calcpub-cierre > p {
  color: var(--text-sub); font-size: .88rem; line-height: 1.6;
  max-width: 48ch; margin: 0 auto 22px;
}
.calcpub-cierre-btn {
  display: inline-block; background: var(--gold); color: #1a1a1a;
  font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  padding: 14px 34px; border-radius: var(--r-sm); text-decoration: none;
}
.calcpub-cierre-btn:hover { background: #d4b882; }
.calcpub-cierre-pie { font-size: .75rem; color: var(--text-muted); margin: 16px 0 0; }

/* ── Pie ─────────────────────────────────────────────────────── */
.calcpub-pie { border-top: 1px solid var(--border); padding: 22px 1.5rem 40px; text-align: center; }
.calcpub-marca-pie {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  color: var(--text); display: block; margin-bottom: 4px; letter-spacing: -.01em;
}
.calcpub-pie .sub { margin: 0; }

/* ── Los apagados, en tema claro ──────────────────────────────────
   --text-muted es rgba(26,26,26,.38) y sobre el fondo claro no llega a
   leerse. Acá se usa en cosas que hay que leer de verdad, así que se suben al
   tramo legible sin igualarlas al texto principal. */
html[data-theme="light"] .calc-quitar,
html[data-theme="light"] .calcpub-opt { color: rgba(26,26,26,.62); }
html[data-theme="light"] .calcpub-bajada,
html[data-theme="light"] .sub,
html[data-theme="light"] .stat-sub,
html[data-theme="light"] .calc-total,
html[data-theme="light"] .calc-nota,
html[data-theme="light"] .calcpub-cierre > p,
html[data-theme="light"] .calcpub-mail > p { color: rgba(26,26,26,.68); }
html[data-theme="light"] .stat-label,
html[data-theme="light"] .calc-cab,
html[data-theme="light"] .form-field label,
html[data-theme="light"] .calc-campo > span { color: rgba(26,26,26,.66); }
html[data-theme="light"] .calcpub-enviar,
html[data-theme="light"] .calcpub-cierre-btn { color: #fff; }
html[data-theme="light"] .calc-globo { box-shadow: 0 12px 34px rgba(0,0,0,.14); }


/* ── Las sub-pestañas de la calculadora del panel ─────────────
   Solo se ven adentro de la app: la calculadora pública tiene una pantalla
   sola. Viven acá igual, con el resto de la calculadora, para no partir la
   hoja en dos. */
.calc-tabs {
  display: flex; gap: 4px; overflow-x: auto;
  border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.calc-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-sub); font-family: var(--sans); font-size: .87rem;
  font-weight: 600; padding: 9px 15px; cursor: pointer;
  white-space: nowrap; margin-bottom: -1px;
}
.calc-tab:hover { color: var(--text); }
.calc-tab.activa { color: var(--gold); border-bottom-color: var(--gold); }
.calc-tab small {
  display: block; font-weight: 400; font-size: .7rem;
  color: var(--text-muted); margin-top: 1px;
}
.calc-tab.activa small { color: var(--text-sub); }

/* El plato que pierde plata en cada venta. Va teñido y no solo con el número
   en rojo: en una carta de 40 platos, un margen negativo en una columna pasa
   desapercibido. */
.calc-r-roja { background: rgba(196,75,75,.09); }

/* El H1 pasó a ser el NOMBRE de la herramienta ("Calculadora de costos
   gastronómicos") porque nadie la encontraba en Google buscando eso: la frase
   no estaba escrita en ninguna parte. La pregunta que enganchaba no se tiró —
   quedó como primera bajada, en grande, que es donde hace su trabajo. */
.calcpub-pregunta {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem);
  color: var(--text);
  font-weight: 600;
  margin-bottom: .9rem;
}

/* ── El panel gerencial usa esta misma hoja ───────────────────────────
   Todas las reglas de campos de arriba cuelgan de `.calcpub-caja`. La
   calculadora pública tiene ese contenedor y el panel gerencial NO lo tenía:
   el mismo HTML quedaba con el cuadrado por defecto del navegador. No
   faltaba estilo, faltaba la caja que lo enciende.

   Se le agregó la clase al contenedor del panel. Lo de acá abajo es sólo lo
   que el panel necesita además, por vivir adentro de la app y no en una
   página propia. */
#calcPanelCuerpo .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
#calcPanelCuerpo .form-field label {
  display: block;
  font-size: .78rem;
  color: var(--text-sub, rgba(250,249,247,.55));
  margin-bottom: 5px;
}
/* Los campos de gasto son fila: nombre ancho, monto angosto y a la derecha. */
#calcPanelCuerpo .calc-campo {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
#calcPanelCuerpo .calc-campo input[type=text] { flex: 1; }
#calcPanelCuerpo .calc-campo input[type=number] { width: 130px; flex: none; }