:root {
  --navy: #0B1E3D;
  --navy-oscuro: #071429;
  --navy-claro: #14294D;
  --oro: #D4AF37;
  --oro-claro: #F3E4B0;
  --gris-fondo: #F4F6F5;
  --gris-texto: var(--c-4B5563);
  --burbuja-nilo: var(--superficie);
  --burbuja-usuario: #0B1E3D;
  --rojo-error: #DC2626;
  --amarillo-pendiente: #F59E0B;
  --verde-ok: #16A34A;
  --superficie: #FFFFFF;
  --navy-texto: #0B1E3D;
  --accion: #0B1E3D;
  --azul-ico: #1D4ED8;
  --c-4B5563: #4B5563;
  --c-111827: #111827; --c-1F2937: #1F2937; --c-374151: #374151; --c-475569: #475569;
  --c-F3F4F6: #F3F4F6; --c-E5E7EB: #E5E7EB; --c-D1D5DB: #D1D5DB;
  --c-FEF3C7: #FEF3C7; --c-FFFBEB: #FFFBEB; --c-FFF8E1: #FFF8E1; --c-FCD34D: #FCD34D;
  --c-78350F: #78350F; --c-92400E: #92400E; --c-7A5B00: #7A5B00; --c-B45309: #B45309; --c-D97706: #D97706;
  --c-FEF2F2: #FEF2F2; --c-FEE2E2: #FEE2E2; --c-FECACA: #FECACA; --c-FCA5A5: #FCA5A5; --c-7F1D1D: #7F1D1D;
  --c-DCFCE7: #DCFCE7; --c-0F766E: #0F766E; --c-EFF4FF: #EFF4FF;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--gris-fondo);
  color: var(--c-111827);
}

.oculto {
  display: none !important;
}

.pantalla {
  height: var(--alto-visible, 100dvh);
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- Pantalla de login / registro / conectar Google ---------- */

#pantalla-auth,
#pantalla-google {
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-oscuro) 100%);
  padding: 24px;
}

#pantalla-bloqueo {
  align-items: center;
  padding: 24px;
  box-sizing: border-box;
  /* Con los pasos y los datos de pago la tarjeta puede ser más alta que
     un celular chico: la pantalla se desplaza en vez de cortarse. El
     margin:auto de la tarjeta la mantiene centrada cuando sí cabe. */
  overflow-y: auto;
}

#pantalla-bloqueo > .auth-caja {
  margin: auto;
}

.auth-caja {
  width: 100%;
  max-width: 360px;
  background: var(--superficie);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.logo-grande {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: block;
  margin: 0 auto 12px;
  box-shadow: 0 6px 16px rgba(11, 30, 61, 0.25);
}

.logo-chico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  margin: 0;
  display: block;
}

.auth-caja h1 {
  margin: 0 0 4px;
  font-size: 24px;
  color: var(--navy-texto);
}

.subtitulo {
  margin: 0 0 24px;
  color: var(--gris-texto);
  font-size: 14px;
}

.form-auth {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-auth input {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--c-E5E7EB);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s;
}

.form-auth input:focus {
  border-color: var(--oro);
}

.boton-primario {
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: var(--accion);
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

.boton-primario:active {
  background: var(--navy-oscuro);
}

.boton-primario:disabled {
  opacity: 0.6;
}

.enlace {
  margin-top: 18px;
  background: none;
  border: none;
  color: var(--navy-claro);
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
}

.error {
  color: var(--rojo-error);
  font-size: 13px;
  margin: 4px 0 0;
  min-height: 16px;
}

/* ---------- Pantalla de chat ---------- */

.barra-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
  background: var(--navy);
  color: white;
  flex-shrink: 0;
}

.barra-superior-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
}

.barra-superior-acciones {
  display: flex;
  gap: 8px;
}

