/* FRANKIE · costos y ganancia real por trabajo · Primate Agencia 360
 *
 * LA IDEA VISUAL: una hoja de costos, no un panel de control. Los colores
 * salen de las cotizaciones que Primate ya manda: turquesa #2ECCC2 sobre
 * negro, que es exactamente la banda de la cabecera de cada cotización.
 * Quien use la app reconoce su propia papelería.
 *
 * LA REGLA QUE MANDA SOBRE TODO LO DEMÁS: verde, rojo y ámbar están
 * RESERVADOS para el dinero. Verde es que ganaste, rojo es que perdiste,
 * ámbar es que falta un costo por anotar. No se usan para nada más — ni un
 * botón bonito, ni un estado, ni un acento. Si el verde también adornara
 * botones, el verde dejaría de significar "ganaste" y la app perdería lo
 * único que tiene que comunicar de un vistazo. Por eso el color de marca es
 * azul: para poder pintar la interfaz sin tocar el vocabulario del dinero.
 *
 * Todo es local a propósito: ni Tailwind ni fuentes de Google. Esta app se
 * abre en la bodega de un proveedor, y una hoja de estilo que viene de un
 * CDN es una app en blanco.
 */

:root {
  color-scheme: light dark;

  --papel: #f4f4f1;
  --tarjeta: #ffffff;
  --tarjeta-2: #faf9f7;
  --tinta: #15181f;
  --tinta-suave: #5d636f;
  --tinta-tenue: #9aa0ab;
  --borde: rgba(21, 24, 31, 0.1);
  --borde-fuerte: rgba(21, 24, 31, 0.2);

  /* Marca Primate: turquesa sobre negro.
   *
   * El turquesa es casi un verde, y el verde en esta app significa "ganaste".
   * Por eso el turquesa NUNCA se usa como color de una cifra: va de fondo
   * (cabecera, botones, barra inferior) siempre con texto negro encima, que
   * es justo como lo usa la cotización impresa. Así los dos viven juntos sin
   * pisarse: el turquesa es superficie, el verde es dato. */
  --acento: #15a79e;          /* turquesa oscurecido: el #2ECCC2 de marca no
                                 alcanza contraste AA como texto sobre blanco */
  --acento-hundido: #118a83;
  --acento-marca: #2eccc2;    /* el de la papelería, solo para fondos */
  --acento-papel: rgba(46, 204, 194, 0.12);
  --acento-texto: #06231f;

  /* Vocabulario del dinero. Intocable para cualquier otro uso. */
  --gana: #1f7a3d;            /* verde hoja, deliberadamente más cálido que
                                 el turquesa de marca, para no confundirlos */
  --gana-papel: rgba(31, 122, 61, 0.1);
  --pierde: #9e2b1f;
  --pierde-papel: rgba(158, 43, 31, 0.1);
  --falta: #8a5a06;
  --falta-papel: rgba(138, 90, 6, 0.12);

  --cabecera: #000000;        /* el negro de la cotización, no un gris */
  --cabecera-texto: #ffffff;

  --sombra: 0 1px 2px rgba(21, 24, 31, 0.04), 0 3px 10px rgba(21, 24, 31, 0.05);
  --sombra-alta: 0 -4px 40px rgba(21, 24, 31, 0.22);

  --r: 14px;
  --r-chico: 9px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;

  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --nav-alto: calc(60px + var(--seguro-abajo));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #101218;
    --tarjeta: #191c24;
    --tarjeta-2: #1f232c;
    --tinta: #e9ebf0;
    --tinta-suave: #99a0ad;
    --tinta-tenue: #666d7a;
    --borde: rgba(233, 235, 240, 0.12);
    --borde-fuerte: rgba(233, 235, 240, 0.24);

    --acento: #2eccc2;
    --acento-hundido: #26aaa2;
    --acento-marca: #2eccc2;
    --acento-papel: rgba(46, 204, 194, 0.16);
    --acento-texto: #04201d;

    --gana: #5fcc72;
    --gana-papel: rgba(95, 204, 114, 0.14);
    --pierde: #f2796a;
    --pierde-papel: rgba(242, 121, 106, 0.14);
    --falta: #e0a63c;
    --falta-papel: rgba(224, 166, 60, 0.16);

    --cabecera: #000000;
    --cabecera-texto: #ffffff;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 12px rgba(0, 0, 0, 0.3);
  }
}

