/* Estilos de SyncroApp Gastos — MISMOS tokens del tema claro de Eventos
   (frontend/talonario/index.html, feedback founder 2026-07-24):
   superficies blancas sobre gris muy claro, texto casi negro, acento azul
   acero, fondo PLANO sin halos ni gradientes de color. Mobile-first:
   esto se usa practicamente como app instalada en el celular. */
:root {
  /* Neutros claros */
  --bg:         #f5f6f8;   /* fondo de pagina, gris muy claro */
  --surface:    #ffffff;   /* tarjetas */
  --surface-2:  #f0f2f5;   /* inputs / insets hundidos */
  --borde:      #e3e6eb;   /* borde base */
  --borde-alto: #cbd1da;   /* borde resaltado */
  --text:       #1a1d23;   /* casi negro */
  --text2:      #4b5563;
  --text3:      #6b7280;

  /* Marca (verde petroleo/teal — asocia con finanzas; misma familia de
     tonos frios del sistema pero tonalidad PROPIA, distinta del azul acero
     de Eventos y del morado del CRM — feedback founder 2026-07-31) */
  --brand:       #1f6e60;
  --brand-hover: #1a5f53;
  --brand-press: #155046;
  --brand-tx:    #1d6a5c;
  --brand-suave: rgba(31, 110, 96, .10);
  --brand-ring:  rgba(31, 110, 96, .30);
  /* Relleno casi plano (leve gradiente vertical, igual que Eventos) */
  --grad-brand: linear-gradient(180deg, #23796a 0%, #1c6357 100%);

  /* Semanticos en variante oscura (legibles sobre fondo claro).
     Ingresos en verde HOJA (mas amarillo) para no confundirse con el teal
     de marca; gastos en rojo. */
  --verde-tx:   #2f7d33;                       /* ingresos / positivo */
  --verde-suave: rgba(76, 175, 80, .14);
  --rojo-tx:    #b91c1c;                       /* gastos / negativo */
  --rojo-suave:  rgba(239, 68, 68, .10);
  --ambar-tx:   #b45309;                       /* avisos */

  /* Densidad */
  --r-card: 0.75rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Fondo plano neutro — sin halos de color (patron de Eventos) */
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3 { letter-spacing: -0.02em; }

.oculta { display: none !important; }

/* Con un modal abierto el fondo no debe seguir desplazandose (en el celular
   el contenido de atras se movia por debajo del modal) */
body.sin-scroll { overflow: hidden; }

/* Anillo de foco visible y consistente para navegacion con teclado.
   :focus-visible = solo cuando se navega con teclado, no al hacer clic. */
button:focus-visible,
a:focus-visible,
.btn-categoria:focus-visible,
.nav-tab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Tarjeta (identica a .card del tema claro de Eventos) */
.card {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -18px rgba(16, 24, 40, .25);
}

/* Gradiente de marca casi plano (azul acero) */
.brand-gradient { background: var(--grad-brand); }

/* Micro-label: mayuscula pequena con tracking */
.micro-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text3);
}

/* --- Aviso (toast) --- */
.aviso {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%) translateY(-90px);
  background: var(--surface); border: 1px solid var(--borde-alto); color: var(--text);
  padding: 10px 18px; border-radius: 10px; z-index: 100; transition: transform .25s;
  max-width: 92vw; text-align: center; font-size: .875rem;
  box-shadow: 0 10px 30px -12px rgba(16, 24, 40, .35);
}
.aviso.visible { transform: translateX(-50%) translateY(0); }