.icono-boton {
  background: rgba(212, 175, 55, 0.18);
  border: none;
  color: var(--oro-claro);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.icono-boton:active {
  background: rgba(212, 175, 55, 0.32);
}

.grupo-resumen {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.icono-boton-simple {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.disponible-header {
  color: white;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lista-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mensaje {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.mensaje-usuario {
  align-self: flex-end;
  background: var(--burbuja-usuario);
  color: white;
  border-bottom-right-radius: 4px;
}

.mensaje-nilo {
  align-self: flex-start;
  background: var(--burbuja-nilo);
  color: var(--c-111827);
  border: 1px solid var(--c-E5E7EB);
  border-bottom-left-radius: 4px;
}

.mensaje-sistema {
  align-self: center;
  background: transparent;
  color: var(--gris-texto);
  font-size: 12px;
  text-align: center;
}

.tarjeta-pendiente {
  align-self: flex-start;
  max-width: 85%;
  background: var(--c-FFFBEB);
  border: 1px solid var(--amarillo-pendiente);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
}

.tarjeta-pendiente strong {
  color: var(--c-92400E);
}

.tarjeta-pendiente-acciones {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.tarjeta-pendiente-acciones button {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.boton-confirmar {
  background: var(--accion);
  color: white;
}

.boton-descartar {
  background: var(--c-F3F4F6);
  color: var(--c-374151);
}

.barra-mensaje {
  display: flex;
  gap: 8px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--superficie);
  border-top: 1px solid var(--c-E5E7EB);
  flex-shrink: 0;
}

.barra-mensaje input {
  flex: 1;
  min-width: 0; /* evita que el navegador le dé un ancho mínimo invisible
                   que empuje los botones fuera de la pantalla */
  padding: 12px 16px;
  border-radius: 24px;
  border: 1.5px solid var(--c-E5E7EB);
  font-size: 16px;
  outline: none;
}

.barra-mensaje input:focus {
  border-color: var(--oro);
}

.boton-enviar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--accion);
  color: var(--oro-claro);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.boton-enviar-secundario {
  background: var(--c-F3F4F6);
  color: var(--navy-texto);
}

.boton-enviar-secundario:active {
  background: var(--c-E5E7EB);
}

.boton-enviar-secundario.grabando {
  background: var(--rojo-error);
  color: white;
  animation: pulso-grabacion 1s infinite;
}

@keyframes pulso-grabacion {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ---------- Panel de grabación de audio ---------- */

.panel-grabacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--superficie);
  border-top: 1px solid var(--c-E5E7EB);
  flex-shrink: 0;
}

.grabacion-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.grabacion-onda {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  flex-shrink: 0;
}

.grabacion-onda span {
  display: block;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--rojo-error);
  animation: onda-grabacion 1s ease-in-out infinite;
}

.grabacion-onda span:nth-child(1) { animation-delay: 0s; }
.grabacion-onda span:nth-child(2) { animation-delay: 0.12s; }
.grabacion-onda span:nth-child(3) { animation-delay: 0.24s; }
.grabacion-onda span:nth-child(4) { animation-delay: 0.36s; }
.grabacion-onda span:nth-child(5) { animation-delay: 0.48s; }

@keyframes onda-grabacion {
  0%, 100% { height: 8px; }
  50% { height: 22px; }
}

.panel-grabacion.pausado .grabacion-onda span {
  animation-play-state: paused;
  height: 8px;
  background: #9CA3AF;
}

.grabacion-tiempo {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--c-111827);
  flex-shrink: 0;
}

.grabacion-estado-texto {
  font-size: 13px;
  color: var(--gris-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grabacion-acciones {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.boton-grabacion-borrar {
  background: var(--c-FEE2E2);
  color: var(--rojo-error);
}

.boton-grabacion-borrar:active {
  background: var(--c-FECACA);
}

.boton-enviar:disabled {
  opacity: 0.5;
}

.escribiendo {
  display: flex;
  gap: 4px;
  align-self: flex-start;
  padding: 12px 16px;
}

.escribiendo span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9CA3AF;
  animation: rebote 1.2s infinite ease-in-out;
}

.escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.escribiendo span:nth-child(3) { animation-delay: 0.3s; }

@keyframes rebote {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Modales (resumen, frase del día, menú) ---------- */

.fondo-modal {
  position: fixed;
  /* Mide lo que de verdad se ve (sin el teclado). En iPhone el teclado tapa
     la pantalla en vez de achicarla, así que sin esto la ventana quedaba
     escondida detrás de él. app.js mantiene estas dos variables al día. */
  inset: auto 0 auto 0;
  top: var(--arriba-visible, 0px);
  height: var(--alto-visible, 100dvh);
  background: rgba(7, 20, 41, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}

.hoja-modal {
  width: 100%;
  max-width: 480px;
  background: var(--superficie);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: subir 0.2s ease-out;
  touch-action: pan-y;
  /* El arrastre (en app.js) apaga esta transición mientras se mueve el
     dedo, para que siga la posición exacta sin retraso, y la deja activa
     al soltar — así el "salto" a la altura final queda como un deslizar
     suave en vez de un cambio brusco. */
  transition: height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: height;
}

@keyframes subir {
  from { transform: translateY(16px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

/* Encabezado fijo (barra para arrastrar + título + X): se agrega por JS
   (ver prepararHojasModal en app.js) envolviendo la barra y la cabecera
   para que ambas queden pegadas arriba aunque el contenido se desplace. */
.hoja-modal-fija {
  position: sticky;
  /* La hoja tiene 20px de relleno arriba y este bloque se sube 20px con el
     margen negativo: si "top" fuera 0 se quedaría 20px más abajo de su sitio
     y taparía las esquinas de lo primero que hay debajo (ej. la fila
     "Disponible" del resumen). */
  top: -20px;
  z-index: 2;
  background: var(--superficie);
  margin: -20px -20px 14px;
  padding: 4px 20px 0;
  border-radius: 20px 20px 0 0;
}

/* El área que se puede tocar es mucho más grande que la barrita que se
   ve — así no toca acertarle a 5 píxeles con el dedo para arrastrar. */
.hoja-modal-agarre {
  width: 100%;
  height: 28px;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: grab;
}

.hoja-modal-agarre::before {
  content: "";
  width: 40px;
  height: 5px;
  border-radius: 4px;
  background: var(--c-D1D5DB);
  transition: background 0.15s ease, width 0.15s ease;
}

/* Al tocarla, se ve y se siente que respondió de una vez. */
.hoja-modal-agarre:active::before {
  background: #9CA3AF;
  width: 48px;
}

.hoja-modal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hoja-modal-fija .hoja-modal-cabecera {
  margin-bottom: 0;
  padding-bottom: 14px;
}

.hoja-modal-cabecera h2 {
  margin: 0;
  font-size: 18px;
  color: var(--navy-texto);
}

.cerrar-modal {
  background: var(--c-F3F4F6);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--c-374151);
  cursor: pointer;
}

/* --- Resumen --- */

.contenido-resumen {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contenido-resumen .cargando {
  color: var(--gris-texto);
  font-size: 14px;
  text-align: center;
  padding: 20px 0;
}

.fila-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--gris-fondo);
}

.fila-resumen .etiqueta {
  font-size: 14px;
  color: var(--gris-texto);
}

.fila-resumen .valor {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-texto);
}

.fila-resumen.destacada {
  background: var(--navy);
}

.fila-resumen.destacada .etiqueta,
.fila-resumen.destacada .valor {
  color: white;
}

.fila-resumen.destacada .valor {
  color: var(--oro-claro);
  font-size: 18px;
}

.fila-resumen-clic {
  cursor: pointer;
  transition: background 0.12s ease;
}

.fila-resumen-clic:active {
  background: var(--oro-claro);
}

/* --- Presupuesto --- */

.selector-mes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 4px 0 14px;
}

.boton-mes-flecha {
  border: none;
  background: var(--gris-fondo);
  color: var(--navy-texto);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.boton-mes-flecha:active {
  background: var(--oro-claro);
}

.boton-mes-flecha:disabled {
  opacity: 0.4;
  cursor: default;
}

.presupuesto-mes-actual {
  font-weight: 700;
  color: var(--navy-texto);
  min-width: 140px;
  text-align: center;
  text-transform: capitalize;
}

.contenido-presupuesto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.presupuesto-seccion-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--gris-texto);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 4px 0 -4px;
}

.presupuesto-barra-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.presupuesto-barra-porcentaje {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy-texto);
}

.presupuesto-barra-fondo {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: var(--gris-fondo);
  overflow: hidden;
}

.presupuesto-barra-relleno {
  height: 100%;
  border-radius: 999px;
  background: var(--verde-ok);
  transition: width 0.3s ease;
}

.presupuesto-barra-relleno.alerta {
  background: var(--amarillo-pendiente);
}

.presupuesto-barra-relleno.riesgo {
  background: var(--rojo-error);
}

.presupuesto-barra-detalle {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--gris-texto);
  margin-top: 6px;
}

.presupuesto-categoria {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.presupuesto-categoria-encabezado {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--navy-texto);
}

.presupuesto-categoria-encabezado .valor {
  font-weight: 700;
}

.presupuesto-categoria-barra-fondo {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--gris-fondo);
  overflow: hidden;
}

.presupuesto-categoria-barra-relleno {
  height: 100%;
  border-radius: 999px;
  background: var(--accion);
}

.presupuesto-sin-datos {
  color: var(--gris-texto);
  font-size: 14px;
  text-align: center;
  padding: 12px 0;
}

.presupuesto-categoria-clic {
  cursor: pointer;
  transition: background 0.12s ease;
  border-radius: 10px;
  margin: 0 -8px;
  padding: 8px;
}

.presupuesto-categoria-clic:active {
  background: var(--gris-fondo);
}

.contenido-presupuesto-detalle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.presupuesto-detalle-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--gris-fondo);
}

.presupuesto-detalle-fila .presupuesto-detalle-categoria {
  font-size: 14px;
  color: var(--navy-texto);
  font-weight: 600;
}

.presupuesto-detalle-fila .presupuesto-detalle-info {
  font-size: 12px;
  color: var(--gris-texto);
}

.presupuesto-detalle-fila .valor {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-texto);
}

.presupuesto-detalle-fila-derecha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.boton-borrar-movimiento {
  border: none;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  opacity: 0.6;
}

.boton-borrar-movimiento:active {
  opacity: 1;
}

.boton-borrar-movimiento:disabled {
  opacity: 0.3;
  cursor: default;
}

.toast-deshacer {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--navy-oscuro);
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  max-width: 90vw;
}

.boton-toast-deshacer {
  border: none;
  background: transparent;
  color: var(--oro-claro);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

/* --- Frase del día --- */

.hoja-modal-frase {
  text-align: center;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-oscuro) 100%);
}

.hoja-modal-frase .hoja-modal-cabecera h2 {
  color: var(--oro-claro);
}

.hoja-modal-frase .cerrar-modal {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.hoja-modal-frase .hoja-modal-fija {
  background: transparent;
}

.hoja-modal-frase .hoja-modal-agarre::before {
  background: rgba(255, 255, 255, 0.3);
}

.hoja-modal-frase .hoja-modal-agarre:active::before {
  background: rgba(255, 255, 255, 0.6);
}

.contenido-frase {
  padding: 20px 6px 10px;
}

.texto-frase {
  color: white;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
  font-style: italic;
  margin: 0 0 16px;
}

.texto-frase::before {
  content: "“";
}

.texto-frase::after {
  content: "”";
}

.autor-frase {
  color: var(--oro-claro);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.contenido-historia-texto .texto-frase {
  margin-bottom: 22px;
}

.contenido-historia-texto .texto-frase:last-child {
  margin-bottom: 0;
}

/* La cita lleva comillas de cierre y luego los emojis fuera de ellas
   (el cierre "”" va escrito en el texto, no por ::after, para que no
   quede después de los emojis). */
.contenido-historia-texto .texto-frase::after {
  content: "";
}

/* --- Menú --- */

.hoja-modal-menu {
  display: flex;
  flex-direction: column;
}

.opcion-menu {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--gris-fondo);
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-texto);
  margin-bottom: 10px;
  cursor: pointer;
}

.opcion-menu-peligro {
  color: var(--rojo-error);
  background: var(--c-FEF2F2);
}

/* --- Menú lateral (conversaciones) --- */

#fondo-lateral {
  align-items: stretch;
  justify-content: flex-start;
}

.panel-lateral {
  width: min(300px, 84vw);
  height: 100%;
  background: var(--superficie);
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 16px;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.22s ease-out;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}

.panel-lateral.abierto {
  transform: translateX(0);
}

.panel-lateral-subtitulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-texto);
  margin: 4px 0 8px;
}

.panel-lateral-aviso {
  font-size: 12.5px;
  color: var(--gris-texto);
  margin: 4px 4px 8px;
  line-height: 1.4;
}

/* ---------- Barra de pestañas de abajo (Chat / Mis finanzas / Tú) ---------- */
.barra-tabs {
  flex: 0 0 auto;
  display: flex;
  background: var(--superficie);
  border-top: 1px solid var(--c-E5E7EB);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.casilla-terminos {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
  color: var(--gris-texto);
}

.casilla-terminos input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--navy);
}

