/* ==========================================================================
   Tebillegar — sistema de diseño (ver docs/DISENO.md)
   Se carga DESPUÉS de Bootstrap 5. Tokens con prefijo --tb-; ningún color
   suelto fuera de la sección 1 (salvo los SVG en data URI, que no pueden
   leer variables CSS).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tipografía local (Plus Jakarta Sans, OFL — @fontsource 5.3.0, latin)
   Verificado: los 4 pesos incluyen cifras tabulares (tnum).
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-400.503e7cbdb484.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-500.e5e6761eaecb.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-600.79e62f3332cd.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-700.5b629bd8abb4.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. Tokens (DISENO.md §2, §4, §6)
   -------------------------------------------------------------------------- */
:root {
    /* Marca */
    --tb-violeta-900: #2E1A47;
    --tb-violeta-700: #4A2D6E;
    --tb-violeta-500: #6B4A94;
    --tb-violeta-100: #ECE6F4;
    --tb-violeta-50:  #F5F3F8;
    --tb-dorado-500:  #E8A33D;
    --tb-dorado-600:  #D18E28;
    --tb-dorado-100:  #FBF0DC;

    /* Neutros */
    --tb-texto:       #241536;
    --tb-texto-suave: #625A70;
    --tb-borde:       #DDD7E6;  /* separadores y tarjetas (no cumple 3:1: no usar en controles) */
    --tb-borde-campo: #8A8199;  /* campos, selects y casillas: 3.7:1 sobre blanco */
    --tb-superficie:  #FFFFFF;

    /* Estados */
    --tb-exito:             #167B56;  /* 4.62:1 sobre --tb-exito-fondo */
    --tb-exito-fondo:       #E5F4EE;
    --tb-advertencia:       #AB4F09;  /* 4.68:1 sobre --tb-advertencia-fondo */
    --tb-advertencia-fondo: #FDEBD8;
    --tb-error:             #B42318;
    --tb-error-fondo:       #FDECEA;
    /* No está en DISENO.md: hover del botón Peligro, derivado del token de error */
    --tb-error-hover:       color-mix(in srgb, var(--tb-error) 85%, black);
    --tb-info:              #6B4A94;
    --tb-info-fondo:        #ECE6F4;

    /* Tipografía */
    --tb-fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Radios */
    --tb-radio-sm:    8px;   /* tooltips, chips */
    --tb-radio:       12px;  /* campos, selects, botones */
    --tb-radio-lg:    16px;  /* tarjetas */
    --tb-radio-xl:    20px;  /* modales, paneles inferiores */
    --tb-radio-pill:  999px; /* insignias, barra de avance */

    /* Sombras (tinte violeta) */
    --tb-sombra-tarjeta: 0 1px 2px rgba(46, 26, 71, .06), 0 4px 16px rgba(46, 26, 71, .06);
    --tb-sombra-menu:    0 8px 32px rgba(46, 26, 71, .16);

    /* Foco (§6) */
    --tb-anillo-claro:  0 0 0 3px rgba(107, 74, 148, .35);
    --tb-anillo-oscuro: 0 0 0 3px rgba(232, 163, 61, .6);

    /* Movimiento */
    --tb-transicion: 150ms ease-out;

    /* Controles */
    --tb-alto-control: 48px;
    --tb-area-tactil:  44px;

    /* ---- Personalización de Bootstrap (§9) ---- */
    --bs-body-font-family: var(--tb-fuente);
    --bs-body-color: var(--tb-texto);
    --bs-body-color-rgb: 36, 21, 54;
    --bs-body-bg: var(--tb-violeta-50);
    --bs-body-bg-rgb: 245, 243, 248;
    --bs-emphasis-color: var(--tb-texto);
    --bs-secondary-color: var(--tb-texto-suave);
    --bs-heading-color: var(--tb-texto);

    --bs-primary: var(--tb-violeta-900);
    --bs-primary-rgb: 46, 26, 71;
    --bs-primary-text-emphasis: var(--tb-violeta-900);
    --bs-primary-bg-subtle: var(--tb-violeta-100);
    --bs-primary-border-subtle: var(--tb-violeta-100);
    --bs-danger: var(--tb-error);
    --bs-danger-rgb: 180, 35, 24;
    --bs-success: var(--tb-exito);
    --bs-success-rgb: 22, 123, 86;
    --bs-warning: var(--tb-dorado-500);
    --bs-warning-rgb: 232, 163, 61;

    --bs-link-color: var(--tb-violeta-500);
    --bs-link-color-rgb: 107, 74, 148;
    --bs-link-hover-color: var(--tb-violeta-700);
    --bs-link-hover-color-rgb: 74, 45, 110;

    --bs-border-color: var(--tb-borde);
    --bs-border-radius-sm: var(--tb-radio-sm);
    --bs-border-radius: var(--tb-radio);
    --bs-border-radius-lg: var(--tb-radio-lg);
    --bs-border-radius-xl: var(--tb-radio-xl);
    --bs-border-radius-pill: var(--tb-radio-pill);

    --bs-focus-ring-color: rgba(107, 74, 148, .35);
    --bs-focus-ring-width: 3px;

    --bs-form-valid-color: var(--tb-exito);
    --bs-form-valid-border-color: var(--tb-exito);
    --bs-form-invalid-color: var(--tb-error);
    --bs-form-invalid-border-color: var(--tb-error);
}

/* --------------------------------------------------------------------------
   2. Base y tipografía (§3)
   -------------------------------------------------------------------------- */
body {
    font-family: var(--tb-fuente);
    color: var(--tb-texto);
}
a {
    color: var(--tb-violeta-500);
    transition: color var(--tb-transicion);
}
a:hover { color: var(--tb-violeta-700); }

.tb-monto-destacado { font-size: 32px; font-weight: 700; line-height: 1.1; }
.tb-titulo-1        { font-size: 26px; font-weight: 700; line-height: 1.2; }
.tb-titulo-2        { font-size: 24px; font-weight: 600; line-height: 1.25; }
.tb-titulo-3        { font-size: 20px; font-weight: 600; line-height: 1.3; }
.tb-destacado       { font-size: 18px; font-weight: 500; line-height: 1.5; }
.tb-cuerpo          { font-size: 16px; font-weight: 400; line-height: 1.5; }
.tb-pequeno         { font-size: 14px; font-weight: 400; line-height: 1.45; }
.tb-minimo          { font-size: 12px; font-weight: 500; line-height: 1.4; }
@media (min-width: 768px) {
    .tb-monto-destacado { font-size: 40px; }
    .tb-titulo-1        { font-size: 30px; }
}
.tb-titulo-1, .tb-titulo-2, .tb-titulo-3 { color: var(--tb-texto); letter-spacing: -0.01em; }
.tb-texto-suave { color: var(--tb-texto-suave); }

/* Todos los montos de dinero: cifras tabulares */
.tb-monto, .tb-monto-destacado, .tb-tnum { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   3. Foco (§6) — solo con teclado; nunca el azul de Bootstrap
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: none;
    box-shadow: var(--tb-anillo-claro);
}
.tb-fondo-oscuro :focus-visible { box-shadow: var(--tb-anillo-oscuro); }

/* --------------------------------------------------------------------------
   4. Botones (§5)
   Mapeo: .btn-primary = Principal, .btn-outline-primary = Secundario,
          .btn-link = Texto, .btn-danger = Peligro.
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-padding-x: 20px;
    --bs-btn-padding-y: 10px;
    --bs-btn-font-family: var(--tb-fuente);
    --bs-btn-font-size: 16px;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--tb-radio);
    --bs-btn-focus-box-shadow: var(--tb-anillo-claro);
    --bs-btn-disabled-opacity: .5;
    min-height: var(--tb-alto-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color var(--tb-transicion), border-color var(--tb-transicion),
                color var(--tb-transicion), box-shadow var(--tb-transicion), transform var(--tb-transicion);
}
.btn:active, .btn.is-active { transform: scale(.98); }
.btn:disabled, .btn.disabled { cursor: not-allowed; pointer-events: auto; }
.btn-sm { min-height: var(--tb-area-tactil); }

/* Principal: dorado con texto violeta 900 (nunca blanco sobre dorado) */
.btn-primary {
    --bs-btn-color: var(--tb-violeta-900);
    --bs-btn-bg: var(--tb-dorado-500);
    --bs-btn-border-color: var(--tb-dorado-500);
    --bs-btn-hover-color: var(--tb-violeta-900);
    --bs-btn-hover-bg: var(--tb-dorado-600);
    --bs-btn-hover-border-color: var(--tb-dorado-600);
    --bs-btn-active-color: var(--tb-violeta-900);
    --bs-btn-active-bg: var(--tb-dorado-600);
    --bs-btn-active-border-color: var(--tb-dorado-600);
    --bs-btn-disabled-color: var(--tb-violeta-900);
    --bs-btn-disabled-bg: var(--tb-dorado-500);
    --bs-btn-disabled-border-color: var(--tb-dorado-500);
    --bs-btn-font-weight: 700;
    /* anula el degradado y el filtro que define base.html: su regla usa el
       atajo "background", que también deja background-color transparente,
       así que hay que volver a declararlo completo */
    background: var(--bs-btn-bg);
    filter: none;
}
.btn-primary:hover, .btn-primary.is-hover,
.btn-primary:focus-visible {
    background: var(--tb-dorado-600);
    border-color: var(--tb-dorado-600);
    color: var(--tb-violeta-900);
    filter: none;
}
.btn-primary:focus:not(:focus-visible) {
    background: var(--tb-dorado-500);
    border-color: var(--tb-dorado-500);
    filter: none;
}
.btn-primary:disabled, .btn-primary.disabled {
    background: var(--tb-dorado-500);
    border-color: var(--tb-dorado-500);
}

/* Secundario: contorno violeta 900 */
.btn-outline-primary {
    --bs-btn-color: var(--tb-violeta-900);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--tb-violeta-900);
    --bs-btn-border-width: 1.5px;
    --bs-btn-hover-color: var(--tb-violeta-900);
    --bs-btn-hover-bg: var(--tb-violeta-100);
    --bs-btn-hover-border-color: var(--tb-violeta-900);
    --bs-btn-active-color: var(--tb-violeta-900);
    --bs-btn-active-bg: var(--tb-violeta-100);
    --bs-btn-active-border-color: var(--tb-violeta-900);
    --bs-btn-disabled-color: var(--tb-violeta-900);
    --bs-btn-disabled-border-color: var(--tb-violeta-900);
    background-image: none;
}
.btn-outline-primary:hover, .btn-outline-primary.is-hover {
    background: var(--tb-violeta-100);
    border-color: var(--tb-violeta-900);
    color: var(--tb-violeta-900);
}

/* Texto */
.btn-link {
    --bs-btn-color: var(--tb-violeta-500);
    --bs-btn-hover-color: var(--tb-violeta-700);
    --bs-btn-active-color: var(--tb-violeta-700);
    --bs-btn-disabled-color: var(--tb-violeta-500);
    --bs-btn-font-weight: 600;
    text-decoration: none;
}
.btn-link:hover, .btn-link.is-hover { color: var(--tb-violeta-700); text-decoration: underline; }

