/* ==========================================================================
   comun.css: la barra común de base.html y las utilidades de área táctil. Se carga en TODAS las pantallas
   (migradas o no), después del <style> de base.html y de tebillegar.css. Solo tokens de tokens.css (y el
   --color-secundario de la Configuración del sitio). Lo exige gestion/test_accesibilidad_barra_comun.py.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Áreas táctiles de 44px (DISENO.md §6 y contrato, punto 5)
   -------------------------------------------------------------------------- */
/* column-gap: en inline-flex el espacio entre un ícono y su texto deja de contar ("⎋Salir"); .25em es un espacio. */
.tb-tactil {
    min-height: var(--tb-area-tactil); min-width: var(--tb-area-tactil);
    display: inline-flex; align-items: center; justify-content: center; column-gap: .25em;
}
/* Enlace de texto suelto: el área que se toca crece hasta 44px sin mover el dibujo. inline-flex con alto mínimo, y un
   margen negativo que devuelve la línea a su alto (1lh). Un navegador sin la unidad 1lh descarta la regla entera y el
   enlace queda como hoy (el relleno sobre un enlace normal no servía: se suma al alto del texto y quedaba en 41px). */
@supports (height: 1lh) {
    .tb-tactil-texto {
        display: inline-flex; align-items: center; column-gap: .25em; min-height: var(--tb-area-tactil);
        margin-block: min(0rem, calc((1lh - var(--tb-area-tactil)) / 2));
    }
    /* Montos con enlace de la franja: crecen SOLO hacia abajo (encima está la "i" de su etiqueta; debajo, la línea
       pequeña, que no se toca). El número no se mueve. min-width: montos de una o dos cifras ("0", "10"). */
    .tb-panel-franja-valor a {
        display: inline-flex; align-items: flex-start; min-height: var(--tb-area-tactil); min-width: var(--tb-area-tactil);
        margin-block: 0 min(0rem, calc(1lh - var(--tb-area-tactil)));
    }
}
/* La "i" de la etiqueta de la franja: su área de 44px (tebillegar.css, centrada con márgenes de -12px) bajaba 8px hasta
   la línea del número. Crece hacia arriba (hacia el margen de la cifra, donde no hay nada que tocar); el ícono y la nota
   abierta quedan exactamente donde estaban. */
.tb-panel-franja-etiqueta .tb-info > summary { margin-block: -1.25rem -0.25rem; padding-top: 1rem; }
/* Barra superior por debajo de 1200px (sin el saludo del centro): cada lado toma su ancho natural; con dos mitades
   iguales, lo de la derecha (campana, avatar y Salir) no cabía a 320px y pisaba el botón del menú. */
@media (max-width: 1199.98px) {
    .app-topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
}
/* tebillegar.css iguala los botones de la barra en el inicio del cliente y en el simulador (min-height: 0, inline-block,
   con un selector fuerte); el área de 44px manda también ahí. */
body .app-topbar .btn.tb-tactil,
body .offcanvas .btn.tb-tactil { min-height: var(--tb-area-tactil); display: inline-flex; }

/* --------------------------------------------------------------------------
   Barra común
   -------------------------------------------------------------------------- */
/* El menú lateral (position: relative) queda encima de la barra superior (sticky, 1020): si no, la barra tapa la parte
   del círculo de contraer que sobresale. Los modales (1055), el menú del celular (1045) y los tooltips (1080) siguen
   encima de todo. */
.app-sidebar { z-index: 1021; }
.bottom-nav-cliente .nav-item-inferior { color: var(--tb-texto-suave); }   /* 3,25:1 → 6,53:1 */
.app-sidebar.colapsado .app-brand { min-height: var(--tb-area-tactil); }

/* Contraer el menú: se toca un área de 44px; el círculo visible sigue de 26px (1.625rem), en el mismo lugar. */
.sidebar-toggle {
    width: var(--tb-area-tactil); height: var(--tb-area-tactil);
    top: calc(1.5rem + 0.8125rem - var(--tb-area-tactil) / 2); right: calc(var(--tb-area-tactil) / -2);
    background: transparent; border: 0; box-shadow: none;
}
.sidebar-toggle::before {
    content: ""; position: absolute; inset: calc((var(--tb-area-tactil) - 1.625rem) / 2); z-index: -1;
    border-radius: var(--tb-radio-pill); background: var(--tb-superficie);
    border: 1px solid var(--tb-borde); box-shadow: var(--tb-sombra-tarjeta);
    transition: border-color var(--tb-transicion), box-shadow var(--tb-transicion);
}
.sidebar-toggle:hover::before { border-color: var(--tb-violeta-500); }
.sidebar-toggle:focus { outline: none; }
.sidebar-toggle:focus-visible::before { border-color: var(--tb-violeta-500); box-shadow: var(--tb-anillo-claro); }

