/**
 * custom.css — Consignaciones Córdoba S.A.
 *
 * Todo el sitio corre sobre Bootstrap 5 (CDN, sin build step: ver
 * includes/head-meta.php). Este archivo tiene DOS partes:
 *
 *   1) TEMA: variables CSS de Bootstrap redefinidas con los colores de
 *      marca. Es el único lugar donde vive un color institucional —
 *      para cambiar el azul primario, por ejemplo, se cambia una sola
 *      línea acá y se actualiza en todo el sitio (botones, links,
 *      fondos, texto). El resto del CSS de Bootstrap no se toca.
 *
 *   2) EXTRAS: un puñado de clases propias para los pocos casos que
 *      Bootstrap no cubre de fábrica (los "contenedores" de color estilo
 *      Material que traía el diseño original). Son clases cortas,
 *      documentadas, pensadas para no crecer mucho con el tiempo. Si en
 *      algún momento se necesita un color nuevo que no está acá, mejor
 *      preguntarse primero si una clase estándar de Bootstrap
 *      (bg-primary, text-body-secondary, bg-light, etc.) ya lo resuelve.
 *
 * Clases de Bootstrap que ya cubren la mayoría del sitio (referencia
 * rápida — no hace falta memorizar nada más que esto):
 *   Botones:    btn btn-primary | btn btn-outline-primary | btn btn-secondary
 *   Tarjetas:   card, card-body, card-header, shadow-sm
 *   Grilla:     container, row, col / col-md-6, g-3 (gap)
 *   Texto:      fw-bold, fw-semibold, text-body-secondary, small
 *   Espaciado:  m-N / p-N / gap-N (escala N: 1=4px, 2=8px, 3=16px, 4=24px, 5=48px)
 *   Badges:     badge bg-primary / bg-secondary / bg-danger
 */

/* ==========================================================
   1) TEMA — variables de Bootstrap con la paleta institucional
   ========================================================== */
:root{
  --bs-primary: #00284e;
  --bs-primary-rgb: 0,40,78;
  --bs-secondary: #346288;
  --bs-secondary-rgb: 52,98,136;
  --bs-danger: #ba1a1a;
  --bs-danger-rgb: 186,26,26;

  --bs-body-bg: #faf9fd;
  --bs-body-color: #1a1c1e;
  --bs-secondary-color: #43474e;      /* usado por .text-body-secondary */
  --bs-border-color: #c3c6cf;
  --bs-border-radius: .375rem;
  --bs-border-radius-lg: .5rem;
  --bs-border-radius-xl: .75rem;
  --bs-border-radius-pill: 50rem;
  --bs-font-sans-serif: "Montserrat", sans-serif;
  --bs-link-color: #00284e;
  --bs-link-hover-color: #346288;

  /* Alto del header fijo y de la sub-nav, usados por las clases de
     layout más abajo. Si el logo cambia de tamaño y el header crece o
     achica, se ajusta acá y se propaga solo. */
  --header-h: 64px;
  --subnav-h: 30px;
}

body{
  font-family: "Montserrat", sans-serif;
}

/* ==========================================================
   1b) Componentes que Bootstrap NO recalcula solos
   ==========================================================
   Ojo con esto: la mayoría de las clases de Bootstrap (bg-primary,
   text-primary, border-primary...) SÍ leen las variables de arriba
   en vivo. Pero un puñado de componentes (los botones .btn-*, y el
   anillo de foco de los inputs) traen su color de fábrica "pegado"
   en variables propias (--bs-btn-bg, etc.) que NO están enganchadas
   a --bs-primary por decisión de diseño de Bootstrap. Por eso, si
   solo cambiás --bs-primary más arriba, los botones se quedan con el
   azul de Bootstrap por defecto (#0d6efd).
   La solución: enganchar acá esas variables propias a las nuestras,
   una sola vez. Después de esto, cambiar el color en el bloque
   :root de arriba sí actualiza los botones y los inputs también. */
