/* Componente compartido. Bootstrap conserva apertura, cierre, foco y backdrop. */
.th-modal {
    --th-modal-accent: var(--th-accent-blue);
    --th-modal-light: #a9d4ff;
    --bs-modal-border-radius: var(--th-radius-dialog);
    --bs-modal-inner-border-radius: calc(var(--th-radius-dialog) - 1px);
    --bs-modal-header-padding: 1.25rem 1.5rem;
    --bs-modal-padding: var(--th-space-6);
    --bs-modal-footer-gap: .625rem;
    color: var(--th-color-text);
}
.th-modal--green { --th-modal-accent: var(--th-accent-green); --th-modal-light: #91e3c1; }
.th-modal--amber { --th-modal-accent: var(--th-accent-amber); --th-modal-light: #f3cd89; }
.th-modal--red { --th-modal-accent: var(--th-accent-red); --th-modal-light: #ffb4c1; }
.th-modal--cyan { --th-modal-accent: var(--th-accent-cyan); --th-modal-light: #8cdeed; }
.th-modal--violet { --th-modal-accent: var(--th-accent-violet); --th-modal-light: #cbb5ff; }
.th-modal--slate { --th-modal-accent: var(--th-accent-slate); --th-modal-light: #becbe4; }
.th-modal .modal-content {
    background: #fff;
    border: 1px solid rgba(107, 129, 168, .3);
    box-shadow: var(--th-shadow-dialog);
    /* Encabezado y pie fijos incluso cuando el formulario los envuelve. */
    min-width: 0;
}
.th-modal .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.th-modal .modal-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 1rem;
    flex-shrink: 0;
    color: var(--th-color-on-dark);
    border-bottom: 1px solid rgba(151, 174, 220, .22);
    background: radial-gradient(ellipse at 5% 0%, rgba(89, 116, 218, .25), transparent 65%),
        linear-gradient(110deg, var(--th-color-dark-start), #172038 65%, var(--th-color-dark-end));
}
.th-modal .modal-header::before {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--th-modal-light), rgba(var(--th-modal-accent), .55), transparent);
    pointer-events: none;
}
.th-modal .modal-header::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(216, 231, 255, .15) 49%, transparent 68%);
    transform: translateX(-120%);
    pointer-events: none;
}
.th-modal.show .modal-header::after { animation: th-modal-sheen .85s .15s ease-out both; }
.th-modal .modal-title {
    min-width: 0;
    font-size: var(--th-text-lg);
    font-weight: var(--th-weight-semibold);
    line-height: 1.45;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
    flex-wrap: wrap;
}
.th-modal .modal-title > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: .65rem !important;
    border: 1px solid rgba(187, 207, 242, .2);
    border-radius: .8rem;
    color: var(--th-modal-light) !important;
    background: linear-gradient(135deg, rgba(var(--th-modal-accent), .28), rgba(160, 184, 237, .09));
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
    font-size: 1.2rem;
    vertical-align: middle;
    flex-shrink: 0;
}
.th-modal .modal-title small { font-size: var(--th-text-xs); letter-spacing: normal; }
.th-modal .modal-header .btn-close {
    --bs-btn-close-color: var(--th-color-on-dark);
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    margin: 0 0 0 auto;
    border: 1px solid rgba(187, 207, 242, .25);
    border-radius: .75rem;
    background-color: rgba(255, 255, 255, .06);
    background-size: .8rem;
    /* Icono de cierre blanco sin filtrar el fondo ni el contorno. */
    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='%23e7edf8' stroke-width='1.8' stroke-linecap='round' d='m4 4 8 8m0-8-8 8'/%3e%3c/svg%3e");
    opacity: 1;
    transition: background-color .18s, border-color .18s;
}
.th-modal .modal-header .btn-close:hover { background-color: rgba(187, 207, 242, .16); border-color: #8b9dc2; }
.th-modal .modal-body { min-width: 0; background: linear-gradient(145deg, #fff, #f7f9fd); }
.th-modal .modal-footer {
    padding: .875rem 1.25rem;
    border-top: 1px solid #e1e7f1;
    background: #f3f6fb;
    gap: .25rem;
}
.th-modal .form-label { font-size: var(--th-text-sm); font-weight: var(--th-weight-semibold); color: var(--th-color-label); }
.th-modal .form-control, .th-modal .form-select { border-radius: .65rem; }
.th-modal :is(.form-control, .form-select):not(.is-valid):not(.is-invalid):focus {
    border-color: var(--th-color-focus);
    box-shadow: var(--th-focus-ring);
}
.th-modal .input-group-text { color: #5a6e8d; background: #edf2f9; border-radius: .65rem; }
/* Conservar uniones de grupos y estados nativos de validación. */
.th-modal .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.th-modal .input-group > .form-floating:not(:last-child) > :is(.form-control, .form-select) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.th-modal .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.th-modal dl { font-size: var(--th-text-sm); }
.th-modal dt { color: #50617b; font-weight: var(--th-weight-semibold); padding-top: .5rem; padding-bottom: .5rem; }
.th-modal dd { padding-top: .5rem; padding-bottom: .5rem; margin-bottom: 0; overflow-wrap: anywhere; }
.th-modal :is(.btn-close, .form-check-input):focus-visible { outline: 3px solid var(--th-color-focus); outline-offset: 3px; }
.th-modal .modal-header .btn-close:focus-visible { outline-color: #bdd0ff; box-shadow: none; }
@keyframes th-modal-sheen { to { transform: translateX(120%); } }
@media (max-width: 575.98px) {
    .th-modal { --bs-modal-header-padding: 1rem; --bs-modal-padding: 1rem; --bs-modal-margin: .5rem; }
    .th-modal .modal-title { font-size: var(--th-text-lg); }
    .th-modal .modal-title > .bi { width: 2.1rem; height: 2.1rem; font-size: 1.05rem; }
    .th-modal .modal-header { gap: .65rem; }
    .th-modal .modal-footer { padding: .75rem; }
    .th-modal .modal-footer > .btn { flex: 1 1 auto; min-height: var(--th-control-height); }
    .th-modal dt { padding-bottom: .125rem; }
    .th-modal dd { padding-top: .125rem; }
}
@media (prefers-reduced-motion: reduce) {
    .th-modal.fade .modal-dialog, .th-modal .btn-close { transition: none; }
    .th-modal.show .modal-header::after { animation: none; }
}