/* Peligro */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tb-error);
    --bs-btn-border-color: var(--tb-error);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tb-error-hover);
    --bs-btn-hover-border-color: var(--tb-error-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tb-error-hover);
    --bs-btn-active-border-color: var(--tb-error-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--tb-error);
    --bs-btn-disabled-border-color: var(--tb-error);
}
.btn-danger.is-hover { background: var(--tb-error-hover); border-color: var(--tb-error-hover); }

/* Estado de foco forzado (solo para la guía /dev/componentes/) */
.btn.is-focus, .form-control.is-focus, .form-select.is-focus, .form-check-input.is-focus {
    box-shadow: var(--tb-anillo-claro);
}

/* Cargando: lo activa static/js/tebillegar.js en formularios con data-tb-cargando */
.btn.is-cargando { cursor: progress; }
.btn .tb-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tb-girar .7s linear infinite;
    flex-shrink: 0;
}
@keyframes tb-girar { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   5. Campos de texto, fechas y selects (§5)
   -------------------------------------------------------------------------- */
.form-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--tb-texto);
    margin-bottom: 6px;
}
.form-text {
    font-size: 14px;
    color: var(--tb-texto-suave);
    margin-top: 6px;
}
.form-control,
.form-select {
    min-height: var(--tb-alto-control);
    font-family: var(--tb-fuente);
    font-size: 16px;            /* nunca menos: evita el zoom automático de iPhone */
    color: var(--tb-texto);
    background-color: var(--tb-superficie);
    border: 1px solid var(--tb-borde-campo);
    border-radius: var(--tb-radio);
    padding: 10px 14px;
    transition: border-color var(--tb-transicion), box-shadow var(--tb-transicion);
}
.form-control::placeholder { color: var(--tb-texto-suave); opacity: 1; }
.form-control:hover, .form-control.is-hover,
.form-select:hover, .form-select.is-hover {
    /* Sólido: al 50% quedaba MÁS claro que el borde en reposo (--tb-borde-campo) */
    border-color: var(--tb-violeta-500);
}
.form-control:focus, .form-control.is-focus,
.form-select:focus, .form-select.is-focus {
    border-color: var(--tb-violeta-500);
    box-shadow: var(--tb-anillo-claro);
    outline: none;
}
.form-control:disabled, .form-select:disabled {
    background-color: var(--tb-violeta-50);
    color: var(--tb-texto-suave);
    cursor: not-allowed;
}
.form-control-sm, .form-select-sm { font-size: 16px; }

/* Error: borde + mensaje con ícono (el color nunca es la única señal) */
.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--tb-error);
    background-image: none;
    padding-right: 14px;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
    border-color: var(--tb-error);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .25);
}
.invalid-feedback {
    font-size: 14px;
    color: var(--tb-error);
    margin-top: 6px;
    align-items: flex-start;
    gap: 6px;
}
.is-invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-feedback,
.invalid-feedback.d-flex { display: flex; }
.invalid-feedback::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B42318'%3e%3cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm0 3.25a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0V5A.75.75 0 0 1 8 4.25ZM8 11.75a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3e%3c/svg%3e") no-repeat center / contain;
}

/* Grupos con adorno ($ a la izquierda, ojo de contraseña) */
.input-group > .form-control,
.input-group > .form-select { min-height: var(--tb-alto-control); }
.input-group-text {
    min-height: var(--tb-alto-control);
    background-color: var(--tb-superficie);
    border: 1px solid var(--tb-borde-campo);
    border-radius: var(--tb-radio);
    color: var(--tb-texto-suave);
    font-size: 16px;
}
.input-group .btn-tb-adorno {
    min-width: var(--tb-alto-control);
    border: 1px solid var(--tb-borde-campo);
    background-color: var(--tb-superficie);
    color: var(--tb-texto-suave);
    padding: 0 14px;
}
.input-group .btn-tb-adorno:hover { color: var(--tb-texto); background-color: var(--tb-violeta-50); }
.input-group:focus-within > .form-control,
.input-group:focus-within > .input-group-text,
.input-group:focus-within > .btn-tb-adorno { border-color: var(--tb-violeta-500); }

/* Campo de dinero: el $ fijo dentro del campo */
.tb-campo-dinero { position: relative; }
.tb-campo-dinero::before {
    content: "$";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tb-texto-suave);
    font-size: 16px;
    pointer-events: none;
}
.tb-campo-dinero .form-control { padding-left: 28px; font-variant-numeric: tabular-nums; }

/* Select nativo: flecha propia en violeta 900 */
.form-select {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232E1A47' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}
.form-select.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232E1A47' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
    padding-right: 44px;
}

/* --------------------------------------------------------------------------
   6. Casillas, opciones e interruptores (§5) — área táctil ≥ 44×44
   -------------------------------------------------------------------------- */
input[type="checkbox"], input[type="radio"] { accent-color: var(--tb-violeta-900); }

.form-check {
    min-height: var(--tb-area-tactil);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
    margin-bottom: 0;
}
.form-check .form-check-input {
    float: none;
    margin: 0;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--tb-borde-campo);
    cursor: pointer;
    transition: background-color var(--tb-transicion), border-color var(--tb-transicion), box-shadow var(--tb-transicion);
}
.form-check .form-check-input[type="checkbox"] { border-radius: 6px; }
.form-check-label {
    cursor: pointer;
    min-height: var(--tb-area-tactil);
    display: flex;
    align-items: center;
    flex: 1;
}
.form-check-input:checked {
    background-color: var(--tb-violeta-900);
    border-color: var(--tb-violeta-900);
}
.form-check-input:focus {
    border-color: var(--tb-violeta-500);
    box-shadow: none;
}
.form-check-input:focus-visible, .form-check-input.is-focus {
    border-color: var(--tb-violeta-500);
    box-shadow: var(--tb-anillo-claro);
}
.form-check-input:disabled ~ .form-check-label { opacity: .5; cursor: not-allowed; }

/* Interruptor */
.form-switch .form-check-input {
    width: 40px;
    height: 24px;
    border-radius: var(--tb-radio-pill);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23625A70'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236B4A94'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* --------------------------------------------------------------------------
   7. Tarjeta base (§5 Tarjetas) — necesaria para el login y la guía
   -------------------------------------------------------------------------- */
.tb-tarjeta {
    background-color: var(--tb-superficie);
    border: none;
    border-radius: var(--tb-radio-lg);
    box-shadow: var(--tb-sombra-tarjeta);
    padding: 16px;
}
@media (min-width: 576px) {
    .tb-tarjeta { padding: 24px; }
}

/* Alerta de error dentro de formularios (ícono + texto) */
.tb-alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--tb-radio);
    font-size: 14px;
    border: none;
}
.tb-alerta .bi { font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.tb-alerta-error { background-color: var(--tb-error-fondo); color: var(--tb-error); }

/* --------------------------------------------------------------------------
   8. Movimiento reducido (§6)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .btn:active, .btn.is-active { transform: none; }
}

/* --------------------------------------------------------------------------
   9. Enlaces de acción con área táctil (§6: mínimo 44×44)
   -------------------------------------------------------------------------- */
.tb-enlace {
    display: inline-flex;
    align-items: center;
    min-height: var(--tb-area-tactil);
    font-weight: 600;
    color: var(--tb-violeta-500);
    text-decoration: none;
    border-radius: var(--tb-radio-sm);
}
.tb-enlace:hover { color: var(--tb-violeta-700); text-decoration: underline; }

/* --------------------------------------------------------------------------
   10. Pantallas
   -------------------------------------------------------------------------- */

/* Login: bloque único centrado (§8), fondo violeta de marca */
.tb-login {
    min-height: calc(100dvh - 24px);
    align-items: center;
    padding: 24px 0 48px;
}
.tb-login-columna { min-width: 0; }
.tb-login-logo { max-height: 110px; max-width: 100%; }
.tb-login-eslogan {
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}
.tb-login-marca { font-size: 14px; font-weight: 600; color: var(--tb-violeta-500); }
.tb-login-divisor { border-top: 1px solid var(--tb-borde); margin: 16px 0 4px; }
@media (min-width: 576px) {
    .tb-login-logo { max-height: 160px; }
}

/* Fondo violeta oscuro: anillo de foco dorado (§6) */
.tb-fondo-oscuro {
    background-color: var(--tb-violeta-900);
    color: #fff;
    border-radius: var(--tb-radio-lg);
}
.tb-fondo-oscuro .btn.is-focus { box-shadow: var(--tb-anillo-oscuro); }

/* --------------------------------------------------------------------------
   11. Guía viva /dev/componentes/ (solo DEBUG)
   -------------------------------------------------------------------------- */
.tb-guia { max-width: 1200px; margin: 0 auto; padding: 16px 0 64px; }
.tb-guia-seccion { margin-bottom: 32px; }
.tb-guia-seccion > h2 { margin-bottom: 16px; }
.tb-guia-etiqueta { font-size: 12px; font-weight: 500; color: var(--tb-texto-suave); margin-bottom: 4px; }
.tb-guia-grilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tb-guia-muestra {
    height: 56px;
    border-radius: var(--tb-radio);
    border: 1px solid var(--tb-borde);
    margin-bottom: 8px;
}
.tb-guia-pendiente {
    border: 1.5px dashed var(--tb-borde);
    border-radius: var(--tb-radio-lg);
    padding: 16px;
    color: var(--tb-texto-suave);
}
.tb-m-violeta-900 { background-color: var(--tb-violeta-900); }
.tb-m-violeta-700 { background-color: var(--tb-violeta-700); }
.tb-m-violeta-500 { background-color: var(--tb-violeta-500); }
.tb-m-violeta-100 { background-color: var(--tb-violeta-100); }
.tb-m-violeta-50  { background-color: var(--tb-violeta-50); }
.tb-m-dorado-500  { background-color: var(--tb-dorado-500); }
.tb-m-dorado-600  { background-color: var(--tb-dorado-600); }
.tb-m-dorado-100  { background-color: var(--tb-dorado-100); }
.tb-m-texto       { background-color: var(--tb-texto); }
.tb-m-texto-suave { background-color: var(--tb-texto-suave); }
.tb-m-borde       { background-color: var(--tb-borde); }
.tb-m-borde-campo { background-color: var(--tb-borde-campo); }
.tb-m-superficie  { background-color: var(--tb-superficie); }
.tb-m-exito       { background-color: var(--tb-exito-fondo); color: var(--tb-exito); }
.tb-m-advertencia { background-color: var(--tb-advertencia-fondo); color: var(--tb-advertencia); }
.tb-m-error       { background-color: var(--tb-error-fondo); color: var(--tb-error); }
.tb-m-info        { background-color: var(--tb-info-fondo); color: var(--tb-info); }
.tb-guia-muestra.tb-m-exito, .tb-guia-muestra.tb-m-advertencia,
.tb-guia-muestra.tb-m-error, .tb-guia-muestra.tb-m-info {
    display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px;
}

/* --------------------------------------------------------------------------
   12. Pantallas de acceso: registro y recuperación de contraseña (§8: bloque
   único centrado, formularios de una columna de máximo 480px)
   -------------------------------------------------------------------------- */
.tb-acceso {
    min-height: calc(100dvh - 24px);
    align-items: center;
    padding: 16px 0 48px;
}
.tb-acceso-columna { width: 100%; max-width: 480px; min-width: 0; }
/* Formularios internos (ej. "Cargar préstamo congelado"): hasta 720px, centrados; desde 768px los campos
   relacionados van en dos columnas con la rejilla de Bootstrap (row + col-md-6), como "Crear préstamo". */
.tb-formulario { width: 100%; max-width: 720px; min-width: 0; margin-inline: auto; }
.tb-acceso-logo { max-height: 72px; max-width: 100%; }
@media (min-width: 576px) {
    .tb-acceso { padding-top: 24px; }
    .tb-acceso-logo { max-height: 96px; }
}

/* Ícono principal de la tarjeta */
.tb-acceso-icono {
    width: 48px;
    height: 48px;
    border-radius: var(--tb-radio-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background-color: var(--tb-violeta-100);
    color: var(--tb-violeta-900);
    margin-bottom: 12px;
}
.tb-acceso-icono-exito       { background-color: var(--tb-exito-fondo); color: var(--tb-exito); }
.tb-acceso-icono-advertencia { background-color: var(--tb-advertencia-fondo); color: var(--tb-advertencia); }

/* Pasos del registro ("¿Cómo funciona?") */
.tb-pasos {
    list-style: none;
    padding: 12px;
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background-color: var(--tb-violeta-50);
    border-radius: var(--tb-radio);
}
.tb-paso { text-align: center; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--tb-texto); }
.tb-paso-numero {
    width: 24px;
    height: 24px;
    border-radius: var(--tb-radio-pill);
    background-color: var(--tb-violeta-900);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

/* Grupos dentro de un formulario largo */
.tb-grupo { border: none; padding: 0; margin: 0 0 8px; min-width: 0; }
.tb-grupo-titulo + * { clear: left; }
.tb-grupo + .tb-grupo { border-top: 1px solid var(--tb-borde); padding-top: 16px; margin-top: 8px; }
.tb-grupo-titulo {
    /* float + ancho completo: así el borde del fieldset no corta la leyenda */
    float: left;
    width: 100%;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--tb-texto);
    margin-bottom: 12px;
}

/* Asterisco de campo obligatorio (lo anuncia el atributo required, no el color) */
.tb-obligatorio { color: var(--tb-error); margin-left: 2px; }

/* Nota de seguridad / confianza */
.tb-nota-seguridad {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--tb-texto-suave);
}
.tb-nota-seguridad .bi { color: var(--tb-violeta-500); font-size: 16px; line-height: 1.3; flex-shrink: 0; }

