:root {
    --pr-primary: #1250c4;
    --pr-primary-dark: #0b3c96;
    --pr-accent: #22c55e;
    --pr-surface: #f6f7f9;
    --pr-border: #e3e6ea;
}

body {
    background: var(--pr-surface);
    font-size: 0.95rem;
}

.navbar.bg-dark {
    background: var(--pr-primary-dark) !important;
}

/* El icono de marca ya trae su propio fondo azul y esquinas redondeadas. */
.brand-mark {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .45rem;
    vertical-align: -.35rem;
}

/* El PNG ya trae las esquinas transparentes, asi que no hace falta
   recortarlo con border-radius ni taparlo con una caja blanca. */
.login-logo {
    width: 7.5rem;
    height: 7.5rem;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .28));
}

.btn-primary {
    background-color: var(--pr-primary);
    border-color: var(--pr-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--pr-primary-dark);
    border-color: var(--pr-primary-dark);
}

.text-primary { color: var(--pr-primary) !important; }

/* ------------------------------------------------------------- login */

/* Azul de noche: mas oscuro que el de la marca para que el logo y el boton
   verde sean lo unico que brilla en la pantalla. */
.login-body {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background: #04143d;
}

/* Centrado con margin auto y no con align-items: center.
   Con align-items, un formulario mas alto que la ventana -el registro en una
   pantalla baja- se desborda por arriba y esa parte no se alcanza ni
   desplazandose. Con margin auto se centra igual cuando cabe y se puede bajar
   cuando no. */
.login-wrap,
.login-wrap-ancho {
    margin: auto;
}

/* ==============================================================
   Fondo animado.

   Figuras geometricas con el contorno a la vista -aros, cuadrados
   girados, un triangulo- en vez de manchas desenfocadas: un borde
   definido deja ver que se mueve, una mancha difusa no.

   Todo se anima con transform, que resuelve la tarjeta grafica sin
   repintar nada. La capa va fija y recorta lo que se sale; recortar
   con overflow en el body cortaba la propagacion de su fondo al
   lienzo y dejaba una franja blanca arriba.
   ============================================================== */

.login-fondo {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.login-fondo span {
    position: absolute;
    display: block;
    will-change: transform;
}

/* Los dos halos de color siguen abajo del todo: sin ellos el azul plano
   se nota muerto y las figuras quedan flotando sobre nada. */
.login-fondo .halo {
    border-radius: 50%;
    filter: blur(90px);
}

.login-fondo .halo-azul {
    width: 42rem;
    height: 42rem;
    top: -14rem;
    left: -10rem;
    background: radial-gradient(circle, rgba(29, 95, 216, .9), transparent 70%);
    animation: pr-vagar 19s ease-in-out infinite alternate;
}

.login-fondo .halo-verde {
    width: 34rem;
    height: 34rem;
    right: -10rem;
    bottom: -12rem;
    background: radial-gradient(circle, rgba(34, 197, 94, .38), transparent 70%);
    animation: pr-vagar-inverso 23s ease-in-out infinite alternate;
}

/* Aros: circulos sin relleno. Son los que mas se ven moverse porque el
   borde cruza el fondo entero. */
.login-fondo .aro {
    border-radius: 50%;
    border: 2px solid rgba(147, 190, 255, .22);
}

.login-fondo .aro-1 {
    width: 26rem;
    height: 26rem;
    top: 8%;
    right: 4%;
    animation: pr-orbita 17s linear infinite;
}

.login-fondo .aro-2 {
    width: 15rem;
    height: 15rem;
    bottom: 10%;
    left: 8%;
    border-color: rgba(34, 197, 94, .3);
    animation: pr-orbita-inversa 13s linear infinite;
}

/* Cuadrados de esquinas redondeadas, girados sobre si mismos. */
.login-fondo .cuadro {
    border-radius: 2.5rem;
    border: 2px solid rgba(147, 190, 255, .2);
}

.login-fondo .cuadro-1 {
    width: 20rem;
    height: 20rem;
    top: 46%;
    left: -6rem;
    animation: pr-girar 21s linear infinite;
}

.login-fondo .cuadro-2 {
    width: 13rem;
    height: 13rem;
    top: -3rem;
    left: 34%;
    background: rgba(29, 95, 216, .16);
    border-color: transparent;
    animation: pr-girar-inverso 16s linear infinite;
}

/* Triangulo recortado: rompe la repeticion de curvas y angulos rectos. */
.login-fondo .triangulo {
    width: 17rem;
    height: 15rem;
    right: 12%;
    bottom: -3rem;
    background: rgba(34, 197, 94, .14);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    animation: pr-balanceo 15s ease-in-out infinite alternate;
}

@keyframes pr-vagar {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(14rem, 9rem, 0) scale(1.25); }
}