.enlace-en-linea {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--navy-texto);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  display: inline;
  width: auto;
  text-align: left;
}

.enlace-chico {
  font-size: 12.5px;
  margin-top: 6px;
}

.terminos-texto {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-1F2937);
  text-align: left;
}

.terminos-texto h3 {
  margin: 20px 0 6px;
  font-size: 15px;
  color: var(--navy-texto);
}

.terminos-texto p,
.terminos-texto ul {
  margin: 0 0 10px;
}

.terminos-texto ul {
  padding-left: 20px;
}

.terminos-texto li {
  margin-bottom: 6px;
}

.terminos-encabezado {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--gris-fondo);
  font-size: 13px;
}

.terminos-contacto {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--gris-fondo);
  font-weight: 600;
}

.teclado-abierto .barra-tabs {
  display: none;
}

.boton-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 0 6px;
  background: none;
  border: none;
  border-top: 3px solid transparent;
  color: #9CA3AF;
  font-family: inherit;
  cursor: pointer;
}

.boton-tab-icono {
  font-size: 20px;
  line-height: 1;
}

.boton-tab-etiqueta {
  font-size: 11px;
  font-weight: 600;
}

.boton-tab.activo {
  color: var(--navy-texto);
  border-top-color: var(--oro);
}

.boton-tab.activo .boton-tab-etiqueta {
  font-weight: 700;
}

/* ---------- Tarjetas de "Mis finanzas" ---------- */
.tarjeta-finanzas {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--superficie);
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.tarjeta-finanzas-icono {
  font-size: 19px;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gris-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tarjeta-finanzas-texto {
  flex: 1;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--navy-texto);
}

.tarjeta-finanzas-flecha {
  color: #9CA3AF;
  font-size: 18px;
}

.lista-conversaciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.lista-conversaciones .cargando {
  color: var(--gris-texto);
  font-size: 13px;
  padding: 8px 0;
}

.fila-conversacion {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--gris-fondo);
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

.fila-conversacion .fila-conversacion-etiqueta {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-texto);
  margin-bottom: 2px;
}

.fila-conversacion .fila-conversacion-preview {
  display: block;
  font-size: 12px;
  color: var(--gris-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opcion-ver-mas {
  background: none;
  color: var(--navy-texto);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}

.panel-lateral-separador {
  height: 1px;
  background: var(--c-E5E7EB);
  margin: 4px 0 14px;
}

/* --- Modal de un día (solo lectura) --- */

.hoja-modal-dia {
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.lista-mensajes-modal {
  overflow-y: auto;
  padding: 4px 2px;
  min-height: 120px;
}

/* --- Pantalla de historial completo --- */

.contenido-historial {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.contenido-historial .cargando {
  color: var(--gris-texto);
  font-size: 14px;
  text-align: center;
  padding: 20px 0;
}

.mes-historial {
  margin-bottom: 10px;
  border-radius: 14px;
  background: var(--gris-fondo);
  overflow: hidden;
}

.mes-historial-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-texto);
  cursor: pointer;
  text-transform: capitalize;
}

.mes-historial-flecha {
  transition: transform 0.15s ease;
}

.mes-historial.abierto .mes-historial-flecha {
  transform: rotate(180deg);
}

.mes-historial-dias {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 12px;
}

.mes-historial.abierto .mes-historial-dias {
  display: flex;
}

.fondo-resumen {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--gris-texto);
}

.fondo-persona-fila {
  background: var(--superficie);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
}

/* --- Pantalla "Mi perfil" --- */

.perfil-seccion {
  background: var(--gris-fondo);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.perfil-seccion h3 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--navy-texto);
}

.perfil-seccion .form-auth {
  gap: 10px;
}

.perfil-seccion .form-auth input {
  background: var(--superficie);
}

.perfil-seccion .boton-primario {
  width: 100%;
}

.perfil-google-estado {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--gris-texto);
}

/* --- Encuesta inicial: ingresos y gastos fijos --- */

.hoja-modal-onboarding {
  text-align: left;
}

.contenido-onboarding {
  padding: 4px 2px 0;
}

.onboarding-seccion-titulo {
  margin: 18px 0 10px;
  font-size: 15px;
  color: var(--navy-texto);
}

.onboarding-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.onboarding-fila {
  display: flex;
  gap: 8px;
  align-items: center;
}

.onboarding-fila input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--c-E5E7EB);
  font-size: 15px;
  outline: none;
  min-width: 0;
}

.onboarding-fila input:focus {
  border-color: var(--oro);
}

.onboarding-fila input.onboarding-input-nombre {
  flex: 1.4;
}

.onboarding-fila input.onboarding-input-monto {
  flex: 1;
}

.boton-quitar-fila {
  background: var(--c-F3F4F6);
  border: none;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--rojo-error);
  cursor: pointer;
  flex-shrink: 0;
}

.boton-onboarding-agregar {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1.5px dashed var(--c-D1D5DB);
  background: none;
  color: var(--navy-claro);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.onboarding-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  gap: 12px;
}

.onboarding-acciones .boton-primario {
  flex: 1;
  margin-top: 0;
}

.onboarding-acciones .enlace {
  margin-top: 0;
  white-space: nowrap;
}

/* --- Eliminar cuenta --- */

.aviso-peligro {
  background: var(--c-FEF2F2);
  border: 1.5px solid var(--c-FCA5A5);
  border-radius: 12px;
  padding: 14px;
  color: var(--c-7F1D1D);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.aviso-advertencia {
  background: var(--c-FFFBEB);
  border: 1.5px solid var(--c-FCD34D);
  border-radius: 12px;
  padding: 14px;
  color: var(--c-78350F);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* --- Pantalla de bloqueo por pago --- */

.bloqueo-pago-caja {
  background: var(--gris-fondo);
  border-radius: 14px;
  padding: 18px;
  margin: 12px 0 20px;
  text-align: center;
}

.bloqueo-precio {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-texto);
}

.bloqueo-pasos {
  text-align: left;
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-texto);
}

.bloqueo-pasos li {
  margin-bottom: 6px;
}

.bloqueo-pasos strong {
  color: var(--navy-texto);
}

.bloqueo-pago-caja .bloqueo-precio {
  text-align: center;
}

.bloqueo-dato {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--c-E5E7EB);
  text-align: left;
}

.bloqueo-dato-etiqueta {
  flex: 0 0 92px;
  font-size: 12.5px;
  color: var(--gris-texto);
}

.bloqueo-dato-valor {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--navy-texto);
  overflow-wrap: anywhere;
}

.boton-copiar {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--accion);
  background: var(--superficie);
  color: var(--navy-texto);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.boton-copiar:active {
  background: var(--gris-fondo);
}

.boton-copiar.copiado {
  background: var(--verde-ok);
  border-color: var(--verde-ok);
  color: white;
}

#bloqueo-bloque-pago .boton-primario {
  width: 100%;
}

#boton-volver-pago {
  display: block;
  margin: 0 auto 14px 0;
  padding: 0;
}

.bloqueo-politica {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-E5E7EB);
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gris-texto);
}

.bloqueo-politica p {
  margin: 0 0 6px;
}

.bloqueo-ayuda {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--gris-texto);
}

.bloqueo-revision {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  background: var(--c-FEF3C7);
  border-radius: 12px;
  padding: 14px;
  margin: 0 0 14px;
  color: var(--c-78350F);
  font-size: 13.5px;
  line-height: 1.5;
}

/* --- Pre-revisión del comprobante (panel de administración) --- */

.pago-revision {
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.45;
  background: var(--c-F3F4F6);
  border-left: 4px solid #9CA3AF;
}

.pago-revision.verde { background: var(--c-DCFCE7); border-left-color: var(--verde-ok); }
.pago-revision.amarillo { background: var(--c-FEF3C7); border-left-color: var(--c-D97706); }
.pago-revision.rojo { background: var(--c-FEE2E2); border-left-color: var(--rojo-error); }

.pago-revision-titulo {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--navy-texto);
}

.pago-revision ul {
  margin: 0;
  padding-left: 18px;
}

.pago-revision li {
  margin-bottom: 3px;
}

.pago-revision-ayuda {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--gris-texto);
}

/* --- Panel de administración de pagos pendientes --- */

.pago-pendiente-tarjeta {
  background: var(--gris-fondo);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}

.pago-pendiente-nombre {
  font-weight: 700;
  color: var(--navy-texto);
  margin: 0 0 2px;
}