/* Campana (gestion/_campana_topbar.html): sin estilos en línea. */
.tb-campana { width: var(--tb-area-tactil); height: var(--tb-area-tactil); }
.tb-campana-cuenta { font-size: .6rem; }
.tb-campana-menu { min-width: 18.75rem; max-width: calc(100vw - 2rem); overflow-x: hidden; }
.tb-campana-aviso { display: flex; align-items: center; min-height: var(--tb-area-tactil);
                    white-space: normal; overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   Contraste
   -------------------------------------------------------------------------- */
/* Amarillo de marca (--color-secundario, de la Configuración; hoy el dorado): texto --tb-violeta-900, nunca blanco
   (DISENO.md §2). Antes vivía en base.html con texto blanco (2,16:1). */
.text-bg-warning, .btn-warning {
    background-color: var(--color-secundario) !important;
    border-color: var(--color-secundario) !important;
    color: var(--tb-violeta-900) !important;
}
/* Sobre la franja oscura, la línea pequeña de cada cifra: --tb-violeta-100 (12,69:1; antes 2,37:1). */
.tb-fondo-oscuro .tb-panel-define { color: var(--tb-violeta-100); }
/* Insignia "Socio" de Usuarios (antes, estilo en línea con texto blanco sobre dorado). */
.tb-insignia-socio { background-color: var(--tb-dorado-500); color: var(--tb-violeta-900); }

/* --------------------------------------------------------------------------
   Barras de pestañas que se deslizan (static/js/pestanas.js; excepción declarada en DISENO.md, sección 11)
   -------------------------------------------------------------------------- */
/* Un degradado aparece en el borde por donde hay más pestañas y se va al llegar al final (fondo "local", sin JS). */
[data-tb-pestanas-desliza] {
    --pestanas-fondo: var(--tb-superficie);
    --pestanas-sombra: color-mix(in srgb, var(--tb-violeta-900) 18%, transparent);
    background:
        linear-gradient(to right, var(--pestanas-fondo) 30%, transparent) left / 2.5rem 100% no-repeat local,
        linear-gradient(to left, var(--pestanas-fondo) 30%, transparent) right / 2.5rem 100% no-repeat local,
        linear-gradient(to right, var(--pestanas-sombra), transparent) left / 1rem 100% no-repeat scroll,
        linear-gradient(to left, var(--pestanas-sombra), transparent) right / 1rem 100% no-repeat scroll;
    background-color: var(--pestanas-fondo);
}
/* Anillo hacia adentro: la barra se desliza (overflow) y recortaría uno hacia afuera. 6,93:1 sobre blanco. */
[data-tb-pestanas] [role="tab"]:focus-visible { outline: 2px solid var(--tb-violeta-500); outline-offset: -3px; }

/* --------------------------------------------------------------------------
   Confirmación propia (static/js/confirmar.js; feat/confirmacion-propia): un <dialog> en lugar del diálogo del
   navegador. Botones propios (no los .btn de Bootstrap: en pantallas sin migrar "Cancelar" salía azul y el rojo no era
   --tb-error). Botones de 48px (--tb-alto-control), la regla de botones de DISENO.md.
   -------------------------------------------------------------------------- */
.tb-confirmar { border: 0; padding: 0; border-radius: var(--tb-radio-xl); box-shadow: var(--tb-sombra-menu);
                width: min(28rem, calc(100vw - 2rem)); color: var(--tb-texto); background: var(--tb-superficie); }
.tb-confirmar::backdrop { background: color-mix(in srgb, var(--tb-violeta-900) 45%, transparent); }
.tb-confirmar-cuerpo { display: grid; gap: .75rem; padding: 1.5rem 1.5rem 1rem; }
.tb-confirmar-titulo { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.tb-confirmar-texto { margin: 0; color: var(--tb-texto-suave); line-height: 1.5; }
.tb-confirmar-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: 0 1.5rem 1.5rem; }
.tb-confirmar-acciones button { min-height: var(--tb-alto-control); padding: 0 1.25rem; border-radius: var(--tb-radio);
                                font: inherit; font-weight: 600; cursor: pointer; transition: background-color var(--tb-transicion); }
.tb-confirmar-cancelar { border: 1px solid var(--tb-violeta-900); background: var(--tb-superficie); color: var(--tb-violeta-900); }
.tb-confirmar-cancelar:hover { background: var(--tb-violeta-50); }
.tb-confirmar-aceptar { border: 1px solid var(--tb-violeta-900); background: var(--tb-violeta-900); color: var(--tb-superficie); }
.tb-confirmar-aceptar.tb-confirmar-peligro { border-color: var(--tb-error); background: var(--tb-error); }
.tb-confirmar-aceptar.tb-confirmar-peligro:hover { border-color: var(--tb-error-hover); background: var(--tb-error-hover); }
.tb-confirmar-acciones button:focus-visible { outline: none; box-shadow: var(--tb-anillo-claro); }

/* Etiqueta "Último registrado": la fila del único pago que se puede eliminar (Historial y "Pagos del préstamo").
   --tb-violeta-700 sobre --tb-violeta-50: 10,07:1. En línea junto al título; con -bloque, en su propia línea. */
.tb-marca-ultimo { display: inline-flex; align-items: center; margin-inline-start: .5rem; padding: .125rem .5rem;
                   border-radius: var(--tb-radio-pill); background: var(--tb-violeta-50); color: var(--tb-violeta-700);
                   font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: .1em; }
.tb-marca-ultimo-bloque { display: flex; width: fit-content; margin: .25rem 0 0; }

/* Motivo dentro de la confirmación (E2: eliminar pago, eliminar préstamo, quitar requisito). Campo de DISENO.md §5:
   etiqueta visible, borde --tb-borde-campo, foco con anillo, error en --tb-error. El diálogo se desplaza si no cabe. */
.tb-confirmar { max-height: calc(100dvh - 2rem); overflow: auto; }
.tb-confirmar-motivo { display: grid; gap: .375rem; }
.tb-confirmar-motivo[hidden], .tb-confirmar-motivo [hidden] { display: none; }
.tb-confirmar-motivo label { font-size: .875rem; font-weight: 500; color: var(--tb-texto); }
.tb-confirmar-motivo textarea { min-height: 6rem; padding: .75rem; font: inherit; font-size: 1rem; color: var(--tb-texto);
                                background: var(--tb-superficie); border: 1px solid var(--tb-borde-campo);
                                border-radius: var(--tb-radio); resize: vertical;
                                transition: border-color var(--tb-transicion), box-shadow var(--tb-transicion); }
.tb-confirmar-motivo textarea:hover { border-color: var(--tb-violeta-500); }
.tb-confirmar-motivo textarea:focus { outline: none; border-color: var(--tb-violeta-500); box-shadow: var(--tb-anillo-claro); }
.tb-confirmar-motivo textarea[aria-invalid="true"] { border-color: var(--tb-error); }
.tb-confirmar-ayuda { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--tb-texto-suave); }
.tb-confirmar-error { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--tb-error); }