@keyframes pr-vagar-inverso {
    from { transform: translate3d(0, 0, 0) scale(1.2); }
    to   { transform: translate3d(-13rem, -10rem, 0) scale(1); }
}

/* Una vuelta completa lenta mas un vaiven: el giro por si solo no se nota
   en un circulo, el desplazamiento si. */
@keyframes pr-orbita {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(-7rem, 6rem, 0) rotate(180deg); }
    to   { transform: translate3d(0, 0, 0) rotate(360deg); }
}

@keyframes pr-orbita-inversa {
    from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(6rem, -5rem, 0) rotate(-180deg) scale(1.3); }
    to   { transform: translate3d(0, 0, 0) rotate(-360deg) scale(1); }
}

@keyframes pr-girar {
    from { transform: rotate(0deg) translate3d(0, 0, 0); }
    50%  { transform: rotate(180deg) translate3d(4rem, -5rem, 0); }
    to   { transform: rotate(360deg) translate3d(0, 0, 0); }
}

@keyframes pr-girar-inverso {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@keyframes pr-balanceo {
    from { transform: translate3d(0, 0, 0) rotate(-12deg); }
    to   { transform: translate3d(-8rem, -4rem, 0) rotate(14deg); }
}

/* Quien pide menos animacion en el sistema se queda con el fondo quieto,
   pero con las figuras donde estan: el aspecto no cambia, solo se detiene. */
@media (prefers-reduced-motion: reduce) {
    .login-fondo span {
        animation: none;
    }
}

/* En un telefono las mismas figuras ocupan casi todo el ancho y sus bordes
   pasan por detras de los campos. Se bajan un punto para que sigan viendose
   sin competir con lo que hay que leer. */
@media (max-width: 575.98px) {
    .login-fondo .aro,
    .login-fondo .cuadro {
        opacity: .65;
    }
}

.login-wrap {
    position: relative;   /* por encima del fondo animado */
    z-index: 1;
    width: min(400px, 92vw);
}

/* El registro pide cinco datos en vez de dos: con el ancho del acceso queda
   una columna estrecha y larguisima. */
.login-wrap-ancho {
    width: min(460px, 92vw);
    padding: 2.5rem 0;
}

.login-titulo {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 600;
    margin: 1rem 0 .35rem;
}

.login-logo-chico {
    width: 5.5rem;
    height: 5.5rem;
}

.login-ayuda {
    color: #9fb3d9;
    font-size: .78rem;
    margin: .35rem 0 0 .25rem;
}

.login-pie {
    color: #c7d8fa;
    font-size: .85rem;
    text-align: center;
    margin: 1.4rem 0 0;
}

.login-pie a {
    color: #fff;
    font-weight: 600;
}

/* Puente del acceso al registro. Va discreto: quien llega a esa pantalla
   normalmente viene a entrar, no a abrir un negocio. */
.login-invitacion {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: #9fb3d9;
    font-size: .85rem;
    text-align: center;
}

.login-invitacion a {
    color: #fff;
    font-weight: 600;
}

.login-tagline {
    color: #c7d8fa;
    font-size: .9rem;
    margin: .9rem 0 2.2rem;
}

/* El formulario va directamente sobre el azul, sin tarjeta blanca detras.
   Los campos se dibujan como huecos translucidos: se ve donde escribir sin
   partir la pantalla en dos ni repetir el degradado dentro de un recuadro.
   Es el mismo tratamiento que la pantalla de acceso de la app. */

.login-label {
    display: block;
    color: #c7d8fa;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .45rem .25rem;
}

.login-field {
    width: 100%;
    height: 3.25rem;
    padding: 0 1rem;
    color: #fff;
    font-size: 1rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: .75rem;
}

.login-field::placeholder {
    color: rgba(255, 255, 255, .55);
}

.login-field:focus {
    outline: none;
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .7);
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .14);
}