.pago-pendiente-correo {
  font-size: 13px;
  color: var(--gris-texto);
  margin: 0 0 10px;
}

.pago-pendiente-monto {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-texto);
  margin: 0 0 2px;
}

.pago-pendiente-monto-ayuda {
  font-size: 12.5px;
  color: var(--gris-texto);
  margin: 0 0 10px;
}

.pago-pendiente-comprobante {
  width: 100%;
  max-width: 260px;
  border-radius: 10px;
  display: block;
  margin-bottom: 10px;
  cursor: pointer;
}

.pago-pendiente-acciones {
  display: flex;
  gap: 8px;
}

.pago-pendiente-acciones button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.boton-aprobar-pago {
  background: var(--accion);
  color: white;
}

.boton-rechazar-pago {
  background: var(--c-FEE2E2);
  color: var(--rojo-error);
}

/* ---------------------------------------------------------------------
   Instalar la app (botón en el login + modal con instrucciones)
--------------------------------------------------------------------- */
.boton-instalar-app {
  margin-top: 18px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid var(--oro);
  background: transparent;
  color: var(--navy-texto);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.lista-pasos-instalar {
  list-style: none;
  padding: 0;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lista-pasos-instalar li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--gris-texto);
  line-height: 1.4;
}

.numero-paso {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accion);
  color: var(--oro-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

/* ---------------------------------------------------------------------
   Pantalla "Deudas y Préstamos"
--------------------------------------------------------------------- */
.deuda-seccion-titulo {
  margin: 4px 4px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-texto);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.deuda-persona-fila {
  background: var(--superficie);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
  border-left: 4px solid var(--oro);
}

.deuda-persona-fila.en-contra {
  border-left-color: var(--rojo-error);
}

.deuda-persona-nombre {
  font-weight: 700;
  color: var(--navy-texto);
}

.deuda-persona-monto {
  font-weight: 700;
}

.deuda-barra-fondo {
  margin-top: 6px;
  height: 6px;
  border-radius: 4px;
  background: var(--gris-fondo);
  overflow: hidden;
}

.deuda-barra-relleno {
  height: 100%;
  background: var(--oro);
  border-radius: 4px;
}

.deuda-persona-fila.en-contra .deuda-barra-relleno {
  background: var(--rojo-error);
}

/* --- Mis fijos --- */

.fijos-ayuda {
  font-size: 13px;
  color: var(--gris-texto);
  margin: 4px 0 14px;
}

.contenido-fijos {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fijos-seccion-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--gris-texto);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.fijos-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fijos-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--gris-fondo);
  gap: 10px;
}

.fijos-fila-izquierda {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fijos-fila-nombre {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-texto);
}

.fijos-fila-estado {
  font-size: 12px;
}

.fijos-fila-estado-pagado {
  color: var(--c-0F766E);
}

.fijos-fila-estado-pendiente {
  color: var(--c-B45309);
}

.fijos-fila-derecha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.fijos-fila-derecha .valor {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-texto);
}

.boton-fijos-editar,
.boton-fijos-eliminar,
.boton-fijos-marcar-pagado {
  border: none;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  opacity: 0.6;
}

.boton-fijos-editar:active,
.boton-fijos-eliminar:active,
.boton-fijos-marcar-pagado:active {
  opacity: 1;
}

.fijos-editar-monto {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fijos-editar-monto input {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--gris-borde, var(--c-D1D5DB));
  font-size: 14px;
}

.fijos-editar-monto-input {
  width: 84px;
}

.fijos-editar-dia-input {
  width: 78px;
}

.boton-fijos-editar-guardar,
.boton-fijos-editar-cancelar {
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.fijos-sin-datos {
  font-size: 13px;
  color: var(--gris-texto);
  padding: 8px 0;
}

.boton-fijos-agregar {
  margin-top: 16px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px dashed var(--oro);
  background: transparent;
  color: var(--navy-texto);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.boton-fijos-agregar:active {
  background: var(--gris-fondo);
}

.form-fijos-agregar {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-fijos-tipo {
  display: flex;
  gap: 18px;
}

.form-fijos-opcion {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--navy-texto);
}

.form-fijos-input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--gris-borde, var(--c-D1D5DB));
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.form-fijos-acciones {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.form-fijos-acciones button {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.boton-fijos-cancelar {
  background: var(--gris-fondo);
  color: var(--gris-texto);
}

.boton-fijos-guardar {
  background: var(--accion);
  color: white;
}

/* --- Comparación de fijos dentro de Presupuesto --- */

.presupuesto-fijos-resumen {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gris-fondo);
}

.presupuesto-fijos-linea {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--gris-texto);
  padding: 3px 0;
}

.presupuesto-fijos-linea strong {
  color: var(--navy-texto);
}

.presupuesto-fijos-pendientes {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--c-FEF3C7);
  color: var(--c-92400E);
  font-size: 13px;
}

/* --- Mis metas --- */

.metas-fila {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--gris-fondo);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metas-fila .fijos-fila {
  padding: 0;
  background: transparent;
}

.metas-barra-fondo {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.metas-barra-relleno {
  height: 100%;
  border-radius: 999px;
  background: var(--oro);
}

.metas-fila-pie {
  font-size: 12px;
  color: var(--gris-texto);
  margin: 0;
}


/* --- Reembolso de un excedente (aviso, formulario y lista del admin) --- */
.aviso-reembolso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 10px 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--c-FCD34D);
  border-radius: 12px;
  background: var(--c-FEF3C7);
  color: var(--c-78350F);
  font-size: 13.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.bloqueo-reembolso {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--c-FCD34D);
  border-radius: 12px;
  background: var(--c-FEF3C7);
  color: var(--c-78350F);
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
}

.form-reembolso {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-reembolso-etiqueta {
  font-size: 13px;
  font-weight: 700;
}

.form-reembolso input {
  padding: 11px 12px;
  border: 1px solid var(--c-E5E7EB);
  border-radius: 10px;
  font-size: 16px;
}

.reembolso-admin-titulo {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-texto);
}

.reembolso-admin-sin-numero {
  font-size: 13px;
  color: var(--rojo-error);
  margin: 0 0 10px;
}

.reembolso-admin-numero {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-texto);
  margin: 0 0 10px;
}

#pantalla-aceptar-terminos {
  align-items: center;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-oscuro) 100%);
  padding: 24px;
  box-sizing: border-box;
  /* Con el texto de autorización la tarjeta puede ser más alta que un
     celular chico: se desplaza en vez de cortarse, y centrada cuando cabe. */
  overflow-y: auto;
}

#pantalla-aceptar-terminos .auth-caja {
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#pantalla-aceptar-terminos .boton-primario {
  width: 100%;
}

/* Enlaces dentro de una frase: que fluyan con el texto (aunque otra regla de botones los haga bloque). */
.casilla-terminos .enlace-en-linea {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  text-align: left;
}

/* ---------- Contacto: sugerencias y problemas ---------- */
.chips-contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-contacto input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip-contacto span {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--c-E5E7EB);
  background: var(--superficie);
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-texto);
  cursor: pointer;
}

.chip-contacto input:checked + span {
  background: var(--accion);
  border-color: var(--accion);
  color: white;
}

.chip-contacto input:focus-visible + span {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

.contacto-texto {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--c-E5E7EB);
  font: inherit;
  font-size: 16px;
  resize: vertical;
  min-height: 110px;
  outline: none;
}

.contacto-texto:focus {
  border-color: var(--oro);
}

.lista-mensajes-contacto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
}

.tarjeta-contacto {
  background: var(--gris-fondo);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
}

.tarjeta-contacto.nuevo {
  border-left: 4px solid var(--oro);
}

.tarjeta-contacto-cabecera {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  color: var(--navy-texto);
}

.tarjeta-contacto-meta {
  font-size: 12.5px;
  color: var(--gris-texto);
  margin: 2px 0 8px;
}

.tarjeta-contacto-texto {
  margin: 0 0 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--c-111827);
}

/* ---------- Gráficos ---------- */
.contenido-graficos {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-bottom: 20px;
}

.grafico-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--gris-texto);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 10px;
}

.grafico-dona-fila {
  display: flex;
  align-items: center;
  gap: 16px;
}

.grafico-dona {
  width: 140px;
  height: 140px;
  flex: 0 0 auto;
}

.grafico-leyenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  flex: 1;
  min-width: 0;
}

.grafico-leyenda li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.grafico-leyenda .punto {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.grafico-leyenda .nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grafico-leyenda .pct {
  font-weight: 700;
  color: var(--navy-texto);
}

.grafico-barras {
  width: 100%;
  height: auto;
}

.grafico-barras-leyenda {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--gris-texto);
  margin-top: 8px;
}

