/* ============================================================================
   Tema IDTA (1.9.0, ADR-015): estilos globales por componente, siempre a través de los tokens.

   Orden en index.html: bootstrap → bootstrap-icons → material-base (Radzen) → idta-fuentes → idta-brand-tokens →
   idta-tokens → idta-theme (este) → idta-splash → app.css → estilos scoped (.razor.css).
   Bloques: base · botones · formularios · tarjetas y modales · tablas y grids · utilidades (.idta-*) · accesibilidad y
   movimiento. La cabecera, el menú lateral, el drawer móvil y el perfil viven en idta-navegacion.css (ADR-016).
   Todo lo que toca clases .rz-* de Radzen está en un solo bloque comentado: es lo que puede romperse al
   subir de versión (Radzen 11.1.7 al escribir esto).
   ============================================================================ */

/* --- Base --------------------------------------------------------------------------------------------- */
html, body {
    font-family: var(--idta-fuente);
    background-color: var(--idta-bg);
    color: var(--idta-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--idta-navy-deep);
    font-weight: 600;
    letter-spacing: -.01em;
}

a {
    color: var(--idta-blue);
    text-decoration: none;
    transition: color var(--idta-transicion) var(--idta-easing);
}

a:hover {
    color: var(--idta-blue-dark);
    text-decoration: underline;
}

/* --- Botones (Bootstrap 5.2: solo se redefinen sus variables) ---------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--idta-radius-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-focus-box-shadow: var(--idta-halo);
    transition: color var(--idta-transicion) var(--idta-easing), background-color var(--idta-transicion) var(--idta-easing),
                border-color var(--idta-transicion) var(--idta-easing), box-shadow var(--idta-transicion) var(--idta-easing),
                transform var(--idta-transicion) var(--idta-easing);
}

.btn:not(:disabled):not(.disabled):hover {
    transform: translateY(-1px);
}

.btn:not(:disabled):not(.disabled):active {
    transform: translateY(0);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--idta-blue);
    --bs-btn-border-color: var(--idta-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--idta-blue-dark);
    --bs-btn-hover-border-color: var(--idta-blue-dark);
    --bs-btn-focus-shadow-rgb: var(--idta-blue-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--idta-blue-dark);
    --bs-btn-active-border-color: var(--idta-blue-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--idta-blue);
    --bs-btn-disabled-border-color: var(--idta-blue);
    box-shadow: 0 2px 8px rgba(var(--idta-blue-rgb), .22);
}

.btn-primary:hover {
    box-shadow: 0 4px 14px rgba(var(--idta-blue-rgb), .30);
}

.btn-outline-primary {
    --bs-btn-color: var(--idta-blue-dark);
    --bs-btn-border-color: var(--idta-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--idta-blue);
    --bs-btn-hover-border-color: var(--idta-blue);
    --bs-btn-focus-shadow-rgb: var(--idta-blue-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--idta-blue-dark);
    --bs-btn-active-border-color: var(--idta-blue-dark);
    --bs-btn-disabled-color: var(--idta-blue);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--idta-blue);
}

.btn-secondary {
    --bs-btn-color: var(--idta-navy-deep);
    --bs-btn-bg: var(--idta-surface);
    --bs-btn-border-color: var(--idta-borde);
    --bs-btn-hover-color: var(--idta-navy-deep);
    --bs-btn-hover-bg: var(--idta-surface-hover);
    --bs-btn-hover-border-color: var(--idta-borde-hover);
    --bs-btn-focus-shadow-rgb: var(--idta-navy-rgb);
    --bs-btn-active-color: var(--idta-navy-deep);
    --bs-btn-active-bg: var(--idta-surface-active);
    --bs-btn-active-border-color: var(--idta-borde-activo);
    --bs-btn-disabled-color: var(--idta-text-secundario);
    --bs-btn-disabled-bg: var(--idta-surface);
    --bs-btn-disabled-border-color: var(--idta-borde);
}

.btn-outline-secondary {
    --bs-btn-color: var(--idta-text-secundario);
    --bs-btn-border-color: var(--idta-borde);
    --bs-btn-hover-color: var(--idta-navy-deep);
    --bs-btn-hover-bg: var(--idta-surface);
    --bs-btn-hover-border-color: var(--idta-borde);
    --bs-btn-active-color: var(--idta-navy-deep);
    --bs-btn-active-bg: var(--idta-surface);
    --bs-btn-active-border-color: var(--idta-borde);
}

.btn-success {
    --bs-btn-bg: var(--idta-success);
    --bs-btn-border-color: var(--idta-success);
    --bs-btn-hover-bg: var(--idta-success-medio);
    --bs-btn-hover-border-color: var(--idta-success-medio);
    --bs-btn-active-bg: var(--idta-success-oscuro);
    --bs-btn-active-border-color: var(--idta-success-oscuro);
    --bs-btn-disabled-bg: var(--idta-success);
    --bs-btn-disabled-border-color: var(--idta-success);
}

.btn-danger {
    --bs-btn-bg: var(--idta-error);
    --bs-btn-border-color: var(--idta-error);
    --bs-btn-hover-bg: var(--idta-error-medio);
    --bs-btn-hover-border-color: var(--idta-error-medio);
    --bs-btn-active-bg: var(--idta-error-oscuro);
    --bs-btn-active-border-color: var(--idta-error-oscuro);
    --bs-btn-disabled-bg: var(--idta-error);
    --bs-btn-disabled-border-color: var(--idta-error);
}

.btn-warning {
    --bs-btn-bg: var(--idta-warning);
    --bs-btn-border-color: var(--idta-warning);
    --bs-btn-hover-bg: var(--idta-warning-medio);
    --bs-btn-hover-border-color: var(--idta-warning-medio);
    --bs-btn-active-bg: var(--idta-warning-oscuro);
    --bs-btn-active-border-color: var(--idta-warning-oscuro);
    --bs-btn-color: var(--idta-navy-deep);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

/* Único uso del degradado de marca como acento: llamada a la acción principal (login). */
.idta-cta-gradiente {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--idta-gradient-brand);
    background-size: 160% 160%;
    background-position: 0% 50%;
    box-shadow: var(--idta-shadow-glow-blue);
    transition: background-position 400ms var(--idta-easing), box-shadow var(--idta-transicion) var(--idta-easing), transform var(--idta-transicion) var(--idta-easing);
}

