@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   Finanzas Grupo Francast — misma paleta y mismas reglas que el
   inventario, sin cambiar un hex. (Los valores son los de
   sitio-grupo/marca/marca.css del repo del inventario.)

   Reglas de movimiento, por frecuencia de uso:
   - Pestañas y botones se pulsan cientos de veces al dia: SOLO
     respuesta al tacto (150ms o menos), nada decorativo.
   - Modales y toasts son ocasionales: entrada de 200-350ms.
   - El login se ve una vez al dia: ahi si hay entrada escalonada.
   Todo transform/opacity (GPU); nunca `transition: all`.
   ============================================================ */

:root {
  --bg: #14171A;
  --surface: #1E2226;
  --surface2: #262B30;
  --border: #2A2F33;
  --border2: #33383D;
  --gold: #D9A441;
  --sage: #6B9080;
  --rust: #C1543C;
  --slate: #5B7C99;
  --text: #ECEFF1;
  --text-dim: #8B939A;
  --text-dimmer: #6B7176;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }

/* Textura: grano fino sobre el carbon, mas un calor de laton arriba, muy tenue. */
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(217, 164, 65, 0.05), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
}

h1, h2, .heading { font-family: 'Space Grotesk', sans-serif; }

button { font-family: 'Space Grotesk', sans-serif; cursor: pointer; border: none; }
input, select, textarea { font-family: 'IBM Plex Mono', monospace; }

/* Un <select> mide por su opcion mas larga, y ese ancho minimo no lo baja ni un
   width:100%: hay que decir min-width:0 expresamente, o un nombre largo de
   cuenta estira la pagina entera de lado en el telefono. */
input, select, textarea { min-width: 0; max-width: 100%; }

::selection { background: rgba(217, 164, 65, 0.35); }

:focus-visible {
  outline: 2px solid rgba(217, 164, 65, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-dimmer); }

.container { max-width: 1500px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .container { padding: 0 16px; } }

/* Las cifras con digitos del mismo ancho, para que las columnas de dinero
   se alineen por la coma sin hacer nada mas. */
.num { font-variant-numeric: tabular-nums; }
.positivo { color: var(--sage); }
.negativo { color: var(--rust); }

/* ---- Barra lateral de navegacion (solo escritorio) ---- */
.app-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.lateral-nav {
  position: sticky; top: 16px;
  display: flex; flex-direction: column; gap: 20px;
  max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 4px 4px 4px 0;
}
.lateral-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; background: none;
  padding: 0 10px 7px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
@media (hover: hover) and (pointer: fine) {
  .lateral-cabecera:hover .lateral-titulo { color: var(--text); }
}
.lateral-titulo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim);
  transition: color 120ms ease;
}
.lateral-flecha {
  color: var(--text-dimmer); font-size: 9px; line-height: 1;
  transition: transform 200ms var(--ease-out);
}
.lateral-flecha.plegada { transform: rotate(-90deg); }
/* El pliegue: 1fr -> 0fr anima una altura desconocida sin medirla. */
.lateral-items {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 220ms var(--ease-out);
}
.lateral-items.plegado { grid-template-rows: 0fr; }
.lateral-items-interior { overflow: hidden; min-height: 0; }
.lateral-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; border-radius: 8px;
  background: none; color: var(--text-dim);
  font-size: 13px; font-weight: 500; text-align: left;
  transition: color 120ms ease, background-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .lateral-item:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
}
.lateral-item.active {
  color: var(--text);
  font-weight: 700;
  background: rgba(217, 164, 65, 0.12);
  box-shadow: inset 2px 0 0 var(--gold);
}
.lateral-badge {
  background: var(--rust); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 10px; padding: 3px 7px;
  flex-shrink: 0;
}
/* minmax(0, 1fr) y no 1fr: "1fr" a secas deja que la columna crezca hasta el
   contenido mas ancho que haya dentro, y una tabla se lleva la pagina de lado. */
@media (max-width: 1100px) {
  .app-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lateral-nav { display: none; }
}
@media (min-width: 1101px) {
  .nav-movil { display: none; }
}