:root[data-tema="oscuro"] {
  --papel: #101218;
  --tarjeta: #191c24;
  --tarjeta-2: #1f232c;
  --tinta: #e9ebf0;
  --tinta-suave: #99a0ad;
  --tinta-tenue: #666d7a;
  --borde: rgba(233, 235, 240, 0.12);
  --borde-fuerte: rgba(233, 235, 240, 0.24);
  --acento: #2eccc2;
  --acento-hundido: #26aaa2;
  --acento-marca: #2eccc2;
  --acento-papel: rgba(46, 204, 194, 0.16);
  --acento-texto: #04201d;
  --gana: #5fcc72;
  --gana-papel: rgba(95, 204, 114, 0.14);
  --pierde: #f2796a;
  --pierde-papel: rgba(242, 121, 106, 0.14);
  --falta: #e0a63c;
  --falta-papel: rgba(224, 166, 60, 0.16);
  --cabecera: #000000;
  --cabecera-texto: #ffffff;
}

* { box-sizing: border-box; }

/* La app esconde y muestra con el atributo 'hidden' (la puerta, la hoja
 * modal, el aviso de sin conexión). Pero 'hidden' solo vale como
 * 'display:none' por defecto del navegador, y CUALQUIER regla de display de
 * esta hoja lo pisa — y aquí varios de esos elementos son grid o flex. Sin
 * esta línea, la puerta de la clave se queda encima de la app para siempre.
 * Va arriba de todo y con !important a propósito. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

/* TODO NÚMERO DE DINERO LLEVA CIFRAS TABULARES. En una columna de montos,
 * las cifras proporcionales bailan y hay que leer cada renglón en vez de
 * comparar de un vistazo la altura de la columna. */
.dinero, .num, input[type="number"], table { font-variant-numeric: tabular-nums; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7;
       stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-chico { width: 16px; height: 16px; }

/* ----------------------------------------------------------- puerta */

.puerta {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px;
  background: var(--papel);
}
.puerta-caja { width: 100%; max-width: 320px; text-align: center; }
.marca-grande {
  font-size: 34px; font-weight: 750; letter-spacing: 0.14em;
  color: var(--acento);
}
.puerta-nota { color: var(--tinta-suave); font-size: 14px; margin: 6px 0 26px; }
.puerta-error { color: var(--pierde); font-size: 14px; min-height: 20px; margin: 12px 0 0; }

/* ----------------------------------------------------------- armazón */

.app { min-height: 100dvh; padding-bottom: var(--nav-alto); }

.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: var(--cabecera); color: var(--cabecera-texto);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 750; letter-spacing: 0.14em; font-size: 15px;
}
.marca img { border-radius: 6px; display: block; }
.puerta-logo { border-radius: 20px; margin-bottom: 16px; }
.cabecera-der { display: flex; align-items: center; gap: 4px; }
.sin-red {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--falta-papel); color: var(--falta);
  padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600;
}
:root:not([data-tema="claro"]) .sin-red { color: #e0a63c; }

main { padding: 16px 16px 24px; max-width: 760px; margin: 0 auto; }

/* --------------------------------------------------------------- nav */

.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  height: var(--nav-alto);
  padding-bottom: var(--seguro-abajo);
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: color-mix(in srgb, var(--tarjeta) 94%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--borde);
}
.nav-btn {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--tinta-tenue); font-family: inherit; font-size: 10.5px;
  font-weight: 600; padding: 6px 0;
}
.nav-btn.activa { color: var(--acento); }
.nav-mas {
  appearance: none; border: 0; cursor: pointer;
  justify-self: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--acento); color: var(--acento-texto);
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(21, 167, 158, 0.38);
}
.nav-mas:active { background: var(--acento-hundido); transform: scale(0.95); }
.nav-mas .ico { width: 26px; height: 26px; stroke-width: 2.4; }

/* ----------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r); box-shadow: var(--sombra);
  padding: 14px; margin-bottom: 12px;
}
.tarjeta-plana { box-shadow: none; }

.rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--tinta-tenue);
  margin: 22px 0 8px;
}
.rotulo:first-child { margin-top: 0; }

/* El número grande de la pantalla de inicio. */
.hero { text-align: center; padding: 20px 14px 18px; }
.hero-etiqueta { font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
                 text-transform: uppercase; color: var(--tinta-tenue); }
.hero-cifra {
  /* Hasta $35.241.255 son once glifos: la escala baja para que una cifra
   * de ocho dígitos no se corte ni haya que abreviarla. */
  font-size: clamp(27px, 8.4vw, 44px); font-weight: 720; letter-spacing: -0.03em;
  line-height: 1.05; margin: 6px 0 2px;
}
.hero-pct { font-size: 15px; font-weight: 650; }
.hero-pie {
  display: flex; justify-content: center; gap: 18px; margin-top: 14px;
  padding-top: 13px; border-top: 1px solid var(--borde);
  font-size: 13px; color: var(--tinta-suave);
}
.hero-pie b { display: block; color: var(--tinta); font-weight: 650; font-size: 15px; }