/* Alerta informativa (§5 Mensajes) */
.tb-alerta-info { background-color: var(--tb-info-fondo); color: var(--tb-info); }

/* Código de 6 dígitos: cajas de 48px (se encogen en pantallas muy angostas) */
.tb-codigo { display: flex; gap: 8px; justify-content: center; }
.tb-codigo .form-control {
    flex: 1 1 0;
    min-width: 0;
    max-width: 48px;
    height: 56px;
    padding: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   13. Insignias de estado del préstamo (§5) — redondeado completo, 13px, 600
   -------------------------------------------------------------------------- */
.tb-insignia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--tb-radio-pill);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.tb-insignia-al-dia     { background-color: var(--tb-exito-fondo); color: var(--tb-exito); }
.tb-insignia-por-vencer { background-color: var(--tb-advertencia-fondo); color: var(--tb-advertencia); }
.tb-insignia-vencido    { background-color: var(--tb-error-fondo); color: var(--tb-error); }
.tb-insignia-pagado     { background-color: var(--tb-violeta-100); color: var(--tb-violeta-900); }
.tb-insignia-congelado  { background-color: var(--tb-info-fondo); color: var(--tb-info); }
/* Neutra: un dato que no es estado del préstamo (ej. "Cliente inactivo"): texto suave sobre violeta 50, con borde */
.tb-insignia-neutra     { background-color: var(--tb-violeta-50); color: var(--tb-texto-suave); box-shadow: inset 0 0 0 1px var(--tb-borde); }
/* Inicio del cliente: textos de la tarjeta de un préstamo congelado */
.tb-inicio .tb-inicio-congelado-texto { margin: 0; }

/* Barra de avance del préstamo (§5, elemento firma): se llena una vez en 600ms */
.tb-barra {
    position: relative;
    height: 10px;
    border-radius: var(--tb-radio-pill);
    background-color: var(--tb-violeta-100);
    overflow: hidden;
}
.tb-barra-relleno {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: var(--tb-radio-pill);
    background-color: var(--tb-dorado-500);
    transition: width 600ms ease-out;
}

/* --------------------------------------------------------------------------
   14. Pantalla: inicio del cliente. TODO bajo .tb-inicio (no afecta otras pantallas)
   -------------------------------------------------------------------------- */
.tb-inicio {
    max-width: 1200px;
    display: grid;
    gap: 24px;
    padding-bottom: 16px;
    color: var(--tb-texto);
}
.tb-inicio .tb-inicio-saludo { margin: 0; }

/* Tarjeta principal (violeta, texto blanco) */
.tb-inicio .tb-inicio-resumen {
    padding: 16px;
    box-shadow: var(--tb-sombra-tarjeta);
    display: grid;
    gap: 8px;
    justify-items: start;
}
.tb-inicio .tb-inicio-resumen p { margin: 0; }
.tb-inicio .tb-inicio-etiqueta { font-size: 14px; font-weight: 500; color: var(--tb-superficie); }
.tb-inicio .tb-inicio-titular { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--tb-superficie); }
.tb-inicio .tb-inicio-concepto { font-size: 14px; font-weight: 500; color: var(--tb-dorado-500); margin-top: 8px; }
.tb-inicio .tb-inicio-monto { color: var(--tb-superficie); }
.tb-inicio .tb-inicio-explica { font-size: 16px; line-height: 1.5; max-width: 60ch; color: var(--tb-superficie); }
.tb-inicio .tb-inicio-accion { width: 100%; margin-top: 8px; }

.tb-inicio .tb-inicio-avance { width: 100%; margin-top: 16px; display: grid; gap: 8px; }
.tb-inicio .tb-inicio-avance-texto { font-size: 14px; color: var(--tb-superficie); }

.tb-inicio .tb-inicio-datos {
    width: 100%;
    margin: 8px 0 0;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--tb-superficie) 20%, transparent);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.tb-inicio .tb-inicio-datos dt { font-size: 12px; font-weight: 500; color: var(--tb-superficie); margin: 0 0 4px; }
.tb-inicio .tb-inicio-datos dd { font-size: 18px; font-weight: 600; margin: 0; color: var(--tb-superficie); }

/* Tus préstamos: tarjetas (en celular una columna; en PC hasta 3) */
.tb-inicio .tb-inicio-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tb-inicio .tb-inicio-cabecera h2 { margin: 0; }
.tb-inicio .tb-inicio-lista { display: grid; gap: 12px; margin-top: 8px; }
.tb-inicio .tb-inicio-prestamo {
    display: grid;
    gap: 12px;
    color: var(--tb-texto);
    text-decoration: none;
    transition: box-shadow var(--tb-transicion);
}
.tb-inicio .tb-inicio-prestamo:hover { box-shadow: var(--tb-sombra-menu); color: var(--tb-texto); }
.tb-inicio .tb-inicio-prestamo-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-inicio .tb-inicio-prestamo-nombre { font-size: 16px; font-weight: 600; }
.tb-inicio .tb-inicio-prestamo-monto { font-size: 20px; font-weight: 700; }
.tb-inicio .tb-inicio-mas { margin-top: 4px; margin-right: 16px; }

/* Inicio del cliente sin créditos. Celular (diseno/inicio-cliente-una-columna): una columna centrada con héroe,
   ventajas, pendientes, "Así funciona" y accesos, en ese orden. PC (diseno/inicio-cliente-pc): ver abajo.
   Contrastes: blanco/violeta 900 15,5:1; violeta 100/violeta 900 12,7:1. */
/* Solo celular: la columna de 600px. En PC, la composición de ancho completo (más abajo). */
@media (max-width: 991.98px) { .tb-inicio.tb-inicio-sin-creditos { max-width: 600px; margin-inline: auto; } }
/* Héroe: saludo y frase arriba, simulador debajo (con su único botón dorado). Sin logo ni ilustración. */
.tb-inicio .tb-inicio-heroe { display: grid; gap: 16px; padding: 24px 16px; border-radius: var(--tb-radio-lg);
    background-color: var(--tb-violeta-900); color: var(--tb-superficie); box-shadow: var(--tb-sombra-tarjeta); }
@media (min-width: 992px) { .tb-inicio .tb-inicio-heroe { gap: 24px; padding: 32px; } }
.tb-inicio .tb-inicio-heroe-cabecera { display: grid; gap: 4px; }
.tb-inicio .tb-inicio-heroe-saludo { margin: 0; font-size: clamp(26px, 7.2vw, 32px); font-weight: 700; line-height: 1.1;
    color: var(--tb-superficie); }
@media (min-width: 992px) { .tb-inicio .tb-inicio-heroe-saludo { font-size: 40px; } }
.tb-inicio .tb-inicio-heroe-frase,
.tb-inicio .tb-inicio-heroe .tb-inicio-paso-texto { margin: 0; padding: 0; background: none; font-size: 18px; color: var(--tb-violeta-100); max-width: 46ch; }
/* Ventajas debajo del héroe: lista vertical compacta en celular, fila de tres desde 576px. Sin fondo ni borde
   (no son botones). Ícono en --tb-violeta-900 sobre --tb-violeta-100 (12,7:1); texto 14px en --tb-texto (17:1). */
.tb-inicio .tb-ventajas { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 576px) { .tb-inicio .tb-ventajas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.tb-ventajas li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--tb-texto); }
/* Desde 576px: ícono arriba y texto centrado, para que cada ventaja quepa en una línea dentro de la fila de tres. */
@media (min-width: 576px) { .tb-ventajas li { flex-direction: column; text-align: center; gap: 8px; } }
.tb-ventajas .bi { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--tb-radio-pill); background-color: var(--tb-violeta-100);
    color: var(--tb-violeta-900); font-size: 16px; }
/* Ventajas dentro de "Así funciona" (inicio sin créditos): solo en PC; secundarias, sin negritas. Texto
   --tb-texto-suave 16px (6,5:1 sobre blanco); ícono de 36px en --tb-violeta-500 sobre --tb-violeta-50. */
.tb-ventajas-tarjeta { display: none; margin: 16px 0 0; padding: 16px 0 0; list-style: none;
    border-top: 1px solid var(--tb-borde); }