.idta-cta-gradiente:hover, .idta-cta-gradiente:focus-visible {
    background-position: 100% 50%;
    box-shadow: 0 0 32px rgba(var(--idta-cyan-rgb), .35);
}

.idta-cta-gradiente:disabled, .idta-cta-gradiente.disabled {
    background-image: var(--idta-gradient-brand);
    opacity: .6;
}

/* --- Formularios -------------------------------------------------------------------------------------- */
.form-control, .form-select, .input-group-text {
    border-color: var(--idta-borde);
    border-radius: var(--idta-radius-sm);
    color: var(--idta-text);
    transition: border-color var(--idta-transicion) var(--idta-easing), box-shadow var(--idta-transicion) var(--idta-easing);
}

.form-control:focus, .form-select:focus {
    border-color: var(--idta-blue);
    box-shadow: var(--idta-halo);
    color: var(--idta-text);
}

.form-control::placeholder {
    color: var(--idta-text-secundario); /* el muted del kit queda en 2,6:1 */
}

.form-label {
    color: var(--idta-text-secundario);
    font-weight: 500;
    font-size: .9rem;
}

.form-floating > label {
    color: var(--idta-text-secundario);
}

.input-group-text {
    background-color: var(--idta-surface);
    color: var(--idta-text-secundario);
}

.form-check-input:checked {
    background-color: var(--idta-blue);
    border-color: var(--idta-blue);
}

.form-check-input:focus {
    border-color: var(--idta-blue);
    box-shadow: var(--idta-halo);
}

/* --- Tarjetas y modales ------------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--idta-borde-suave);
    --bs-card-border-radius: var(--idta-radius-md);
    --bs-card-inner-border-radius: calc(var(--idta-radius-md) - 1px);
    --bs-card-cap-bg: var(--idta-surface);
    --bs-card-bg: var(--idta-superficie-elevada);
    box-shadow: var(--idta-shadow-sm);
}

.card-header {
    font-weight: 600;
    color: var(--idta-navy-deep);
}

/* Tarjeta de vidrio: solo el login (sobre el fondo oscuro). */
.idta-glass {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 24px 60px rgba(var(--idta-navy-rgb), .35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.modal-content {
    --bs-modal-border-radius: var(--idta-radius-md);
    --bs-modal-border-color: var(--idta-borde-suave);
    --bs-modal-header-border-color: var(--idta-borde-suave);
    --bs-modal-footer-border-color: var(--idta-borde-suave);
    box-shadow: var(--idta-shadow-card);
}

.modal-header {
    background-color: var(--idta-superficie-elevada);
}

.modal-title {
    color: var(--idta-navy-deep);
    font-weight: 600;
}

/* Sustituye a modal-header style="justify-content:center; color:#2176FF": título centrado en azul de marca. */
.idta-titulo-modal {
    justify-content: center;
    color: var(--idta-blue-dark);
}

.idta-titulo-modal .modal-title {
    color: var(--idta-blue-dark);
}

/* Modal «¡Venta exitosa!» (Components/ImprimirDialogo.razor). */
.idta-venta-exitosa {
    padding: .5rem .25rem;
    text-align: center;
}

.idta-venta-exitosa-cabecera {
    background: var(--idta-success-suave);
    border-radius: var(--idta-radius-md);
    padding: 1.25rem 1rem 1rem;
    margin-bottom: 1rem;
    animation: idta-venta-exitosa-entrada .26s ease-out;
}

.idta-venta-exitosa-icono {
    display: block;
    font-size: 4rem;
    line-height: 1;
    color: var(--idta-success-medio);
}

.idta-venta-exitosa-titulo {
    margin: .5rem 0 .25rem;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--idta-success-oscuro);
}

.idta-venta-exitosa-detalle {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--idta-navy-deep);
}

.idta-venta-exitosa-pregunta {
    font-size: 1.15rem;
    margin-bottom: 0;
}