/* --------------------------------------------------------------------------
   Estados de las opciones (Tarea A, feat/estados-opciones; DISENO.md §5 y §11): regla GLOBAL, sin que cada pantalla
   la pida. Lo exige gestion/test_estados_opciones.py.
   -------------------------------------------------------------------------- */
/* Menús desplegables (.dropdown-menu de Bootstrap: la campana y "Acciones"): los mismos estados que las opciones. */
.dropdown-menu {
    --bs-dropdown-link-hover-bg: var(--tb-opcion-hover-fondo);
    --bs-dropdown-link-hover-color: var(--tb-opcion-hover-texto);
    --bs-dropdown-link-active-bg: var(--tb-opcion-elegida-fondo);
    --bs-dropdown-link-active-color: var(--tb-texto);
    --bs-dropdown-link-disabled-color: var(--tb-opcion-desactivada-texto);
}
.dropdown-item:focus-visible { outline: none; background-color: var(--tb-opcion-hover-fondo); box-shadow: inset var(--tb-anillo-claro); }

/* Opciones de TODO <select> de una opción (Tarea A): el estado de la app por defecto. Solo donde el navegador lo
   soporta (appearance: base-select) y con mouse; en táctil o sin soporte queda el selector nativo. El selector
   select:not([multiple]) pesa más que .form-select (Bootstrap y tebillegar.css le ponen appearance: none). */
@supports (appearance: base-select) {
    @media (hover: hover) and (pointer: fine) {
        select:not([multiple]), ::picker(select) { appearance: base-select; }
        select:not([multiple]) { align-content: center; }
        select.form-select::picker-icon { display: none; }
        select:not([multiple])::picker-icon { color: var(--tb-violeta-900); }
        ::picker(select) { margin-block: .25rem; padding: .25rem; border: 1px solid var(--tb-borde); border-radius: var(--tb-radio);
                           background: var(--tb-superficie); box-shadow: var(--tb-sombra-menu);
                           max-height: var(--tb-lista-alto-maximo); overflow-y: auto; }   /* lista larga: se desplaza */
        select:not([multiple]) option { min-height: var(--tb-area-tactil); padding: 0 .75rem; gap: .5rem;
                                        border-radius: var(--tb-radio-sm); color: var(--tb-texto); }
        select:not([multiple]) option:checked { background: var(--tb-opcion-elegida-fondo); font-weight: 600; }
        select:not([multiple]) option:hover, select:not([multiple]) option:focus-visible {
            background: var(--tb-opcion-hover-fondo); color: var(--tb-opcion-hover-texto); outline: none; }
        select:not([multiple]) option::checkmark { color: var(--tb-opcion-elegida-marca); }
        select:not([multiple]) option:disabled { color: var(--tb-opcion-desactivada-texto); cursor: not-allowed; }
    }
}

/* --------------------------------------------------------------------------
   Contenedor de página (diseno/mi-perfil)
   -------------------------------------------------------------------------- */
/* Contenedor de página reutilizable (diseno/mi-perfil; DISENO.md §8): 1200px de ancho máximo y centrado. Lo aplica a
   las demás pantallas la rama fix/contenedor-centrado (no se define otro). */
.tb-contenedor-pagina { max-width: 75rem; margin-inline: auto; }