.tb-ventajas-tarjeta li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 400;
    color: var(--tb-texto-suave); }
.tb-ventajas-tarjeta .bi { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--tb-radio-pill); background-color: var(--tb-violeta-50);
    color: var(--tb-violeta-500); font-size: 16px; }
/* Detalle de cada paso de "Así funciona": solo en PC (en celular sigue tras la "i"). 6,5:1 sobre blanco. */
.tb-paso-detalle { display: none; margin: 0; font-size: 14px; color: var(--tb-texto-suave); }

@media (min-width: 992px) {
    /* Inicio sin créditos en PC (diseno/inicio-cliente-pc): el detalle a la vista y la "i" oculta (display: none:
       no se enfoca ni se lee dos veces). */
    .tb-inicio-sin-creditos .tb-linea-paso > .tb-info { display: none; }
    .tb-inicio-sin-creditos .tb-paso-detalle { display: block; }

    /* Composición de ancho completo (hasta 1200px, la regla base): saludo arriba, simulador a la izquierda (7),
       pendientes y "Así funciona" a la derecha (5), ventajas y accesos abajo. El orden del documento no cambia (es
       el de celular y el del teclado). Sin subgrid queda la columna única de celular, centrada en 600px. */
    @supports not (grid-template-columns: subgrid) {
        .tb-inicio.tb-inicio-sin-creditos { max-width: 600px; margin-inline: auto; }
    }
    @supports (grid-template-columns: subgrid) {
        .tb-inicio.tb-inicio-sin-creditos { grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
            grid-template-rows: auto auto 1fr auto; column-gap: 24px; }
        .tb-inicio-sin-creditos > * { grid-column: 1 / -1; }
        /* El héroe es una subcuadrícula: saludo y frase arriba a todo el ancho, simulador a la izquierda. */
        .tb-inicio-sin-creditos > .tb-inicio-heroe { grid-row: 1 / span 3; grid-template-columns: subgrid;
            grid-template-rows: subgrid; gap: 24px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
        .tb-inicio-sin-creditos .tb-inicio-heroe-cabecera { grid-column: 1 / -1; grid-row: 1; }
        .tb-inicio-sin-creditos .tb-inicio-heroe-saludo { color: var(--tb-violeta-900); }
        .tb-inicio-sin-creditos .tb-inicio-heroe .tb-inicio-heroe-frase,
        .tb-inicio-sin-creditos .tb-inicio-heroe .tb-inicio-paso-texto { color: var(--tb-texto); max-width: 70ch; }
        /* El simulador, ajustado a su contenido (no se estira si la derecha es más alta). */
        .tb-inicio-sin-creditos .tb-simulador-rapido-form { grid-column: 1; grid-row: 2 / span 2; align-self: start;
            border-radius: var(--tb-radio-lg); box-shadow: var(--tb-sombra-tarjeta); }
        /* Sin doble caja: una sola tarjeta blanca con su franja violeta 900 arriba ("Simula tu crédito", 15,5:1). */
        .tb-inicio-sin-creditos .tb-simulador-franja { padding: 16px 24px; background-color: var(--tb-violeta-900);
            color: var(--tb-superficie); }
        .tb-inicio-sin-creditos .tb-simulador-franja .tb-titulo-3 { color: var(--tb-superficie); }
        .tb-inicio-sin-creditos .tb-simulador-rapido { padding-top: 24px; }
        /* Derecha: pendientes y "Así funciona"; sin pendientes ("en estudio"), "Así funciona" sube. */
        .tb-inicio-sin-creditos > .tb-tarea-accion { grid-column: 2; grid-row: 2; }
        .tb-inicio-sin-creditos > #asi-funciona { grid-column: 2; grid-row: 3; align-self: start; }
        .tb-inicio-sin-creditos:not(:has(> .tb-tarea-accion)) > #asi-funciona { grid-row: 2; }
        /* Una sola lista de ventajas por ancho: en PC la de la tarjeta "Así funciona", en celular la de debajo del héroe. */
        .tb-inicio-sin-creditos > .tb-ventajas { display: none; }
        .tb-inicio-sin-creditos .tb-ventajas-tarjeta { display: grid; gap: 12px; }
        /* Abajo: los accesos (si hay). */
        .tb-inicio-sin-creditos > .tb-inicio-accesos { grid-row: 4; }

        /* "Así funciona" en vertical con el detalle visible: marca de 44px a la izquierda, título y detalle a la derecha. */
        .tb-inicio-sin-creditos .tb-linea-tiempo.tb-linea-horizontal { display: block; }
        .tb-inicio-sin-creditos .tb-linea-horizontal .tb-linea-paso { display: grid; grid-template-columns: 44px minmax(0, 1fr);
            column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; padding: 0 0 16px; }
        .tb-inicio-sin-creditos .tb-linea-horizontal .tb-linea-paso:last-child { padding-bottom: 0; }
        .tb-inicio-sin-creditos .tb-linea-horizontal .tb-linea-marca { grid-row: 1 / span 2; align-self: start; }
        .tb-inicio-sin-creditos .tb-linea-horizontal .tb-linea-paso::before { left: 21px; right: auto; top: 44px; bottom: 0;
            width: 2px; height: auto; }
        .tb-inicio-sin-creditos .tb-linea-horizontal .tb-linea-paso:last-child::before { display: none; }
    }
}

/* Simulador rápido: tarjeta blanca; foco de 3px en violeta 500 (6,9:1 sobre blanco). */
.tb-inicio .tb-simulador-rapido-form { min-width: 0; }
/* Franja del título: elemento propio. En celular se ve como el comienzo de la tarjeta blanca (mismo relleno que
   antes); en PC es violeta 900 (ver el bloque de PC). Esquinas de arriba con el radio de la tarjeta. */
.tb-simulador-franja { padding: 24px 16px 0; border-radius: var(--tb-radio-lg) var(--tb-radio-lg) 0 0;
    background-color: var(--tb-superficie); color: var(--tb-texto); }
.tb-simulador-rapido { display: grid; gap: 16px; padding: 16px 16px 0; border-radius: 0 0 var(--tb-radio-lg) var(--tb-radio-lg); overflow: hidden;
    background-color: var(--tb-superficie); color: var(--tb-texto); }
@media (min-width: 992px) { .tb-simulador-franja { padding: 24px 24px 0; } .tb-simulador-rapido { padding: 16px 24px 0; } }
.tb-simulador-rapido :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tb-violeta-500); }
/* El monto es la cifra héroe: campo editable grande, con su $ del mismo tamaño. */
.tb-simulador-rapido .tb-campo-dinero .tb-simulador-monto { font-size: clamp(26px, 8.5vw, 48px); font-weight: 700; line-height: 1.1;
    min-height: 64px; padding-left: 32px; padding-right: 8px; color: var(--tb-violeta-900); }
@media (min-width: 992px) { .tb-simulador-rapido .tb-campo-dinero .tb-simulador-monto { font-size: 48px; padding-left: 44px; } }
.tb-simulador-rapido .tb-campo-dinero:has(.tb-simulador-monto)::before { font-size: clamp(20px, 6vw, 32px); font-weight: 700; color: var(--tb-violeta-900); }
/* Deslizador grande: 44px de área táctil, riel de 8px en violeta 100 (lo recorrido en violeta 500 en Firefox) y
   tirador de 28px en violeta 900 con borde blanco; con el teclado, anillo de 3px en violeta 500 en el tirador. */
.tb-rango-grande { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--tb-area-tactil);
    margin: 0; background: transparent; cursor: pointer; }
.tb-rango-grande::-webkit-slider-runnable-track { height: 12px; border-radius: var(--tb-radio-pill); background-color: var(--tb-violeta-100); }
.tb-rango-grande::-moz-range-track { height: 12px; border-radius: var(--tb-radio-pill); background-color: var(--tb-violeta-100); }
.tb-rango-grande::-moz-range-progress { height: 12px; border-radius: var(--tb-radio-pill); background-color: var(--tb-violeta-500); }
.tb-rango-grande::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; margin-top: -10px;
    border: 3px solid var(--tb-superficie); border-radius: var(--tb-radio-pill); background-color: var(--tb-violeta-900);
    box-shadow: var(--tb-sombra-tarjeta); }
.tb-rango-grande::-moz-range-thumb { width: 26px; height: 26px; border: 3px solid var(--tb-superficie); border-radius: var(--tb-radio-pill);
    background-color: var(--tb-violeta-900); box-shadow: var(--tb-sombra-tarjeta); }
.tb-simulador-rapido .tb-rango-grande:focus-visible { box-shadow: none; }
.tb-rango-grande:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--tb-violeta-500); }
.tb-rango-grande:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--tb-violeta-500); }
/* Límites en 14px con color de texto (17:1). */
.tb-rango-limites { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 14px; color: var(--tb-texto);
    font-variant-numeric: tabular-nums; }
/* Cuotas: rótulo + valor editable a la derecha ("6 cuotas", sin partirse); deslizador debajo a todo el ancho. */
.tb-simulador-cuotas-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px; }
.tb-simulador-cuotas-cabecera .form-label { margin: 0; }
.tb-simulador-cuotas-valor { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap;
    font-size: 16px; font-weight: 600; color: var(--tb-texto); }
.tb-simulador-cuotas-valor .form-control { width: 64px; min-height: var(--tb-area-tactil); padding: 4px 8px;
    text-align: center; font-size: 20px; font-weight: 700; color: var(--tb-violeta-900); font-variant-numeric: tabular-nums; }
/* La cuota, segunda cifra; la aclaración, legible (14px en el color de texto). */
.tb-simulador-rapido-cifras { display: grid; gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--tb-borde); }
.tb-simulador-rapido-cifras dt { font-size: 14px; font-weight: 500; color: var(--tb-texto-suave); }
.tb-simulador-rapido-cifras dd { margin: 0; }
.tb-simulador-cuota { font-size: clamp(32px, 8vw, 40px); font-weight: 700; line-height: 1.1; color: var(--tb-violeta-900);
    font-variant-numeric: tabular-nums; }
.tb-simulador-explica { margin: 4px 0 0; font-size: 14px; color: var(--tb-texto); }
.tb-simulador-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Total más visible (16/18px, 600) sin competir con la cuota (40px). */
.tb-simulador-rapido-cifras .tb-simulador-total dt { font-size: 16px; font-weight: 600; color: var(--tb-texto); }
.tb-simulador-total dd { font-size: 18px; font-weight: 600; color: var(--tb-texto); font-variant-numeric: tabular-nums; }
.tb-simulador-aviso { margin: 0; font-size: 14px; color: var(--tb-error); }
.tb-simulador-aviso:empty { display: none; }
.tb-simulador-leyenda { margin: 0; font-size: 14px; color: var(--tb-texto); }  /* 17:1 */
/* Pie del simulador: franja violeta 50 con el único botón dorado, borde de 2px en violeta 900 (el dorado solo no
   contrasta con el blanco: 2,2:1). */