/* Chrome pinta el autocompletado con un fondo blanco fijo que no se puede
   cambiar: se tapa con una sombra interior del color del campo. */
.login-field:-webkit-autofill,
.login-field:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 100rem #143567 inset;
    caret-color: #fff;
}

/* La casilla y su texto forman un solo blanco de pulsacion: el <label> envuelve
   a los dos, asi que se marca tocando cualquier parte. */
.login-recordarme {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .25rem 0 0 .25rem;
    color: #c7d8fa;
    font-size: .85rem;
    cursor: pointer;
    user-select: none;
}

.login-recordarme input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--pr-accent);
    cursor: pointer;
}

.login-submit {
    position: relative;
    width: 100%;
    height: 3.25rem;
    margin-top: 1.6rem;
    color: #fff;
    font-weight: 600;
    background: var(--pr-accent);
    border: none;
    border-radius: .75rem;
}

.login-submit:hover,
.login-submit:focus {
    background: #16a34a;
    color: #fff;
}

/* Mientras se comprueban las credenciales el boton se queda en su sitio y
   cambia el texto por un giro: no se encoge ni desaparece, asi que la
   pantalla no da un salto. Deshabilitado ademas evita el doble envio, que
   con un servidor lento es facil de provocar. */
.login-submit.cargando {
    color: transparent;
    background: #16a34a;
    cursor: default;
}

.login-submit.cargando::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.35rem;
    height: 1.35rem;
    margin: -.675rem 0 0 -.675rem;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pr-girando .7s linear infinite;
}

@keyframes pr-girando {
    to { transform: rotate(360deg); }
}

/* Con menos animacion se queda un aro quieto: sigue diciendo "espera" sin
   que nada gire. */
@media (prefers-reduced-motion: reduce) {
    .login-submit.cargando::after {
        animation: none;
    }
}

/* El aviso de error tambien se queda en la gama del fondo. */
.login-error {
    color: #ffd7d7;
    background: rgba(220, 38, 38, .28);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: .65rem;
    padding: .6rem .9rem;
    font-size: .85rem;
    margin-bottom: 1.2rem;
}

.login-invalid {
    display: block;
    color: #ffd7d7;
    font-size: .8rem;
    margin: .35rem 0 0 .25rem;
}

/* ------------------------------------------------------- tarjetas KPI */

.card {
    border: 1px solid var(--pr-border);
    border-radius: .75rem;
}

.kpi-card .kpi-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
}

.kpi-card .kpi-value {
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.2;
}

.kpi-card .kpi-hint {
    font-size: .8rem;
    color: #6b7280;
}

/* ------------------------------------------------------------ tablas */

.table {
    background: #fff;
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: .6rem .75rem;
}

.table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    border-bottom-width: 1px;
    white-space: nowrap;
}

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

/* ------------------------------------------------------------ estados */