/* ---- Login ---- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.35);
}
.login-card { animation: entrada-suave 420ms var(--ease-out) both; }
.login-card .login-marca { animation: entrada-suave 420ms var(--ease-out) 40ms both; }
.login-card .field:nth-of-type(1) { animation: entrada-suave 420ms var(--ease-out) 100ms both; }
.login-card .field:nth-of-type(2) { animation: entrada-suave 420ms var(--ease-out) 160ms both; }
.login-card .btn-full { animation: entrada-suave 420ms var(--ease-out) 220ms both; }
@keyframes entrada-suave {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* El logotipo va en curvas y trae sus propios colores de marca, asi que no se
   recolorea desde aqui. El horizontal nunca por debajo de 24px de alto. */
.login-marca { text-align: center; margin-bottom: 24px; }
.logo-login { width: 190px; height: auto; display: block; margin: 0 auto 18px; }
.login-title { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.login-sub { color: var(--text-dim); font-size: 12px; margin: 0; }
.aviso-clave {
  background: rgba(217,164,65,0.08); border: 1px solid rgba(217,164,65,0.3);
  border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 18px;
  font-size: 12px; line-height: 1.5; color: var(--text-dim);
}

/* ---- Header ---- */
header.app-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.header-marca { display: flex; align-items: center; gap: 16px; min-width: 0; }
.logo-app { height: 26px; width: auto; display: block; flex-shrink: 0; }
.header-marca-texto { padding-left: 16px; border-left: 1px solid var(--border); min-width: 0; }
.app-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin: 0; }
.app-sub { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
@media (max-width: 720px) {
  .header-marca { flex-direction: column; align-items: flex-start; gap: 8px; }
  .logo-app { height: 24px; }
  .header-marca-texto { padding-left: 0; border-left: none; }
  .app-title { font-size: 13px; }
  .app-sub { font-size: 11px; }
}
.header-actions { display: flex; gap: 8px; align-items: center; }

/* ---- Buttons ---- */
.btn {
  border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 700;
  transition: transform 140ms var(--ease-out), filter 140ms var(--ease-out), background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(180deg, #E3B155, var(--gold));
  color: #14171A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn-primary:active { filter: brightness(0.94); }
.btn-sage {
  background: linear-gradient(180deg, #779B8B, var(--sage));
  color: #14171A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn-slate {
  background: linear-gradient(180deg, #6989A6, var(--slate));
  color: #14171A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn-rust {
  background: linear-gradient(180deg, #CF6A52, var(--rust));
  color: #14171A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn-ghost { background: transparent; border: 1px solid var(--border2); color: var(--text-dim); }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { color: var(--text); border-color: var(--text-dimmer); background: rgba(255, 255, 255, 0.03); }
}
.btn-ghost:hover { color: var(--text); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon { display: inline-flex; align-items: center; gap: 6px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-full { width: 100%; }

/* ---- Tabs (telefono) ---- */
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); overflow-x: auto; margin: 24px 0; }
.tab-btn {
  background: none; padding-bottom: 12px; font-size: 13px; font-weight: 600;
  color: var(--text-dimmer); border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .tab-btn:hover { color: var(--text-dim); }
}
.tab-btn.active { color: var(--text); border-bottom-color: var(--gold); }

/* ---- Subnavegacion dentro de una pestaña (secciones de Configuracion) ---- */
.subnav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.subnav-btn {
  background: var(--surface2); border-radius: 20px; padding: 6px 14px; font-size: 12px;
  color: var(--text-dim);
  transition: background-color 150ms ease, color 150ms ease, transform 140ms var(--ease-out);
}
.subnav-btn:active { transform: scale(0.96); }
.subnav-btn.active {
  background: linear-gradient(180deg, #E3B155, var(--gold));
  color: #14171A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ---- Cards / forms ---- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 32%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
@media (max-width: 720px) { .card { padding: 14px; } }
.card + .card { margin-top: 16px; }
.hint { font-size: 11px; color: var(--text-dimmer); line-height: 1.5; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--text-dim); }
.field input, .field select, .field textarea {
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 9px 11px; font-size: 13px; color: var(--text); width: 100%;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(217, 164, 65, 0.6);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.14);
}
.field input[type="checkbox"], .field input[type="radio"] {
  width: 16px; height: 16px; padding: 0; flex-shrink: 0; accent-color: var(--gold);
}
.field .ayuda { font-size: 11px; color: var(--text-dimmer); margin-top: 4px; line-height: 1.4; }
/* iOS hace zoom automatico al enfocar un input con letra menor a 16px, y a
   veces no lo deshace. Cubre todo lo que se escribe, no solo lo que va dentro
   de .field. La lista es larga porque en CSS gana el selector que mas pesa:
   un "select" a secas pierde contra ".field select". */
@media (max-width: 720px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
    font-size: 16px;
  }
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
@media (max-width: 720px) { .grid-2, .field-row, .field-row-3 { grid-template-columns: 1fr; } }
.acciones-form { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; color: var(--text-dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}
tbody td { padding: 12px 14px; border-bottom: 1px solid #22262A; }
tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  tbody tr { transition: background-color 120ms ease; }
  tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
}
.table-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 24%), var(--surface);
  border: 1px solid var(--border); border-radius: 12px; overflow-x: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.text-right { text-align: right; }
.empty-msg { text-align: center; color: var(--text-dimmer); padding: 40px; font-size: 13px; }
.apagado { color: var(--text-dimmer); }
/* Tablas de seis o siete columnas de consulta: en el telefono ocupan lo que
   necesitan y se desplazan de lado dentro de su caja. */
@media (max-width: 720px) {
  .table-wrap .tabla-ancha { width: max-content; min-width: 100%; }
}

/* ---- KPIs y saldos ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 32%), var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  min-width: 0;
}
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 6px; }
.kpi-valor { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.kpi-sub { font-size: 11px; color: var(--text-dimmer); margin-top: 6px; }
.kpi.destacado { border-color: rgba(217, 164, 65, 0.45); }
.kpi.destacado .kpi-valor { color: var(--gold); }

/* ---- Misc ---- */
.alert-box {
  background: rgba(193,84,60,0.1);
  border: 1px solid rgba(193,84,60,0.35);
  border-left: 3px solid var(--rust);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 13px; display: flex; gap: 8px;
}
.alert-box b { color: var(--rust); }
.alert-box.suave { background: rgba(217,164,65,0.08); border-color: rgba(217,164,65,0.3); border-left-color: var(--gold); }
.alert-box.suave b { color: var(--gold); }
.pill { padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; font-weight: 700; }
.error-text { color: var(--rust); font-size: 12px; margin-top: 6px; }

/* El toast entra desde abajo al insertarse (@starting-style: sin JS). */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 0);
  background: var(--surface2); border: 1px solid var(--border2); padding: 10px 18px;
  border-radius: 10px; font-size: 13px; z-index: 999;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
  opacity: 1;
}
@starting-style {
  .toast { transform: translate(-50%, 14px); opacity: 0; }
}

/* ---- Modal ----
   margin:auto en vez de align-items:center: centra igual, pero al desbordar
   no recorta la parte de arriba. */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 12, 14, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; justify-content: center; z-index: 998; padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity 200ms var(--ease-out);
  opacity: 1;
}
.modal-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%), var(--surface);
  border: 1px solid var(--border2); border-radius: 14px;
  padding: 20px; width: 100%; max-width: 440px;
  margin: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 64px rgba(0, 0, 0, 0.5);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
  transform: scale(1);
  opacity: 1;
}
@starting-style {
  .modal-overlay { opacity: 0; }
  .modal-box { transform: scale(0.97); opacity: 0; }
}
@media (max-width: 720px) {
  .modal-overlay { padding: 10px; }
  .modal-box { padding: 16px; max-height: calc(100dvh - 20px); }
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.close-x { background: none; color: var(--text-dim); font-size: 18px; line-height: 1; transition: color 140ms ease; }
.close-x:active { color: var(--text); }
.link-btn { background: none; color: var(--text-dim); font-size: 12px; text-decoration: underline; padding: 0; transition: color 140ms ease; }
.link-btn:hover { color: var(--text); }
.small-x { background: none; color: var(--text-dimmer); padding: 0 6px; transition: color 140ms ease; }
.small-x:hover { color: var(--rust); }
@media (max-width: 720px) {
  .link-btn, .small-x { min-height: 38px; padding-left: 6px; padding-right: 6px; }
}

/* ---- El telefono ---- */
@media (max-width: 720px) {
  input[type="checkbox"], input[type="radio"],
  .field input[type="checkbox"], .field input[type="radio"] {
    width: 24px; height: 24px;
    accent-color: var(--gold);
    flex-shrink: 0;
  }
  label:has(input[type="checkbox"]) { min-height: 40px; }
  .btn-sm { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  [style*="font-size:10px"], [style*="font-size: 10px"] { font-size: 12px !important; }
  [style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 12px !important; }
  .alert-box { display: block; padding: 10px 12px; line-height: 1.45; }
  header.app-header { padding: 12px 0; }
  .header-row { gap: 8px; }
  .app-sub { display: none; }
}

/* Un aro girando hace que la carga se sienta mas corta que un texto quieto. */
.spinner { text-align: center; padding: 60px; color: var(--text-dim); }
.spinner::before {
  content: "";
  display: block;
  width: 22px; height: 22px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  border-top-color: var(--gold);
  animation: girar 650ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Menos movimiento para quien lo pide en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .login-card, .login-card .login-marca, .login-card .field, .login-card .btn-full {
    animation-duration: 1ms;
  }
  .btn:active, .subnav-btn:active { transform: none; }
  .toast, .modal-box { transition-duration: 60ms; }
  .lateral-items, .lateral-flecha { transition-duration: 60ms; }
  @starting-style {
    .toast { transform: translate(-50%, 0); }
    .modal-box { transform: scale(1); }
  }
  .spinner::before { animation-duration: 1.4s; }
}

/* ---- Saldos del panel en el telefono ----
   Cuatro columnas no caben en 375px: cada cuenta pasa a ser una ficha con el
   nombre arriba y las dos cifras debajo, en columnas iguales para que caigan
   a la misma altura en todas las fichas. */
@media (max-width: 720px) {
  .tabla-saldos, .tabla-saldos tbody { display: block; }
  .tabla-saldos thead { display: none; }
  .tabla-saldos tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "nombre nombre"
      "local  local"
      "saldo  usd";
    gap: 4px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  .tabla-saldos tr:last-child { border-bottom: none; }
  .tabla-saldos td { display: block; border: none; padding: 0; text-align: left; }
  .tabla-saldos .s-nombre { grid-area: nombre; font-size: 14px; }
  .tabla-saldos .s-local { grid-area: local; font-size: 11px; }
  .tabla-saldos .s-saldo { grid-area: saldo; font-size: 15px; font-weight: 600; }
  .tabla-saldos .s-usd { grid-area: usd; text-align: right; }
  .tabla-saldos .s-usd::before { content: "≈ "; }
}

/* ---- Cierre de caja ----
   Las casillas de ventas en una rejilla que se adapta; las lineas de gasto
   con la cuenta, la categoria, el concepto, el monto y la equis en fila, y en
   el telefono apiladas en dos columnas. */
/* LAS CASILLAS DE UNA FILA SE ALINEAN ENTRE ELLAS, ocupe lo que ocupe cada
   etiqueta. "Punto Bancamiga (Bs) -> Bancamiga (Punto)" no cabe en una linea y
   antes empujaba su casilla 16px hacia abajo mientras las tres vecinas se
   quedaban arriba: la fila salia dentada y parecia un fallo del sistema.
   Con subgrid, la etiqueta y la casilla de todas las columnas caen en las
   MISMAS dos filas de la rejilla, asi que la etiqueta mas alta manda y las
   casillas siguen a la misma altura. */
.cierre-ventas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.cierre-venta { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 4px; }
/* La etiqueta se pega abajo, junto a su casilla: si se quedara arriba, en una
   fila con etiquetas de dos lineas las cortas flotarian sueltas. */
.cierre-venta > label { align-self: end; }
.cierre-venta input { text-align: right; font-size: 15px; }
/* Sin subgrid (navegadores viejos) se cae a reservar dos lineas de etiqueta,
   que cubre el caso real: los nombres largos ocupan dos, nunca tres. */
@supports not (grid-template-rows: subgrid) {
  .cierre-venta { display: flex; }
  .cierre-venta > label { display: flex; align-items: flex-end; min-height: 30px; }
}
.cierre-gasto {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.6fr) 120px auto;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.cierre-gasto select, .cierre-gasto input {
  min-width: 0; width: 100%;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}
.cierre-gasto .cg-monto { text-align: right; }
@media (max-width: 720px) {
  .cierre-gasto {
    grid-template-columns: minmax(0, 1fr) 110px auto;
    grid-template-areas:
      "cuenta    cuenta    quitar"
      "categoria categoria categoria"
      "concepto  monto     monto";
    background: var(--surface2); border-radius: 10px; padding: 10px;
  }
  .cierre-gasto .cg-cuenta { grid-area: cuenta; }
  .cierre-gasto .cg-categoria { grid-area: categoria; }
  .cierre-gasto .cg-concepto { grid-area: concepto; }
  .cierre-gasto .cg-monto { grid-area: monto; }
  .cierre-gasto .cg-quitar { grid-area: quitar; justify-self: end; }
}

/* ---- Barras de los reportes: un div con width en %, sin librerias ---- */
.barras { display: flex; flex-direction: column; gap: 6px; }
.barra-fila { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 120px; gap: 10px; align-items: center; font-size: 12px; }
.barra-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.barra-pista { height: 12px; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.barra { height: 100%; background: linear-gradient(90deg, #E3B155, var(--gold)); border-radius: 6px; transition: width 300ms var(--ease-out); }
.barra.barra-neg { background: linear-gradient(90deg, #CF6A52, var(--rust)); }
.barra-valor { text-align: right; white-space: nowrap; }
@media (max-width: 720px) {
  .barra-fila { grid-template-columns: minmax(0, 1fr) 100px; grid-template-areas: "etiqueta valor" "pista pista"; gap: 2px 8px; }
  .barra-etiqueta { grid-area: etiqueta; }
  .barra-pista { grid-area: pista; }
  .barra-valor { grid-area: valor; }
}

/* ---- Cuadre del efectivo en el cierre ----
   Cinco columnas: la caja, los dos casilleros que se rellenan, lo que deberia
   haber y la diferencia. Los casilleros van en ancho fijo y no en un 1fr: con
   1fr cada fila les daria lo que sobrara y la columna saldria dentada. */
.tabla-cuadre .cu-fondo, .tabla-cuadre .cu-contado { text-align: right; }
.tabla-cuadre .cu-fondo input, .tabla-cuadre .cu-contado input {
  width: 130px; text-align: right;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}
.tabla-cuadre .cu-esperado { color: var(--text-dim); }

/* En el telefono no caben cinco columnas: cada caja pasa a ser una ficha, con
   el nombre arriba, los dos casilleros en fila y el resultado debajo. */
@media (max-width: 720px) {
  .wrap-cuadre { background: none; border: none; box-shadow: none; overflow-x: visible; }
  .tabla-cuadre, .tabla-cuadre tbody { display: block; }
  .tabla-cuadre thead { display: none; }
  .tabla-cuadre tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "nombre   nombre"
      "fondo    contado"
      "esperado dif";
    gap: 8px 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px; margin-bottom: 8px;
  }
  .tabla-cuadre td { display: block; border: none; padding: 0; text-align: left; }
  .tabla-cuadre .cu-nombre { grid-area: nombre; font-size: 14px; }
  .tabla-cuadre .cu-fondo { grid-area: fondo; }
  .tabla-cuadre .cu-contado { grid-area: contado; }
  .tabla-cuadre .cu-esperado { grid-area: esperado; }
  .tabla-cuadre .cu-dif { grid-area: dif; text-align: right; }
  .tabla-cuadre .cu-fondo input, .tabla-cuadre .cu-contado input { width: 100%; min-height: 44px; }
  /* Los titulos de columna se van con el thead, asi que cada dato dice lo que es. */
  .tabla-cuadre .cu-fondo::before { content: "fondo de apertura"; display: block; font-size: 11px; color: var(--text-dimmer); margin-bottom: 3px; text-align: left; }
  .tabla-cuadre .cu-contado::before { content: "efectivo contado"; display: block; font-size: 11px; color: var(--text-dimmer); margin-bottom: 3px; text-align: left; }
  .tabla-cuadre .cu-esperado::before { content: "debería haber "; color: var(--text-dimmer); }
}

/* ---- Lineas del cierre: propinas, cobros y compras a credito ----
   Cada una con sus columnas; las cifras en ancho fijo para que no queden
   dentadas, y en el telefono todo apilado dentro de su ficha. */
.cierre-propina, .cierre-cobro, .cierre-deuda {
  display: grid; gap: 8px; align-items: center; margin-bottom: 8px;
}
.cierre-propina { grid-template-columns: minmax(0, 1fr) 120px auto; }
.cierre-cobro { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 120px auto; }
.cierre-deuda { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 80px 110px 150px auto; }
.cierre-propina select, .cierre-propina input,
.cierre-cobro select, .cierre-cobro input,
.cierre-deuda select, .cierre-deuda input {
  min-width: 0; width: 100%;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}
.cierre-propina .cp-monto, .cierre-cobro .cc-monto, .cierre-deuda .cd-monto { text-align: right; }
.cierre-cobro .cc-aviso { grid-column: 1 / -1; margin: 0; }

/* La venta del sistema, al pie de las formas de pago: la cifra a un lado y la
   comparacion al otro. */
.cierre-sistema {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px 20px;
  align-items: start; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border2);
}
.cierre-sistema-campo { display: grid; grid-template-columns: minmax(0, 1fr) 74px; gap: 8px; }
.cierre-sistema-campo input { text-align: right; }
.cierre-sistema-campo input, .cierre-sistema-campo select {
  min-width: 0; width: 100%;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}
.cierre-sistema-cuadre { align-self: center; }
.cierre-sistema-cuadre .ayuda { margin-top: 4px; }

@media (max-width: 720px) {
  .cierre-sistema { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .cierre-propina, .cierre-cobro, .cierre-deuda {
    grid-template-columns: minmax(0, 1fr) 110px auto;
    background: var(--surface2); border-radius: 10px; padding: 10px;
  }
  .cierre-cobro .cc-doc, .cierre-cobro .cc-forma { grid-column: 1 / -1; }
  .cierre-deuda .cd-quien, .cierre-deuda .cd-concepto, .cierre-deuda .cd-vence { grid-column: 1 / -1; }
}

/* El pago de lo que hay que entregar: una fila de campos bajo su linea. */
.entrega-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
  align-items: end; padding: 10px 0;
}
.entrega-form input, .entrega-form select {
  min-width: 0; width: 100%;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}
.entrega-form button { align-self: end; }
.fila-abierta td { border-bottom: 0; }

/* Dar de alta un cliente sin salir del cierre. */
.cierre-cliente-nuevo { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.cierre-cliente-nuevo input {
  flex: 1 1 220px; min-width: 0;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}

/* La pista de por que no cuadra, bajo su fila. */
.tabla-cuadre tr.cu-pista td { padding-top: 0; border-top: 0; }
.tabla-cuadre tr.cu-pista .ayuda { margin: 0 0 6px; }

/* De que se compone "deberia haber", bajo la cifra. */
.tabla-cuadre .cu-cuenta {
  font-size: 11px; color: var(--muted); font-weight: 400;
  margin-top: 2px; white-space: nowrap;
}

/* Con cuanto abre la caja: una tira de cifras, sin tabla. */
.inicio-caja { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.inicio-caja-item {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 10px 12px;
}
.inicio-caja-nombre { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.inicio-caja-cifra { font-size: 17px; font-weight: 700; }

/* ---- Las tasas de fuera, al lado de la del dia ---- */
/* Van juntas en la misma tarjeta pero claramente aparte: la de la izquierda es
   la del negocio —la que vale— y estas son de consulta. Por eso el separador
   y el pie que lo dice; sin eso, cuatro cifras seguidas invitan a confundirlas. */
.panel-tasa { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.panel-tasa-mia { flex: 1 1 320px; min-width: 0; }
.tasas-ref {
  flex: 0 1 auto; display: grid; gap: 6px;
  padding-left: 20px; border-left: 1px solid var(--border);
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  align-content: start;
}
.tasas-ref-titulo, .tasas-ref-pie {
  grid-column: 1 / -1; font-size: 11px; color: var(--text-dimmer); line-height: 1.4;
}
.tasas-ref-titulo { text-transform: uppercase; letter-spacing: 0.06em; }
.tref {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
}
.tref:hover { border-color: rgba(217, 164, 65, 0.6); background: var(--surface2); }
.tref-et { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.tref-num { font-size: 14px; color: var(--text); }
/* En el telefono la tarjeta se apila, asi que el separador pasa a ser de arriba. */
@media (max-width: 720px) {
  .tasas-ref { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--border); width: 100%; }
}