/* RaphaxFlow — identidad visual (docs/reglas/flow-visual-identity.md).
   Paleta cerrada: no agregar colores fuera de estas variables. */

/* ---- Tipografía: Poppins hospedada localmente (SIL OFL 1.1, ver fonts/poppins/OFL.txt) ---- */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Paleta ---- */
:root {
  --flow-primary: #243A7A;
  --flow-primary-hover: #20346E; /* primary 10 % más oscuro */
  --flow-accent: #0470B9;
  --flow-success: #1E7A4F;
  --flow-danger: #D62828;
  --flow-border: #CED4DA;
  --flow-bg: #F4F6FB;
  --flow-surface: #FFFFFF;
  --flow-text: #1F2937;

  --bs-body-font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --bs-body-color: var(--flow-text);
  --bs-body-bg: var(--flow-bg);
  --bs-border-color: var(--flow-border);
  --bs-link-color: var(--flow-primary);
  --bs-link-color-rgb: 36, 58, 122;
  --bs-link-hover-color: var(--flow-primary-hover);
  --bs-link-hover-color-rgb: 32, 52, 110;
  --bs-primary: var(--flow-primary);
  --bs-primary-rgb: 36, 58, 122;
  --bs-success: var(--flow-success);
  --bs-success-rgb: 30, 122, 79;
  --bs-danger: var(--flow-danger);
  --bs-danger-rgb: 214, 40, 40;
  --bs-info: var(--flow-accent);
  --bs-info-rgb: 4, 112, 185;
  --bs-focus-ring-color: rgba(4, 112, 185, 0.25);
}

html {
  font-size: 16px;
}

body {
  font-size: 0.9rem;
  background-color: var(--flow-bg);
  color: var(--flow-text);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .flow-titulo {
  color: var(--flow-primary);
  font-weight: 600;
}

/* ---- Navbar: fondo blanco (el logo es azul oscuro) ---- */
.navbar-flow {
  background-color: var(--flow-surface);
  border-bottom: 1px solid var(--flow-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.navbar-flow .nav-link,
.navbar-flow .dropdown-item {
  color: var(--flow-text);
}

.navbar-flow .nav-link:hover,
.navbar-flow .nav-link:focus,
.navbar-flow .nav-link.active,
.navbar-flow .dropdown-item.active,
.navbar-flow .dropdown-item:active {
  color: var(--flow-primary);
  background-color: transparent;
  font-weight: 600;
}

.navbar-flow .dropdown-item:hover {
  background-color: var(--flow-bg);
}

.flow-logo-nav {
  height: 48px;
  width: auto;
}

.flow-logo-login {
  height: 95px;
  width: auto;
}

.flow-icono {
  width: 1.25em;
  text-align: center;
}

/* ---- Botones ---- */
.btn-flow {
  --bs-btn-color: var(--flow-surface);
  --bs-btn-bg: var(--flow-primary);
  --bs-btn-border-color: var(--flow-primary);
  --bs-btn-hover-color: var(--flow-surface);
  --bs-btn-hover-bg: var(--flow-primary-hover);
  --bs-btn-hover-border-color: var(--flow-primary-hover);
  --bs-btn-active-color: var(--flow-surface);
  --bs-btn-active-bg: var(--flow-primary-hover);
  --bs-btn-active-border-color: var(--flow-primary-hover);
  --bs-btn-disabled-bg: var(--flow-primary);
  --bs-btn-disabled-border-color: var(--flow-primary);
}

.btn-flow-secundario {
  --bs-btn-color: var(--flow-accent);
  --bs-btn-border-color: var(--flow-accent);
  --bs-btn-hover-color: var(--flow-surface);
  --bs-btn-hover-bg: var(--flow-accent);
  --bs-btn-hover-border-color: var(--flow-accent);
}

.btn-link-flow {
  color: var(--flow-text);
  text-decoration: none;
}

.btn-link-flow:hover {
  color: var(--flow-primary);
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible {
  border-color: var(--flow-accent);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

/* ---- Cards ---- */
.card {
  background-color: var(--flow-surface);
  border-color: var(--flow-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.flow-vacio {
  color: var(--flow-text);
  opacity: 0.75;
}

.flow-vacio .fa-solid {
  color: var(--flow-border);
}

/* ---- Tablas: zebra con --flow-bg, importes a la derecha ---- */
.table-flow {
  --bs-table-striped-bg: var(--flow-bg);
}

.table-flow thead th {
  border-bottom-color: var(--flow-border);
  font-weight: 600;
}

.flow-importe {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- Chip de empresa (EAS / LLC), sin colores nuevos ---- */
.flow-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--flow-primary);
  border-radius: 1rem;
  color: var(--flow-primary);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---- Estados de movimientos (el estado también va escrito) ---- */
.flow-estado-pagado { background-color: var(--flow-success); color: var(--flow-surface); }
.flow-estado-parcial { background-color: var(--flow-accent); color: var(--flow-surface); }
.flow-estado-pendiente { background-color: var(--flow-border); color: var(--flow-text); }
.flow-estado-vencido { background-color: var(--flow-danger); color: var(--flow-surface); }

/* ---- Pantallas de cuenta (login, 2FA) ---- */
.flow-cuenta {
  max-width: 440px;
}

.flow-qr {
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
}

.flow-codigos {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

/* ---- Toasts ---- */
.toast-container {
  z-index: 1090;
}

.flow-toast-exito { background-color: var(--flow-success); color: var(--flow-surface); }
.flow-toast-error { background-color: var(--flow-danger); color: var(--flow-surface); }
.flow-toast-info { background-color: var(--flow-accent); color: var(--flow-surface); }