.badge-status { font-weight: 500; }
.st-Active, .st-AlDia { background: #d8f3e3; color: #10633f; }
.st-Overdue, .st-Atrasado { background: #fdeacc; color: #8a5200; }
.st-Moroso, .st-WrittenOff, .st-Legal { background: #fbdcdc; color: #8f1d1d; }
.st-PaidOff, .st-Pagado { background: #dee7fb; color: #1d3f8f; }
.st-Refinanced, .st-Refinanciado { background: #ece0fb; color: #55308f; }
.st-Pending, .st-Draft { background: #eceff3; color: #495057; }

/* ------------------------------------------------------------- recibo */

.receipt-paper {
    font-family: "Consolas", "Courier New", monospace;
    font-size: .82rem;
    line-height: 1.35;
    white-space: pre;
    background: #fff;
    border: 1px dashed #b9bfc7;
    border-radius: .5rem;
    padding: 1rem;
    overflow-x: auto;
    max-width: 34ch;
}

/* --------------------------------------------------------------- buro */

.bureau-score {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
}

.bureau-band {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .8rem;
}

.band-A, .band-B { background: #d8f3e3; color: #10633f; }
.band-C { background: #fdf4d3; color: #7a5b00; }
.band-D, .band-E { background: #fdeacc; color: #8a5200; }
.band-F { background: #fbdcdc; color: #8f1d1d; }

.table-responsive { border-radius: .75rem; overflow: hidden; border: 1px solid var(--pr-border); }

/* ------------------------------------------------- Select2 (tema Prestame) */
/* Select2 trae su propio look; estas reglas lo alinean con los controles de
   Bootstrap 5 para que no desentone junto a los demas campos del formulario. */

.select2-container--bootstrap-prestame .select2-selection {
    min-height: calc(1.5em + .75rem + 2px);
    border: 1px solid #ced4da;
    border-radius: .375rem;
    background-color: #fff;
}

/* Los tres hijos del control -aspa, valor y flecha- se colocan en una fila.
   Select2 los ordena con reglas que cuelgan de .select2-container--default, y este
   tema no es ese: sin nada que los situe caian uno debajo de otro, con el aspa
   encima del valor. En fila y con el orden explicito quedan donde se esperan. */
.select2-container--bootstrap-prestame .select2-selection--single {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    height: auto;
}

.select2-container--bootstrap-prestame .select2-selection__rendered {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;          /* sin esto un valor largo estira el control */
    padding: 0;
    line-height: 1.5;
    color: #212529;
}

.select2-container--bootstrap-prestame .select2-selection__placeholder {
    color: #8a8f98;
}

.select2-container--bootstrap-prestame .select2-selection__arrow {
    order: 3;
    flex: 0 0 auto;
    position: static;      /* va en la fila, no flotando sobre ella */
    height: auto;
    margin-left: .35rem;
}

/* El triangulito lo dibuja Select2 con bordes, tambien bajo
   .select2-container--default: en este tema el elemento existia pero salia sin
   bordes, es decir, un desplegable sin ninguna senal de serlo. */
.select2-container--bootstrap-prestame .select2-selection__arrow b {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: #6c757d transparent transparent transparent;
}

.select2-container--bootstrap-prestame.select2-container--open .select2-selection__arrow b {
    border-width: 0 4px 5px 4px;
    border-color: transparent transparent #6c757d transparent;
}

.select2-container--bootstrap-prestame.select2-container--open .select2-selection,
.select2-container--bootstrap-prestame.select2-container--focus .select2-selection {
    border-color: var(--pr-primary);
    box-shadow: 0 0 0 .2rem rgba(18, 80, 196, .2);
}

.select2-container--bootstrap-prestame .select2-dropdown {
    border-color: var(--pr-primary);
    border-radius: .375rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.select2-container--bootstrap-prestame .select2-search__field {
    padding: .375rem .5rem;
    border: 1px solid #ced4da;
    border-radius: .3rem;
}

.select2-container--bootstrap-prestame .select2-results__option--highlighted {
    background-color: var(--pr-primary);
    color: #fff;
}

/* El aspa de borrar: a la derecha del valor y justo antes de la flecha, en el
   mismo renglon. En el marcado va la primera de las tres, de ahi el orden. */
.select2-container--bootstrap-prestame .select2-selection__clear {
    order: 2;
    flex: 0 0 auto;
    margin: 0 0 0 .5rem;
    padding: 0;
    float: none;
    height: auto;
    line-height: 1;
    font-size: 1.15rem;
    color: #8a8f98;
    background: none;
    border: 0;
}

.select2-container--bootstrap-prestame .select2-selection__clear:hover {
    color: #b02a37;
}

/* Dentro de un modal, el desplegable debe quedar por encima del backdrop
   (1050) y del propio modal (1055) de Bootstrap. */
.select2-container--open { z-index: 1060; }
.select2-dropdown { z-index: 1060; }

/* Los enlaces a las tiendas, debajo del acceso, con las insignias
   oficiales de cada compania tal como las publican. */
.login-tiendas {
    margin-top: 1.25rem;
    text-align: center;
}

.login-tiendas-rotulo {
    display: block;
    color: #9fb3d9;
    font-size: .8rem;
    margin-bottom: .6rem;
}

.login-tiendas-fila {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.login-tienda {
    display: inline-flex;
    align-items: center;
    border-radius: .5rem;
    transition: opacity .15s ease;
}

.login-tienda:hover,
.login-tienda:focus-visible {
    opacity: .82;
}

.login-tienda img {
    display: block;
    width: auto;
}

/* La de Apple se dibuja al ras; la de Google trae su margen dentro del
   archivo. Por eso van a alturas distintas: asi los dos logotipos se ven
   del mismo tamano. */
.login-tienda-apple img { height: 40px; }
.login-tienda-google img { height: 58px; }