.gana { color: var(--gana); }
.pierde { color: var(--pierde); }
.falta { color: var(--falta); }
.tenue { color: var(--tinta-tenue); }
.suave { color: var(--tinta-suave); }

/* --------------------------------------------------------- renglones */

.renglon {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 12px 14px; background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: var(--r-chico);
  margin-bottom: 8px; font-family: inherit; font-size: 15px;
  color: inherit; cursor: pointer; appearance: none;
}
.renglon:active { background: var(--tarjeta-2); }
.renglon-cuerpo { flex: 1; min-width: 0; }
.renglon-titulo {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.renglon-sub { font-size: 12.5px; color: var(--tinta-suave); margin-top: 1px;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.renglon-cifra { text-align: right; flex: none; }
.renglon-cifra b { display: block; font-weight: 650; font-size: 15px; }
.renglon-cifra span { font-size: 12px; }
.renglon .ico-chev { color: var(--tinta-tenue); width: 16px; height: 16px; }

.renglon-alerta { border-color: var(--falta); background: var(--falta-papel); }

/* ------------------------------------------------------------ fichas */

.fichas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ficha {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r-chico); padding: 12px;
}
.ficha-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
                  text-transform: uppercase; color: var(--tinta-tenue); }
.ficha-cifra { font-size: 21px; font-weight: 680; letter-spacing: -0.02em; margin-top: 3px; }
.ficha-pie { font-size: 12px; color: var(--tinta-suave); }

/* ------------------------------------------------------------- chips */

.chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px;
         margin-bottom: 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  appearance: none; cursor: pointer; flex: none;
  border: 1px solid var(--borde-fuerte); background: var(--tarjeta);
  color: var(--tinta-suave); font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: 99px; white-space: nowrap;
}
.chip.activo { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }

/* Rejilla de chips del formulario rápido: botones grandes, de pulgar. */
.chips-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.chips-rejilla .chip { width: 100%; text-align: center; padding: 11px 6px; font-size: 13px; }

/* ----------------------------------------------------------- botones */

.btn {
  appearance: none; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 650;
  padding: 12px 18px; border-radius: var(--r-chico);
  border: 1px solid var(--borde-fuerte); background: var(--tarjeta); color: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: scale(0.985); }
.btn-acento { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.btn-acento:active { background: var(--acento-hundido); }
.btn-peligro { color: var(--pierde); border-color: var(--pierde); background: transparent; }
.btn-ancho { width: 100%; }
.btn-chico { padding: 8px 12px; font-size: 13.5px; }
.btn-ico {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: inherit; padding: 7px; border-radius: 8px;
  display: grid; place-items: center;
}
.botonera { display: flex; gap: 9px; margin-top: 16px; }
.botonera .btn { flex: 1; }

/* ------------------------------------------------------- formularios */

label.campo { display: block; margin-bottom: 13px; }
.campo-etiqueta {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--tinta-tenue); margin-bottom: 5px;
}
input, select, textarea {
  width: 100%; font-family: inherit; font-size: 16px; /* 16px: menos y iOS hace zoom */
  color: var(--tinta); background: var(--tarjeta);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-chico);
  padding: 11px 12px; appearance: none;
}
input:focus, select, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
select { background-image: none; }
textarea { min-height: 72px; resize: vertical; }
.fila-campos { display: flex; gap: 10px; }
.fila-campos > * { flex: 1; min-width: 0; }

/* El campo de monto del formulario rápido: grande y con el peso de la
 * pantalla, porque es el único dato que de verdad hay que teclear. */
.monto-grande {
  font-size: 34px !important; font-weight: 700; text-align: center;
  letter-spacing: -0.02em; padding: 14px 12px !important;
  font-variant-numeric: tabular-nums;
}

.interruptor {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 13px; background: var(--tarjeta); border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-chico); margin-bottom: 13px; cursor: pointer;
}
.interruptor span { font-size: 14.5px; font-weight: 600; }
.interruptor small { display: block; font-weight: 400; color: var(--tinta-suave); font-size: 12.5px; }
.interruptor input { width: auto; flex: none; }
.palanca {
  width: 48px; height: 29px; border-radius: 99px; flex: none;
  background: var(--borde-fuerte); position: relative; transition: background 0.15s;
}
.palanca::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 23px; height: 23px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s;
}
.interruptor input:checked + .palanca { background: var(--acento); }
.interruptor input:checked + .palanca::after { transform: translateX(19px); }

/* ------------------------------------------------------------- hoja */