@keyframes idta-venta-exitosa-entrada {
    from { transform: scale(.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .idta-venta-exitosa-cabecera {
        animation: none;
    }
}

/* --- Tablas (Bootstrap) ------------------------------------------------------------------------------ */
.table {
    --bs-table-border-color: var(--idta-borde-suave);
    --bs-table-striped-bg: #FAFCFF;
    --bs-table-hover-bg: rgba(var(--idta-blue-rgb), .06);
    --bs-table-hover-color: var(--idta-navy-deep);
}

.table > thead {
    color: var(--idta-navy-deep);
    font-weight: 600;
    font-size: .875rem;
}

.table > thead > tr > th {
    border-bottom: 1px solid var(--idta-borde);
    background-color: var(--idta-superficie-elevada);
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-primary, .table > :not(caption) > tr.table-primary > * {
    --bs-table-bg: var(--idta-blue-suave);
    --bs-table-color: var(--idta-navy-deep);
    background-color: var(--idta-blue-suave);
    color: var(--idta-navy-deep);
}

/* --- Radzen 11.1.7 (único bloque con selectores .rz-*; revisar al subir de versión) ------------------- */
.rz-data-grid {
    border-radius: var(--idta-radius-md);
    box-shadow: var(--idta-shadow-sm);
    background-color: var(--idta-superficie-elevada);
}

.rz-data-grid .rz-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.rz-data-grid .rz-grid-table thead th .rz-column-title {
    letter-spacing: .01em;
}

.rz-datatable-data tr, .rz-grid-table tbody tr {
    transition: background-color var(--idta-transicion) var(--idta-easing);
}

.rz-paginator {
    border-top: 1px solid var(--idta-borde-suave);
    background-color: var(--idta-superficie-elevada);
    border-radius: 0 0 var(--idta-radius-md) var(--idta-radius-md);
}

.rz-paginator .rz-paginator-page.rz-state-active {
    background-color: var(--idta-blue);
    color: #fff;
}

.rz-textbox, .rz-inputtext, .rz-dropdown, .rz-multiselect, .rz-spinner, .rz-calendar .rz-inputtext, .rz-textarea, .rz-numeric input {
    border-radius: var(--idta-radius-sm);
}

.rz-dialog {
    border-radius: var(--idta-radius-md);
    overflow: hidden;
}

.rz-dialog-titlebar {
    border-bottom: 1px solid var(--idta-borde-suave);
    padding-block: 1rem;
}

.rz-notification-item {
    border-radius: var(--idta-radius-md);
}

.rz-button.rz-primary {
    box-shadow: 0 2px 8px rgba(var(--idta-blue-rgb), .22);
}

/* Botones Radzen "text" transparentes de la cabecera y del perfil (antes background-color: #4340d200 inline). */
.idta-boton-plano.rz-button, .idta-boton-plano.rz-button:hover {
    box-shadow: none;
    background-color: transparent;
}

/* Modal «¡Venta exitosa!» (ImprimirDialogo, modo Preguntar): fondo más oscuro y un borde de éxito. La máscara de Radzen
   es un elemento aparte del diálogo, por eso se alcanza con :has() sin depender del orden. */
body:has(.rz-dialog.idta-modal-venta) .rz-dialog-mask {
    background-color: var(--idta-mascara-fuerte-color);
    opacity: var(--idta-mascara-fuerte-opacidad);
}

.rz-dialog.idta-modal-venta {
    border-top: 6px solid var(--idta-success-medio);
}

/* --- fin del bloque Radzen ---------------------------------------------------------------------------- */

/* --- Utilidades IDTA (sustituyen a los estilos inline repetidos: color: blue/black !important, #2176FF) --- */
.idta-etiqueta {
    display: block;
    font-weight: 600;
    color: var(--idta-navy-deep);
}

.idta-valor {
    display: block;
    font-weight: 600;
    color: var(--idta-blue-dark);
    font-variant-numeric: tabular-nums;
}

.idta-valor-positivo {
    display: block;
    font-weight: 600;
    color: var(--idta-success-oscuro);
    font-variant-numeric: tabular-nums;
}

.idta-valor-negativo {
    display: block;
    font-weight: 600;
    color: var(--idta-error-oscuro);
    font-variant-numeric: tabular-nums;
}

.idta-texto-primario {
    color: var(--idta-blue-dark);
}

.idta-texto-secundario {
    color: var(--idta-text-secundario);
}

.idta-panel {
    background-color: var(--idta-superficie-elevada);
    border: 1px solid var(--idta-borde-suave);
    border-radius: var(--idta-radius-md);
    box-shadow: var(--idta-shadow-sm);
}

/* Estado vacío (dashboard sin cajas): flecha discreta + mensaje. */
.idta-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--idta-text-secundario);
}

.idta-vacio h1 {
    font-size: 1.5rem;
    color: var(--idta-blue-dark);
}

/* --- Accesibilidad y movimiento ----------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--idta-blue);
    outline-offset: 2px;
}

.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: none; /* ya llevan el halo */
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .btn:not(:disabled):not(.disabled):hover {
        transform: none;
    }
}