.tb-simulador-pie { margin: 0 -16px; padding: 16px; background-color: var(--tb-violeta-50); }
.tb-simulador-pie .btn-primary { --bs-btn-padding-x: 12px; white-space: nowrap; }  /* cabe en una línea a 320px */
@media (min-width: 992px) { .tb-simulador-pie { margin: 0 -24px; padding: 16px 24px; } }
.tb-simulador-pie .btn-primary,
.tb-simulador-pie .btn-primary:hover,
.tb-simulador-pie .btn-primary:focus,
.tb-simulador-pie .btn-primary:active { width: 100%; border: 2px solid var(--tb-violeta-900); }
.tb-simulador-pie .btn-primary:focus-visible { border: 2px solid var(--tb-violeta-900); box-shadow: 0 0 0 3px var(--tb-violeta-500); }
/* Tarjeta de acción: lo que falta para enviar, con su botón. Ícono en violeta 500; listo, check en --tb-exito. */
.tb-inicio .tb-tarea-accion { display: grid; gap: 12px; }
.tb-tarea-accion-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; font-weight: 700; color: var(--tb-texto); }
.tb-tarea-accion-titulo .bi { color: var(--tb-violeta-500); }
.tb-tarea-accion-titulo .tb-tarea-accion-hecha { color: var(--tb-exito); }
.tb-tarea-accion-texto { margin: 0; color: var(--tb-texto-suave); }
.tb-inicio .tb-inicio-paso-texto { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--tb-radio);
    background-color: var(--tb-violeta-50); color: var(--tb-texto); font-size: 14px; }
/* Línea de tiempo: marca de 32px, conector de 2px en --tb-borde; hecho en --tb-violeta-100; actual en
   --tb-violeta-900 con anillo --tb-violeta-100 y título en negrita (nunca solo el color). */
.tb-linea-tiempo { list-style: none; margin: 0; padding: 0; }
.tb-linea-paso { position: relative; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; padding-bottom: 20px; }
.tb-linea-paso:last-child { padding-bottom: 0; }
.tb-linea-paso::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background-color: var(--tb-borde); }
.tb-linea-paso:last-child::before { display: none; }
.tb-linea-marca { width: 32px; height: 32px; border-radius: var(--tb-radio-pill); display: inline-flex; align-items: center;
    justify-content: center; font-size: 14px; font-weight: 700; background-color: var(--tb-violeta-50);
    color: var(--tb-texto-suave); box-shadow: inset 0 0 0 2px var(--tb-borde); }
.tb-linea-paso-hecho .tb-linea-marca { background-color: var(--tb-violeta-100); color: var(--tb-violeta-900); box-shadow: none; }
.tb-linea-paso-actual .tb-linea-marca { background-color: var(--tb-violeta-900); color: var(--tb-superficie);
    box-shadow: 0 0 0 4px var(--tb-violeta-100); }
/* "Así funciona" horizontal: 3 pasos en fila con marcas de 44px (ícono de 20px) unidas por una línea de 2px; el
   título es una palabra que nunca se parte y su detalle va tras la "i". */
.tb-linea-tiempo.tb-linea-horizontal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.tb-linea-horizontal .tb-linea-paso { display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0 4px; row-gap: 8px; }
.tb-linea-horizontal .tb-linea-paso::before { left: calc(50% + 22px); right: calc(-50% + 22px); top: 21px;
    bottom: auto; width: auto; height: 2px; }
.tb-linea-horizontal .tb-linea-paso:last-child::before { display: none; }
.tb-linea-horizontal .tb-linea-marca { width: var(--tb-area-tactil); height: var(--tb-area-tactil); font-size: 20px; }
.tb-paso-titulo { margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; color: var(--tb-texto); }
.tb-linea-paso-actual .tb-paso-titulo { font-weight: 700; color: var(--tb-violeta-900); }
.tb-linea-horizontal .tb-info > summary { margin: -8px 0; }
/* Accesos: mosaicos de 56px, tantos por fila como quepan (mínimo 160px). */
.tb-inicio .tb-inicio-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.tb-inicio .tb-inicio-accesos a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px;
    border-radius: var(--tb-radio); background-color: var(--tb-superficie); box-shadow: var(--tb-sombra-tarjeta);
    color: var(--tb-texto); font-weight: 600; text-decoration: none; }
.tb-inicio .tb-inicio-accesos a:hover { background-color: var(--tb-violeta-50); }
.tb-inicio .tb-inicio-accesos .bi { font-size: 20px; color: var(--tb-violeta-500); }