.hoja-fondo {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 12, 18, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  animation: aparecer 0.14s ease;
}
@keyframes aparecer { from { opacity: 0 } }
.hoja {
  background: var(--papel); width: 100%; max-width: 620px;
  max-height: 92dvh; display: flex; flex-direction: column;
  border-radius: 18px 18px 0 0; box-shadow: var(--sombra-alta);
  animation: subir 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes subir { from { transform: translateY(16px) } }
@media (prefers-reduced-motion: reduce) {
  .hoja, .hoja-fondo { animation: none; }
}
.hoja-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 10px 12px 18px; border-bottom: 1px solid var(--borde); flex: none;
}
.hoja-barra h2 { font-size: 17px; }
.hoja-cuerpo {
  padding: 16px 16px calc(20px + var(--seguro-abajo));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------ avisos */

.aviso {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-alto) + 14px); z-index: 70;
  background: var(--cabecera); color: var(--cabecera-texto);
  padding: 11px 17px; border-radius: 99px; font-size: 14px; font-weight: 600;
  box-shadow: var(--sombra-alta); max-width: calc(100vw - 32px);
}

/* --------------------------------------------------- caja de alertas
 * Los pedidos a los que les falta un costo. Es la razón de ser de la app,
 * así que va arriba de todo y con el color del dinero que falta. */

.alerta-caja {
  background: var(--falta-papel); border: 1px solid var(--falta);
  border-radius: var(--r); padding: 13px 14px; margin-bottom: 14px;
}
.alerta-titulo {
  display: flex; align-items: center; gap: 8px;
  color: var(--falta); font-weight: 700; font-size: 14px; margin-bottom: 3px;
}
.alerta-texto { font-size: 13.5px; color: var(--tinta-suave); }

.etiquetas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.etiqueta {
  font-size: 11.5px; font-weight: 650; padding: 3px 8px; border-radius: 6px;
  background: var(--tarjeta); border: 1px solid var(--borde-fuerte); color: var(--tinta-suave);
}
.etiqueta-falta { background: var(--falta-papel); border-color: var(--falta); color: var(--falta); }
.etiqueta-estado { background: var(--acento-papel); border-color: transparent; color: var(--acento); }

/* -------------------------------------------------------- partidas */

.partida {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r-chico); padding: 12px 13px; margin-bottom: 9px;
}
.partida-arriba { display: flex; align-items: flex-start; gap: 10px; }
.partida-arriba .renglon-cuerpo .renglon-titulo { white-space: normal; }
.partida-barras { display: flex; height: 6px; border-radius: 99px; overflow: hidden;
                  background: var(--borde); margin-top: 10px; }
.partida-barras i { display: block; height: 100%; }
.b-costo { background: var(--tinta-tenue); }
.b-gana { background: var(--gana); }
.b-pierde { background: var(--pierde); }
.partida-pie { display: flex; justify-content: space-between; gap: 10px;
               font-size: 12px; color: var(--tinta-suave); margin-top: 6px; }

/* ----------------------------------------------------------- tablas */

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-tenue);
  padding: 0 8px 7px; border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 9px 8px; border-bottom: 1px solid var(--borde); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .der { text-align: right; }
.tabla tbody tr:active { background: var(--tarjeta-2); }

/* ------------------------------------------------------------ varios */

.vacio { text-align: center; padding: 38px 20px; color: var(--tinta-tenue); }
.vacio p { margin: 0 0 4px; }
.vacio b { color: var(--tinta-suave); }

.barra-busca { position: relative; margin-bottom: 12px; }
.barra-busca .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
                    color: var(--tinta-tenue); }
.barra-busca input { padding-left: 38px; }

.cabecera-detalle { margin-bottom: 14px; }
.cabecera-detalle .folio {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--tinta-tenue);
}
.cabecera-detalle h1 { font-size: 21px; margin: 2px 0 4px; letter-spacing: -0.02em; }

.volver {
  appearance: none; border: 0; background: none; cursor: pointer; color: var(--acento);
  font-family: inherit; font-size: 14px; font-weight: 650;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 0; margin-bottom: 10px;
}

.separa { height: 1px; background: var(--borde); margin: 16px 0; border: 0; }

.linea-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; font-size: 14.5px;
}
.linea-total b { font-weight: 650; }
.linea-total.fuerte {
  border-top: 2px solid var(--borde-fuerte); margin-top: 6px; padding-top: 11px;
  font-size: 17px; font-weight: 700;
}

@media (min-width: 620px) {
  .fichas { grid-template-columns: repeat(4, 1fr); }
  .chips-rejilla { grid-template-columns: repeat(4, 1fr); }
}