/* --- Pantallas de auth --- */
.pantalla { min-height: 100vh; }
.tarjeta-auth {
  max-width: 400px; margin: 8vh auto 24px; padding: 28px 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.marca { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.marca-icono {
  width: 48px; height: 48px; border-radius: .875rem;
  display: flex; align-items: center; justify-content: center;
}
.marca h1 { font-size: 1.3rem; font-weight: 800; }
.marca-sub { font-size: .8rem; color: var(--text3); }

/* --- Formularios --- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 10px; text-transform: uppercase; font-weight: 700;
  letter-spacing: .1em; color: var(--text3);
}
input, select {
  background: var(--surface-2); border: 1px solid var(--borde); border-radius: .625rem;
  color: var(--text); padding: 11px 13px; font-size: 1rem; width: 100%;
  font-family: inherit;
}
input::placeholder { color: var(--text3); }
input:focus, select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring); background: var(--surface);
}

/* Boton principal: azul acero (btn-brand de Eventos) */
.btn-primario {
  background: var(--grad-brand); color: #fff; border: none;
  border-radius: .625rem; padding: 12px; font-size: .95rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .15s, transform .08s;
}
.btn-primario:hover { background: var(--brand-hover); }
.btn-primario:active { transform: translateY(1px); background: var(--brand-press); }

/* Boton suave: superficie clara con borde (btn-soft de Eventos) */
.btn-secundario {
  background: var(--surface-2); color: var(--text2); border: 1px solid var(--borde-alto);
  border-radius: .5rem; padding: 6px 14px; font-size: .8rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s;
}
.btn-secundario:hover { background: #e6e9ee; border-color: var(--borde-alto); }

.btn-enlace {
  background: none; border: none; color: var(--brand-tx); cursor: pointer;
  font-size: .85rem; font-weight: 600; font-family: inherit;
}
.btn-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Salida de la pantalla de entrada hacia la landing. Discreta a proposito:
   compite con "Entrar" y con "Crear una cuenta", que son la accion real. */
.volver-inicio {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 14px; min-height: 32px;
  color: var(--text3); font-size: .82rem; font-weight: 500; text-decoration: none;
}
.volver-inicio:hover { color: var(--brand-tx); text-decoration: underline; text-underline-offset: 3px; }

.btn-icono {
  background: var(--surface-2); border: 1px solid var(--borde); border-radius: .5rem;
  width: 36px; height: 36px; min-width: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text2); transition: border-color .15s, color .15s;
}
.btn-icono:hover { border-color: var(--brand); color: var(--brand-tx); }

/* --- Encabezado del home --- */
#pantalla-home {
  max-width: 560px; margin: 0 auto;
  padding: 14px clamp(10px, 3vw, 16px) 0;
}
.encabezado {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; padding: clamp(14px, 4vw, 20px);
}
/* min-width:0 permite que el saldo se encoja en vez de montarse sobre los botones */
.encabezado > div:first-child { min-width: 0; flex: 1; }
/* clamp: escala con el ancho del dispositivo (arreglo para pantallas angostas) */
.saldo-total {
  font-size: clamp(1.35rem, 7.5vw, 2rem);
  font-weight: 800; margin-top: 4px;
  overflow-wrap: anywhere;
}
.offline { color: var(--ambar-tx); font-size: .72rem; margin-top: 6px; }
.acciones-encabezado { display: flex; gap: 6px; flex-shrink: 0; }

/* --- Secciones --- */
.fila-seccion {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 20px 4px 10px;
}
.vacio { color: var(--text3); font-size: .85rem; padding: 6px 4px; }

/* --- Cuentas (chips horizontales) --- */
.lista-cuentas {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px;
  scrollbar-width: none;
}
.chip-cuenta {
  background: var(--surface); border: 1px solid var(--borde); border-radius: .625rem;
  padding: 10px 14px; min-width: 128px; max-width: 70vw; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.chip-nombre {
  color: var(--text3); font-size: 10px; text-transform: uppercase;
  font-weight: 700; letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-saldo { font-weight: 800; font-size: .95rem; }
.chip-saldo.negativo { color: var(--rojo-tx); }

/* --- Movimientos --- */
/* padding-bottom grande: deja espacio para los FABs + la navegacion inferior */
.lista-movimientos { padding: 2px 0 180px; display: flex; flex-direction: column; gap: 8px; }
.movimiento {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--borde); border-radius: .625rem;
  padding: 11px 13px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.mov-izq { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mov-icono {
  width: 34px; height: 34px; border-radius: .5rem; flex-shrink: 0;
  background: var(--surface-2); color: var(--text2);
  display: flex; align-items: center; justify-content: center;
}
.mov-icono.ingreso { background: var(--verde-suave); color: var(--verde-tx); }
.mov-icono.gasto { background: var(--rojo-suave); color: var(--rojo-tx); }
.mov-desc {
  font-size: .9rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mov-fecha { font-size: .72rem; color: var(--text3); margin-top: 2px; }
.mov-monto { font-weight: 800; white-space: nowrap; font-size: .92rem; flex-shrink: 0; }
.mov-monto.positivo { color: var(--verde-tx); }
.mov-monto.negativo { color: var(--rojo-tx); }

/* Movimiento en cola offline: borde punteado y atenuado hasta sincronizar */
.movimiento.pendiente { border-style: dashed; border-color: var(--borde-alto); opacity: .75; }

/* Checkbox de privacidad: texto normal (no micro-label), en fila */
.check-privacidad {
  flex-direction: row !important; align-items: flex-start; gap: 8px !important;
  text-transform: none !important; letter-spacing: normal !important;
  font-size: .8rem !important; font-weight: 400 !important; color: var(--text2) !important;
  line-height: 1.5;
}
.check-privacidad input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.check-privacidad a { color: var(--brand-tx); font-weight: 600; }

/* --- Botones fijos de registro rapido ---
   Gasto = accion mas frecuente → boton de marca (teal).
   Ingreso = boton suave claro. Los colores semanticos viven en los montos.
   Quedan ANCLADOS arriba de la navegacion inferior. */
.botones-flotantes {
  position: fixed; bottom: calc(74px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 20px); max-width: 540px;
  display: flex; gap: 8px;
}
.fab {
  flex: 1; border-radius: .625rem; padding: 13px 8px;
  font-size: .92rem; font-weight: 700; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 8px 20px -10px rgba(16, 24, 40, .45);
  transition: background .15s, transform .08s;
  white-space: nowrap;
}
.fab:active { transform: translateY(1px); }
.fab-gasto { background: var(--grad-brand); color: #fff; border: none; }
.fab-gasto:hover { background: var(--brand-hover); }
.fab-ingreso { background: var(--surface); color: var(--text2); border: 1px solid var(--borde-alto); }
.fab-ingreso:hover { background: var(--surface-2); }

/* --- Modales --- */
.modal {
  position: fixed; inset: 0; background: rgba(26, 29, 35, .45);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50;
}
.modal-contenido {
  border-radius: var(--r-card) var(--r-card) 0 0; width: 100%;
  max-width: 480px; padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
  max-height: 92vh; overflow-y: auto;
}
.modal-encabezado { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-encabezado h3 { font-size: 1.05rem; font-weight: 800; }

/* Monto grande: lo primero que se digita en el flujo rapido */
.input-monto { font-size: 1.4rem; text-align: center; font-weight: 800; }

/* Grid de categorias con iconos SVG: seleccion en un tap.
   auto-fill con minmax: en pantallas angostas pasa de 3 a 2 columnas solo */
.grid-categorias {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
}
.btn-categoria {
  background: var(--surface-2); border: 1px solid var(--borde); border-radius: .625rem;
  color: var(--text2); padding: 10px 4px; font-size: .74rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color .12s, color .12s, background .12s;
  min-width: 0;
}
.btn-categoria span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.btn-categoria svg { opacity: .75; }
.btn-categoria.activa {
  border-color: var(--brand); background: var(--brand-suave); color: var(--brand-tx);
}
.btn-categoria.activa svg { opacity: 1; }

/* --- Navegacion inferior por pestañas --- */
.nav-inferior {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 560px; z-index: 40;
  display: flex; justify-content: space-around;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-top: 1px solid var(--borde);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.nav-tab {
  background: none; border: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text3); font-size: .62rem; font-weight: 700;
  padding: 5px 8px; border-radius: .5rem; flex: 1; min-width: 0;
  transition: color .12s, background .12s;
}
.nav-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav-tab.activa { color: var(--brand-tx); background: var(--brand-suave); }

/* --- Resumen del mes (vista Inicio) --- */
.resumen-mes {
  display: flex; align-items: stretch; gap: 10px;
  padding: 12px 14px; margin-top: 12px;
}
.resumen-item { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.resumen-sep { width: 1px; background: var(--borde); }
.res-valor { font-weight: 800; font-size: .92rem; overflow-wrap: anywhere; }
.res-valor.positivo { color: var(--verde-tx); }
.res-valor.negativo { color: var(--rojo-tx); }

/* --- Selector de mes (vista Estadisticas) --- */
.selector-mes {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 2px 4px;
}
.selector-mes-label { font-weight: 800; font-size: 1rem; }
.selector-mes .btn-icono:disabled { opacity: .35; cursor: default; }

/* --- Barras por categoria (vista Estadisticas) --- */
.lista-barras { display: flex; flex-direction: column; gap: 8px; }
.barra-item { padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
.barra-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.barra-nombre-grupo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.barra-nombre {
  font-size: .88rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-pista {
  height: 8px; border-radius: 99px; background: var(--surface-2);
  overflow: hidden;
}
.barra-relleno { height: 100%; border-radius: 99px; transition: width .3s ease; }
.barra-relleno.gasto { background: var(--rojo-tx); opacity: .75; }
.barra-relleno.ingreso { background: var(--verde-tx); opacity: .8; }

/* --- Tarjetas de presupuestos y recurrentes --- */
.lista-tarjetas { display: flex; flex-direction: column; gap: 8px; }
.tarjeta-item { padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.tarjeta-item.pausada { opacity: .6; }
.presupuesto-detalle { font-size: .8rem; color: var(--text2); }
.tarjeta-acciones { display: flex; gap: 8px; justify-content: flex-end; }
/* Progreso del presupuesto: teal → ambar (>=80%) → rojo (>=100%) */
.barra-relleno.presupuesto-ok { background: var(--brand); }
.barra-relleno.presupuesto-alerta { background: var(--ambar-tx); }
.barra-relleno.presupuesto-excedido { background: var(--rojo-tx); }

/* Espacio final para que la navegacion inferior no tape el contenido */
.con-margen-final { margin-bottom: 90px; }
.lista-barras:last-of-type, .lista-tarjetas { margin-bottom: 90px; }

/* Nota aclaratoria dentro de formularios */
.nota-form { font-size: .78rem; color: var(--text3); line-height: 1.5; }

/* FAB de transferencia: cuadrado compacto (icono solo) */
.fab-transferir {
  flex: 0 0 auto; width: 48px;
  background: var(--surface); color: var(--brand-tx);
  border: 1px solid var(--borde-alto);
}
.fab-transferir:hover { background: var(--surface-2); }

/* --- Ajustes finos para dispositivos muy angostos (app en celular) --- */
@media (max-width: 360px) {
  .btn-icono { width: 32px; height: 32px; min-width: 32px; }
  .fab { font-size: .85rem; padding: 12px 6px; }
  .chip-cuenta { min-width: 112px; }
  .tarjeta-auth { margin-top: 4vh; padding: 22px 16px; }
}

/* --- Pantallas mas anchas (tablet/desktop) --- */
@media (min-width: 640px) {
  .modal { align-items: center; padding: 16px; }
  .modal-contenido { border-radius: var(--r-card); }
}