.btn-primary{
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary{
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-secondary{
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}
.btn-outline-secondary{
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

/* Anillo de foco de inputs y selects: mismo motivo, viene con el
   azul de Bootstrap pegado en vez de leer --bs-primary. */
.form-control:focus,
.form-select:focus{
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* ==========================================================
   2) EXTRAS — layout fijo (header / sub-nav / nav inferior)
   ========================================================== */
.app-header{
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1030;
  height: var(--header-h);
  display: flex; align-items: center;
}
.app-header--autohide{ transition: transform .3s ease; }
.app-subnav{
  position: fixed; top: var(--header-h); left: 0; width: 100%; z-index: 1020;
  /*min-height: var(--subnav-h);*/
  height:35px;
  background: #fff;
}
/* !important a propósito: estas clases de offset conviven en el mismo
   elemento con utilidades de espaciado de Bootstrap (pb-5, py-4, etc.),
   que también son !important — sin esto, cualquier combinación futura
   con una utilidad de Bootstrap en el mismo padding gana "por accidente"
   y el header/nav fijos vuelven a tapar contenido. */
.pt-header{ padding-top: calc(var(--header-h) + 1rem) !important; }
.pt-header-subnav{ padding-top: calc(var(--header-h) + var(--subnav-h) + 1rem) !important; }

/* Para secciones con id que se linkean desde tabs de la sub-nav
   (scroll-spy en main.js): evita que el header/sub-nav fijos las tapen
   al hacer scroll o click en un tab. */
.scroll-anchor{ scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + .75rem); }

.app-bottom-nav{
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom);
}
.pb-bottom-nav{ padding-bottom: calc(5rem + env(safe-area-inset-bottom)) !important; }
@media (min-width: 768px){ .pb-bottom-nav{ padding-bottom: 1rem !important; } }

.no-scrollbar{ -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar{ display: none; }

/* ==========================================================
   Iconos Material Symbols
   ========================================================== */
.material-symbols-outlined{
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
  line-height: 1;
}
.material-symbols-outlined[data-weight="fill"]{ font-variation-settings: "FILL" 1; }

/* ==========================================================
   Colores "contenedor" del diseño original sin equivalente
   directo en Bootstrap. Un solo lugar para tocarlos si cambia
   la marca.
   ========================================================== */
.bg-surface-container{ background-color: #eeedf1; }
.bg-surface-container-low{ background-color: #f4f3f7; }
.bg-surface-container-high{ background-color: #e8e8eb; }
.bg-surface-container-highest{ background-color: #e3e2e6; }

.bg-primary-container{ background-color: #1e3e65; }
.text-on-primary-container{ color: #8caad7; }

.bg-secondary-container{ background-color: #a7d3ff; }
.text-on-secondary-container{ color: #2d5b81; }

.bg-error-container{ background-color: #ffdad6; }
.text-on-error-container{ color: #93000a; }

.text-outline{ color: #74777f; }
.bg-outline{ background-color: #74777f; }
.border-outline{ border-color: #74777f !important; }

/* ==========================================================
   Componente "chip": filtros y badges tipo pastilla. Un único
   componente reutilizado en cuenta-corriente (filtros) y en
   mis-remates (filtro de fecha) — antes eran clases Tailwind
   distintas copiadas y pegadas en cada botón.
   ========================================================== */
.chip{
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem 1rem; border: 0; border-radius: var(--bs-border-radius-pill);
  font-size: .8125rem; font-weight: 600; white-space: nowrap;
  background-color: #e8e8eb; color: #43474e;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.chip:active{ transform: scale(.96); }
.chip.active{ background-color: #a7d3ff; color: #2d5b81; }

.select-chip{
  border: 0; border-radius: var(--bs-border-radius-pill);
  background-color: #a7d3ff; color: #2d5b81; font-weight: 600; font-size: .8125rem;
}

/* ==========================================================
   Tarjetas con hover sutil (listados de remates, ayuda, etc.)
   ========================================================== */
.card-hover{ transition: box-shadow .15s ease; }
.card-hover:hover{ box-shadow: 0 .25rem .75rem rgba(0,0,0,.08); }

/* Ícono circular de contacto (Ayuda) */
.icon-badge{
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-badge-brand{ background-color: rgba(167,211,255,.3); color: #2d5b81; }
.icon-badge-whatsapp{ background-color: rgba(37,211,102,.1); color: #25D366; }

/* Punto pulsante del badge "EN ESTE MOMENTO" */
.pulse-dot{
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Overlay de "play" sobre la miniatura del remate en vivo */
.video-trigger{ cursor: pointer; }
.video-trigger .play-icon{ transition: transform .15s ease; }
.video-trigger:hover .play-icon{ transform: scale(1.1); }

/* FAQ (Ayuda): <details> nativo sin marcador default + flecha animada */
.faq-item > summary{ list-style: none; cursor: pointer; }
.faq-item > summary::-webkit-details-marker{ display: none; }
.faq-item .faq-caret{ transition: transform .2s ease; }
.faq-item[open] .faq-caret{ transform: rotate(180deg); }
.faq-item[open] > summary{ color: var(--bs-primary); }

/* Modal de video (mis-remates) */
#video-modal{ background: rgba(0,0,0,.8); }

.overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(10, 10, 10, 0.5);
      z-index: 200000;
      text-align:center;
      align-items: center;
    }
    
    
/* ==========================================================
   Tabla de movimientos (cuenta corriente): header fijo dentro
   del scroll horizontal y numeros tabulares para que las
   columnas de importe/saldo alineen entre filas.
   ========================================================== */
.cuenta-corriente-tabla thead th{
  background-color: #f4f3f7;
  color: var(--bs-primary);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  border-bottom-width: 2px;
}
.cuenta-corriente-tabla td,
.cuenta-corriente-tabla th{
  padding: .75rem 1rem;
}
.cuenta-corriente-tabla td{ font-variant-numeric: tabular-nums; }