/* Estado vacío */
.tb-inicio .tb-inicio-vacio { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 32px 16px; }
.tb-inicio .tb-inicio-vacio h2, .tb-inicio .tb-inicio-vacio p { margin: 0; max-width: 46ch; }
.tb-inicio .tb-inicio-vacio-icono {
    width: 56px;
    height: 56px;
    border-radius: var(--tb-radio-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background-color: var(--tb-violeta-100);
    color: var(--tb-violeta-900);
}

/* Pendientes y enlaces discretos */
.tb-inicio .tb-inicio-pendientes { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-inicio .tb-inicio-pendientes .tb-alerta { text-decoration: none; min-height: var(--tb-area-tactil); align-items: center; }
.tb-inicio .tb-inicio-pendientes .tb-alerta:hover { text-decoration: underline; color: var(--tb-info); }
.tb-inicio .tb-inicio-enlaces { display: flex; flex-wrap: wrap; gap: 0 24px; }
.tb-inicio .tb-inicio-enlaces .tb-enlace { gap: 8px; }

@media (min-width: 768px) {
    .tb-inicio .tb-inicio-resumen { padding: 24px; }
    .tb-inicio .tb-inicio-accion { width: auto; }
    .tb-inicio .tb-inicio-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tb-inicio .tb-inicio-lista { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-barra-relleno { transition: none; }
}

/* AJUSTE TEMPORAL: el menú viejo (base.html) convive con el contenido nuevo del inicio
   del cliente; sus botones conservan las medidas de Bootstrap que tenían antes, solo en
   esta pantalla y en solicitar un crédito. Quitar este bloque (body:has(...) ...) cuando se unifique el menú
   con el sistema de diseño. */
body:has(.tb-inicio) .app-topbar .btn,
body:has(.tb-inicio) .app-sidebar .btn,
body:has(.tb-inicio) .offcanvas .btn,
body:has(.tb-solicitar) .app-topbar .btn,
body:has(.tb-solicitar) .app-sidebar .btn,
body:has(.tb-solicitar) .offcanvas .btn {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .375rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-border-radius: .375rem;
    min-height: 0;
    display: inline-block;
    gap: 0;
}
body:has(.tb-inicio) .app-topbar .btn-sm,
body:has(.tb-solicitar) .app-topbar .btn-sm {
    --bs-btn-padding-x: .5rem;
    --bs-btn-padding-y: .25rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: .25rem;
}

/* Inicio del cliente en pantallas anchas: los dos bloques de la tarjeta principal
   no afectan el diseño por debajo de 1600px (display: contents). */
.tb-inicio .tb-inicio-resumen-principal,
.tb-inicio .tb-inicio-resumen-detalle { display: contents; }
@media (min-width: 1600px) {
    .tb-inicio { width: 100%; max-width: 1400px; margin-inline: auto; }
    .tb-inicio p { max-width: 75ch; }
    .tb-inicio .tb-inicio-resumen {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 48px;
        align-items: start;
    }
    .tb-inicio .tb-inicio-resumen-principal,
    .tb-inicio .tb-inicio-resumen-detalle { display: grid; gap: 8px; justify-items: start; align-content: start; min-width: 0; }
    .tb-inicio .tb-inicio-resumen-principal,
    .tb-inicio .tb-inicio-resumen-detalle { justify-self: stretch; }
    .tb-inicio .tb-inicio-resumen-detalle { gap: 16px; }
    .tb-inicio .tb-inicio-avance { margin-top: 0; }
    .tb-inicio .tb-inicio-datos { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   15. Pantalla: solicitar un crédito (simulador del cliente). TODO bajo .tb-solicitar
   -------------------------------------------------------------------------- */
.tb-solicitar {
    --tb-sol-nav: 64px;  /* alto que base.html reserva para la barra inferior del cliente */
    max-width: 1200px;
    color: var(--tb-texto);
    font-size: 16px;
    padding-bottom: 16px;
}
.tb-solicitar .tb-sol-titulo { margin: 0 0 16px; }
.tb-solicitar .tb-sol-oculta { display: none !important; }
.tb-solicitar p { margin-bottom: 0; }
.tb-solicitar .tb-alerta { margin-bottom: 16px; }
.tb-solicitar .tb-sol-alerta-advertencia { background-color: var(--tb-advertencia-fondo); color: var(--tb-advertencia); }
.tb-solicitar .tb-sol-alerta-enlace {
    display: inline-flex; align-items: center; min-height: var(--tb-area-tactil);
    font-weight: 600; color: var(--tb-advertencia); text-decoration: underline;
}

/* Pasos */
.tb-solicitar .tb-sol-pasos { list-style: none; display: flex; align-items: center; gap: 8px; padding: 0; margin: 0 0 16px; }
.tb-solicitar .tb-sol-paso {
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--tb-area-tactil);
    padding: 0 8px 0 0; border: 0; background: none; border-radius: var(--tb-radio-sm);
    font-size: 14px; font-weight: 600; color: var(--tb-texto-suave); white-space: nowrap;
}
.tb-solicitar .tb-sol-paso-n {
    width: 28px; height: 28px; border-radius: var(--tb-radio-pill); display: inline-grid; place-items: center;
    background: var(--tb-violeta-100); color: var(--tb-violeta-900); font-size: 14px; font-weight: 700;
}
.tb-solicitar .tb-sol-paso.es-activo { color: var(--tb-texto); }
.tb-solicitar .tb-sol-paso.es-activo .tb-sol-paso-n { background: var(--tb-violeta-900); color: #fff; }
.tb-solicitar .tb-sol-paso.es-hecho .tb-sol-paso-n { background: var(--tb-exito); color: #fff; }
.tb-solicitar .tb-sol-paso-linea { flex: 0 1 48px; min-width: 12px; height: 2px; background: var(--tb-borde); border-radius: var(--tb-radio-pill); }
.tb-solicitar .tb-sol-paso-linea.es-hecha { background: var(--tb-exito); }

/* Estructura: una columna en celular; en PC, la simulación queda fija a la derecha */
.tb-solicitar .tb-sol-layout { display: grid; gap: 16px; }
.tb-solicitar .tb-sol-bloque > .tb-titulo-3 { margin: 0 0 16px; }
.tb-solicitar .tb-sol-bloque > .mb-3:last-child,
.tb-solicitar .tb-sol-dia .mb-3:last-child { margin-bottom: 0 !important; }
.tb-solicitar .tb-sol-fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.tb-solicitar .tb-sol-fieldset > legend { float: none; width: auto; padding: 0; margin-bottom: 6px; }

/* Monto */
.tb-solicitar .tb-campo-dinero .tb-sol-monto { font-size: 24px; font-weight: 700; padding-left: 34px; min-height: 56px; }
.tb-solicitar .tb-campo-dinero:has(.tb-sol-monto)::before { font-size: 24px; font-weight: 700; color: var(--tb-texto); }
.tb-solicitar .tb-sol-rango { display: block; width: 100%; margin-top: -4px; height: var(--tb-area-tactil); accent-color: var(--tb-violeta-900); cursor: pointer; }
.tb-solicitar .tb-sol-escala { display: flex; justify-content: space-between; gap: 8px; }

/* Cuotas */
.tb-solicitar .tb-sol-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-solicitar .tb-sol-chip {
    min-width: var(--tb-alto-control); min-height: var(--tb-alto-control); padding: 0 14px;
    border-radius: var(--tb-radio); border: 1px solid var(--tb-borde-campo); background: var(--tb-superficie);
    font-size: 16px; font-weight: 600; color: var(--tb-texto);
    transition: background-color var(--tb-transicion), border-color var(--tb-transicion), color var(--tb-transicion);
}
.tb-solicitar .tb-sol-chip:hover { border-color: var(--tb-violeta-500); }
.tb-solicitar .tb-sol-chip[aria-pressed="true"] { background: var(--tb-violeta-900); border-color: var(--tb-violeta-900); color: #fff; }
.tb-solicitar .tb-sol-otro { max-width: 240px; }
.tb-solicitar #cuotas-aviso { margin: -8px 0 16px; }

/* Día de las cuotas (plegable) */
.tb-solicitar .tb-sol-dia { border-top: 1px solid var(--tb-borde); padding-top: 8px; }
.tb-solicitar .tb-sol-dia > summary {
    display: flex; align-items: center; gap: 8px; min-height: var(--tb-area-tactil);
    font-weight: 600; color: var(--tb-violeta-500); cursor: pointer; list-style: none; border-radius: var(--tb-radio-sm);
}
.tb-solicitar .tb-sol-dia > summary::-webkit-details-marker { display: none; }
.tb-solicitar .tb-sol-dia > summary::before { content: "+"; width: 20px; text-align: center; font-size: 20px; line-height: 1; }
.tb-solicitar .tb-sol-dia[open] > summary::before { content: "\2212"; }
.tb-solicitar .tb-sol-dia[open] > summary { margin-bottom: 8px; }

/* Resultado de la simulación (tarjeta violeta, texto blanco) */
.tb-solicitar .tb-sol-resultado { padding: 16px; box-shadow: var(--tb-sombra-tarjeta); }
.tb-solicitar .tb-sol-resultado-titulo { font-size: 14px; font-weight: 500; color: #fff; margin: 0 0 12px; }
.tb-solicitar .tb-sol-res-etiqueta { font-size: 14px; font-weight: 500; color: #fff; }
.tb-solicitar .tb-sol-res-recibes { font-size: 20px; font-weight: 700; color: #fff; }
.tb-solicitar .tb-sol-res-concepto { color: var(--tb-dorado-500); margin-top: 12px; }
.tb-solicitar .tb-sol-resultado .tb-monto-destacado { color: #fff; margin: 0; }
.tb-solicitar .tb-sol-res-sub { font-size: 14px; color: #fff; margin-top: 4px; }
.tb-solicitar .tb-sol-res-filas {
    display: grid; gap: 8px; margin: 16px 0 0; padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, #fff 20%, transparent);
}
.tb-solicitar .tb-sol-res-filas > div { display: flex; justify-content: space-between; gap: 12px; }
.tb-solicitar .tb-sol-res-filas dt { font-weight: 400; color: #fff; }
.tb-solicitar .tb-sol-res-filas dd { margin: 0; font-weight: 600; color: #fff; text-align: right; }
.tb-solicitar .tb-sol-res-total { padding-top: 8px; border-top: 1px solid color-mix(in srgb, #fff 20%, transparent); }
.tb-solicitar .tb-sol-res-total dt, .tb-solicitar .tb-sol-res-total dd { font-weight: 700; color: var(--tb-dorado-500); }
.tb-solicitar .tb-sol-res-ajuste {
    margin-top: 12px; padding: 12px; border-radius: var(--tb-radio);
    background: color-mix(in srgb, #fff 10%, transparent); color: #fff; font-size: 14px;
}
.tb-solicitar .tb-sol-res-ajuste[hidden] { display: none; }
.tb-solicitar .tb-sol-res-nota { margin-top: 12px; font-size: 14px; color: #fff; }
.tb-solicitar .tb-sol-res-error { display: flex; gap: 10px; align-items: flex-start; color: #fff; }
.tb-solicitar .tb-sol-res-error[hidden] { display: none; }
.tb-solicitar .tb-sol-res-error .bi { color: var(--tb-dorado-500); font-size: 20px; line-height: 1.2; }
.tb-solicitar .tb-sol-res-error .btn { margin-top: 8px; }
.tb-solicitar .tb-sol-esqueleto { display: grid; gap: 10px; }
.tb-solicitar .tb-sol-esqueleto[hidden] { display: none; }
.tb-solicitar .tb-sol-esqueleto span {
    display: block; height: 16px; border-radius: var(--tb-radio-sm);
    background: linear-gradient(90deg, color-mix(in srgb, #fff 12%, transparent), color-mix(in srgb, #fff 24%, transparent), color-mix(in srgb, #fff 12%, transparent));
    background-size: 200% 100%; animation: tb-sol-brillo 1.2s ease-in-out infinite;
}
.tb-solicitar .tb-sol-esqueleto span:nth-child(2) { height: 40px; width: 70%; }
.tb-solicitar .tb-sol-esqueleto span:nth-child(3) { width: 85%; }
.tb-solicitar .tb-sol-esqueleto span:nth-child(4) { width: 60%; }
@keyframes tb-sol-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Plan de pagos: tarjetas en celular, tabla en PC */
.tb-solicitar .tb-sol-plan > details > summary {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
    min-height: var(--tb-area-tactil); cursor: pointer; list-style: none; border-radius: var(--tb-radio-sm);
}
.tb-solicitar .tb-sol-plan > details > summary::-webkit-details-marker { display: none; }
.tb-solicitar .tb-sol-plan-ver { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tb-violeta-500); }
.tb-solicitar .tb-sol-plan-ver .bi { transition: transform var(--tb-transicion); }
.tb-solicitar .tb-sol-plan details[open] .tb-sol-plan-ver .bi { transform: rotate(180deg); }
.tb-solicitar .tb-sol-plan-sub { margin: 8px 0 12px; }
.tb-solicitar .tb-sol-plan-lista { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.tb-solicitar .tb-sol-plan-item { padding: 12px; border: 1px solid var(--tb-borde); border-radius: var(--tb-radio); }
.tb-solicitar .tb-sol-plan-item.es-ajuste { background: var(--tb-advertencia-fondo); border-color: transparent; }
.tb-solicitar .tb-sol-plan-item-cab, .tb-solicitar .tb-sol-plan-item-det { display: flex; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.tb-solicitar .tb-sol-plan-nombre, .tb-solicitar .tb-sol-plan-total { font-weight: 700; }
.tb-solicitar .tb-sol-plan-item-det { font-size: 14px; color: var(--tb-texto-suave); margin-top: 4px; }
.tb-solicitar .tb-sol-plan-total-lista { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tb-borde); font-weight: 700; }
.tb-solicitar .tb-sol-plan-tabla { display: none; width: 100%; border-collapse: collapse; margin-top: 12px; }
.tb-solicitar .tb-sol-plan-tabla th { font-size: 14px; font-weight: 600; color: var(--tb-texto-suave); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--tb-borde); }
.tb-solicitar .tb-sol-plan-tabla th.r { text-align: right; }
.tb-solicitar .tb-sol-plan-tabla td { height: 56px; padding: 0 12px; border-bottom: 1px solid var(--tb-borde); white-space: nowrap; }
.tb-solicitar .tb-sol-plan-tabla .r { text-align: right; }
.tb-solicitar .tb-sol-plan-tabla tr.es-ajuste td { background: var(--tb-advertencia-fondo); }
.tb-solicitar .tb-sol-plan-tabla tfoot td { font-weight: 700; border-bottom: 0; }

/* Paso 2 */
.tb-solicitar .tb-sol-recap {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
    padding: 8px 8px 8px 16px; border-radius: var(--tb-radio); background: var(--tb-violeta-100); color: var(--tb-violeta-900);
}
.tb-solicitar .tb-sol-cambiar { min-height: var(--tb-area-tactil); padding: 0 12px; }
.tb-solicitar .tb-sol-medios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.tb-solicitar .tb-sol-medio {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; min-width: 0;
    padding: 12px; margin: 0; border-radius: var(--tb-radio); border: 1px solid var(--tb-borde-campo);
    background: var(--tb-superficie); cursor: pointer;
    transition: border-color var(--tb-transicion), background-color var(--tb-transicion), box-shadow var(--tb-transicion);
}
.tb-solicitar .tb-sol-medio:hover { border-color: var(--tb-violeta-500); }
.tb-solicitar .tb-sol-medio input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tb-solicitar .tb-sol-medio:has(input:checked) { border-color: var(--tb-violeta-500); box-shadow: inset 0 0 0 1px var(--tb-violeta-500); background: var(--tb-violeta-50); }
.tb-solicitar .tb-sol-medio:has(input:focus-visible) { box-shadow: var(--tb-anillo-claro); border-color: var(--tb-violeta-500); }
.tb-solicitar .tb-sol-medio-icono {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--tb-radio); display: grid; place-items: center;
    background: var(--tb-violeta-100); color: var(--tb-violeta-900); font-size: 18px;
}
.tb-solicitar .tb-sol-medio-texto { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.tb-solicitar .tb-sol-medio-texto b { display: block; font-weight: 600; }
.tb-solicitar .tb-sol-medio-texto small { display: block; font-size: 14px; color: var(--tb-texto-suave); }
.tb-solicitar .tb-sol-medio-check { color: var(--tb-violeta-500); font-size: 20px; visibility: hidden; flex-shrink: 0; }
.tb-solicitar .tb-sol-medio:has(input:checked) .tb-sol-medio-check { visibility: visible; }
.tb-solicitar .tb-sol-condiciones { padding-left: 20px; margin: 0 0 16px; font-size: 14px; overflow-wrap: anywhere; }
.tb-solicitar .tb-sol-importante { margin: 0 0 16px; }
.tb-solicitar .tb-sol-terminos { display: flex; align-items: flex-start; gap: 12px; min-height: var(--tb-area-tactil); padding-left: 0; margin: 0; }
.tb-solicitar .tb-sol-terminos .form-check-input { float: none; flex-shrink: 0; width: 22px; height: 22px; margin: 11px 0 0; }
/* Con texto y enlace mezclados, la etiqueta va en bloque (en flex se pierden los espacios alrededor del enlace) */
.tb-solicitar .tb-sol-terminos .form-check-label { display: block; padding-top: 10px; color: var(--tb-texto); }
.tb-solicitar #sol-requisitos-error { margin-top: 12px; }

/* Botón principal de cada paso */
.tb-solicitar .tb-sol-accion > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.tb-solicitar .tb-sol-boton { flex: 1 1 auto; }
.tb-solicitar .tb-sol-accion-nota { flex-basis: 100%; font-size: 14px; color: var(--tb-texto-suave); text-align: center; }
.tb-solicitar .tb-sol-boton-volver { flex: 0 0 auto; order: -1; }

/* Bloqueo por mora */
.tb-solicitar .tb-sol-bloqueo { max-width: 560px; margin: 8px auto 0; text-align: center; display: grid; gap: 8px; justify-items: center; }
.tb-solicitar .tb-sol-bloqueo .tb-titulo-3 { margin: 0; }
.tb-solicitar .tb-sol-bloqueo-icono {
    width: 56px; height: 56px; border-radius: var(--tb-radio-lg); display: grid; place-items: center;
    background: var(--tb-error-fondo); color: var(--tb-error); font-size: 24px;
}
.tb-solicitar .tb-sol-bloqueo-monto { color: var(--tb-error); }
.tb-solicitar .tb-sol-bloqueo-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }

/* Celular y tableta: el botón queda fijo abajo, encima de la barra inferior del cliente */
@media (max-width: 991.98px) {
    .tb-solicitar { padding-bottom: 112px; }
    .tb-solicitar .tb-sol-accion {
        position: fixed; left: 0; right: 0; bottom: var(--tb-sol-nav); z-index: 1020;
        padding: 12px 16px; background: var(--tb-superficie);
        border-top: 1px solid var(--tb-borde); box-shadow: 0 -4px 16px rgba(46, 26, 71, .08);
    }
    .tb-solicitar[data-fase-actual="2"] .tb-sol-resultado { display: none; }
}
@media (min-width: 768px) {
    .tb-solicitar .tb-sol-resultado { padding: 24px; }
    .tb-solicitar .tb-sol-plan-lista, .tb-solicitar .tb-sol-plan-total-lista { display: none; }
    .tb-solicitar .tb-sol-plan-tabla { display: table; }
}
@media (min-width: 992px) {
    .tb-solicitar .tb-sol-layout {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
        grid-template-rows: auto auto auto 1fr;
        gap: 16px 24px;
        align-items: start;
    }
    .tb-solicitar .tb-sol-layout > * { grid-column: 1; }
    .tb-solicitar .tb-sol-layout > .tb-sol-resultado { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 16px; }
    .tb-solicitar .tb-sol-boton { flex: 0 1 auto; min-width: 260px; }
    .tb-solicitar .tb-sol-accion-nota { flex-basis: auto; text-align: left; }
    .tb-solicitar .tb-sol-boton-volver { order: 0; }
}
@media (min-width: 1600px) {
    .tb-solicitar { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-solicitar .tb-sol-esqueleto span { animation: none; }
}

/* --------------------------------------------------------------------------
   16. Tabla (§5 Tablas): en celular una tarjeta por fila, en PC una tabla.
   Markup: <table class="tb-tabla"> con <thead>; cada <td> lleva data-etiqueta con el nombre de su
   columna (se muestra en celular). La celda .tb-tabla-principal es el dato principal de la fila (va
   arriba, sin etiqueta); .tb-tabla-monto alinea a la derecha. Como en celular la tabla deja de verse
   como tabla, lleva role="table" y sus partes role="row", "columnheader" y "cell" para los lectores
   de pantalla. Nunca desplazamiento horizontal en celular.
   -------------------------------------------------------------------------- */
.tb-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; color: var(--tb-texto); }
.tb-tabla thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tb-tabla tbody { display: grid; gap: 8px; }
.tb-tabla tr {
    display: block; padding: 12px 16px; border: 1px solid var(--tb-borde); border-radius: var(--tb-radio);
    background-color: var(--tb-superficie);
}
.tb-tabla td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 4px 0; font-size: 14px; line-height: 1.45;
}
.tb-tabla td::before { content: attr(data-etiqueta); color: var(--tb-texto-suave); }
.tb-tabla td.tb-tabla-principal { font-size: 16px; font-weight: 600; padding-bottom: 8px; }
.tb-tabla td.tb-tabla-principal::before { content: none; }
.tb-tabla td.tb-tabla-monto { font-weight: 600; white-space: nowrap; }
@media (min-width: 768px) {
    .tb-tabla { display: table; }
    .tb-tabla thead {
        position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
        white-space: normal; display: table-header-group;
    }
    .tb-tabla tbody { display: table-row-group; }
    .tb-tabla tr { display: table-row; padding: 0; border: 0; border-radius: 0; background: none; }
    .tb-tabla th {
        font-size: 14px; font-weight: 600; color: var(--tb-texto-suave); text-align: left;
        padding: 8px 12px; border-bottom: 1px solid var(--tb-borde);
    }
    .tb-tabla td {
        display: table-cell; height: 56px; padding: 0 12px; vertical-align: middle;
        border-bottom: 1px solid var(--tb-borde); font-size: 16px;
    }
    .tb-tabla td::before { content: none; }
    .tb-tabla td.tb-tabla-principal { font-size: 16px; padding-bottom: 0; }
    .tb-tabla th.tb-tabla-monto, .tb-tabla td.tb-tabla-monto { text-align: right; }
    .tb-tabla tbody tr:last-child td { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   17. Pantalla: inicio de Admin y Socio (dashboard_admin.html). TODO bajo .tb-panel.
   Franja de 4 cifras en violeta de marca, luego dos zonas: "Hoy" y "El negocio" (DISENO.md, Panel
   interno). La "cifra" es una composición de tokens: etiqueta en Pequeño, valor tabular, definición en
   Mínimo; una sola cifra protagonista (.tb-panel-heroe) por tarjeta. Filas de tarjetas de igual altura.
   -------------------------------------------------------------------------- */
.tb-panel { max-width: 1400px; display: grid; gap: 32px; padding-bottom: 16px; color: var(--tb-texto); }
.tb-panel p { margin: 0; }
.tb-panel-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.tb-panel-titulo { margin: 0; }
.tb-panel-fecha { font-size: 14px; color: var(--tb-texto-suave); margin-top: 4px; }
.tb-panel-atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-panel-zona { display: grid; gap: 24px; }
.tb-panel-zona > h2 { margin: 0; }
.tb-panel-zona-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.tb-panel-zona-cabecera h2 { margin: 0; }
.tb-panel-rejilla { display: grid; gap: 24px; align-items: stretch; }  /* misma altura por fila */
.tb-panel-bloque { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tb-panel-pie { margin-top: auto; align-self: flex-start; }  /* el enlace de la tarjeta queda abajo */
.tb-panel-bloque h3 { margin: 0; }
.tb-panel-bloque-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tb-panel-subtitulo { font-size: 16px; font-weight: 600; margin: 8px 0 0; }
.tb-panel-enlaces { display: flex; flex-wrap: wrap; gap: 0 16px; }

/* La cifra */
.tb-panel-cifras { display: grid; gap: 16px; margin: 0; }
.tb-panel-cifra dt { font-size: 14px; font-weight: 500; color: var(--tb-texto-suave); }
.tb-panel-cifra dd { margin: 0; }
.tb-panel-valor { font-size: 20px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tb-panel-valor-grande { font-size: 32px; font-weight: 700; line-height: 1.1; }
.tb-panel-define { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--tb-texto-suave); max-width: 75ch; }
.tb-panel-nota { font-size: 12px; line-height: 1.4; color: var(--tb-texto-suave); }
.tb-panel-malo { color: var(--tb-error); }
.tb-panel-comparacion { font-weight: 600; color: var(--tb-texto); }
/* Inicio: una cifra protagonista por tarjeta ("Monto destacado" de celular: 32px, 700), el resto 16px 600 */
.tb-panel-inicio .tb-panel-valor { font-size: 16px; }
.tb-panel-inicio .tb-panel-heroe { font-size: 32px; font-weight: 700; line-height: 1.1; }
.tb-panel-inicio .tb-panel-heroe + .tb-panel-define { margin-top: 4px; }

/* Barra de avance con su porcentaje al lado ("12 % pagado") */
.tb-panel-barra-fila { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tb-panel-barra-fila .tb-barra { flex: 1; }
.tb-panel-barra-fila > span { font-size: 14px; font-weight: 500; color: var(--tb-texto-suave); white-space: nowrap; }

/* Tarjetas de "Hoy": solo las que tienen datos; se reparten el ancho (2, 3 o 4 por fila) */
.tb-panel-tarjetas { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
/* Una sola tarjeta en la fila: ocupa todo el ancho */
.tb-panel-una { display: grid; }
/* Cifras de una tarjeta ancha, en fila */
.tb-panel-cifras-fila { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }

/* Ceros: pesan menos que los datos (el color nunca es la única señal: el número sigue a la vista) */
.tb-panel .tb-panel-cero, .tb-panel .tb-panel-cero .tb-monto { color: var(--tb-texto-suave); }

/* Fila "Al día": lo que está en 0, en una sola línea angosta */
.tb-panel-al-dia {
    background-color: var(--tb-superficie); border-radius: var(--tb-radio-lg); box-shadow: var(--tb-sombra-tarjeta);
    padding: 12px 16px;
}
.tb-panel-al-dia ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.tb-panel-al-dia li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tb-texto-suave); min-height: 24px; }
.tb-panel-al-dia .bi { color: var(--tb-exito); }

/* "i" con la definición: <details> nativo (se abre al tocar o con el teclado), área táctil de 44px; el texto
   aparece como un globo junto a la "i" (máximo 300px, nunca más ancho que la pantalla menos 32px) y sigue en el
   HTML. El globo se ancla a la propia "i" (antes, al contenedor posicionado más cercano: en una celda de tabla no
   había ninguno y ocupaba toda la ventana). Al abrirlo, tebillegar.js lo corre para que quede dentro de la pantalla. */
.tb-panel-cifra, .tb-panel-franja-cifra, .tb-panel-bloque-cabecera, .tb-panel-tramos li, .tb-panel-subtitulo, .tb-panel-al-dia li { position: relative; }
.tb-info { position: relative; display: inline-block; vertical-align: middle; }
.tb-info > summary {
    display: inline-flex; align-items: center; justify-content: center; width: var(--tb-area-tactil); height: var(--tb-area-tactil);
    margin: -12px -8px; border-radius: var(--tb-radio-pill); color: var(--tb-violeta-500); cursor: pointer; list-style: none;
    transition: background-color var(--tb-transicion);
}
.tb-info > summary::-webkit-details-marker { display: none; }
.tb-info > summary:hover { background-color: var(--tb-violeta-50); }
.tb-info-texto {
    position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px; padding: 12px;
    width: max-content; max-width: min(300px, calc(100vw - 32px));
    white-space: normal; text-transform: none; letter-spacing: normal;
    background-color: var(--tb-superficie); color: var(--tb-texto); border-radius: var(--tb-radio);
    box-shadow: var(--tb-sombra-menu); font-size: 14px; font-weight: 400; line-height: 1.45; text-align: left;
}
.tb-fondo-oscuro .tb-info > summary { color: var(--tb-violeta-100); }
.tb-fondo-oscuro .tb-info > summary:hover { background-color: var(--tb-violeta-700); }

/* Franja de cifras clave (violeta de marca). Sobre --tb-violeta-900: etiqueta --tb-dorado-500 (7,2:1),
   cifra blanca (15,5:1), definición --tb-violeta-100 (12,7:1); anillo de foco dorado (.tb-fondo-oscuro). */
.tb-panel-franja {
    display: grid; grid-template-columns: minmax(0, 1fr);  /* celular: una columna, las cifras no se parten */
    box-shadow: var(--tb-sombra-tarjeta);
}
.tb-panel-franja-cifra {
    display: flex; flex-direction: column; gap: 4px; padding: 16px; min-width: 0;
    color: var(--tb-superficie); text-decoration: none; border-radius: var(--tb-radio-lg);
}
a.tb-panel-franja-cifra:hover { background-color: var(--tb-violeta-700); color: var(--tb-superficie); }
.tb-panel-franja-cifra + .tb-panel-franja-cifra { box-shadow: inset 0 1px 0 var(--tb-violeta-700); }
.tb-panel-franja-etiqueta { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--tb-dorado-500); }
.tb-panel-franja-valor { font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tb-superficie); white-space: nowrap; }
.tb-panel-franja-define { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--tb-violeta-100); }
.tb-panel-franja-define .tb-panel-comparacion { color: var(--tb-violeta-100); }
.tb-panel-franja-valor a { color: inherit; text-decoration: none; }
.tb-panel-franja-valor a:hover { text-decoration: underline; }
.tb-panel-punto { width: 8px; height: 8px; border-radius: var(--tb-radio-pill); background-color: var(--tb-dorado-500); display: inline-block; }

/* Avisos de "Por resolver": filas enlace de 56px */
.tb-panel-avisos { list-style: none; margin: 0; padding: 0; }
.tb-panel-avisos li + li { border-top: 1px solid var(--tb-borde); }
.tb-panel-avisos a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: 8px 4px; color: var(--tb-texto); text-decoration: none; border-radius: var(--tb-radio-sm);
}
.tb-panel-avisos a:hover { background-color: var(--tb-violeta-50); }
.tb-panel-avisos a > span:first-child { display: grid; font-weight: 600; }
.tb-panel-avisos small { font-size: 12px; font-weight: 500; color: var(--tb-texto-suave); }
.tb-panel-cuenta { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 32px; text-align: center; justify-content: center; }

/* Filas cortas (tramos de mora, desglose de cartera, indicadores) */
.tb-panel-tramos { list-style: none; margin: 0; padding: 0; }
.tb-panel-tramos li {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
    min-height: 44px; border-bottom: 1px solid var(--tb-borde); font-size: 14px;
}
.tb-panel-tramos li:last-child { border-bottom: 0; }
.tb-panel-tramos li > span:first-child { flex: 1 1 auto; }

/* Estado vacío */
.tb-panel-vacio { display: flex; align-items: center; gap: 12px; color: var(--tb-texto-suave); padding: 8px 0; }
.tb-panel-vacio .bi { font-size: 24px; color: var(--tb-violeta-500); }

/* "Préstamos": filtros activos (cada uno es un botón secundario con su "×" que lo quita) y paginación.
   Solo tokens; áreas táctiles de 44px; la página actual en --tb-violeta-100 con aria-current. */
.tb-filtros-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.tb-filtros-activos .btn { font-size: 14px; }
.tb-paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 16px; }
.tb-paginacion a, .tb-paginacion span {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-width: var(--tb-area-tactil); min-height: var(--tb-area-tactil); padding: 0 12px;
    border-radius: var(--tb-radio); font-weight: 600; color: var(--tb-violeta-900); text-decoration: none;
    font-variant-numeric: tabular-nums; transition: background-color var(--tb-transicion);
}
.tb-paginacion a:hover { background-color: var(--tb-violeta-50); }
.tb-paginacion [aria-current="page"] { background-color: var(--tb-violeta-100); }
.tb-paginacion .tb-paginacion-hueco { color: var(--tb-texto-suave); min-width: auto; padding: 0 4px; }

/* Orden de "Préstamos": título, franja, buscador y "Filtros" en una fila, filtros activos, lista; 24px entre
   bloques. Las zonas del resumen y de los filtros activos (las actualiza el buscador en vivo) no ocupan lugar
   propio: si están vacías no dejan hueco. "Filtros" es un botón secundario que abre su panel bajo la fila. */
.tb-prestamos { gap: 24px; }
.tb-prestamos-zona { display: contents; }
.tb-buscar-filtros { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.tb-buscar-filtros .tb-buscar { flex: 1 1 0; min-width: 0; }  /* una sola fila también a 390px */
.tb-buscar-filtros .tb-buscar input[type="search"] { flex: 1 1 auto; width: 1%; min-width: 0; }  /* se encoge él, no los botones */
.tb-buscar-filtros .btn, .tb-filtros { flex-shrink: 0; }
.tb-filtros > summary { list-style: none; }
.tb-filtros > summary::-webkit-details-marker { display: none; }
.tb-filtros[open] > summary { background-color: var(--tb-violeta-100); }
.tb-filtros-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; padding: 24px;
    background-color: var(--tb-superficie); border-radius: var(--tb-radio-lg); box-shadow: var(--tb-sombra-menu);
}
@media (max-width: 575.98px) { .tb-filtros-panel { padding: 16px; } }

@media (min-width: 576px) {
    .tb-panel-franja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-panel-franja-cifra:nth-child(2) { box-shadow: inset 1px 0 0 var(--tb-violeta-700); }
    .tb-panel-franja-cifra:nth-child(4) { box-shadow: inset 1px 0 0 var(--tb-violeta-700), inset 0 1px 0 var(--tb-violeta-700); }
}
@media (min-width: 768px) {
    .tb-panel-rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .tb-panel-rejilla:not(.tb-panel-rejilla-2) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tb-panel-franja { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tb-panel-franja-cifra { padding: 24px; }
    .tb-panel-franja-valor { font-size: 40px; }
    .tb-panel-franja-cifra:nth-child(3),
    .tb-panel-franja-cifra:nth-child(4) { box-shadow: inset 1px 0 0 var(--tb-violeta-700); }
}
/* Pantallas anchas: el contenido se centra, como el inicio del cliente */
@media (min-width: 1600px) {
    .tb-panel { width: 100%; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   18. Pantalla: "El negocio" de Admin y Socio (negocio.html). Usa las piezas de .tb-panel (sección 17);
   aquí solo lo propio de las gráficas (DISENO.md, Gráficas): leyenda en HTML y alto del lienzo.
   -------------------------------------------------------------------------- */
.tb-negocio-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.tb-negocio-leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.tb-negocio-muestra { width: 12px; height: 12px; border-radius: var(--tb-radio-sm); display: inline-block; }
.tb-negocio-muestra-capital { background-color: var(--tb-violeta-500); }
.tb-negocio-muestra-interes { background-color: var(--tb-dorado-500); }
.tb-negocio-grafica { position: relative; height: 220px; }
.tb-negocio-grafica-baja { height: 200px; }
.tb-negocio-detalle > summary {
    display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
    min-height: var(--tb-area-tactil); cursor: pointer; list-style: none; border-radius: var(--tb-radio-sm);
}
.tb-negocio-detalle > summary::-webkit-details-marker { display: none; }
.tb-negocio-detalle > summary h3 { margin: 0; }
.tb-negocio-detalle[open] > summary { margin-bottom: 12px; }
@media (min-width: 768px) {
    .tb-negocio-grafica { height: 280px; }
    .tb-negocio-grafica-baja { height: 220px; }
}
@media (min-width: 1200px) {
    .tb-panel-rejilla.tb-negocio-rejilla { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* Inicio del Cobrador: la lista del día (una tarjeta por cliente, una fila por préstamo) */
.tb-lista-dia { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.tb-cobro-cliente { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tb-cobro-cliente h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tb-cobro-cliente > div { display: flex; gap: 8px; flex-shrink: 0; }
.tb-cobro-prestamo { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--tb-borde); }
.tb-cobro-prestamo > p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tb-cobro-prestamo .btn { width: 100%; }
/* Llamar y WhatsApp: botón de ícono de 44x44 (sin el verde de WhatsApp: solo colores de la marca) */
.tb-boton-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tb-area-tactil); height: var(--tb-area-tactil); border-radius: var(--tb-radio-pill);
    background-color: var(--tb-violeta-50); color: var(--tb-violeta-500); font-size: 20px; text-decoration: none;
    transition: background-color var(--tb-transicion);
}
.tb-boton-icono:hover { background-color: var(--tb-violeta-100); color: var(--tb-violeta-500); }
@media (min-width: 576px) {
    .tb-cobro-prestamo .btn { width: auto; justify-self: start; }
}
@media (min-width: 992px) {
    .tb-lista-dia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Un cliente con 2 o más préstamos ocupa toda la fila y sus préstamos van uno al lado del otro */
    .tb-lista-dia > .tb-tarjeta:has(> .tb-cobro-prestamo + .tb-cobro-prestamo) {
        grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 24px;
    }
    .tb-lista-dia > .tb-tarjeta:has(> .tb-cobro-prestamo + .tb-cobro-prestamo) > .tb-cobro-cliente {
        grid-column: 1 / -1; padding-bottom: 16px; border-bottom: 1px solid var(--tb-borde);  /* una sola línea, no una por columna */
    }
    .tb-lista-dia > .tb-tarjeta:has(> .tb-cobro-prestamo + .tb-cobro-prestamo) > .tb-cobro-prestamo { border-top: 0; padding-top: 0; }
}
@media (min-width: 1200px) {
    /* Franja con 3 cifras (el Cobrador sin permisos de avisos): 3 columnas, sin hueco a la derecha */
    .tb-panel-franja:has(> .tb-panel-franja-cifra:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
    .tb-lista-dia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Libreta de cuentas de desembolso (feat/cuentas-libreta): tarjetas enmascaradas, una columna en celular y dos
   desde 992px. Número 20px/700 en --tb-violeta-900; datos 14px en --tb-texto-suave (6,5:1). */
.tb-cuentas { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .tb-cuentas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tb-cuenta { display: grid; gap: 4px; align-content: start; }  /* no reparte el contenido si la fila es más alta */
.tb-cuenta-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tb-cuenta-numero { margin: 0; font-size: 20px; font-weight: 700; color: var(--tb-violeta-900);
    font-variant-numeric: tabular-nums; }
.tb-cuenta-dato { margin: 0; font-size: 14px; color: var(--tb-texto-suave); }
.tb-cuenta-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Alta de una cuenta: formulario centrado a 600px. */
.tb-cuenta-formulario { max-width: 600px; margin-inline: auto; }