.grafico-barras-leyenda .punto {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}

.grafico-frase {
  font-size: 14px;
  color: var(--c-111827);
  background: var(--gris-fondo);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 12px 0 0;
}

/* ---------- Presupuesto: límites de gasto ---------- */
.presupuesto-limites {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.presupuesto-pista {
  font-size: 13px;
  color: var(--gris-texto);
  background: var(--gris-fondo);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 16px;
}

.presupuesto-categoria-barra-relleno.alerta {
  background: var(--amarillo-pendiente);
}

.presupuesto-categoria-barra-relleno.riesgo {
  background: var(--rojo-error);
}

.disponible-header.negativo { color: #ff9b94; }

.pref-titulo { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--c-475569); }

/* ---------- Pantalla de carga (splash) ---------- */
#splash-carga {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-oscuro) 100%);
  transition: opacity 0.3s ease;
}
#splash-carga.saliendo { opacity: 0; pointer-events: none; }
.splash-logo { width: 96px; height: 96px; border-radius: 22px; animation: splash-latido 1.6s ease-in-out infinite; }
.splash-puntos { display: flex; gap: 8px; }
.splash-puntos span { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0.3; animation: splash-punto 1.2s ease-in-out infinite; }
.splash-puntos span:nth-child(2) { animation-delay: 0.2s; }
.splash-puntos span:nth-child(3) { animation-delay: 0.4s; }
.splash-texto { margin: 0; color: rgba(255,255,255,0.8); font-size: 14px; text-align: center; padding: 0 24px; }
@keyframes splash-latido { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes splash-punto { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fondo-modal, .fondo-modal.oculto, .hoja-modal { transition: none !important; } .splash-logo, .splash-puntos span { animation: none; } }

/* ---------- Mis finanzas: pestañas internas ---------- */
.tabs-finanzas {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
  background: var(--superficie);
  border-bottom: 1px solid var(--c-E5E7EB);
}
.tab-finanzas {
  flex: 1;
  border: none;
  background: none;
  padding: 10px 4px 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-texto);
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.tab-finanzas.activo {
  color: var(--navy-texto);
  border-bottom-color: var(--navy-texto);
}
.pane-finanzas { display: flex; flex-direction: column; }
.pane-finanzas.oculto { display: none !important; }
.pane-ayuda {
  font-size: 13px;
  color: var(--gris-texto);
  margin: 2px 0 12px;
}
.contenido-deudas, .contenido-movimientos { display: flex; flex-direction: column; }
.contenido-deudas .cargando, .contenido-movimientos .cargando {
  color: var(--gris-texto);
  font-size: 14px;
  text-align: center;
  padding: 14px 0;
}

/* Secciones que se abren y cierran (Gráficos, Movimientos, Mis fijos...) */
.seccion-plegable {
  background: var(--gris-fondo);
  border-radius: 14px;
  padding: 0 14px;
  margin-top: 14px;
}
.seccion-plegable > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-texto);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.seccion-plegable > summary::-webkit-details-marker { display: none; }
.seccion-plegable > summary::after { content: "›"; font-size: 18px; transition: transform 0.2s; }
.seccion-plegable[open] > summary::after { transform: rotate(90deg); }
.seccion-plegable[open] { padding-bottom: 14px; }
.seccion-plegable-chica { background: var(--superficie); margin-top: 8px; }
.perfil-seccion .seccion-plegable-chica > summary { font-weight: 600; }

/* Frase del día (arriba de la pestaña Mes) */
.frase-dia-tarjeta {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-oscuro) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.frase-dia-texto { margin: 0; font-size: 14px; line-height: 1.45; font-style: italic; }
.frase-dia-autor { margin: 6px 0 0; font-size: 12px; opacity: 0.75; text-align: right; }
.splash-frase { margin: 0; max-width: 300px; color: rgba(255,255,255,0.6); font-size: 13px; font-style: italic; text-align: center; padding: 0 24px; display: none; }
.splash-frase.visible { display: block; }

/* =====================================================================
   Estructura nueva (octubre 2026): Chat / Mi dinero / Tú
   ===================================================================== */
.invisible { visibility: hidden; }

/* «Te quedan $…» arriba en el chat: abre Mi dinero */
.chip-disponible {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 96px;
  min-height: 40px;
  padding: 3px 12px;
  border: none;
  border-radius: 12px;
  background: var(--navy-claro);
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.chip-disponible-etiqueta { font-size: 11px; line-height: 1.2; color: var(--oro-claro); }
.chip-disponible .disponible-header { font-size: 15px; line-height: 1.2; max-width: 140px; }

/* Atajos para escribir más rápido */
.atajos-chat {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 8px 16px 0;
  background: var(--superficie);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.atajos-chat::-webkit-scrollbar { display: none; }
.atajo-chat {
  flex: none;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--c-D1D5DB);
  background: var(--superficie);
  color: var(--navy-texto);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.atajo-chat:active { background: var(--gris-fondo); }
.atajo-chat:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

/* Inicio de Mi dinero */
.hub-dinero { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.dinero-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-oscuro) 100%);
  color: #fff;
  border-radius: 18px;
  padding: 18px 18px 14px;
  margin-bottom: 8px;
}
.dinero-hero-etiqueta { display: block; font-size: 13px; color: var(--oro-claro); }
.dinero-hero-monto { display: block; font-size: 32px; line-height: 1.15; margin-top: 2px; }
.dinero-hero-monto.negativo { color: #ff9b94; }
.dinero-hero-fila { display: flex; gap: 12px; margin-top: 14px; }
.dinero-hero-fila > div {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
}
.dinero-hero-fila span { display: block; font-size: 12px; color: rgba(255,255,255,0.78); }
.dinero-hero-fila strong { display: block; font-size: 16px; margin-top: 2px; }
.dinero-hero-enlace {
  margin-top: 10px;
  min-height: 40px;
  padding: 8px 0;
  border: none;
  background: none;
  color: var(--oro-claro);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.dinero-aviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  margin-bottom: 8px;
  border: 1px solid #F3E4B0;
  border-radius: 14px;
  background: var(--c-FFF8E1);
  color: var(--c-7A5B00);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.dinero-grupo-titulo { margin: 14px 2px 2px; font-size: 15px; color: var(--navy-texto); }
.dinero-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dinero-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--c-E5E7EB);
  border-radius: 16px;
  background: var(--superficie);
  text-align: left;
  cursor: pointer;
  color: var(--navy-texto);
}
.dinero-tarjeta:active, .dinero-fila:active { background: var(--gris-fondo); }
.dinero-tarjeta:focus-visible, .dinero-fila:focus-visible, .dinero-aviso:focus-visible,
.dinero-hero-enlace:focus-visible, .chip-disponible:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.dinero-tarjeta-icono { font-size: 22px; line-height: 1.2; }
.dinero-tarjeta-nombre { font-size: 15px; font-weight: 700; color: var(--navy-texto); }
.dinero-tarjeta-sub { font-size: 13px; line-height: 1.3; color: var(--gris-texto); font-weight: 400; }
.dinero-lista { display: flex; flex-direction: column; gap: 10px; }
.dinero-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--c-E5E7EB);
  border-radius: 16px;
  background: var(--superficie);
  text-align: left;
  cursor: pointer;
  color: var(--navy-texto);
}
.dinero-fila-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dinero-fila > span[aria-hidden] { color: var(--gris-texto); font-size: 20px; }

/* Pantalla de un solo tema: sin títulos plegables repetidos */
.pane-finanzas.en-tema > .seccion-plegable { background: none; padding: 0; margin-top: 0; }
.pane-finanzas.en-tema > .seccion-plegable > summary { display: none; }
.pane-finanzas.en-tema > .selector-mes { margin-top: 0; }

/* Subtítulos dentro de una sección de Tú */
.perfil-subtitulo { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--navy-texto); }
.perfil-seccion h3 + .perfil-subtitulo { margin-top: 0; }

