/* Finanzas Personales -- hoja de estilos.
   ==========================================================
   MOVIL PRIMERO, y no como frase hecha: los tamanos base son
   los del celular y el escritorio es la excepcion (una sola
   media query al final). La app se usa de pie, con una mano,
   normalmente justo despues de pagar algo.

   De ahi salen tres reglas que mandan sobre lo demas:

   1. Nada interactivo mide menos de 44px de alto. Es el minimo
      con el que un pulgar acierta sin pensar.
   2. Los campos de texto van a 16px. Con menos, iOS hace zoom
      al enfocarlos y descuadra la pantalla entera.
   3. La navegacion vive ABAJO. Arriba no llega el pulgar en un
      telefono grande.

   La paleta es la de VALION (--marca y --acento coinciden con
   valion.com.co); el resto son neutros propios de esta app. */

:root {
  --marca:        #1F2937;
  --acento:       #FF9900;

  --fondo:        #F4F6F9;
  --superficie:   #FFFFFF;
  --borde:        #E4E9F0;
  --linea:        #EEF1F5;

  --texto:        #1A2230;
  --texto-2:      #5B6879;
  --tenue:        #8A94A3;

  --ok:           #16A34A;
  --alerta:       #D97706;
  --mal:          #DC2626;

  /* El gasto y el ingreso tienen color propio y consistente en
     toda la app: en una lista de movimientos el signo se lee
     antes por el color que por el simbolo. */
  --gasto:        #DC2626;
  --ingreso:      #16A34A;

  /* El boton principal no usa --marca directo: en modo oscuro el azul de
     marca queda casi igual que la superficie y el boton se pierde. */
  --boton:        #1F2937;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --tabbar-h: 60px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:      #0F1319;
    --superficie: #171C24;
    --borde:      #262D38;
    --linea:      #1F252E;
    --texto:      #EEF2F7;
    --texto-2:    #A7B0BD;
    --tenue:      #78828F;
    --boton:      #2E3A4E;
    color-scheme: dark;
  }
}

:root[data-tema="oscuro"] {
  --fondo:      #0F1319;
  --superficie: #171C24;
  --borde:      #262D38;
  --linea:      #1F252E;
  --texto:      #EEF2F7;
  --texto-2:    #A7B0BD;
  --tenue:      #78828F;
  --boton:      #2E3A4E;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  /* SIN scrollbar-gutter: reservaria una franja vacia a la
     derecha en las pantallas que no scrollean. Es exactamente
     el defecto que hubo que corregir en Control Center. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
  /* Espacio para la barra de pestanas y para la franja de
     gestos del telefono. Sin esto, el ultimo movimiento de la
     lista queda debajo de la barra y no se puede tocar. */
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p { margin: 0; }

/* ---------------------------------------------- encabezado */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.cabecera__titulo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cabecera__sub {
  font-size: 12px;
  color: var(--tenue);
}

/* ------------------------------------------------ contenido */

.contenido {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: 16px;
}

.tarjeta__titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tenue);
  margin-bottom: 10px;
}

.tenue { color: var(--tenue); }
.error { color: var(--mal); font-size: 13px; }

/* Cifras: siempre tabulares. Una columna de montos con anchos
   de digito distintos no se puede comparar de un vistazo. */
.cifra {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.monto-gasto   { color: var(--gasto); }
.monto-ingreso { color: var(--ingreso); }

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--boton);
  color: #fff;
}

.boton--fantasma {
  background: var(--superficie);
  border-color: var(--borde);
  color: var(--texto-2);
}

.boton--peligro { background: var(--mal); }
.boton--bloque  { width: 100%; }
.boton:disabled { opacity: .5; cursor: default; }

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

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.campo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-2);
}

.campo input,
.campo select,
.campo textarea {
  /* 16px es obligatorio, no estetico: con menos, iOS amplia la
     pagina al enfocar el campo y descuadra todo. */
  font-size: 16px;
  font-family: inherit;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  color: var(--texto);
  width: 100%;
}

.campo textarea { min-height: 88px; resize: vertical; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: transparent;
}

/* --------------------------------------------------- listas */

.fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--linea);
}
.fila:first-child { border-top: none; }
.fila__cuerpo { flex: 1; min-width: 0; }
.fila__titulo { font-size: 15px; font-weight: 600; }
.fila__sub    { font-size: 12px; color: var(--tenue); }
.fila__monto  { flex: none; font-size: 15px; font-weight: 700; text-align: right; }

/* ------------------------------------ obligaciones del mes */

.obligacion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--linea);
}
.obligacion:first-child { border-top: none; }

.obligacion__marca {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid var(--borde);
  color: var(--tenue);
}

.obligacion--pagada  .obligacion__marca { background: var(--ok);  border-color: var(--ok);  color: #fff; }
.obligacion--vencida .obligacion__marca { background: var(--mal); border-color: var(--mal); color: #fff; }
.obligacion--pagada  .obligacion__titulo { color: var(--tenue); text-decoration: line-through; }
.obligacion__estado { font-size: 12px; }
.obligacion--vencida .obligacion__estado { color: var(--mal); font-weight: 700; }

/* -------------------------------------------------- barras */

.barra { height: 8px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.barra__relleno { height: 100%; background: var(--ok); border-radius: 999px; }
.barra__relleno--alerta { background: var(--alerta); }
.barra__relleno--mal    { background: var(--mal); }

/* ------------------------------------- barra de pestanas */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--superficie);
  border-top: 1px solid var(--borde);
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--tenue);
  font-size: 11px;
  font-weight: 600;
}

.tab--activa { color: var(--marca); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tab--activa { color: var(--acento); }
}
:root[data-tema="oscuro"] .tab--activa { color: var(--acento); }

.tab__icono svg { width: 22px; height: 22px; display: block; }

/* --------------------------------------------------- modal */

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 14, 20, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal {
  background: var(--superficie);
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------ escritorio */

@media (min-width: 720px) {
  body { padding-bottom: 24px; }

  /* En pantalla ancha la barra deja de estar pegada abajo -- ahi
     no hay pulgar que la busque -- y pasa a ser una fila normal
     bajo el encabezado. */
  .tabbar {
    position: sticky;
    top: 0;
    height: auto;
    padding: 0;
    max-width: 720px;
    margin: 0 auto;
    border-top: none;
    border-bottom: 1px solid var(--borde);
  }
  .tab { flex-direction: row; gap: 8px; padding: 12px 0; font-size: 13px; }
  .modal-fondo { align-items: center; padding: 24px; }
  .modal { max-width: 520px; border-radius: var(--r-lg); }
}

/* ------------------------------------------- pantalla de acceso

   login.html es un documento aparte, sin barra de pestanas ni
   cabecera: quien no ha entrado no tiene a donde navegar. */

body.acceso {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}

.acceso__caja {
  width: 100%;
  max-width: 420px;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}

.acceso__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.acceso__logo {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--marca);
  color: var(--acento);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
}

.acceso__nombre { font-size: 18px; font-weight: 800; }
.acceso__titulo { font-size: 22px; font-weight: 800; margin-bottom: 16px; }

.acceso__enlace {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  background: none;
  border: none;
  color: var(--texto-2);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}