/* Íconos minimalistas: contorno azul, relleno blanco */
.ico { width: 24px; height: 24px; fill: var(--superficie); stroke: var(--azul-ico); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.dinero-tarjeta-icono { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: var(--c-EFF4FF); margin-bottom: 4px; }
.dinero-fila .dinero-tarjeta-icono { margin-bottom: 0; flex: none; }
.ico-nav { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.boton-tab-icono { display: flex; }

/* =====================================================================
   Animaciones: que nada aparezca "de un salto"
   ===================================================================== */
:root { --suave: cubic-bezier(0.22, 0.61, 0.36, 1); }
:root { --dx: 0px; }
:root[data-dir="der"] { --dx: 36px; }
:root[data-dir="izq"] { --dx: -36px; }

@keyframes pantalla-entra {
  from { opacity: 0; transform: translate3d(var(--dx), 10px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes contenido-entra {
  from { opacity: 0; transform: translate3d(calc(var(--dx) * 0.5), 8px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sube-suave {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes hoja-sube {
  from { transform: translate3d(0, 40px, 0); opacity: 0.4; }
  to   { transform: none; opacity: 1; }
}
@keyframes icono-pop { 0% { transform: scale(0.8); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Cambiar de pantalla (pestañas, entrar y volver) */
.pantalla:not(.oculto) { animation: pantalla-entra 0.3s var(--suave) backwards; }
/* Cambiar de tema dentro de Mi dinero */
.hub-dinero:not(.oculto), .pane-finanzas:not(.oculto) { animation: contenido-entra 0.28s var(--suave) backwards; }
/* Las tarjetas del inicio van apareciendo en cascada */
.hub-dinero:not(.oculto) .dinero-tarjeta, .hub-dinero:not(.oculto) .dinero-fila { animation: sube-suave 0.35s var(--suave) backwards; }
.hub-dinero .dinero-tarjetas > :nth-child(2) { animation-delay: 0.04s !important; }
.hub-dinero .dinero-tarjetas > :nth-child(3) { animation-delay: 0.08s !important; }
.hub-dinero .dinero-tarjetas > :nth-child(4) { animation-delay: 0.12s !important; }

/* Ventanas (modales): al abrir, el fondo se oscurece suave y la hoja sube;
   al cerrar, hace lo mismo al revés. Para poder animar el cierre, "oculto" en
   estas ventanas no usa display:none sino opacidad + visibility (con el mismo
   resultado: no se ve, no se toca y no recibe el foco del teclado). */
.fondo-modal {
  transition: opacity 0.24s ease, visibility 0s linear 0s;
}
.fondo-modal.oculto {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.26s;
}
.hoja-modal {
  animation: none;
  transition: height 0.28s var(--suave), transform 0.32s var(--suave);
}
.fondo-modal.oculto .hoja-modal { transform: translate3d(0, 60px, 0); }

/* Mensajes nuevos del chat y avisos */
.mensaje, .tarjeta-pendiente { animation: sube-suave 0.25s var(--suave) backwards; }
.aviso-reembolso:not(.oculto), .dinero-aviso:not(.oculto) { animation: sube-suave 0.3s var(--suave) backwards; }
.panel-grabacion:not(.oculto) { animation: sube-suave 0.25s var(--suave) backwards; }

/* Barra de pestañas: la activa "salta" un poquito y el color cambia suave */
.boton-tab { transition: color 0.2s ease, border-color 0.2s ease, transform 0.12s ease; }
.boton-tab:active { transform: scale(0.94); }
.boton-tab.activo .boton-tab-icono { animation: icono-pop 0.38s var(--suave); }
.boton-tab-etiqueta { transition: color 0.2s ease; }

/* Tocar se siente: las tarjetas y botones se hunden un poquito */
.dinero-tarjeta, .dinero-fila, .atajo-chat, .dinero-aviso, .chip-disponible, .opcion-menu, .boton-enviar {
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.dinero-tarjeta:active, .dinero-fila:active, .atajo-chat:active, .chip-disponible:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .fondo-modal, .fondo-modal.oculto, .hoja-modal { transition: none !important; }
  .pantalla, .hub-dinero, .pane-finanzas, .dinero-tarjeta, .dinero-fila, .fondo-modal, .hoja-modal,
  .mensaje, .tarjeta-pendiente, .toast-deshacer, .aviso-reembolso, .dinero-aviso, .panel-grabacion,
  .boton-tab-icono { animation: none !important; }
}

@keyframes toast-sube { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast-deshacer:not(.oculto) { animation: toast-sube 0.28s var(--suave) backwards; }

/* ---- Transición de pantalla con View Transitions (si el navegador la soporta) ---- */
html.con-vt .pantalla:not(.oculto),
html.con-vt .hub-dinero:not(.oculto),
html.con-vt .pane-finanzas:not(.oculto),
html.con-vt .hub-dinero:not(.oculto) .dinero-tarjeta,
html.con-vt .hub-dinero:not(.oculto) .dinero-fila { animation: none !important; }
/* Las barras de arriba y de abajo se quedan en su sitio mientras cambia el contenido */
.pantalla:not(.oculto) > .barra-tabs { view-transition-name: barra-tabs; }
.pantalla:not(.oculto) > .barra-superior { view-transition-name: barra-superior; }
::view-transition-group(root) { animation-duration: 0.4s; animation-timing-function: var(--suave); }
::view-transition-old(root) { animation: vt-sale 0.4s var(--suave) both; }
::view-transition-new(root) { animation: vt-entra 0.4s var(--suave) both; }
::view-transition-group(barra-tabs), ::view-transition-group(barra-superior) { animation-duration: 0.4s; }
@keyframes vt-sale { 0% { opacity: 1; } 55%, 100% { opacity: 0; transform: translate3d(calc(var(--dx) * -0.5), 0, 0); } }
@keyframes vt-entra { 0% { opacity: 0; transform: translate3d(var(--dx), 0, 0); } 35% { opacity: 0; } 100% { opacity: 1; transform: none; } }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Lo que se carga después (listas, tarjetas, gráficos) aparece suave en vez de "pegarse" de golpe */
.contenido-deudas > *:not(.cargando), .contenido-fijos > *:not(.cargando), .contenido-movimientos > *:not(.cargando),
.contenido-presupuesto > *, .contenido-graficos > * { animation: sube-suave 0.35s var(--suave) backwards; }
@media (prefers-reduced-motion: reduce) {
  .contenido-deudas > *, .contenido-fijos > *, .contenido-movimientos > *, .contenido-presupuesto > *, .contenido-graficos > * { animation: none !important; }
}

/* Íconos de línea en lugar de emojis (los pone iconos.js) */
.ico-i { display: inline-flex; width: 1.2em; height: 1.2em; vertical-align: -0.2em; flex: none; }
.ico-i svg { width: 100%; height: 100%; fill: none; stroke: var(--azul-ico); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-i svg circle[stroke="none"] { stroke: none; }
.barra-superior .ico-i svg, .boton-primario .ico-i svg, .boton-enviar .ico-i svg, .opcion-menu-peligro .ico-i svg,
.toast-deshacer .ico-i svg, .icono-boton .ico-i svg, .cerrar-modal .ico-i svg, .error .ico-i svg, .boton-fijos-guardar .ico-i svg,
.hoja-modal-frase .ico-i svg, .dinero-hero .ico-i svg, .frase-dia-tarjeta .ico-i svg { stroke: currentColor; }
.cerrar-modal { display: inline-flex; align-items: center; justify-content: center; }
.cerrar-modal .ico-i { width: 16px; height: 16px; vertical-align: 0; }
.boton-enviar .ico-i, .boton-grabacion-borrar .ico-i { width: 22px; height: 22px; vertical-align: 0; }
.boton-enviar-secundario .ico-i svg { stroke: var(--azul-ico); }
.boton-enviar:not(.boton-enviar-secundario) .ico-i svg { stroke: var(--oro-claro); }
.icono-boton .ico-i { width: 20px; height: 20px; vertical-align: 0; }

.ico-i { font-style: normal; }
.seccion-plegable > summary { justify-content: flex-start; gap: 0.5em; }
.seccion-plegable > summary::after { margin-left: auto; }
.chip-contacto input:checked + span .ico-i svg, .boton-activo .ico-i svg { stroke: currentColor; }

/* ---- Centrado fino de la barra de arriba y de los botones con ícono ---- */
.barra-superior { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; }
.barra-superior > :first-child { justify-self: start; }
.barra-superior > :last-child { justify-self: end; }
.barra-superior > :only-child { grid-column: 1 / -1; justify-self: start; }
.barra-superior-titulo { justify-self: center; }
.barra-superior-acciones { align-items: center; }

.icono-boton, .boton-enviar, .cerrar-modal, .boton-mes-flecha {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
.icono-boton .ico-i, .boton-enviar .ico-i, .cerrar-modal .ico-i { margin: 0; vertical-align: 0; }

.boton-enviar:not(.boton-enviar-secundario) .ico-i svg { transform: translate(0px, 0); }

/* Flecha de volver: más grande, más gruesa y suave */
.icono-boton { width: 40px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, 0.12); color: #fff; transition: background 0.15s ease, transform 0.12s ease; }
.icono-boton:active { background: rgba(255, 255, 255, 0.22); transform: scale(0.94); }
.icono-boton .ico-i { width: 22px; height: 22px; }
.icono-boton .ico-i svg { stroke-width: 2.4; stroke: #fff; }
.enlace .ico-i svg { stroke: currentColor; }

/* =====================================================================
   Modo oscuro: sigue el del dispositivo (Automático) o lo que la persona
   elija en Tú → A mi manera (guardado en este dispositivo).
   ===================================================================== */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --gris-fondo: #0D1524;
  --superficie: #16233B;
  --navy-texto: #E6ECF7;
  --accion: #2A4B90;
  --azul-ico: #8DB1FF;
  --burbuja-usuario: #27498A;
  --c-4B5563: #A3B0C5;
  --c-111827: #EDF1F7; --c-1F2937: #E2E8F2; --c-374151: #CBD5E4; --c-475569: #AEBBD0;
  --c-F3F4F6: #1F2F4C; --c-E5E7EB: #2A3B58; --c-D1D5DB: #3A4C6B;
  --c-FEF3C7: #3A3015; --c-FFFBEB: #2E2812; --c-FFF8E1: #2E2812; --c-FCD34D: #7A6212;
  --c-78350F: #F6D58A; --c-92400E: #F3C969; --c-7A5B00: #F3D27A; --c-B45309: #F0B04A; --c-D97706: #F0A53A;
  --c-FEF2F2: #3A1A1E; --c-FEE2E2: #43202A; --c-FECACA: #7A2E36; --c-FCA5A5: #8A3A42; --c-7F1D1D: #FCA5A5;
  --c-DCFCE7: #123524; --c-0F766E: #5EEAD4; --c-EFF4FF: #1C2D4F;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --gris-fondo: #0D1524;
    --superficie: #16233B;
    --navy-texto: #E6ECF7;
    --accion: #2A4B90;
  --accion: #2A4B90;
    --azul-ico: #8DB1FF;
    --burbuja-usuario: #27498A;
    --c-4B5563: #A3B0C5;
    --c-111827: #EDF1F7; --c-1F2937: #E2E8F2; --c-374151: #CBD5E4; --c-475569: #AEBBD0;
    --c-F3F4F6: #1F2F4C; --c-E5E7EB: #2A3B58; --c-D1D5DB: #3A4C6B;
    --c-FEF3C7: #3A3015; --c-FFFBEB: #2E2812; --c-FFF8E1: #2E2812; --c-FCD34D: #7A6212;
    --c-78350F: #F6D58A; --c-92400E: #F3C969; --c-7A5B00: #F3D27A; --c-B45309: #F0B04A; --c-D97706: #F0A53A;
    --c-FEF2F2: #3A1A1E; --c-FEE2E2: #43202A; --c-FECACA: #7A2E36; --c-FCA5A5: #8A3A42; --c-7F1D1D: #FCA5A5;
    --c-DCFCE7: #123524; --c-0F766E: #5EEAD4; --c-EFF4FF: #1C2D4F;
  }
}
:where(input, textarea, select) { background-color: var(--superficie); color: var(--c-111827); }
:where(input, textarea)::placeholder { color: #9CA3AF; }

/* Selector de tema (Tú → A mi manera) */
.selector-tema { display: flex; padding: 4px; border-radius: 14px; background: var(--c-E5E7EB); margin-top: 8px; }
.selector-tema button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--gris-texto); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; }
.selector-tema button[aria-pressed="true"] { background: var(--superficie); color: var(--navy-texto); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.selector-tema-titulo { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--navy-texto); }

/* Las pantallas de entrada (sobre fondo azul con tarjeta clara) se quedan siempre en claro */
#pantalla-auth, #pantalla-google, #pantalla-aceptar-terminos, #pantalla-bloqueo {
  --superficie: #FFFFFF;
  --navy-texto: #0B1E3D;
  --accion: #0B1E3D;
  --azul-ico: #1D4ED8;
  --c-4B5563: #4B5563;
  --c-111827: #111827; --c-1F2937: #1F2937; --c-374151: #374151; --c-475569: #475569;
  --c-F3F4F6: #F3F4F6; --c-E5E7EB: #E5E7EB; --c-D1D5DB: #D1D5DB;
  --c-FEF3C7: #FEF3C7; --c-FFFBEB: #FFFBEB; --c-FFF8E1: #FFF8E1; --c-FCD34D: #FCD34D;
  --c-78350F: #78350F; --c-92400E: #92400E; --c-7A5B00: #7A5B00; --c-B45309: #B45309; --c-D97706: #D97706;
  --c-FEF2F2: #FEF2F2; --c-FEE2E2: #FEE2E2; --c-FECACA: #FECACA; --c-FCA5A5: #FCA5A5; --c-7F1D1D: #7F1D1D;
  --c-DCFCE7: #DCFCE7; --c-0F766E: #0F766E; --c-EFF4FF: #EFF4FF;
  --gris-fondo: #F4F6F5;
  --burbuja-usuario: #0B1E3D;
  color-scheme: light;
}

/* Cambio claro <-> oscuro suave: todos los colores se deslizan en 0,45 s */
html.cambiando-tema, html.cambiando-tema *, html.cambiando-tema *::before, html.cambiando-tema *::after {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease,
              fill 0.45s ease, stroke 0.45s ease, box-shadow 0.45s ease, opacity 0.45s ease !important;
}
@media (prefers-reduced-motion: reduce) { html.cambiando-tema, html.cambiando-tema * { transition: none !important; } }

/* Cambio claro <-> oscuro suave: todos los colores se deslizan en 0,45 s */
html.cambiando-tema, html.cambiando-tema *, html.cambiando-tema *::before, html.cambiando-tema *::after {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease,
              fill 0.45s ease, stroke 0.45s ease, box-shadow 0.45s ease !important;
}
@media (prefers-reduced-motion: reduce) { html.cambiando-tema, html.cambiando-tema * { transition: none !important; } }

/* =====================================================================
   Administración
   ===================================================================== */
.pantalla { height: calc(var(--alto-visible, 100dvh) - var(--alto-franja, 0px)); }

/* Franja dorada: el administrador está probando Nilo como usuario */
.franja-admin {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 6px 16px;
  background: #F3E4B0; color: #0B1E3D; font-size: 13px; font-weight: 600;
  min-height: calc(44px + env(safe-area-inset-top, 0px)); box-sizing: border-box;
}
.franja-admin button {
  min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #0B1E3D; color: #F3E4B0; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
body.admin-como-usuario { --alto-franja: calc(44px + env(safe-area-inset-top, 0px)); }
body.admin-como-usuario .barra-superior { padding-top: 14px; }

/* Cuenta de administrador en su vista de administración: nada de lo personal */
body.modo-admin .solo-usuario { display: none !important; }
body.modo-admin #pantalla-perfil > .barra-tabs { display: none; }
#boton-volver-perfil { display: none; }
#pantalla-perfil .barra-superior > .barra-superior-titulo { grid-column: 1 / -1; justify-self: start; }
body.modo-admin #boton-volver-perfil { display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start; }
body.modo-admin #pantalla-perfil .barra-superior > .barra-superior-titulo { grid-column: 2; grid-row: 1; justify-self: center; }

.contenido-admin { display: block; }
.contenido-admin > section:not(.oculto) { animation: contenido-entra 0.28s var(--suave) backwards; }
.adm-saludo { margin: 0; font-size: 22px; font-weight: 700; color: var(--navy-texto); }
.adm-sub { margin: 2px 0 14px; font-size: 14px; color: var(--gris-texto); }
.adm-titulo-grupo { margin: 18px 0 8px; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--gris-texto); font-weight: 600; }
.adm-grupo { display: flex; flex-direction: column; border-radius: 16px; background: var(--superficie); border: 1px solid var(--c-E5E7EB); overflow: hidden; }
.adm-fila {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px;
  border: 0; border-bottom: 1px solid var(--c-F3F4F6); background: var(--superficie);
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--c-111827); text-align: left; cursor: pointer;
  justify-content: space-between;
}
.adm-fila:last-child { border-bottom: 0; }
.adm-fila:active { background: var(--gris-fondo); }
.adm-fila-peligro { color: var(--rojo-error); }
.adm-fila-sin-flecha { cursor: default; }
.adm-fila-tema { flex-direction: column; align-items: stretch; padding: 12px 16px; gap: 8px; cursor: default; }
.adm-fila-tema:active { background: var(--superficie); }
.adm-flecha { width: 18px; height: 18px; fill: none; stroke: var(--c-D1D5DB); flex: none; }
.adm-fila-icono { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.adm-fila-icono .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.adm-fila-texto { flex: 1; min-width: 0; }
.adm-ic-amarillo { background: var(--c-FEF3C7); color: var(--c-92400E); }
.adm-ic-azul { background: var(--c-EFF4FF); color: var(--azul-ico); }
.adm-ic-rojo { background: var(--c-FEE2E2); color: var(--c-7F1D1D); }
.adm-badge { min-width: 28px; text-align: center; padding: 3px 9px; border-radius: 999px; background: var(--c-E5E7EB); color: var(--c-374151); font-size: 13px; font-weight: 700; }
.adm-badge.alto { background: #D97706; color: #fff; }
.adm-badge.azul { background: #1D4ED8; color: #fff; }

.adm-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.adm-dato { padding: 14px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--c-E5E7EB); }
.adm-dato-et { font-size: 12px; color: var(--gris-texto); }
.adm-dato-num { font-size: 24px; font-weight: 700; color: var(--navy-texto); margin: 2px 0; overflow-wrap: anywhere; }
.adm-dato-pie { font-size: 12px; color: var(--gris-texto); }
.adm-dato-pie.ok { color: var(--verde-ok); }
.adm-reciente { display: flex; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--c-F3F4F6); font-size: 14px; }
.adm-reciente:last-child { border-bottom: 0; }
.adm-reciente span:last-child { color: var(--gris-texto); flex: none; }

.adm-buscar { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--c-D1D5DB); margin-bottom: 12px; }
.adm-buscar .ico { width: 18px; height: 18px; fill: none; flex: none; }
.adm-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; font-family: inherit; color: var(--c-111827); }
.adm-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.adm-filtros button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--c-D1D5DB); background: var(--superficie); color: var(--c-374151); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; }
.adm-filtros button.activo { background: var(--accion); border-color: var(--accion); color: #fff; font-weight: 700; }
.adm-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accion); color: #F3E4B0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.adm-avatar.grande { width: 52px; height: 52px; font-size: 18px; }
.adm-usuario { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--c-F3F4F6); background: var(--superficie); text-align: left; cursor: pointer; font-family: inherit; color: var(--c-111827); }
.adm-usuario:last-child { border-bottom: 0; }
.adm-usuario:active { background: var(--gris-fondo); }
.adm-usuario-info { flex: 1; min-width: 0; }
.adm-usuario-nombre { display: block; font-size: 15px; font-weight: 600; }
.adm-usuario-correo { display: block; font-size: 12px; color: var(--gris-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-estado { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.adm-est-prueba { background: var(--c-FEF3C7); color: var(--c-92400E); }
.adm-est-revision { background: var(--c-FEE2E2); color: var(--c-7F1D1D); }
.adm-est-activo { background: var(--c-DCFCE7); color: var(--verde-ok); }
.adm-est-vencido { background: var(--c-E5E7EB); color: var(--c-374151); }
.adm-vacio { padding: 24px 8px; text-align: center; color: var(--gris-texto); font-size: 14px; }

.adm-tarjeta { padding: 16px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--c-E5E7EB); margin-bottom: 14px; }
.adm-persona { display: flex; align-items: center; gap: 12px; }
.adm-persona strong { display: block; font-size: 17px; }
.adm-persona div span { display: block; font-size: 13px; color: var(--gris-texto); }
.adm-linea { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-top: 10px; }
.adm-linea span:first-child { color: var(--gris-texto); }
.adm-linea span:last-child { font-weight: 600; text-align: right; }
.adm-tarjeta-cab { display: flex; align-items: center; justify-content: space-between; }
.adm-tarjeta-cab span:first-child { font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--gris-texto); font-weight: 600; }
.adm-boton-oscuro, .adm-boton-claro { min-height: 46px; width: 100%; border-radius: 12px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; margin-top: 12px; }
.adm-boton-oscuro { border: 0; background: var(--accion); color: #fff; }
.adm-boton-claro { border: 1px solid var(--c-D1D5DB); background: var(--superficie); color: var(--navy-texto); }
.adm-vista-card { padding: 16px; border-radius: 16px; background: #F3E4B0; color: #0B1E3D; }
.adm-vista-card p { margin: 0 0 4px; font-size: 14px; line-height: 1.35; }
.adm-vista-card .adm-vista-titulo { font-size: 13px; letter-spacing: .6px; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
.adm-vista-card .adm-boton-oscuro { background: #0B1E3D; color: #F3E4B0; }
.adm-dias { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 16px 14px; background: var(--superficie); }
.adm-dias button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--c-D1D5DB); background: var(--superficie); color: var(--navy-texto); font-weight: 700; font-family: inherit; cursor: pointer; }
.adm-mensaje { margin: 10px 0 0; font-size: 13px; color: var(--c-0F766E); }
.adm-mensaje.error { color: var(--rojo-error); }
.adm-nota { margin: 14px 0 0; font-size: 12px; line-height: 1.4; color: var(--gris-texto); }

.adm-barra { height: 10px; border-radius: 999px; background: var(--c-E5E7EB); overflow: hidden; margin-top: 12px; }
.adm-barra > div { height: 100%; background: var(--azul-ico); border-radius: 999px; }
.adm-barra.alerta > div { background: #D97706; }
.adm-barras { display: flex; align-items: flex-end; gap: 6px; height: 110px; margin-top: 12px; }
.adm-barras div { flex: 1; min-height: 2px; background: var(--c-D1D5DB); border-radius: 4px 4px 0 0; }
.adm-barras div.hoy { background: var(--azul-ico); }
.adm-pie-barras { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--gris-texto); }

/* ----- Negocio (administración): dinero e IA ----- */
.adm-neg { color: var(--rojo-error) !important; }
.adm-segmento { margin-bottom: 14px; }
.adm-reciente small { display: block; font-size: 12px; color: var(--gris-texto); font-weight: 400; margin-top: 2px; }
.adm-reciente > span:last-child { text-align: right; }
.adm-mes-fila small { margin-top: 2px; }
.adm-quitar { border: 0; background: transparent; color: var(--gris-texto); font-size: 12px; font-family: inherit; text-decoration: underline; cursor: pointer; padding: 4px 0 4px 8px; }
.adm-quitar.peligro { color: var(--rojo-error); font-weight: 700; text-decoration: none; }
.adm-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--c-E5E7EB); }
.adm-form.oculto { display: none; }
.adm-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gris-texto); }
.adm-form input[type="text"], .adm-form input[type="date"], .adm-form-linea input { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--c-D1D5DB); background: var(--superficie); color: var(--c-111827); font-size: 15px; font-family: inherit; }
.adm-form .adm-check { flex-direction: row; align-items: center; gap: 8px; color: var(--c-374151); font-size: 14px; }
.adm-form-titulo { margin: 0; font-weight: 700; font-size: 15px; color: var(--navy-texto); }
.adm-form-linea { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--gris-texto); }
.adm-form-linea label { display: flex; align-items: center; gap: 8px; flex: 1; }
.adm-form-linea input { width: 84px; min-height: 40px; }
.adm-form-linea .adm-boton-claro { width: auto; min-height: 40px; margin: 0; padding: 0 14px; }
.adm-dos-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-dos-botones .adm-boton-oscuro, .adm-dos-botones .adm-boton-claro { margin-top: 0; }
.adm-nota { margin: 14px 0 6px; font-size: 12px; line-height: 1.4; color: var(--gris-texto); }
.adm-tarjeta-alerta { border-color: #D97706 !important; background: var(--c-FEF3C7) !important; }
.adm-tarjeta-alerta .adm-dato-et, .adm-tarjeta-alerta .adm-dato-pie { color: var(--c-92400E); }
.adm-alerta { display: block; width: 100%; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid #D97706; background: var(--c-FEF3C7); color: var(--c-92400E); font-size: 14px; font-weight: 600; text-align: left; font-family: inherit; cursor: pointer; }
.adm-dato-boton { width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.adm-dato-boton:active { background: var(--gris-fondo); }
.adm-ajustar { align-items: center; }
.adm-ajustar input { width: 92px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--c-D1D5DB); background: var(--superficie); color: var(--c-111827); font-size: 15px; font-family: inherit; }