/* ==========================================================================
   Content/styles.css
   CSS propio del proyecto, unificado desde app-formulario.css,
   factura-descuento.css, Stepper.css y el bloque inline de _LayoutAdmin.cshtml.
   Vendor (bootstrap, fontawesome, sweetalert2, datatables, bootstrap-datepicker)
   y el par nicepage.css / Certificados-de-Firma-Digital.css se mantienen aparte.
   ========================================================================== */

/* ---- origen: app-formulario.css ---- */

@import "https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i";


/* El scrollbar del navegador queda siempre reservado/visible, incluso en
   paginas cortas sin overflow real. Sin esto, al abrir/cerrar un modal
   (AppModal.js bloquea el scroll con overflow:hidden) el scrollbar
   aparece y desaparece de golpe, corriendo el ancho del contenido. */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    height: 100%;
}

/* "Sticky footer": sin esto, en paginas con poco contenido (ej.
   SolicitudCancelada.cshtml) el footer queda flotando a media pantalla en
   vez de pegado abajo, porque nada empuja el contenido a llenar el alto
   restante del viewport. */
body {
    font-family: 'Montserrat', sans-serif;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

body > header {
    flex: 0 0 auto;
}

body > #body {
    flex: 1 0 auto;
}

body > footer {
    flex: 0 0 auto;
}

.div-border {
    border: 1px solid;
    border-color: #003881;
    padding: 25px;
    margin-top: -0.98px;
}

.tab-border {
    border: 1px solid;
    border-color: #003881;
}

.button-tab {
}

.border-tab {
    border: 1px solid;
    border-color: #003881;
    margin-top: -17px;
}

#ccsd-logo {
    border-radius: 6.5px;
}

#login-card {
    max-width: 50%;
    margin: 65px auto;
}

.custom-select {
    width: 45px !important;
    padding: 0 !important;
}

.loading {
    opacity: 0.6 !important;
}

#user-dropdown {
    position: absolute;
    right: 75px;
    top: 25px;
}

#logs_db {
    width: 960px;
    position: absolute;
    bottom: 0;
    left: 40px;
    display: none;
}

#toggle-log {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #2d2d2d;
    text-align: center;
    position: fixed;
    bottom: 5px;
    left: 5px;
    opacity: 0.2;
}

    #toggle-log svg {
        margin-top: 9px;
    }

#pills-tab li {
    margin: auto;
    text-align: center;
}

    #pills-tab li span {
        font-size: 12px;
    }

a.subtab-item {
    height: 60px;
    width: 312px;
    text-align: center;
    background-color: #ffffff;
    color: #2196f3;
    border-radius: 0 !important;
    border: 1px solid #2196f3;
    font-size: smaller;
    text-decoration: none;
}

@media screen and (min-width: 1200px) {
    a.subtab-item {
        line-height: 40px;
        white-space: nowrap;
        font-size: 12px;
    }

    .button-tab {
        line-height: 40px;
        white-space: nowrap;
        font-size: 12px;
    }

    .btn-onboarding-three {
        width: 80%;
    }

    .card-onboarding {
        height: 500px !important;
    }
}

#type-certificade-pills-tabContent {
    padding: 10px;
}

.color-blue {
    color: #2196f3;
}

.border-blue {
    border: 1px solid #2196f3;
}

.title-2px-border-top {
    border-top: 2px solid #3c3c3c;
}

.title-2px-border-bottom {
    border-bottom: 2px solid #3c3c3c;
}

.title-1px-border-top {
    border-top: 1px solid #2196f3;
}

.title-1px-border-bottom {
    border-bottom: 1px solid #2196f3;
}

/* Separador de seccion "linea - texto - linea" (ej. "Datos del Titular del
   Certificado"). Sobrescribe el combo de bordes arriba/abajo de las 2 reglas
   anteriores, que dejaba el texto encajonado entre dos lineas pegadas. */
.title-1px-border-bottom.title-1px-border-top.color-blue {
    display: flex;
    align-items: center;
    gap: .75rem;
    border-top: none;
    border-bottom: none;
    margin: 1.5rem 0;
    padding: 0;
    color: #003881;
    font-weight: 700;
    font-size: .95rem;
}

.title-1px-border-bottom.title-1px-border-top.color-blue::before,
.title-1px-border-bottom.title-1px-border-top.color-blue::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: #dbe3ef;
}

/* Titulo principal del paso del wizard (ej. "Solicitud de Firma Digital para
   Persona Fisica"). Distinto del separador de seccion de arriba: una sola
   linea acento corta y centrada debajo, en vez de lineas a los lados. */
.fx-page-title {
    text-align: center;
    margin: .5rem 0 1.75rem;
    padding: 0;
    color: #003881;
    font-size: 1.3rem;
    font-weight: 700;
}

.fx-page-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: .6rem auto 0;
    background-color: #003881;
    border-radius: 2px;
}

.br-100 {
    border-radius: 100%;
}

.onboard-card-img {
    width: 160px;
    max-width: 100%;
    margin: auto;
}

.btn-onboarding-three {
    width: 95%;
    margin-left: 10px;
}

.card-onboarding {
    height: 600px;
    cursor: pointer;
}

    .card-onboarding p.card-text {
        font-size: small;
    }

.box-space {
    height: 300px;
}

.bg-silver {
    background: silver;
}

.border-bottom-silver {
    border-bottom: 1px solid silver;
}

.font-size-medium {
    font-size: medium;
}

.rounded-pill-10px {
    border-radius: 10px;
}

.pills-tab-css {
    cursor: default;
    margin: auto;
    font-size: 28px;
    border: 1px solid;
    width: 100px !important;
    height: 100px !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.btn-file {
    width: 37px;
    height: 37px;
    background-image: url("images/iconos-web/Iconos-pagina-web-digifirma-blanco_Mas.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

.btn-trash {
    width: 37px;
    height: 37px;
    background-image: url("images/iconos-web/Iconos-paagina-web-digifirma-blanco-papelera.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

#pills-tabContent {
    border-left: 1px solid #2196f3;
    border-right: 1px solid #2196f3;
    border-bottom: 1px solid #2196f3;
}

.border-top-blue {
    border-top: 1px solid #2196f3;
}

#btn-save-details {
    width: 44px;
    height: 44px;
    background-image: url("images/iconos-web/blanco_Guardar.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

#btn-print-details {
    width: 44px;
    height: 44px;
    background-image: url("images/iconos-web/blanco_Imprimir.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

.custom-file-input:hover {
    cursor: pointer;
}

.custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file-input::before {
    content: 'Select some files';
    display: inline-block;
    background: linear-gradient(top, #f9f9f9, #e3e3e3);
    border: 1px solid #999;
    border-radius: 3px;
    padding: 5px 8px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 10pt;
}

.custom-file-input:hover::before {
    border-color: black;
}

.custom-file-input:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

#video-container {
    width: 200px;
    margin: auto;
    text-align: center;
}

.popover-header, .popover-body {
    font-weight: bold;
}

.font-size-smaller {
    font-size: smaller;
}

#record-buttons {
    width: 220px;
}

.file-inside-btn {
    margin-left: -13px;
    margin-top: -7px;
    padding: 18px;
}

@media print {
    svg {
        width: 20%;
    }
}

.clear {
    margin-bottom: 100px;
    color: red
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip-custom .tooltiptext {
    visibility: hidden;
    width: 500px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
    text-align: justify;
}

    /* Tooltip arrow */
    .tooltip-custom .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }


/* IMAGENES EN LOS BOTONES DE LOS FORMULARIOS */

.formulario-azul {
    background-image: url(images/iconos-web/Formulario-de-solicitud-azul.jpg);
    background-size: cover;
}

.formulario-gris {
    background-image: url(images/iconos-web/Formulario-de-solicitud-gris.jpg);
    background-size: cover;
}

/* Header (#sec-32a7): logo + nav via flex en vez del hack de margin negativo
   de nicepage.css, que rompe (nav monta sobre el logo) cuando el menu
   tiene mas items de los que caben en una sola linea. */
#sec-32a7 .u-sheet-1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;
}

#sec-32a7 .u-image-1 {
    margin: 0 0 0 26px;
}

#sec-32a7 .u-menu-1 {
    margin: 0 0 0 auto;
}

/* Un poco de aire entre items del navbar (el padding de cada link ya esta
   ajustado al minimo para que entren todos en una linea, ver #sec-32a7 mas
   abajo -- este margen es el "presupuesto" que sobro de ese ajuste). */
#sec-32a7 .u-nav-item {
    margin-right: 4px;
}

/* Quita el border oscuro que nicepage.css mete en :active (click) en los
   links del navbar; deja intacto el subrayado de :hover / pagina actual. */
#sec-32a7 .u-nav-link {
    -webkit-tap-highlight-color: transparent;
}

#sec-32a7 .u-nav-link:active {
    border-color: transparent !important;
}

#sec-32a7 .u-nav-link:focus,
#sec-32a7 .u-nav-link:focus-visible {
    outline: none;
}

/* ---- origen: factura-descuento.css ---- */

input[type="radio"] {
    margin-top: -5px;
    vertical-align: middle;
}

/* =========================================================================
   Pantalla de Facturacion (_Factura.cshtml) -- sistema minimalista "fx-*"
   Flat, sin sombras/cards pesadas, tipografia como jerarquia principal,
   un solo acento (#003881, el navy real de marca usado en botones/stepper).
   Todo escopado bajo #form-factura para no filtrar a otras pantallas y para
   garantizar que gane sobre los estilos base de Bootstrap (bootstrap.min.css
   carga despues de este archivo).
   ========================================================================= */

.fx-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
}

.fx-titular-card {
    background-color: #fafafa;
    border-radius: 14px;
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}

.fx-titular-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    font-weight: 700;
    color: #003881;
    margin-bottom: 1.25rem;
}

/* Header del titular: titulo (clickeable para expandir/colapsar) + boton
   Remover, siempre en el mismo lugar sin importar si es el ultimo titular o
   si esta expandido/colapsado (antes el boton vivia en 2 sitios distintos,
   cada uno con su propia condicion de indice, y quedaba sin mostrarse en
   ciertas combinaciones). */
.fx-titular-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.fx-titular-header-title {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.fx-titular-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

/* Resumen de un titular ya completo y colapsado (varios titulares institucionales,
   ver toggleTitularExpandido en Main.cshtml): nombre + datos agrupados por tipo
   (identidad / trabajo / contacto), para no perder de vista la info aunque
   este contraido. Acento navy a la izquierda, igual que el resto del sistema
   fx-* (fx-doc-chip, fx-info-note, etc. usan acento de color a un lado). */
.fx-titular-collapsed-summary {
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    background-color: #fafafa;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #003881;
    border-radius: 10px;
    cursor: pointer;
}

.fx-titular-collapsed-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #e5e7eb;
}

.fx-titular-collapsed-name-text {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #111827;
    font-weight: 600;
    font-size: .9rem;
}

.fx-titular-collapsed-name-text i {
    color: #003881;
}

.fx-titular-collapsed-check {
    color: #1a7f37;
    font-size: .95rem;
}

.fx-titular-collapsed-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1.5rem;
    font-size: .8rem;
    color: #6b7280;
}

.fx-titular-collapsed-group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.fx-titular-collapsed-group-label {
    margin-bottom: .1rem;
    color: #9ca3af;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fx-titular-collapsed-group span {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    /* un correo largo no tiene espacios, sin esto desborda la columna en vez
       de saltar de linea */
    overflow-wrap: anywhere;
}

.fx-titular-collapsed-group i {
    flex: 0 0 auto;
    width: 1.1rem;
    margin-top: .15rem;
    color: #9ca3af;
}

/* Contenedor de los campos del titular: colapsa/expande con transicion en vez
   de aparecer/desaparecer de golpe (v-show). */
.fx-titular-fields {
    max-height: 2000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height .35s ease, opacity .25s ease .05s;
}

.fx-titular-fields--collapsed {
    max-height: 0;
    opacity: 0;
    transition: max-height .3s ease, opacity .15s ease;
}

/* ----- Selector de vigencia: cards tipo "plan de suscripcion", no inputs -----
   Sin control visual de radio/checkbox: la card entera cambia de color/sombra al
   elegirla, con una etiqueta "Seleccionado" en vez de un punto de radio. ----- */
#form-factura .fx-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#form-factura .fx-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
    min-height: 190px;
    padding: 1.75rem 1.25rem 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    cursor: pointer;
    background-color: #fff;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    #form-factura .fx-plan-card:hover {
        border-color: #90a4c9;
        box-shadow: 0 4px 14px rgba(17,24,39,.08);
        transform: translateY(-2px);
    }

#form-factura .fx-toggle-input:checked + .fx-plan-card {
    border-color: #003881;
    background-color: rgba(0,56,129,.04);
    box-shadow: 0 6px 20px rgba(0,56,129,.16);
    transform: translateY(-2px);
}

#form-factura .fx-toggle-input:focus-visible + .fx-plan-card {
    outline: 2px solid #003881;
    outline-offset: 2px;
}

#form-factura .fx-plan-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(0,56,129,.08);
    color: #003881;
    font-size: .95rem;
}

#form-factura .fx-plan-duration {
    padding: .2rem .7rem;
    border-radius: 999px;
    background-color: #eef1f6;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #4b5563;
    margin-top: .25rem;
}

#form-factura .fx-toggle-input:checked + .fx-plan-card .fx-plan-duration {
    background-color: rgba(0, 56, 129, .08);
    color: #003881;
}

#form-factura .fx-plan-price-row {
    margin-top: .1rem;
}

#form-factura .fx-plan-price {
    font-size: 1.7rem;
    font-weight: 800;
    color: #111827;
}

#form-factura .fx-toggle-input:checked + .fx-plan-card .fx-plan-price {
    color: #003881;
}

#form-factura .fx-plan-period {
    font-size: .74rem;
    color: #9ca3af;
    line-height: 1.3;
}

#form-factura .fx-plan-check {
    display: none;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background-color: #003881;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

#form-factura .fx-toggle-input:checked + .fx-plan-card .fx-plan-check {
    display: inline-flex;
}

/* Error de "debe elegir vigencia": ValidacionFormulario.js le agrega .border.border-danger
   (clases genericas de Bootstrap) al contenedor de las cards, y al limpiarse lo cambia a
   .border.border-success (verde) en vez de quitarlo -- ninguno de los dos debe verse, las
   cards ya tienen su propio estado seleccionado/error individual. */
#form-factura .fx-plan-list-sm.border {
    border: none !important;
}

    #form-factura .fx-plan-list-sm.border-danger .fx-plan-card {
        border-color: #dc3545;
    }

#form-factura .fx-plan-list-sm .invalid-feedback {
    margin-top: .75rem;
    font-size: .85rem;
}

    #form-factura .fx-plan-list-sm .invalid-feedback i {
        color: #dc3545;
    }

/* ----- Campos del formulario -----
   Reusable en cualquier formulario del sitio, no solo Factura. Mismo tamano que el resto
   (Bootstrap .form-control por defecto: padding .375rem .75rem) -- solo se toca color de
   borde/foco. Selector de 2 clases (.form-control.fx-input) le gana en especificidad a
   Bootstrap sin depender de un ID contenedor. ----- */
.fx-label {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: .5rem;
}

/* Valor de solo lectura en pantallas de resumen/confirmacion (reemplaza el
   <input readonly>, que visualmente seguia pareciendo un campo editable:
   borde, cursor de texto, foco por tab). */
.fx-confirm-value {
    min-height: 1.3em;
    font-size: .92rem;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
}

/* Campo "neutro" en Confirmacion: dato que aplica a toda la solicitud (ej.
   Tipo de Certificado), no a una tarjeta especifica (Titular/Representante),
   asi que se muestra fuera de esas tarjetas, sin el acento navy de las demas. */
/* Panel de "Informacion de factura" en Confirmacion: se queda fijo al hacer
   scroll, ya que los datos del titular/representante (columna izquierda)
   pueden ser mucho mas largos. align-self:start es necesario porque el
   .row de Bootstrap estira las columnas por defecto (align-items:stretch),
   lo que dejaria esta columna sin espacio de sobra para "pegarse". */
.fx-confirm-factura-sticky {
    align-self: flex-start;
    position: sticky;
    top: calc(var(--fx-sticky-offset, 0px) + 1rem);
    /* Al abrir/cerrar el modal de confirmacion, Bootstrap alterna overflow:hidden
       en body/html para bloquear el scroll de fondo; eso rompe momentaneamente
       position:sticky y al restaurarse el navegador reubica el panel de golpe.
       La transicion no evita el salto mismo, pero lo convierte en un movimiento
       suave en vez de un glitch visible. */
    transition: top 0.25s ease;
}

@media (max-width: 991px) {
    .fx-confirm-factura-sticky {
        position: static;
    }
}

/* Tarjetas de seleccion en Index (Persona Fisica / Institucional / Facturacion
   Electronica) -- mismo lenguaje que fx-plan-card en _Factura.cshtml (borde
   sutil, acento navy), pero mas grandes/llamativas ya que son la primera
   decision que toma el usuario en todo el flujo. Toda la card es clickeable
   (toggleDetail via v-on:click en el div), el boton de adentro es solo la
   afirmacion visual/teclado -- el click real burbujea al div.
   align-items:stretch + text-align:left (en vez de centrado) porque el icono
   ahora va en linea junto al titulo (fx-choice-card-header) -- un header a la
   izquierda con contenido centrado abajo se ve descuadrado, asi que toda la
   card quedo alineada a la izquierda. min-height baja de 300 a 260 porque el
   header en una sola fila (icono+titulo) ahorra el alto que antes ocupaba el
   icono como fila propia arriba del titulo. */
.fx-choice-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    height: 100%;
    min-height: 260px;
    padding: 2rem 1.5rem 1.75rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    background-color: #fff;
    color: #111827;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .2s ease, filter .2s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fx-choice-card:hover {
    border-color: #003881;
    box-shadow: 0 10px 28px rgba(0, 56, 129, .14);
    transform: translateY(-4px);
}

/* Al expandir el detalle de una card, esa se resalta y las otras dos se
   atenuan -- refuerza visualmente cual eligio el usuario mientras lee. */
.fx-choice-card--selected {
    border-color: #003881;
    box-shadow: 0 10px 28px rgba(0, 56, 129, .18);
}

.fx-choice-card--selected:hover {
    transform: none;
}

.fx-choice-card--dimmed {
    opacity: .45;
    filter: grayscale(.4);
}

/* Sin esto una card atenuada se ve "apagada"/no interactiva -- el hover le
   devuelve opacidad y le agrega el mismo resalte que las demas para que el
   usuario entienda que igual puede elegirla. */
.fx-choice-card--dimmed:hover {
    opacity: .85;
    filter: grayscale(0);
    border-color: #003881;
    box-shadow: 0 10px 28px rgba(0, 56, 129, .14);
    transform: translateY(-4px);
}

/* Icono + titulo en linea (antes el icono iba arriba, centrado, en su propia
   fila) -- aprovecha el espacio horizontal de la card en vez de gastar una
   fila completa de alto solo para el icono. */
.fx-choice-card-header {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.fx-choice-card-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(0, 56, 129, .08);
}

.fx-choice-card-icon {
    width: 32px;
    max-width: 100%;
    height: auto;
}

.fx-choice-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.3;
    color: #0b2447;
}

/* Cada plan (1 año / 2 años) va en un badge con su precio, debajo de la
   descripcion -- primero el usuario lee de que se trata el certificado, y
   recien despues compara vigencia/costo entre las 3 cards. margin (en vez
   de depender solo del gap:1rem de fx-choice-card) le da mas aire respecto
   a la descripcion de arriba y al boton de abajo, para que se lea como un
   bloque propio y no como una linea mas pegada al texto. */
.fx-choice-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5rem;
    margin: .4rem 0 .85rem;
}

.fx-choice-card-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background-color: rgba(0, 56, 129, .07);
    border: 1px solid rgba(0, 56, 129, .12);
    font-size: .78rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* El plan de 2 años se destaca un poco mas que el de 1 año -- equivale a
   USD$22.50/año (vs USD$29.95/año del plan corto), asi que el fondo/borde
   un punto mas solido empuja sutilmente hacia la opcion de mejor valor, sin
   llegar a competir con el boton primario. */
.fx-choice-card-badge--price {
    background-color: rgba(0, 56, 129, .1);
    border-color: rgba(0, 56, 129, .22);
}

.fx-choice-card-badge-icon {
    font-size: .72rem;
    color: #003881;
}

.fx-choice-card-badge-label {
    color: #6b7280;
    font-weight: 600;
}

.fx-choice-card-badge-value {
    color: #003881;
    font-weight: 800;
}

/* Alineada a la izquierda, igual que el header (icono+titulo), los badges y
   los requisitos -- asi arranca pegada al mismo margen que el resto del
   contenido de la card, en vez de flotar centrada sola. min-height reserva
   4 lineas (la descripcion mas larga es la de Factura Electronica) para que
   el boton "Ver detalles" arranque siempre a la misma altura en las 3 cards,
   sin importar que las otras descripciones sean mas cortas. */
.fx-choice-card-desc {
    align-self: stretch;
    min-height: 5.9rem;
    font-size: .92rem;
    font-weight: 400;
    color: #374151;
    line-height: 1.6;
}

/* El boton va pegado justo debajo de la descripcion (sin mt-auto) porque su
   posicion debe depender SOLO de icon+title+desc -- todos con alto fijo/
   reservado -- y no de lo que venga despues (fx-choice-card-info), que varia
   de una card a otra segun la cantidad de requisitos. Si el boton quedara
   pegado al fondo del bloque siguiente (como antes), la card con menos
   requisitos (Personal) tendria mas espacio libre arriba del boton y este
   quedaria mas abajo que en las otras cards. */
.fx-choice-card-actions {
    display: flex;
    align-self: stretch;
    gap: .6rem;
    margin-top: .75rem;
}

.fx-choice-card-actions .fx-btn {
    flex: 1 1 0;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Resumen de requisitos debajo del boton "Ver detalles" (vigencia/costo ya
   se movieron arriba, a fx-choice-card-badges, junto al titulo). A diferencia
   del resto de la card (centrada), esto va alineado a la izquierda porque es
   una lista de datos concretos, no texto descriptivo. min-height reserva
   espacio para el caso de 3 items (Institucional/Factura Electronica)
   tambien en la card de 2 items (Personal) -- mantiene las 3 cards con una
   altura pareja, aunque ya no es lo que alinea el boton (eso ahora lo hace
   el min-height de fx-choice-card-desc de arriba). */
.fx-choice-card-info {
    align-self: stretch;
    width: 100%;
    min-height: 4.5rem;
    text-align: left;
    padding-top: .25rem;
    border-top: 1px solid #eef0f3;
}

.fx-choice-card-info-row {
    margin: 0 0 .35rem;
    font-size: .92rem;
    color: #374151;
}

.fx-choice-card-info-row strong {
    color: #6b7280;
    font-weight: 600;
}

/* Label "Requisitos:" pegado a la lista de abajo -- sin esto hereda el
   margin-bottom de fx-choice-card-info-row (.35rem) y se suma al margin-top
   de la lista, dejando un salto mas grande de lo necesario. */
.fx-choice-card-info-list-label {
    margin-bottom: .15rem;
}

/* margin-left indenta la lista completa respecto al label "Requisitos:" de
   arriba -- deja claro que son items DENTRO de esa categoria, no otra fila
   suelta al mismo nivel que Vigencia/Costo. */
.fx-choice-card-info-list {
    list-style: none;
    margin: 0 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-size: .92rem;
    color: #374151;
    line-height: 1.4;
}

.fx-choice-card-info-list li {
    position: relative;
    padding-left: .9rem;
}

.fx-choice-card-info-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .5rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #003881;
}

/* En mobile las 3 cards apiladas a min-height:300px c/u son mucho scroll para
   llegar a elegir -- se achican (menos padding, icono mas chico, min-height
   por contenido en vez de fijo) sin sacar informacion, solo mas compactas. */
@media (max-width: 768px) {
    .fx-choice-card {
        min-height: 0;
        padding: 1.25rem 1.25rem 1rem;
        gap: .65rem;
    }

    .fx-choice-card-header {
        gap: .65rem;
    }

    .fx-choice-card-icon-wrap {
        width: 46px;
        height: 46px;
    }

    .fx-choice-card-icon {
        width: 27px;
    }

    .fx-choice-card-title {
        font-size: 1.05rem;
    }

    .fx-choice-card-desc {
        min-height: 0;
        font-size: .85rem;
        line-height: 1.45;
    }

    .fx-choice-card-info-row,
    .fx-choice-card-info-list {
        font-size: .85rem;
    }

    .fx-choice-card-badge {
        font-size: .74rem;
        padding: .3rem .6rem;
    }
}

/* Pagina de detalle de un tipo de certificado (InfoCertificado.cshtml).
   Antes esta informacion vivia en un panel que se expandia inline debajo de
   las cards de Index (de ahi el nombre fx-detail-expand-* que tenian estas
   reglas); ahora es una pagina propia, asi que el contenido se centra en una
   columna angosta -- mas facil de leer que estirado a lo ancho del
   container -- y el titulo/tarjeta de contenido se agrandan para que se
   sientan como el protagonista de la pagina en vez de un panel secundario. */
.fx-info-page {
    max-width: 900px;
    margin: 0 auto;
}

.fx-info-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.5rem;
    padding: 0;
    border: none;
    background: none;
    color: #6b7280;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}

.fx-info-back:hover {
    color: #003881;
    transform: translateX(-3px);
}

.fx-info-hero {
    margin-bottom: 1.75rem;
}

.fx-info-kicker {
    display: inline-block;
    margin-bottom: .85rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    background-color: rgba(0, 56, 129, .08);
    color: #003881;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fx-info-title {
    margin: 0;
    color: #0b2447;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.25;
}

/* Tarjeta blanca que contiene el detalle (intro + requisitos + propiedades +
   costos + CTA, renderizados por los partials _InfoFormulario/_*) -- le da
   al contenido un limite claro en vez de flotar suelto sobre el fondo de la
   pagina, consistente con el resto del sitio (choice cards, etc. tambien
   usan tarjeta blanca con borde + sombra suave). */
.fx-info-content {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 2.25rem 2.5rem;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
}

@media (max-width: 768px) {
    .fx-info-title {
        font-size: 1.6rem;
    }

    .fx-info-content {
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
    }
}

/* Contenido de InfoCertificado.cshtml (_InfoFormulario/_personas|_institucional|
   _facturaElectronica) -- version "plana": sin fondo tintado ni insignias
   circulares (eso lo usa el panel de Requisitos de abajo); aqui solo
   tipografia + una linea divisoria bajo cada titulo de seccion. Tamanos
   levemente mas grandes que el original (pensado para el panel angosto que
   se expandia dentro de Index) ya que ahora es el contenido central de su
   propia pagina, con mas aire para respirar. */
/* Parrafo introductorio de cada partial de detalle -- reemplaza el
   style="text-align:justify" inline que tenian antes (calibrado para el
   panel angosto de Index) por texto mas grande/legible acorde a que ahora
   es lo primero que se lee en su propia pagina. */
.fx-info-intro {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #374151;
    text-align: left;
}

.fx-flat-section {
    margin-top: 2.75rem;
}

.fx-flat-section:first-child {
    margin-top: 0;
}

.fx-flat-section-title {
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #003881;
    padding-bottom: .5rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid #e5e7eb;
}

.fx-flat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    font-size: 1rem;
    color: #374151;
    line-height: 1.6;
}

.fx-flat-list li {
    position: relative;
    padding-left: 1rem;
}

.fx-flat-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #003881;
}

/* Link al instructivo de Prueba de vida -- pegado al item que lo explica en
   vez de un chip de descarga suelto sin relacion visual clara con el resto
   de la lista. */
.fx-flat-list-note-link {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .35rem;
    font-size: .82rem;
    font-weight: 600;
    color: #003881;
    text-decoration: none;
}

.fx-flat-list-note-link:hover {
    text-decoration: underline;
}

.fx-flat-price-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.fx-flat-price-table {
    width: 100%;
    min-width: 360px;
    border-collapse: collapse;
    font-size: .95rem;
}

.fx-flat-price-table thead th {
    padding: .75rem 1rem;
    background-color: #f8f9fb;
    color: #003881;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.fx-flat-price-table thead th:not(:first-child),
.fx-flat-price-table tbody td:not(:first-child) {
    text-align: right;
}

.fx-flat-price-table tbody th,
.fx-flat-price-table tbody td {
    padding: .9rem 1rem;
    color: #374151;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

/* tbody th (fila = un plan) hereda text-align/font-weight normal del navegador
   para <th> -- se resetea aca porque el estilo real lo dan los spans internos
   (fx-flat-price-plan / fx-flat-price-plan-sub), no el th en si. */
.fx-flat-price-table tbody th {
    text-align: left;
    font-weight: 400;
}

.fx-flat-price-table tbody tr:last-child th,
.fx-flat-price-table tbody tr:last-child td {
    border-bottom: none;
}

.fx-flat-price-table tbody tr:hover {
    background-color: rgba(0, 56, 129, .03);
}

.fx-flat-price-plan {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.fx-flat-price-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: #003881;
}

.fx-flat-price-note {
    font-size: .8rem;
    color: #6b7280;
}

.fx-flat-price-badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background-color: rgba(0, 56, 129, .1);
    color: #003881;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Unico boton de accion al final del panel expandido (ya no hay "Atras": se
   cierra con la X del header o volviendo a tocar "Ver detalles"). Separado
   con su propio borde superior para que se lea como el cierre/CTA del
   detalle, no como un item mas de la seccion de costos. */
.fx-flat-cta {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 2px solid rgba(0, 56, 129, .12);
    text-align: center;
}

.fx-flat-cta-hint {
    margin-bottom: .85rem;
    font-size: .85rem;
    color: #6b7280;
}

.fx-flat-cta .fx-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: .8rem 1.5rem;
    font-size: 1rem;
}

.fx-flat-cta-btn-title {
    font-weight: 700;
}

/* Recuerda que certificado se esta por solicitar -- el usuario ya hizo scroll
   mas alla del titulo del panel para llegar aca y lo perdio de vista. Texto
   simple, sin chip/pill, mas chico y tenue que el titulo del boton. */
.fx-flat-cta-btn-sub {
    font-size: .75rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .75);
}

/* Salida rapida para el usuario que llego hasta el fondo del panel (paso los
   requisitos/propiedades/costo) y decide que no quiere continuar con este
   certificado -- mismo destino que la X de arriba (closeDetail), pero visible
   sin tener que volver a subir. Deliberadamente discreto (no es un fx-btn)
   para no competir visualmente con la accion principal. */
.fx-flat-cta-cancel {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .9rem;
    padding: 0;
    border: none;
    background: none;
    color: #6b7280;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.fx-flat-cta-cancel:hover {
    color: #003881;
    text-decoration: underline;
}

/* Lista de requisitos/propiedades con check en vez de bullet, estilo
   minimalista consistente con el resto del sistema fx-*. */
.fx-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    font-size: .9rem;
    color: #374151;
    line-height: 1.5;
}

.fx-check-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.fx-check-list i {
    flex: 0 0 auto;
    margin-top: .2rem;
    color: #003881;
}

/* Variante con puntos en vez de check, para listas informativas donde
   el check implicaria "completado" (ej. Propiedades del Certificado). */
.fx-check-list--dots li {
    align-items: center;
}

.fx-check-list-dot {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #003881;
}

/* Tarjeta de precio estatica (paginas informativas Index/_InfoFormulario):
   mismo lenguaje visual que .fx-plan-card en _Factura.cshtml, pero sin
   scopear a #form-factura ni ser seleccionable (solo muestra el precio). */
.fx-price-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1rem .75rem .9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    background-color: #fafafa;
    text-align: center;
    height: 100%;
}

.fx-price-tile-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: .2rem .7rem;
    border-radius: 999px;
    background-color: #003881;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.fx-price-tile-icon {
    color: #003881;
    font-size: .95rem;
    margin-bottom: .1rem;
}

.fx-price-tile-duration {
    padding: .15rem .6rem;
    border-radius: 999px;
    background-color: #eef1f6;
    color: #4b5563;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fx-price-tile-amount {
    font-size: 1.2rem;
    font-weight: 800;
    color: #003881;
}

.fx-price-tile-meta {
    font-size: .7rem;
    color: #9ca3af;
}

.fx-price-tile-savings {
    font-size: .75rem;
    font-weight: 700;
    color: #1a7f37;
}

.fx-neutral-field {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    margin-bottom: 1.25rem;
    border-radius: 10px;
    background-color: #f3f4f6;
    color: #374151;
    font-size: .9rem;
}

.fx-neutral-field strong {
    color: #111827;
}

/* Nº de solicitud: el usuario lo necesita para referenciar soporte/consultas,
   merece mas peso que un dato secundario cualquiera. */
.fx-neutral-field--highlight {
    background-color: var(--appmodal-brand-soft, #e8eefc);
    color: #003881;
}

.fx-neutral-field--highlight strong {
    color: #003881;
}

/* Numero de solicitud como subtitulo prominente (patron "Order #12345" de
   recibos tipo Stripe/e-commerce): es el dato que el usuario copia para
   escribirle a soporte, merece mas peso que un chip mas entre varios. */
.fx-solicitud-number {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    font-size: 1.15rem;
    color: #4b5563;
}

.fx-solicitud-number strong {
    color: #003881;
    font-weight: 800;
}

.fx-mail-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .3rem;
    color: #003881;
    font-weight: 600;
    text-decoration: none;
}

.fx-mail-link:hover {
    text-decoration: underline;
}

.form-control.fx-input,
.form-select.fx-input {
    border: 1px solid #d1d5db;
}

    .form-control.fx-input:focus,
    .form-select.fx-input:focus {
        border-color: #003881;
        box-shadow: 0 0 0 3px rgba(0,56,129,.1);
    }

    input.form-control.fx-input:read-only {
        background-color: #f3f4f6;
        color: #6b7280;
        cursor: not-allowed;
    }

.fx-field-hint {
    margin-top: .4rem;
    font-size: .78rem;
    color: #9ca3af;
}

/* Formularios cortos (pocos campos numericos) no deben estirarse a lo ancho
   de columnas anchas: ej. Usuario/ERC en Renovacion. Centra todo el bloque
   (inputs, boton, enlaces) en vez de solo los inputs, para que la card no
   quede con espacio en blanco desbalanceado a un lado. */
.fx-form-narrow {
    max-width: 280px;
}

/* ----- Resumen de pago: panel plano, sin sombra/card, tipografia como jerarquia ----- */
.fx-summary {
    background-color: #fafafa;
    border-radius: 14px;
    padding: 1.75rem;
}

.fx-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
}

.fx-summary-row-compact {
    align-items: center;
}

.fx-summary-item-name {
    font-size: .92rem;
    font-weight: 500;
    color: #111827;
    line-height: 1.4;
}

.fx-summary-item-meta {
    margin-top: 2px;
    font-size: .8rem;
    color: #9ca3af;
}

.fx-summary-label {
    font-size: .88rem;
    color: #6b7280;
}

.fx-summary-value {
    font-size: .92rem;
    font-weight: 600;
    color: #111827;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fx-summary-discount {
    color: #059669;
}

.fx-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: .4rem 0;
}

.fx-divider-lg {
    margin: 1.75rem 0 1.25rem;
}

.fx-summary-row-total {
    padding-top: .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.fx-warning-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .85rem;
    line-height: 1.45;
    color: #92400e;
}

.fx-warning-note i {
    margin-top: .15rem;
    color: #d97706;
}

/* Variante roja para errores reales (ej. usuario/ERC no encontrado en Renovacion). */
.fx-warning-note--danger {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.fx-warning-note--danger i {
    color: #dc2626;
}

/* Igual que .fx-warning-note pero en tono informativo (navy), para avisos que
   el usuario debe notar sin que se lean como advertencia/error. */
.fx-info-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: .65rem .9rem;
    margin-top: .4rem;
    font-size: .85rem;
    line-height: 1.45;
    color: #1e3a8a;
}

.fx-info-note i {
    margin-top: .15rem;
    color: #003881;
}

.fx-info-note--inline {
    margin-top: 0;
}

/* Variante ambar para notas que combinan un estado "pendiente" con su
   explicacion en un solo badge (ej. Video Identificacion en Confirmacion). */
.fx-info-note--pending {
    background-color: #fff4e5;
    border-color: #fde9c8;
    color: #92400e;
}

.fx-info-note--pending i {
    color: #b45309;
}

.fx-total-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #003881;
    font-variant-numeric: tabular-nums;
}

.fx-caption {
    margin: .5rem 0 0;
    font-size: .74rem;
    color: #9ca3af;
    text-align: right;
}

.fx-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
}

.fx-status-badge--pending {
    background-color: #fff4e5;
    color: #b45309;
}

.fx-status-badge--success {
    background-color: #e3faf1;
    color: #1a7f37;
}

.fx-status-badge--danger {
    background-color: #fdeceb;
    color: #dc3545;
}

/* Mini stepper de estatus (Consulta/ConsultaUnataca.cshtml) -- evoca el stepper
   que se muestra en los correos de notificacion de Uanataca, adaptado al tema
   claro del sitio. Se usa para todos los estados, sin badges: ISSUED/VALID
   muestran los 5 pasos completos; CANCELLED/SUSPENDED/REVOKED marcan el paso
   correspondiente en rojo (ver PasoError en la vista). */
.fx-stepper {
    display: flex;
    align-items: flex-start;
    padding: .5rem 0 .25rem;
}

.fx-stepper__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

.fx-stepper__circle {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #d1d5db;
    position: relative;
    font-size: .68rem;
    font-weight: 700;
    color: #9ca3af;
}

.fx-stepper__step--done .fx-stepper__circle {
    background: #003881;
    border-color: #003881;
    color: #fff;
    font-size: .7rem;
}

.fx-stepper__step--active .fx-stepper__circle {
    border-color: #003881;
    color: #003881;
}

.fx-stepper__step--error .fx-stepper__circle {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.fx-stepper__marker {
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
    font-size: .6rem;
    line-height: 1;
    display: flex;
}

.fx-stepper__marker i + i {
    margin-left: -4px;
}

.fx-stepper__warning-badge {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #b45309;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    line-height: 1;
    border: 2px solid #fff;
}

.fx-stepper__line {
    flex: 1 1 auto;
    height: 2px;
    min-width: 8px;
    background: #d1d5db;
    margin-top: 12px;
}

.fx-stepper__line--done {
    background: #003881;
}

.fx-stepper__label {
    margin-top: .4rem;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-align: center;
    color: #9ca3af;
    text-transform: uppercase;
    line-height: 1.2;
}

.fx-stepper__step--active .fx-stepper__label,
.fx-stepper__step--done .fx-stepper__label {
    color: #003881;
}

.fx-stepper__step--error .fx-stepper__label {
    color: #dc3545;
}

.fx-stepper__message-box {
    margin-top: .75rem;
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .7rem .85rem;
    border: 1px solid;
    border-left-width: 3px;
    border-radius: 8px;
    text-align: left;
}

.fx-stepper__message-box i {
    flex: 0 0 auto;
    margin-top: .15rem;
    font-size: .85rem;
}

.fx-stepper__message-box span {
    font-size: .78rem;
    line-height: 1.45;
    color: #334155;
}

.fx-stepper__message-box a {
    font-weight: 600;
    text-decoration: underline;
}

.fx-stepper__message-box--info {
    background: #eef2f9;
    border-color: #d7e0ef;
    border-left-color: #003881;
}

.fx-stepper__message-box--info i,
.fx-stepper__message-box--info a {
    color: #003881;
}

.fx-stepper__message-box--warning {
    background: #fff4e5;
    border-color: #fbe3bd;
    border-left-color: #b45309;
}

.fx-stepper__message-box--warning i,
.fx-stepper__message-box--warning a {
    color: #b45309;
}

.fx-stepper__message-box--danger {
    background: #fdeceb;
    border-color: #f7cfcb;
    border-left-color: #dc3545;
}

.fx-stepper__message-box--danger i,
.fx-stepper__message-box--danger a {
    color: #dc3545;
}

/* Overlay de carga transitoria global (ver #fx-loading-overlay en _Layout.cshtml
   y Scripts/formularios/LoadingOverlay.js): dim + spinner + texto, sin caja/chrome
   de modal -- el usuario prefiere este estilo para estados de carga breves en vez
   de un AppModal completo (con borde, sombra, boton de cerrar, etc. que no aplican
   mientras solo se esta esperando), y en vez de spinners dentro de los botones. */
.fx-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    background-color: rgba(0, 22, 56, .6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.fx-loading-overlay-spinner {
    width: 44px;
    height: 44px;
    margin-bottom: .75rem;
    border: 4px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fx-loading-overlay-spin .7s linear infinite;
}

@keyframes fx-loading-overlay-spin {
    to { transform: rotate(360deg); }
}

.fx-loading-overlay-title {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

.fx-loading-overlay-sub {
    margin: 0;
    color: rgba(255, 255, 255, .8);
    font-size: .85rem;
}

/* Fila inline para ingresar el codigo de descuento (reemplaza el AppModal
   que se usaba antes para esto -- de mas para un input opcional). */
.fx-inline-code-row {
    position: relative;
    padding: .6rem .75rem;
    border: 1px solid #dbe2ec;
    border-radius: 10px;
    background-color: #f7f9fc;
}

/* El error "Debes aplicar o cancelar..." lo inserta ValidacionFormulario.js
   como sibling justo despues del input (showErrors hace $(selector).after(...)),
   dentro del flex-row de input+botones. Con order/flex-basis igual afectaba la
   altura de esa fila y recentraba (align-items-center) el label de al lado.
   Se saca del flujo por completo (absolute) para que no mueva nada, ni el
   input/botones ni el label. */
.fx-inline-code-row .invalid-feedback {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: .25rem;
}

.fx-btn.fx-btn-sm {
    padding: .25rem .65rem;
    font-size: .75rem;
    gap: .3rem;
}

.fx-code-input.fx-code-input--sm {
    max-width: 110px;
    margin: 0;
    font-size: .75rem;
    letter-spacing: .35em;
    padding: .25rem .55rem;
    padding-left: calc(.55rem + .35em);
}

.fx-code-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background-color: #eef2ff;
    color: #003881;
    font-size: .82rem;
    font-weight: 600;
}

.fx-code-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}

    .fx-code-remove:hover,
    .fx-code-remove:focus {
        background-color: rgba(0,56,129,.12);
    }

/* Boton agregar/remover titular: card con borde punteado, consistente con fx-input/fx-label */
.fx-add-titular-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    height: 100%;
    min-height: 140px;
    padding: 1.5rem 1rem;
    border: 1.5px solid #d1d5db;
    border-radius: 12px;
    background-color: #fff;
    color: #4b5563;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

    .fx-add-titular-btn:hover {
        border-color: #003881;
        color: #003881;
        background-color: rgba(0,56,129,.03);
    }

.fx-add-titular-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0,56,129,.08);
    color: #003881;
    font-size: 1.05rem;
}

/* Variante para el footer de la tarjeta: horizontal, ancho completo, en vez
   del tile alto (icono arriba, texto abajo) pensado para vivir en una columna
   angosta junto a otros campos -- ahora tiene toda la fila para si sola. */
.fx-add-titular-btn--footer {
    flex-direction: row;
    min-height: auto;
    padding: .9rem 1.25rem;
    font-size: .95rem;
}

.fx-add-titular-btn--footer .fx-add-titular-icon {
    width: 32px;
    height: 32px;
    font-size: .9rem;
}

@media (max-width: 767px) {
    .fx-add-titular-btn {
        min-height: 100px;
    }

    .fx-add-titular-btn--footer {
        min-height: auto;
    }
}

/* ----- Carga de documentos (input file estilizado) ----- */
.fx-upload {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .6rem;
}

.fx-upload .invalid-feedback,
.fx-upload-dropzone .invalid-feedback {
    flex: 1 0 100%;
    margin-top: .4rem;
}

.fx-upload-dropzone {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: .7rem 1.1rem;
    border: 1.5px dashed #d1d5db;
    border-radius: 12px;
    background: none;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

    .fx-upload-dropzone:hover {
        border-color: #003881;
        background-color: rgba(0,56,129,.03);
    }

.fx-upload-dropzone--filled {
    border-style: solid;
    border-color: #059669;
    background-color: rgba(5,150,105,.05);
}

    .fx-upload-dropzone--filled:hover {
        border-color: #059669;
        background-color: rgba(5,150,105,.08);
    }

    .fx-upload-dropzone--filled .fx-upload-icon {
        background-color: rgba(5,150,105,.12);
        color: #059669;
    }

    .fx-upload-dropzone--filled .fx-upload-sub {
        color: #059669;
    }

.fx-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0,56,129,.08);
    color: #003881;
    font-size: 1.05rem;
}

.fx-upload-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.fx-upload-title {
    font-size: .88rem;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-upload-sub {
    font-size: .76rem;
    color: #9ca3af;
}

.fx-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.fx-upload:focus-within .fx-upload-dropzone {
    border-color: #003881;
    box-shadow: 0 0 0 3px rgba(0,56,129,.1);
}

.fx-upload:has(.fx-upload-input.is-invalid) .fx-upload-dropzone {
    border-color: #dc3545;
}

/* Chip de documento cargado (formulario y pantalla de Confirmacion): reemplaza
   el preview inline (embed de PDF) por una fila compacta con boton "Ver" que
   abre el documento en un AppModal -- varios embeds inline uno debajo de otro
   se veian muy cargados. */
.fx-doc-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .4rem;
    padding: .5rem .75rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background-color: #fff;
}

.fx-doc-chip-icon {
    flex: 0 0 auto;
    color: #dc3545;
    font-size: 1.1rem;
}

.fx-doc-chip-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .85rem;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-doc-chip-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 92px;
    padding: .3rem .7rem;
    border: 1px solid #003881;
    border-radius: 999px;
    background: none;
    color: #003881;
    font-size: .8rem;
    font-weight: 600;
}

.fx-doc-chip-btn:hover {
    background-color: rgba(0, 56, 129, .06);
}

.fx-doc-chip-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.fx-doc-chip-btn--danger {
    border-color: #dc3545;
    color: #dc3545;
}

.fx-doc-chip-btn--danger:hover {
    background-color: rgba(220, 53, 69, .06);
}

/* PDF a tamano grande dentro del AppModal (verDocumento) */
.fx-doc-modal-frame {
    width: 100%;
    height: 75vh;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    /* Sin esto, al llegar al limite de scroll del visor de PDF el navegador
       encadena el scroll restante hacia la pagina de atras del modal. */
    overscroll-behavior: contain;
}

/* Enlace de descarga de una imagen (instructivo Video ID) -- antes usaba el
   mismo estilo solido de boton que fx-download-modelo, lo que lo hacia leer
   como una accion en vez de un archivo. Con miniatura real de la imagen +
   look de tarjeta plana (como fx-doc-chip) queda claro que es un adjunto. */
a.fx-image-download-chip {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background-color: #fff;
    color: inherit;
    text-decoration: none;
}

a.fx-image-download-chip:hover {
    border-color: #003881;
    background-color: rgba(0, 56, 129, .04);
}

.fx-image-download-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    flex: 0 0 auto;
}

/* Variante para archivos sin preview posible (ej. .docx): caja del mismo
   tamano que la miniatura, con el icono del tipo de archivo centrado. */
.fx-image-download-file-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background-color: #eff6ff;
    color: #003881;
    font-size: 1.3rem;
    flex: 0 0 auto;
}

.fx-image-download-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.fx-image-download-title {
    font-size: .85rem;
    font-weight: 600;
    color: #111827;
}

.fx-image-download-meta {
    font-size: .78rem;
    color: #6b7280;
}

.fx-image-download-icon {
    flex: 0 0 auto;
    color: #003881;
}

@media (max-width: 575px) {
    .fx-upload-sub {
        display: none;
    }
}

.choice-tile {
    flex: 0 1 150px;
}

.choice-tile-icon {
    width: 150px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 576px) {
    .choice-tile {
        flex: 0 1 96px;
    }

    .choice-tile-icon {
        width: 96px;
    }
}

.site-footer {
    background-color: #4d4d4d;
    color: #ffffff;
    padding: 32px 20px 16px;
    margin-top: 40px;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.site-footer-logo {
    width: 160px;
    max-width: 100%;
    height: auto;
}

.site-footer-badges {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .site-footer-badges img {
        height: 40px;
        width: auto;
    }

.site-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    text-align: center;
}

    .site-footer-contact a {
        color: #ffffff;
        text-decoration: none;
    }

        .site-footer-contact a:hover,
        .site-footer-contact a:focus {
            text-decoration: underline;
        }

    .site-footer-contact i {
        color: #4FC3F7;
        width: 1em;
        text-align: center;
    }

.site-footer-social {
    display: flex;
    gap: 10px;
}

    .site-footer-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.12);
        color: #ffffff;
        text-decoration: none;
    }

        .site-footer-social a:hover,
        .site-footer-social a:focus {
            background-color: #4FC3F7;
            color: #ffffff;
        }

.site-footer-legal {
    max-width: 1200px;
    margin: 20px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.15);
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
}

@media (max-width: 767px) {
    .site-footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .site-footer-brand {
        flex-direction: column;
    }
}

.wizard-actions-bar {
    max-width: 100%;
    overflow-x: hidden;
    padding-right: 24px;
    margin-top: 8px;
}

.wizard-actions-bar hr {
    margin: 1.25rem 0;
    border: none;
    background-color: #e5e7eb;
    opacity: 1;
}

/* Botones del wizard: mismo lenguaje visual que fx-input/fx-summary (flat, sin
   sombra/gradiente de Bootstrap), un solo acento navy #003881. */
.fx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .fx-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.fx-btn-primary {
    background-color: #003881;
    border-color: #003881;
    color: #fff;
}

    .fx-btn-primary:hover:not(:disabled),
    .fx-btn-primary:focus:not(:disabled) {
        background-color: #002a5c;
        border-color: #002a5c;
        color: #fff;
    }

.fx-btn-secondary {
    background-color: #fff;
    border-color: #d1d5db;
    color: #4b5563;
}

    .fx-btn-secondary:hover:not(:disabled),
    .fx-btn-secondary:focus:not(:disabled) {
        border-color: #003881;
        color: #003881;
        background-color: rgba(0,56,129,.04);
    }

.fx-btn-danger {
    background-color: #fff;
    border-color: #dc3545;
    color: #dc3545;
}

    .fx-btn-danger:hover:not(:disabled),
    .fx-btn-danger:focus:not(:disabled) {
        background-color: rgba(220,53,69,.06);
        border-color: #dc3545;
        color: #dc3545;
    }

.wizard-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

/* Pantallas de Detalle (Solicitud/Renovacion): un solo boton "Finalizar" en la
   fila -- con justify-content:space-between (el default de .wizard-btn-row)
   un item solo queda pegado a la izquierda en vez de centrado. margin:auto en
   el propio item lo centra sin importar el justify-content del padre. */
#btn-finish {
    margin: 0 auto;
}

/* Primer boton de la fila de 2 (Salir/Atras): empuja el segundo (Siguiente) al
   extremo derecho via margin auto, sin importar el ancho del primero. No aplica
   a wizard-btn-row-3 (Modificar/Descartar/Confirmar), que usa space-between. */
.wizard-btn-row:not(.wizard-btn-row-3) > .wizard-btn:first-child {
    margin-right: auto;
}

.wizard-btn {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: normal;
    text-align: center;
    min-height: 46px;
}

@media (max-width: 767px) {
    /* En mobile la barra sticky ya se separa del contenido con su propia
       sombra (box-shadow); la linea queda redundante ahi. */
    .wizard-actions-bar hr {
        background-color: transparent;
    }

    .wizard-actions-bar {
        position: sticky;
        bottom: 0;
        background-color: rgba(255, 255, 255, .85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 16px;
        padding-right: 40px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 20;
    }

    .wizard-btn-row {
        gap: 8px;
    }

    .wizard-btn {
        flex: 1 1 0;
        font-size: 0.85rem;
        padding-left: 8px;
        padding-right: 8px;
        min-height: 44px;
    }

    /* Modificar / Cancelar / Confirmar: too many to share a row on a phone, stack full-width, primary on top */
    .wizard-btn-row-3 {
        flex-direction: column-reverse;
    }

        .wizard-btn-row-3 .wizard-btn {
            flex: 1 1 auto;
            width: 100%;
        }
}

@media (max-width: 360px) {
    .wizard-btn {
        font-size: 0.78rem;
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* ValidacionFormulario.js inserts ".invalid-feedback" right after the <input> via
   $(selector).after(...); inside an .input-group that puts the message BETWEEN the
   input and the "Buscar" button, and Bootstrap's .invalid-feedback wants 100% width,
   forcing the button onto its own row. Pin input/button order so the message always
   renders last (full width, below), regardless of where it lands in the DOM. */
/* button.fx-search-btn (no solo .fx-search-btn): bootstrap.min.css carga
   despues de este archivo y su regla base .btn empata en especificidad,
   ganando el border por orden de cascada si no subimos especificidad aqui. */
button.fx-search-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1.5px solid #003881;
    color: #003881;
    background: none;
    font-weight: 600;
    white-space: nowrap;
}

button.fx-search-btn:hover:not(:disabled) {
    background-color: rgba(0, 56, 129, .06);
    color: #003881;
    border-color: #003881;
}

button.fx-search-btn:disabled {
    opacity: .65;
}

/* Botón "Exportar a Excel" de las tablas de reportes admin (Códigos de Descuento,
   Descuento por Cantidad): mismo lenguaje visual compacto/outline que fx-search-btn,
   solo que en verde por su asociación con Excel. Vive en la fila de filtros, no debajo
   de la tabla, para que quede visible sin importar cuántas filas/páginas tenga. */
button.btn-export {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1.5px solid #1a7f37;
    color: #1a7f37;
    background: none;
    padding: .5rem .9rem;
    border-radius: 6px;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

button.btn-export:hover {
    background-color: rgba(26, 127, 55, .06);
}

.doc-search-group .form-control {
    order: 1;
}

.doc-search-group .btn {
    order: 2;
}

.doc-search-group .invalid-feedback {
    order: 3;
    flex: 1 0 100%;
}

#page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.75);
}

/* ---- origen: Stepper.css ---- */

.md-stepper-horizontal {
    display: flex;
    width: 100%;
    margin: 0 auto;
    background-color: #FFFFFF;
}

    .md-stepper-horizontal .md-step {
        display: block;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
        padding: 24px 0px 24px 0px;
    }

        .md-stepper-horizontal .md-step:hover,
        .md-stepper-horizontal .md-step:active {
            background-color: rgba(0,0,0,0.0);
        }

        .md-stepper-horizontal .md-step:active {
            border-radius: 15% / 75%;
        }

        .md-stepper-horizontal .md-step:first-child:active {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .md-stepper-horizontal .md-step:last-child:active {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .md-stepper-horizontal .md-step:hover .md-step-circle {
            background-color: #757575;
        }

        .md-stepper-horizontal .md-step:first-child .md-step-bar-left,
        .md-stepper-horizontal .md-step:last-child .md-step-bar-right {
            display: none;
        }

        .md-stepper-horizontal .md-step .md-step-circle {
            width: 30px;
            height: 30px;
            margin: 0 auto;
            background-color: #999999;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            font-weight: 600;
            color: #FFFFFF;
            transition: background-color .3s ease;
        }

    /* Efecto al avanzar de paso: el circulo "aparece" con un pequeno rebote en
       vez de solo cambiar de color de golpe. */
    @keyframes md-step-pop {
        0% { transform: scale(.7); }
        60% { transform: scale(1.15); }
        100% { transform: scale(1); }
    }

    .md-stepper-horizontal.primary .md-step.active .md-step-circle {
        background-color: #003881;
        animation: md-step-pop .35s ease;
    }

    .md-stepper-horizontal.green .md-step.active .md-step-circle {
        background-color: #00AE4D;
    }

    .md-stepper-horizontal.orange .md-step.active .md-step-circle {
        background-color: #F96302;
    }

    .md-stepper-horizontal .md-step.active .md-step-circle {
        background-color: rgb(33,150,243);
    }

    .md-stepper-horizontal .md-step.done .md-step-circle:before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: "\f00c";
    }

    .md-stepper-horizontal .md-step.done .md-step-circle *,
    .md-stepper-horizontal .md-step.editable .md-step-circle * {
        display: none;
    }

    .md-stepper-horizontal .md-step.editable .md-step-circle {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }

        .md-stepper-horizontal .md-step.editable .md-step-circle:before {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            content: "\f040";
        }

    .md-stepper-horizontal .md-step .md-step-title {
        margin-top: 16px;
        font-size: 16px;
        font-weight: 600;
    }

    .md-stepper-horizontal .md-step .md-step-title,
    .md-stepper-horizontal .md-step .md-step-optional {
        text-align: center;
        color: rgba(0,0,0,.26);
    }

    .md-stepper-horizontal .md-step.active .md-step-title {
        font-weight: 600;
        color: rgba(0,0,0,.87);
    }

    .md-stepper-horizontal .md-step.active.done .md-step-title,
    .md-stepper-horizontal .md-step.active.editable .md-step-title {
        font-weight: 600;
    }

    .md-stepper-horizontal .md-step .md-step-optional {
        font-size: 14px;
        font-weight: bold;
    }

    .md-stepper-horizontal .md-step.active .md-step-optional {
        color: #003881;
    }

    .md-stepper-horizontal .md-step .md-step-bar-left,
    .md-stepper-horizontal .md-step .md-step-bar-right {
        position: absolute;
        top: 36px;
        height: 1px;
        border-top: 1px solid #DDDDDD;
        transition: border-color .35s ease;
    }

    /* Linea conectora en navy para los pasos ya alcanzados (activo o completado);
       antes se quedaba gris siempre, sin reflejar el avance del wizard. El
       bar-right (hacia el siguiente paso) enciende con un poco de delay respecto
       al bar-left, para dar sensacion de que el progreso "fluye" de un nodo al
       siguiente en vez de que toda la linea cambie de golpe. */
    .md-stepper-horizontal.primary .md-step.active .md-step-bar-left {
        border-top-color: #003881;
    }

    .md-stepper-horizontal.primary .md-step.active .md-step-bar-right {
        border-top-color: #003881;
        transition-delay: .15s;
    }

    .md-stepper-horizontal .md-step .md-step-bar-right {
        right: 0;
        left: 50%;
        margin-left: 20px;
    }

    .md-stepper-horizontal .md-step .md-step-bar-left {
        left: 0;
        right: 50%;
        margin-right: 20px;
    }

    .md-stepper-horizontal .md-step .md-step-title {
        overflow-wrap: break-word;
        padding: 0 4px;
    }

@media (max-width: 576px) {
    .md-stepper-horizontal .md-step {
        padding: 12px 0;
    }

    .md-stepper-horizontal .md-step .md-step-circle {
        width: 22px;
        height: 22px;
        line-height: 22px;
        font-size: 12px;
    }

    .md-stepper-horizontal .md-step .md-step-title {
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.2;
    }

    .md-stepper-horizontal .md-step .md-step-optional {
        font-size: 10px;
    }

    .md-stepper-horizontal .md-step .md-step-bar-left,
    .md-stepper-horizontal .md-step .md-step-bar-right {
        top: 23px;
    }
}

/* ---- origen: Views/Shared/_LayoutAdmin.cshtml (bloque <style> inline) ---- */

body.admin-body {
    margin: 0;
    padding: 0;
}

.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 280px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.admin-sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-sidebar-logo img {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.admin-sidebar-nav {
    flex: 1;
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
}

.admin-sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-sidebar-nav li {
    margin: 0.35rem 1rem;
}

.admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #4b5563;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.admin-sidebar-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex-shrink: 0;
    font-size: 0.9rem;
    color: #9ca3af;
    transition: color .15s ease;
}

.admin-sidebar-link span {
    display: block;
    white-space: nowrap;
}

.admin-sidebar-link:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.admin-sidebar-link:hover i {
    color: #003881;
}

.admin-sidebar-link.active {
    background: rgba(0, 56, 129, .08);
    border-left-color: #003881;
    color: #003881;
    font-weight: 600;
}

.admin-sidebar-link.active i {
    color: #003881;
}

.admin-sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid #e5e7eb;
    margin-top: auto;
}

.admin-sidebar-link.logout {
    color: #6b7280;
    font-weight: 500;
}

.admin-sidebar-link.logout:hover {
    background: #fef2f2;
    color: #dc2626;
}

.admin-sidebar-link.logout:hover i {
    color: #dc2626;
}

.admin-main {
    margin-left: 280px;
    flex: 1;
    background: #f8f9fa;
    min-height: 100vh;
    padding: 2rem;
    transition: opacity 0.2s ease;
}

.admin-topbar {
    display: none;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    align-items: center;
    gap: 1rem;
}

.admin-topbar-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

/* Navbar de tabs del layout: la llena @section tabs de cada vista (Códigos de Descuento,
   Descuento por Cantidad, Crear Código); las páginas sin tabs la dejan vacía y se oculta sola. */
.admin-tabbar {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

.admin-tabbar:empty {
    display: none;
    margin-bottom: 0;
    border-bottom: none;
}

.admin-tabbar .tab-btn {
    border: none;
    background: none;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    text-decoration: none;
}

.admin-tabbar .tab-btn:hover {
    color: #212529;
    text-decoration: none;
}

.admin-tabbar .tab-btn.active {
    color: #003881;
    border-bottom-color: #003881;
    font-weight: 600;
}

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #4b5563;
    margin-right: 1rem;
}

.sidebar-toggle:hover {
    color: #1f2937;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.sidebar-overlay.show {
    display: block;
}

@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .admin-sidebar.show {
        transform: translateX(0);
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    }

    .admin-main {
        margin-left: 0;
        padding: 1rem;
    }

    .admin-topbar {
        display: flex;
    }

    .sidebar-toggle {
        display: block;
    }
}

/* ==========================================================================
   CSS de vistas individuales, extraido de bloques <style> inline y scoped
   bajo el contenedor raiz de cada pagina para evitar fugas entre vistas.
   ========================================================================== */
/* Views\Admin\_codigoDescuentoReport.cshtml (scope: .page-codigo-descuento-report) */
/* Variables CSS consistentes con solicitudes */
.page-codigo-descuento-report {
    --admin-bg: #f3f4f6;
    --admin-card-bg: #ffffff;
    --admin-border: #e5e7eb;
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-primary: #4a5568;
    --admin-success: #10b981;
    --admin-shadow: 0 1px 3px rgba(0,0,0,0.08);
}


/* Sección de filtros: integrada dentro de .table-container (sin card propia) */
.page-codigo-descuento-report .filters-section {
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--admin-border);
}

.page-codigo-descuento-report .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--admin-text-muted);
    margin-bottom: 0.25rem;
}

.page-codigo-descuento-report .form-control, .page-codigo-descuento-report .form-select {
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: var(--admin-card-bg);
}

.page-codigo-descuento-report .form-control:focus, .page-codigo-descuento-report .form-select:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
    outline: none;
}

.page-codigo-descuento-report .btn-reset-link {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.page-codigo-descuento-report .btn-reset-link:hover {
    color: var(--admin-primary);
    text-decoration: underline;
}

/* Buscador: input + iconos de buscar/limpiar integrados en una sola caja */
.page-codigo-descuento-report .search-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background-color: var(--admin-card-bg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-codigo-descuento-report .search-box:focus-within {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
}

.page-codigo-descuento-report .search-box .form-control {
    border: none;
    background: none;
    padding-left: 0.25rem;
}

.page-codigo-descuento-report .search-box .form-control:focus {
    box-shadow: none;
}

.page-codigo-descuento-report .search-icon-btn,
.page-codigo-descuento-report .search-clear-btn {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    cursor: pointer;
}

.page-codigo-descuento-report .search-icon-btn:hover,
.page-codigo-descuento-report .search-clear-btn:hover {
    color: var(--admin-primary);
}

/* Contenedor de tabla */
.page-codigo-descuento-report .table-container {
    background: var(--admin-card-bg);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
    border: 1px solid var(--admin-border);
    overflow: visible;
}

.page-codigo-descuento-report .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

/* Tabla: mismo estilo que #admin-solicitud-index (header/body/footer planos, sin gradientes/zebra) */
.page-codigo-descuento-report #datatable {
    width: 100% !important;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.page-codigo-descuento-report #datatable thead th {
    background-color: #f8f9fa;
    color: var(--admin-text);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

.page-codigo-descuento-report #datatable tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    color: var(--admin-text);
    border-bottom: 1px solid #f1f3f5;
}

.page-codigo-descuento-report #datatable tbody tr:hover {
    background-color: #f8f9fa;
}

.page-codigo-descuento-report #datatable tfoot {
    background-color: #f8f9fa;
}

/* Bootstrap aplica ".table > :not(:first-child) { border-top: 2px solid currentColor; }"
   a tbody/tfoot. Se sobreescribe para igualar el borde fino de admin-solicitud-index. */
.page-codigo-descuento-report #datatable > :not(:first-child) {
    border-top: 1px solid var(--admin-border);
}

/* Botón para expandir/colapsar los consumos (solicitudes) de un código
   (mismo patrón que .btn-tree-toggle de Admin/Solicitud "Ver titulares") */
.page-codigo-descuento-report .tree-col {
    width: 2rem;
    padding-left: 0.75rem !important;
    padding-right: 0 !important;
}

.page-codigo-descuento-report .btn-tree-toggle {
    border: 1.5px solid #003881;
    background: white;
    color: #003881;
    border-radius: 50%;
    padding: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.page-codigo-descuento-report .btn-tree-toggle:hover {
    background: #003881;
    color: white;
}

.page-codigo-descuento-report .btn-tree-toggle-icon {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

/* ========== ACCIONES (iconos en línea, sin dropdown/modal -- reemplaza el botón
   "..." que abría un AppModal con la lista de acciones) ========== */
.page-codigo-descuento-report .acciones-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.page-codigo-descuento-report .accion-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    background: var(--admin-card-bg);
    font-size: 0.8125rem;
    transition: all 0.15s ease;
}

.page-codigo-descuento-report .accion-icon-btn:hover {
    transform: translateY(-1px);
}

.page-codigo-descuento-report .accion-icon-btn-activar {
    color: #10b981;
}

.page-codigo-descuento-report .accion-icon-btn-activar:hover {
    background: #f0fdf4;
    border-color: #10b981;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

/* Gris slate, no rojo -- mismo criterio que Afiliados Index: desactivar no es
   destructivo, y un ícono rojo al lado de un badge "Activo" en verde confunde. */
.page-codigo-descuento-report .accion-icon-btn-desactivar {
    color: var(--admin-primary);
}

.page-codigo-descuento-report .accion-icon-btn-desactivar:hover {
    background: #f1f2f4;
    border-color: var(--admin-primary);
    box-shadow: 0 2px 6px rgba(74, 85, 104, 0.25);
}

/* Fila de detalle: tabla anidada dentro de una fila expandible (consumos de un código
   de descuento, titulares de una solicitud, etc). Sin scope: mismo patrón reusado en
   más de una página del panel admin para mantener el diseño consistente. */
tr.detalle-row td {
    background-color: #f8f9fa;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border-bottom: 1px solid var(--admin-border);
}

.detalle-consumos-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.detalle-consumos-table {
    width: 100%;
    margin-bottom: 0;
    background-color: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.8125rem;
}

/* Bootstrap aplica ".table > :not(:first-child) { border-top: 2px solid currentColor; }"
   entre thead/tbody; se sobreescribe para que no se vea tan marcado (mismo ajuste que #datatable).
   Selector "table.detalle-consumos-table" (no solo ".detalle-consumos-table"): desde que esta
   clase se sacó de su scope de página para reusarla en más de una tabla, quedó con la misma
   especificidad que la regla de Bootstrap -- y bootstrap.min.css carga después de styles.css
   en _LayoutAdmin, así que ganaba por orden de carga. El selector de elemento le suma
   especificidad para que gane siempre, sin depender del orden de los <link>. */
table.detalle-consumos-table > :not(:first-child) {
    border-top: 1px solid var(--admin-border);
}

.detalle-consumos-table thead th {
    background-color: #eef0f2;
    color: var(--admin-text-muted);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.detalle-consumos-table tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    color: var(--admin-text);
}

.detalle-consumos-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #f1f3f5;
}

/* Columna "Certificado": tipo + vigencia combinados en una sola celda (mismo
   patrón validado en Afiliados\Comisiones.cshtml), en vez de 2 columnas
   separadas Tipo/Vigencia. */
.page-codigo-descuento-report .cell-primary {
    color: var(--admin-text);
    line-height: 1.35;
}

.page-codigo-descuento-report .cell-secondary {
    font-size: 0.75rem;
    color: var(--admin-text-muted);
    line-height: 1.3;
    margin-top: 0.1rem;
}

/* Corta con "..." un texto de largo variable (comentario, correo) para que no
   estire la fila/columna; el title="" nativo del elemento muestra el texto
   completo al pasar el mouse. */
.page-codigo-descuento-report .cell-truncate {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Columna Correo: ícono de estado de envío + el email en texto, uno al lado
   del otro (antes solo se veía el ícono, sin poder confirmar a qué dirección
   se mandó). */
.page-codigo-descuento-report .correo-combo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-codigo-descuento-report .correo-valor {
    font-size: 0.8125rem;
    color: var(--admin-text);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Precio con descuento: original tachado -> final destacado + badge de % */
.page-codigo-descuento-report .precio-combo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    white-space: nowrap;
}

.page-codigo-descuento-report .precio-original {
    color: var(--admin-text-muted);
    text-decoration: line-through;
    font-size: 0.8125rem;
}

.page-codigo-descuento-report .precio-flecha {
    color: var(--admin-text-muted);
    font-size: 0.75rem;
}

.page-codigo-descuento-report .precio-final {
    font-weight: 700;
    color: var(--admin-text);
}

.page-codigo-descuento-report .precio-descuento-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background-color: #fee2e2;
    color: #b91c1c;
}

/* Estado (badge pequeño tipo pill, colores claros, sin gradiente/pulso/hover) */
.page-codigo-descuento-report .status-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.page-codigo-descuento-report .status-activo {
    background-color: #d1fae5;
    color: #065f46;
}

.page-codigo-descuento-report .status-inactivo {
    background-color: #fee2e2;
    color: #991b1b;
}

.page-codigo-descuento-report .status-agotado {
    background-color: #fef3c7;
    color: #92400e;
}

.page-codigo-descuento-report .status-vencido {
    background-color: #fce7f3;
    color: #831843;
}

/* ========== PAGINACIÓN (footer de tabla, mismo patrón que admin-solicitud-index) ========== */
.page-codigo-descuento-report .table-footer {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
}

.page-codigo-descuento-report .results-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-codigo-descuento-report .footer-stats-sep {
    color: var(--admin-border);
}

.page-codigo-descuento-report .footer-stats {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.page-codigo-descuento-report .footer-stats i {
    color: var(--admin-text-muted);
}

.page-codigo-descuento-report .footer-stats i:not(:first-child) {
    margin-left: 0.75rem;
}

.page-codigo-descuento-report .pagination {
    gap: 0.2rem;
}

.page-codigo-descuento-report .page-link {
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 0;
}

.page-codigo-descuento-report .page-link:hover:not(.disabled) {
    background-color: #f8f9fa;
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

.page-codigo-descuento-report .page-item.active .page-link {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    color: white;
    box-shadow: var(--admin-shadow);
}

.page-codigo-descuento-report .page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: var(--admin-border);
    color: var(--admin-text-muted);
    cursor: not-allowed;
}

/* Tooltip mejorado */
.page-codigo-descuento-report .comentario-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Números alineados a la derecha */
.page-codigo-descuento-report .text-right {
    text-align: right;
}

/* Botón de detalles */
/* Contenido del modal "Ver Detalles" (AppModal, agrega su popup a document.body, fuera
   de #page-codigo-descuento-report): reusa fx-summary-row/fx-divider/fx-total-value tal
   cual (ya son clases globales, ver "Resumen de pago"), sin cajas ni barra de progreso —
   una fila plana por dato, mismo lenguaje que el resumen de precio de Crear Código. */
.detail-info-columns {
    columns: 2;
    column-gap: 2rem;
}

.detail-info-columns .fx-summary-row {
    break-inside: avoid;
}

/* fx-summary-value trae white-space:nowrap (pensado para montos cortos en el resumen
   de precio); acá se reusa para datos que pueden ser largos (Cliente, Correo), así que
   hay que permitir que rompan línea o se montan encima de la fila de abajo. */
.detail-info-columns .fx-summary-value {
    white-space: normal;
    text-align: right;
    word-break: break-word;
}

@media (max-width: 576px) {
    .detail-info-columns {
        columns: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .page-codigo-descuento-report .detail-grid {
        grid-template-columns: 1fr;
    }

    .page-codigo-descuento-report #datatable {
        font-size: 0.8125rem;
    }

    .page-codigo-descuento-report #datatable thead th,
    .page-codigo-descuento-report #datatable tbody td {
        padding: 0.75rem 0.5rem;
    }
}

/* Views\Admin\Solicitud\Index.cshtml (scope: #admin-solicitud-index) */
/* ========================================
   DISEÑO PLANO MODERNO PARA ADMIN PANEL
   ======================================== */

:root {
    --admin-bg: #f8f9fa;
    --admin-card-bg: #ffffff;
    --admin-border: #e9ecef;
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-primary: #4a5568;
    --admin-primary-hover: #2d3748;
    --admin-success: #48bb78;
    --admin-danger: #f56565;
    --admin-warning: #ed8936;
    --admin-info: #4299e1;
    --admin-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --admin-shadow-lg: 0 4px 6px rgba(0,0,0,0.07);
}

#admin-solicitud-index {
    background-color: var(--admin-bg);
    padding: 1.25rem 1rem;
    min-height: 100vh;
}

/* ========== TABS NUEVAS / RENOVACIONES ========== */
#admin-solicitud-index .solicitud-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--admin-border);
    margin-bottom: 1rem;
}

#admin-solicitud-index .tab-btn {
    border: none;
    background: none;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--admin-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}

#admin-solicitud-index .tab-btn:hover:not(:disabled) {
    color: var(--admin-text);
}

#admin-solicitud-index .tab-btn.active {
    color: var(--admin-primary);
    border-bottom-color: var(--admin-primary);
    font-weight: 600;
}

#admin-solicitud-index .tab-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========== SECCIÓN DE FILTROS ========== */
#admin-solicitud-index .filters-section {
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--admin-border);
}

#admin-solicitud-index .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--admin-text-muted);
    margin-bottom: 0.25rem;
}

#admin-solicitud-index .form-control, #admin-solicitud-index .form-select {
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: var(--admin-card-bg);
}

#admin-solicitud-index .form-control:focus, #admin-solicitud-index .form-select:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
    outline: none;
}

#admin-solicitud-index .form-control:disabled, #admin-solicitud-index .form-select:disabled {
    background-color: #f1f3f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ========== BOTONES ========== */
#admin-solicitud-index .btn {
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    transition: all 0.2s ease;
    border: none;
    letter-spacing: 0.3px;
}

#admin-solicitud-index .btn-outline-secondary {
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    background-color: white;
}

#admin-solicitud-index .btn-outline-secondary:hover:not(:disabled) {
    background-color: #f8f9fa;
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

#admin-solicitud-index .btn-reset-link {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

#admin-solicitud-index .btn-reset-link:hover:not(:disabled) {
    color: var(--admin-primary);
    text-decoration: underline;
}

#admin-solicitud-index .btn-reset-link:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

#admin-solicitud-index .btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

#admin-solicitud-index .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

#admin-solicitud-index .btn-warning {
    background-color: var(--admin-warning);
    color: white;
    border: none;
}

#admin-solicitud-index .btn-warning:hover:not(:disabled) {
    background-color: #dd6b20;
}

/* ========== ESTADOS ========== */
/* Estado (badge pequeño tipo pill, mismo estilo que .status-badge de Códigos de Descuento) */
#admin-solicitud-index .status-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

#admin-solicitud-index .status-abierta {
    background-color: #f3f4f6;
    color: #6b7280;
}

#admin-solicitud-index .status-pagada {
    background-color: #d1fae5;
    color: #065f46;
}

#admin-solicitud-index .status-erp {
    background-color: #dbeafe;
    color: #1e40af;
}

#admin-solicitud-index .status-uanataca {
    background-color: #e0e7ff;
    color: #4338ca;
}

#admin-solicitud-index .status-completada {
    background-color: #d1fae5;
    color: #047857;
}

/* Estado del correo: ícono de sobre con un check/error pequeño superpuesto en la
   esquina. Sin scope: mismo patrón reusado en más de una tabla del panel admin
   (Solicitudes, Códigos de Descuento). */
.correo-icon-badge {
    position: relative;
    display: inline-flex;
    font-size: 1rem;
    color: #9ca3af;
    cursor: default;
}

.correo-icon-badge-dot {
    position: absolute;
    bottom: -4px;
    right: -6px;
    font-size: 0.65rem;
    background-color: #fff;
    border-radius: 50%;
}

.correo-icon-badge.correo-enviado .correo-icon-badge-dot {
    color: #10b981;
}

.correo-icon-badge.correo-pendiente .correo-icon-badge-dot {
    color: #ef4444;
}

/* Variantes de 3 estados (Códigos de Descuento: el campo es nullable en la base de
   datos -- null=nunca se intentó enviar, false=se intentó y falló, true=enviado). */
.correo-icon-badge.correo-error .correo-icon-badge-dot {
    color: #ef4444;
}

.correo-icon-badge.correo-nunca-enviado .correo-icon-badge-dot {
    color: #d97706;
}

/* Variante clickeable: reenviar/enviar correo directo desde el ícono, sin abrir el
   menú de Acciones (solo cuando el código sigue activo/vigente/con cupo). Borde
   circular visible siempre (no solo en hover) -- mismo lenguaje que los demás botones
   de ícono de esta tabla (Acciones, ver detalles) -- para que se note que es un botón
   y no solo un indicador de estado. */
button.correo-icon-badge-clickable {
    border: 1px solid #e5e7eb;
    background-color: #fff;
    padding: 0.3rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

button.correo-icon-badge-clickable:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    transform: scale(1.08);
}

/* ========== TABLA ========== */
#admin-solicitud-index .table-container {
    background: var(--admin-card-bg);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
    border: 1px solid var(--admin-border);
    overflow: visible;
}

#admin-solicitud-index .table-responsive {
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: visible;
}

#admin-solicitud-index .table {
    margin-bottom: 0;
    font-size: 0.875rem;
}

#admin-solicitud-index .table thead th {
    background-color: #f8f9fa;
    color: var(--admin-text);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

#admin-solicitud-index .table tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    color: var(--admin-text);
    border-bottom: 1px solid #f1f3f5;
}

#admin-solicitud-index .table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

#admin-solicitud-index .table tfoot {
    background-color: #f8f9fa;
}

/* Bootstrap aplica ".table > :not(:first-child) { border-top: 2px solid currentColor; }"
   a cada <tbody> (cada fila es su propio tbody por el v-for) y al <tfoot>. Se sobreescribe
   apuntando directo al hijo para ganarle en especificidad sin usar !important. */
#admin-solicitud-index .table > :not(:first-child) {
    border-top: 1px solid var(--admin-border);
}

#admin-solicitud-index .table-footer {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
}

#admin-solicitud-index .results-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ========== PAGINACIÓN ========== */
#admin-solicitud-index .pagination {
    gap: 0.2rem;
}

#admin-solicitud-index .page-link {
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 0;
}

#admin-solicitud-index .page-link:hover:not(.disabled) {
    background-color: #f8f9fa;
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

#admin-solicitud-index .page-item.active .page-link {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    color: white;
    box-shadow: var(--admin-shadow);
}

#admin-solicitud-index .page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: var(--admin-border);
    color: var(--admin-text-muted);
    cursor: not-allowed;
}


/* ========== ESTADOS SIN RESULTADOS ========== */
#admin-solicitud-index .no-results {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--admin-text-muted);
}

/* ========== BOTONES DE DOCUMENTOS ========== */
#admin-solicitud-index .btn-outline-warning {
    border-color: var(--admin-warning);
    color: var(--admin-warning);
}

#admin-solicitud-index .btn-outline-warning:hover:not(:disabled) {
    background-color: var(--admin-warning);
    border-color: var(--admin-warning);
    color: white;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    #admin-solicitud-index {
        padding: 1rem 0.5rem;
    }

    #admin-solicitud-index .filters-section {
        padding: 1rem;
    }

    #admin-solicitud-index .table {
        font-size: 0.8125rem;
    }

    #admin-solicitud-index .table thead th,
    #admin-solicitud-index .table tbody td {
        padding: 0.75rem 0.5rem;
    }

    #admin-solicitud-index .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ========== MEJORAS ADICIONALES ========== */

/* Buscador: input + iconos de buscar/limpiar integrados en una sola caja,
   en vez de 3 controles de Bootstrap pegados (.input-group). */
#admin-solicitud-index .search-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background-color: var(--admin-card-bg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#admin-solicitud-index .search-box:focus-within {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
}

#admin-solicitud-index .search-box .form-control {
    border: none;
    background: none;
    padding-left: 0.25rem;
}

#admin-solicitud-index .search-box .form-control:focus {
    box-shadow: none;
}

#admin-solicitud-index .search-icon-btn,
#admin-solicitud-index .search-clear-btn {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    cursor: pointer;
}

#admin-solicitud-index .search-icon-btn:hover:not(:disabled),
#admin-solicitud-index .search-clear-btn:hover:not(:disabled) {
    color: var(--admin-primary);
}

#admin-solicitud-index .search-icon-btn:disabled,
#admin-solicitud-index .search-clear-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Tooltips mejorados */
#admin-solicitud-index [data-bs-toggle="tooltip"] {
    cursor: pointer;
}

/* Titulares como árbol (filas hijas dentro de la misma tabla) */
#admin-solicitud-index .btn-tree-toggle {
    border: 1.5px solid #003881;
    background: white;
    color: #003881;
    border-radius: 50%;
    padding: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

#admin-solicitud-index .btn-tree-toggle:hover {
    background: #003881;
    color: white;
}

#admin-solicitud-index .btn-tree-toggle-icon {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

#admin-solicitud-index .tree-col {
    width: 2rem;
    padding-left: 0.75rem !important;
    padding-right: 0 !important;
}

/* Lista de acciones del modal "Acciones" (Admin/Solicitud) - AppModal, igual que
   el de JCE, agrega su popup a document.body, fuera de #admin-solicitud-index. */
.acciones-modal-list {
    display: flex;
    flex-direction: column;
}

.acciones-modal-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0.25rem;
    border: none;
    border-bottom: 1px solid #f1f3f5;
    background: none;
    text-align: left;
    text-decoration: none;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}

.acciones-modal-item:last-child {
    border-bottom: none;
}

.acciones-modal-item:hover {
    background-color: #f8f9fa;
}

.acciones-modal-item i {
    width: 18px;
    text-align: center;
    color: #6b7280;
}

/* Estilos personalizados para el modal de JCE */
/* NOT scoped under #admin-solicitud-index: SweetAlert2 appends its popup
   (and this #jce-data content) to document.body at runtime, outside the
   page wrapper, so a descendant-combinator scope would never match. */
.swal-jce-modal {
    border-radius: 12px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

.swal-jce-title {
    color: #1f2937 !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    padding: 1.5rem 1.5rem 0.5rem !important;
}

.swal-jce-content {
    padding: 0 1.5rem 1.5rem !important;
    margin: 0 !important;
}

/* Responsive para modal JCE */
@media (max-width: 768px) {
    .appmodal-popup.swal-jce-modal {
        width: 95% !important;
    }

    #jce-data > div:first-child {
        flex-direction: column !important;
        text-align: center !important;
    }

    #jce-data > div:nth-child(2) {
        grid-template-columns: 1fr !important;
    }
}

/* Views\Admin\Index.cshtml (scope: .page-admin-index) */
/* ========================================
   DISEÑO PLANO MODERNO - CÓDIGOS DESCUENTO
   ======================================== */

:root {
    --admin-bg: #f8f9fa;
    --admin-card-bg: #ffffff;
    --admin-border: #e9ecef;
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-primary: #4a5568;
    --admin-success: #10b981;
    --admin-danger: #ef4444;
    --admin-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.page-admin-index {
    background: var(--admin-bg);
}


/* Page Container */
.page-admin-index #admin-codigo-page {
    max-width: 1400px;
    margin: 0 auto;
}

/* Header Section */
.page-admin-index .page-header {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--admin-shadow);
}

.page-admin-index .page-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--admin-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Form Card */
.page-admin-index .form-card {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--admin-shadow);
}

.page-admin-index .form-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--admin-text);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--admin-border);
}

/* Form Controls: estilo de input tomado de Views\Solicitud\Formularios (.fx-label/.fx-input/.fx-field-hint,
   definidos sin scope más arriba en este archivo) — este bloque ya no fija su propio border/padding/focus
   para no pisar esas reglas por orden de cascada a igual especificidad. */
.page-admin-index .input-group-text {
    background: #fff;
    border: 1px solid var(--admin-border);
    font-size: 1rem;
}

/* Buttons */
.page-admin-index .btn-admin-success {
    background: var(--admin-success);
    border: none;
    color: #fff;
    padding: 0.75rem 2rem;
    font-size: 0.938rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: background 0.15s;
}

.page-admin-index .btn-admin-success:hover {
    background: #059669;
    color: #fff;
}

/* Tabs */
.page-admin-index .nav-tabs {
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-card-bg);
    padding: 0 1rem;
    margin-bottom: 0;
}

.page-admin-index .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: all 0.15s;
}

.page-admin-index .nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--admin-text);
    background: #f9fafb;
}

.page-admin-index .nav-tabs .nav-link.active {
    color: var(--admin-success);
    background: transparent;
    border-bottom-color: var(--admin-success);
}

.page-admin-index .tab-content {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-top: none;
    padding: 2rem;
    box-shadow: var(--admin-shadow);
}

/* Section Titles */
.page-admin-index .section-title {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--admin-text);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Radio Buttons */
.page-admin-index .form-check-inline {
    margin-right: 1.5rem;
}

.page-admin-index .form-check-inline label {
    font-weight: 400;
    font-size: 0.938rem;
    margin-left: 0.5rem;
}

/* DataTables Integration */
.page-admin-index .dataTables_wrapper {
    font-size: 0.875rem;
}

.page-admin-index .dataTables_wrapper .dataTables_filter input,
.page-admin-index .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--admin-border);
    padding: 0.375rem 0.75rem;
}

/* Small Text */
.page-admin-index small {
    color: var(--admin-text-muted);
    font-size: 0.75rem;
}

/* Divider */
.page-admin-index hr {
    border-color: var(--admin-border);
    margin: 2rem 0;
}

/* Container Max Width */
.page-admin-index .container {
    max-width: 1400px;
}

/* Section Divider */
.page-admin-index .section-divider {
    border-top: 2px solid var(--admin-border);
    margin: 2rem 0 1.5rem 0;
    padding-top: 1rem;
    position: relative;
}

.page-admin-index .section-divider .section-title {
    background: var(--admin-card-bg);
    display: inline-block;
    padding-right: 1rem;
    position: absolute;
    top: -0.7rem;
    left: 0;
}

/* Readonly Info */
.page-admin-index .readonly-info {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
    padding: 0.625rem 0.75rem;
    border-radius: 4px;
    font-size: 0.813rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-admin-index .readonly-info i {
    font-size: 1rem;
}

/* Form spacing improvements */
.page-admin-index .mb-3 {
    margin-bottom: 1.5rem !important;
}

.page-admin-index .d-flex {
    display: flex;
}

.page-admin-index .gap-3 {
    gap: 1.5rem;
}

/* Toggle segmentado de "Vigencia del Certificado" (1 Año / 2 Años): mismo truco de
   radio oculto + label que .fx-toggle-input en _Factura.cshtml, pero como pill de 2
   opciones en vez de tarjetas grandes. */
.page-admin-index .fx-year-toggle {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 4px;
    background-color: #f3f4f6;
    border-radius: 12px;
    max-width: 360px;
}

.page-admin-index .fx-year-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.page-admin-index .fx-year-toggle-option {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: .5rem .75rem;
    border-radius: 9px;
    cursor: pointer;
    text-align: center;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.page-admin-index .fx-year-toggle-title {
    font-size: .85rem;
    font-weight: 600;
    color: #6b7280;
}

.page-admin-index .fx-year-toggle-price {
    font-size: .72rem;
    color: #9ca3af;
}

.page-admin-index .fx-year-toggle-input:checked + .fx-year-toggle-option {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.page-admin-index .fx-year-toggle-input:checked + .fx-year-toggle-option .fx-year-toggle-title,
.page-admin-index .fx-year-toggle-input:checked + .fx-year-toggle-option .fx-year-toggle-price {
    color: #003881;
}

.page-admin-index .fx-year-toggle-input:focus-visible + .fx-year-toggle-option {
    outline: 2px solid #003881;
    outline-offset: 2px;
}

/* Estado inválido: validación client-side antes de guardar (ver validarFormulario() en el script) */
.page-admin-index .fx-input.is-invalid {
    border-color: #dc3545;
}

.page-admin-index .fx-input.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220,53,69,.1);
}

/* Layout compacto de 2 columnas + densidad reducida en tarjetas/resumen: todo el
   formulario debe caber sin scroll, así que se pisan los paddings/margins generosos
   de .fx-titular-card, .fx-summary-row y .fx-divider-lg (compartidos con Solicitud)
   solo dentro de esta página. */
.page-admin-index .form-card {
    padding: 1.5rem 1.75rem;
}

.page-admin-index .form-card-title {
    margin-bottom: 1rem;
    padding-bottom: .75rem;
}

.page-admin-index .fx-titular-card {
    padding: 1.25rem;
    margin-bottom: 0;
    height: 100%;
}

.page-admin-index .fx-titular-card-title {
    margin-bottom: 1rem;
}

.page-admin-index .fx-divider-lg {
    margin: .85rem 0 .6rem;
}

.page-admin-index .fx-summary-row {
    padding: .35rem 0;
}

/* Código Generado - Resultado Destacado */
.page-admin-index .codigo-generado-resultado {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #10b981;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.page-admin-index .codigo-generado-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #047857;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-admin-index .codigo-generado-header i {
    font-size: 1.5rem;
    color: #10b981;
}

.page-admin-index .codigo-generado-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    border: 1px solid #d1fae5;
    margin-bottom: 0.75rem;
}

.page-admin-index .codigo-generado-value {
    flex: 1;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #047857;
    letter-spacing: 2px;
    text-align: center;
}

.page-admin-index .btn-copiar-codigo {
    background: #10b981;
    color: #fff;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-admin-index .btn-copiar-codigo:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.page-admin-index .btn-copiar-codigo:active {
    transform: translateY(0);
}

.page-admin-index .btn-copiar-codigo i {
    font-size: 1rem;
}

.page-admin-index .codigo-generado-hint {
    display: block;
    color: #047857;
    font-size: 0.813rem;
    font-style: italic;
}

.page-admin-index .codigo-generado-hint i {
    margin-right: 0.25rem;
}

/* Animación de copiado exitoso */
@keyframes page-admin-index-copiadoExitoso {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.page-admin-index .codigo-copiado {
    animation: page-admin-index-copiadoExitoso 0.3s ease;
}

/* Views\Admin\Afiliados\Index.cshtml (scope: #admin-afiliados-index)
   Mismo patrón que .page-codigo-descuento-report / #admin-solicitud-index:
   filters-section + search-box, table-container plano, status-badge pill,
   footer de paginación client-side. Sin DataTables. */

#admin-afiliados-index {
    --admin-bg: #f8f9fa;
    --admin-card-bg: #ffffff;
    --admin-border: #e9ecef;
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-primary: #4a5568;
    --admin-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#admin-afiliados-index {
    background-color: var(--admin-bg);
    padding: 1.25rem 1rem;
    min-height: 100vh;
}

/* ========== HEADER ========== */
#admin-afiliados-index .page-header-afiliados {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1rem;
}

/* ========== FILTROS / BÚSQUEDA ========== */
#admin-afiliados-index .filters-section {
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--admin-border);
}

#admin-afiliados-index .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--admin-text-muted);
    margin-bottom: 0.25rem;
}

#admin-afiliados-index .form-control,
#admin-afiliados-index .form-select {
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: var(--admin-card-bg);
}

#admin-afiliados-index .form-control:focus,
#admin-afiliados-index .form-select:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
    outline: none;
}

#admin-afiliados-index .btn-reset-link {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

#admin-afiliados-index .btn-reset-link:hover {
    color: var(--admin-primary);
    text-decoration: underline;
}

#admin-afiliados-index .search-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background-color: var(--admin-card-bg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#admin-afiliados-index .search-box:focus-within {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
}

#admin-afiliados-index .search-box .form-control {
    border: none;
    background: none;
    padding-left: 0.25rem;
}

#admin-afiliados-index .search-box .form-control:focus {
    box-shadow: none;
}

#admin-afiliados-index .search-icon-btn,
#admin-afiliados-index .search-clear-btn {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    cursor: pointer;
}

#admin-afiliados-index .search-icon-btn:hover,
#admin-afiliados-index .search-clear-btn:hover {
    color: var(--admin-primary);
}

/* ========== TABLA ========== */
#admin-afiliados-index .table-container {
    background: var(--admin-card-bg);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
    border: 1px solid var(--admin-border);
    overflow: visible;
}

#admin-afiliados-index #datatableAfiliados {
    width: 100% !important;
    margin-bottom: 0;
    font-size: 0.875rem;
}

#admin-afiliados-index #datatableAfiliados thead th {
    background-color: #f8f9fa;
    color: var(--admin-text);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

#admin-afiliados-index #datatableAfiliados tbody td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    color: var(--admin-text);
    border-bottom: 1px solid #f1f3f5;
}

#admin-afiliados-index #datatableAfiliados tbody tr:hover {
    background-color: #f8f9fa;
}

/* Columna "Afiliado": nombre + código combinados (mismo patrón que la columna
   "Afiliado" de .page-afiliados-comisiones), en vez de 2 columnas separadas. */
#admin-afiliados-index .cell-primary {
    color: var(--admin-text);
    line-height: 1.35;
}

#admin-afiliados-index .cell-secondary {
    font-size: 0.75rem;
    color: var(--admin-text-muted);
    line-height: 1.3;
    margin-top: 0.1rem;
}

#admin-afiliados-index #datatableAfiliados tfoot {
    background-color: #f8f9fa;
}

/* Bootstrap aplica ".table > :not(:first-child) { border-top: 2px solid currentColor; }"
   a tbody/tfoot; se sobreescribe para igualar el borde fino del resto del panel admin. */
#admin-afiliados-index #datatableAfiliados > :not(:first-child) {
    border-top: 1px solid var(--admin-border);
}

#admin-afiliados-index .text-right {
    text-align: right;
}

/* ========== ACCIONES (iconos en línea, sin dropdown/modal) ========== */
#admin-afiliados-index .acciones-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

#admin-afiliados-index .accion-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    background: var(--admin-card-bg);
    font-size: 0.8125rem;
    transition: all 0.15s ease;
}

#admin-afiliados-index .accion-icon-btn:hover {
    transform: translateY(-1px);
}

#admin-afiliados-index .accion-icon-btn-ver {
    color: #2563eb;
}

#admin-afiliados-index .accion-icon-btn-ver:hover {
    background: #eff6ff;
    border-color: #2563eb;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

#admin-afiliados-index .accion-icon-btn-editar {
    color: #0ea5e9;
}

#admin-afiliados-index .accion-icon-btn-editar:hover {
    background: #f0f9ff;
    border-color: #0ea5e9;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.2);
}

#admin-afiliados-index .accion-icon-btn-activar {
    color: #10b981;
}

#admin-afiliados-index .accion-icon-btn-activar:hover {
    background: #f0fdf4;
    border-color: #10b981;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

/* Gris slate (--admin-primary), no rojo ni el gris tenue de texto secundario:
   desactivar un afiliado no es una acción destructiva (se puede reactivar en
   cualquier momento) -- rojo contradecía el badge verde "Activo" de la misma
   fila. --admin-text-muted tampoco sirve porque es el mismo tono que el texto
   deshabilitado/secundario del panel y podía leerse como "botón inactivo";
   --admin-primary es mas oscuro/con peso y ya se usa para acciones reales
   (ej. el botón "Filtrar"), así que se ve claramente clickeable. */
#admin-afiliados-index .accion-icon-btn-desactivar {
    color: var(--admin-primary);
}

#admin-afiliados-index .accion-icon-btn-desactivar:hover {
    background: #f1f2f4;
    border-color: var(--admin-primary);
    box-shadow: 0 2px 6px rgba(74, 85, 104, 0.25);
}

#admin-afiliados-index .accion-icon-btn-link {
    color: #f59e0b;
}

#admin-afiliados-index .accion-icon-btn-link:hover {
    background: #fffbeb;
    border-color: #f59e0b;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
}

/* ========== ESTADO (badge pequeño tipo pill) ========== */
#admin-afiliados-index .status-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

#admin-afiliados-index .status-activo {
    background-color: #d1fae5;
    color: #065f46;
}

#admin-afiliados-index .status-inactivo {
    background-color: #fee2e2;
    color: #991b1b;
}

/* ========== PAGINACIÓN (footer de tabla) ========== */
#admin-afiliados-index .table-footer {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
}

#admin-afiliados-index .results-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#admin-afiliados-index .footer-stats-sep {
    color: var(--admin-border);
}

#admin-afiliados-index .footer-stats {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

#admin-afiliados-index .footer-stats i {
    color: var(--admin-text-muted);
}

#admin-afiliados-index .footer-stats i:not(:first-child) {
    margin-left: 0.75rem;
}

#admin-afiliados-index .pagination {
    gap: 0.2rem;
}

#admin-afiliados-index .page-link {
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 0;
}

#admin-afiliados-index .page-link:hover:not(.disabled) {
    background-color: #f8f9fa;
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

#admin-afiliados-index .page-item.active .page-link {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    color: white;
    box-shadow: var(--admin-shadow);
}

#admin-afiliados-index .page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: var(--admin-border);
    color: var(--admin-text-muted);
    cursor: not-allowed;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    #admin-afiliados-index {
        padding: 1rem 0.5rem;
    }

    #admin-afiliados-index #datatableAfiliados {
        font-size: 0.8125rem;
    }

    #admin-afiliados-index #datatableAfiliados thead th,
    #admin-afiliados-index #datatableAfiliados tbody td {
        padding: 0.5rem;
    }
}

/* Views\Admin\Afiliados\Comisiones.cshtml (scope: .page-afiliados-comisiones)
   Mismo patrón que #admin-afiliados-index / .page-codigo-descuento-report:
   header plano, filters-section, table-container, status-badge pill,
   acciones en línea (sin dropdown/modal) y footer de paginación client-side. */
.page-afiliados-comisiones {
    --admin-bg: #f8f9fa;
    --admin-card-bg: #ffffff;
    --admin-border: #e9ecef;
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-primary: #4a5568;
    --admin-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.page-afiliados-comisiones #comisiones-page {
    background-color: var(--admin-bg);
    padding: 1.25rem 1rem;
    min-height: 100vh;
}

.page-afiliados-comisiones .gap-2 {
    gap: 0.5rem;
}

/* ========== FILTROS ========== */
.page-afiliados-comisiones .filters-section {
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--admin-border);
}

.page-afiliados-comisiones .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--admin-text-muted);
    margin-bottom: 0.25rem;
}

.page-afiliados-comisiones .form-control,
.page-afiliados-comisiones .form-select {
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: var(--admin-card-bg);
}

.page-afiliados-comisiones .form-control:focus,
.page-afiliados-comisiones .form-select:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
    outline: none;
}

.page-afiliados-comisiones .btn-reset-link {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.page-afiliados-comisiones .btn-reset-link:hover {
    color: var(--admin-primary);
    text-decoration: underline;
}

/* Búsqueda de Afiliado (texto libre, client-side) — mismo patrón que
   #admin-afiliados-index / .page-codigo-descuento-report. */
.page-afiliados-comisiones .search-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background-color: var(--admin-card-bg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-afiliados-comisiones .search-box:focus-within {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
}

.page-afiliados-comisiones .search-box .form-control {
    border: none;
    background: none;
    padding-left: 0.25rem;
}

.page-afiliados-comisiones .search-box .form-control:focus {
    box-shadow: none;
}

.page-afiliados-comisiones .search-icon-btn,
.page-afiliados-comisiones .search-clear-btn {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    cursor: pointer;
}

.page-afiliados-comisiones .search-icon-btn:hover,
.page-afiliados-comisiones .search-clear-btn:hover {
    color: var(--admin-primary);
}

/* Rango de fecha: los dos inputs nativos type="date" viven dentro de una sola
   caja (mismo patrón visual que .page-descuentos-cantidades-report), pero acá
   siguen siendo <input type="date"> normales -- este filtro va al servidor
   (Html.BeginForm), así que no conviene tocar el formato/tipo del input. */
.page-afiliados-comisiones .date-range-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background-color: var(--admin-card-bg);
    padding-left: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-afiliados-comisiones .date-range-box:focus-within {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
}

.page-afiliados-comisiones .date-range-icon {
    color: var(--admin-text-muted);
    flex-shrink: 0;
}

.page-afiliados-comisiones .date-range-box .form-control {
    border: none;
    background: none;
    padding-left: 0.5rem;
    min-width: 0;
}

.page-afiliados-comisiones .date-range-box .form-control:focus {
    box-shadow: none;
}

.page-afiliados-comisiones .date-range-sep {
    color: var(--admin-text-muted);
    flex-shrink: 0;
}

/* Fila de acciones del filtro, debajo de los campos: Limpiar / Exportar /
   Filtrar, siempre a la derecha. "Filtrar" usa las clases globales fx-btn
   (mismo botón primario que ya usa "Nuevo Afiliado" en el listado de
   Afiliados) en vez de .btn.btn-primary de Bootstrap, que arrastraba estilos
   base (padding/sombra de foco) inconsistentes con el resto del panel. */
.page-afiliados-comisiones .filters-actions-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.875rem;
}

.page-afiliados-comisiones .filters-actions-row .fx-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

/* ========== TABLA ========== */
.page-afiliados-comisiones .table-container {
    background: var(--admin-card-bg);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
    border: 1px solid var(--admin-border);
    overflow: visible;
}

.page-afiliados-comisiones .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

.page-afiliados-comisiones #tablaComisiones {
    margin-bottom: 0;
    font-size: 0.875rem;
    width: 100% !important;
    min-width: 760px;
}

.page-afiliados-comisiones #tablaComisiones thead th {
    background-color: #f8f9fa;
    color: var(--admin-text);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
    text-align: left;
}

.page-afiliados-comisiones #tablaComisiones thead th.text-center {
    text-align: center;
}

.page-afiliados-comisiones #tablaComisiones thead th.text-right {
    text-align: right;
}

.page-afiliados-comisiones #tablaComisiones tbody td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    color: var(--admin-text);
    border-bottom: 1px solid #f1f3f5;
    text-align: left;
}

.page-afiliados-comisiones #tablaComisiones tbody td.text-center {
    text-align: center;
}

.page-afiliados-comisiones #tablaComisiones tbody td.text-right {
    text-align: right;
}

.page-afiliados-comisiones #tablaComisiones tbody tr:hover {
    background-color: #f8f9fa;
}

/* Celda de dos líneas (Afiliado+Código, Tipo+Vigencia, Solicitud+Uanataca):
   una sola columna en vez de dos, sin negritas ni colores — la jerarquía la
   da el tamaño/color del texto, no un "resaltado" adicional. */
.page-afiliados-comisiones .cell-primary {
    color: var(--admin-text);
    line-height: 1.35;
}

.page-afiliados-comisiones .cell-secondary {
    font-size: 0.75rem;
    color: var(--admin-text-muted);
    line-height: 1.3;
    margin-top: 0.1rem;
}

.page-afiliados-comisiones #tablaComisiones tfoot {
    background-color: #f8f9fa;
}

/* Bootstrap aplica ".table > :not(:first-child) { border-top: 2px solid currentColor; }"
   a tbody/tfoot; se sobreescribe para igualar el borde fino del resto del panel admin. */
.page-afiliados-comisiones #tablaComisiones > :not(:first-child) {
    border-top: 1px solid var(--admin-border);
}

.page-afiliados-comisiones .no-data {
    text-align: center;
    padding: 3rem;
    color: var(--admin-text-muted);
}

/* ========== ESTADO (badge pequeño tipo pill) ========== */
.page-afiliados-comisiones .status-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.page-afiliados-comisiones .status-pendiente {
    background-color: #fef3c7;
    color: #92400e;
}

.page-afiliados-comisiones .status-confirmada {
    background-color: #d1fae5;
    color: #065f46;
}

.page-afiliados-comisiones .status-cancelada {
    background-color: #fee2e2;
    color: #991b1b;
}

/* ========== ACCIONES (iconos en línea, sin dropdown/modal) ========== */
.page-afiliados-comisiones .acciones-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.page-afiliados-comisiones .accion-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    background: var(--admin-card-bg);
    font-size: 0.8125rem;
    transition: all 0.15s ease;
}

.page-afiliados-comisiones .accion-icon-btn:hover {
    transform: translateY(-1px);
}

/* Ámbar (mismo tono que .status-pendiente) porque representa una acción
   pendiente por hacer — a propósito NO comparte color con el ícono verde de
   "ya confirmada" de abajo, para que no se confundan de un vistazo. */
.page-afiliados-comisiones .accion-icon-btn-confirmar {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.page-afiliados-comisiones .accion-icon-btn-confirmar:hover {
    background: #fef3c7;
    border-color: #b45309;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.25);
}

/* Icono de estado (no clickeable, solo informa) cuando ya no hay acción
   pendiente sobre la comisión — mismo tamaño que accion-icon-btn pero sin
   borde/hover, para no aparentar ser un botón. */
.page-afiliados-comisiones .accion-icon-static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 0.9375rem;
}

.page-afiliados-comisiones .accion-icon-static-confirmada {
    color: #10b981;
}

.page-afiliados-comisiones .accion-icon-static-cancelada {
    color: var(--admin-text-muted);
}

/* ========== PAGINACIÓN (footer de tabla) ========== */
.page-afiliados-comisiones .table-footer {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
}

.page-afiliados-comisiones .results-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-afiliados-comisiones .pagination {
    gap: 0.2rem;
}

.page-afiliados-comisiones .page-link {
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 0;
}

.page-afiliados-comisiones .page-link:hover:not(.disabled) {
    background-color: #f8f9fa;
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

.page-afiliados-comisiones .page-item.active .page-link {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    color: white;
    box-shadow: var(--admin-shadow);
}

.page-afiliados-comisiones .page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: var(--admin-border);
    color: var(--admin-text-muted);
    cursor: not-allowed;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .page-afiliados-comisiones #comisiones-page {
        padding: 1rem 0.5rem;
    }

    .page-afiliados-comisiones #tablaComisiones {
        font-size: 0.8125rem;
        min-width: 800px;
    }

    .page-afiliados-comisiones #tablaComisiones thead th,
    .page-afiliados-comisiones #tablaComisiones tbody td {
        padding: 0.5rem;
    }
}

/* Views\Admin\ReporteContabilidad.cshtml (scope: #reporte-contabilidad-page) */
/* Estilos consistentes con el diseño plano moderno */
#reporte-contabilidad-page {
    --admin-bg: #f8f9fa;
    --admin-card-bg: #ffffff;
    --admin-border: #e9ecef;
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-primary: #4a5568;
    --admin-success: #10b981;
    --admin-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#reporte-contabilidad-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

#reporte-contabilidad-page .page-header {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--admin-shadow);
    border-radius: 8px;
}

#reporte-contabilidad-page .page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--admin-text);
    margin: 0;
}

#reporte-contabilidad-page .filters-section {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--admin-shadow);
    border-radius: 8px;
}

#reporte-contabilidad-page .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--admin-text-muted);
    margin-bottom: 0.5rem;
}

#reporte-contabilidad-page .form-control {
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
}

#reporte-contabilidad-page .btn {
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    transition: all 0.2s ease;
    border: none;
}

#reporte-contabilidad-page .btn-primary {
    background-color: var(--admin-primary);
    color: white;
}

#reporte-contabilidad-page .btn-primary:hover {
    background-color: #2d3748;
    transform: translateY(-1px);
}

#reporte-contabilidad-page .btn-success {
    background-color: var(--admin-success);
    color: white;
}

#reporte-contabilidad-page .btn-success:hover {
    background-color: #059669;
    transform: translateY(-1px);
}

#reporte-contabilidad-page .table-card {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    padding: 2rem;
    box-shadow: var(--admin-shadow);
    border-radius: 8px;
}

/* DataTables Integration */
#reporte-contabilidad-page .dataTables_wrapper {
    font-size: 0.875rem;
}

#reporte-contabilidad-page #datatable {
    width: 100% !important;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

#reporte-contabilidad-page #datatable thead th {
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1rem 0.75rem;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
    text-align: left;
}

#reporte-contabilidad-page #datatable thead th.text-right {
    text-align: right;
}

#reporte-contabilidad-page #datatable tbody td {
    padding: 0.75rem;
    vertical-align: middle;
    font-size: 0.875rem;
    border-bottom: 1px solid #f1f3f5;
    word-wrap: break-word;
}

#reporte-contabilidad-page #datatable tbody tr:hover {
    background-color: #f8f9fa;
}

#reporte-contabilidad-page #datatable tfoot th {
    background: #f8f9fa;
    padding: 1rem 0.75rem;
    font-weight: 600;
    border-top: 2px solid #dee2e6;
}

/* Estilos específicos por columna */
#reporte-contabilidad-page #datatable td:nth-child(1),
#reporte-contabilidad-page #datatable th:nth-child(1) {
    width: 120px;
    max-width: 120px;
    text-align: left;
}

#reporte-contabilidad-page #datatable td:nth-child(2),
#reporte-contabilidad-page #datatable th:nth-child(2) {
    width: 140px;
    max-width: 140px;
}

#reporte-contabilidad-page #datatable td:nth-child(3),
#reporte-contabilidad-page #datatable th:nth-child(3) {
    width: 110px;
    max-width: 110px;
}

#reporte-contabilidad-page #datatable td:nth-child(4),
#reporte-contabilidad-page #datatable th:nth-child(4) {
    width: 180px;
    max-width: 180px;
}

#reporte-contabilidad-page #datatable td:nth-child(5),
#reporte-contabilidad-page #datatable th:nth-child(5) {
    width: 120px;
    max-width: 120px;
    text-align: right;
}

#reporte-contabilidad-page #datatable td:nth-child(6),
#reporte-contabilidad-page #datatable th:nth-child(6) {
    width: 140px;
    max-width: 140px;
}

#reporte-contabilidad-page #datatable td:nth-child(7),
#reporte-contabilidad-page #datatable th:nth-child(7) {
    width: auto;
    min-width: 200px;
}

#reporte-contabilidad-page .text-right {
    text-align: right !important;
}

/* Mejorar DataTables controles */
#reporte-contabilidad-page .dataTables_wrapper .dataTables_length,
#reporte-contabilidad-page .dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

#reporte-contabilidad-page .dataTables_wrapper .dataTables_length select,
#reporte-contabilidad-page .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

#reporte-contabilidad-page .dataTables_wrapper .dataTables_info,
#reporte-contabilidad-page .dataTables_wrapper .dataTables_paginate {
    margin-top: 1rem;
}

#reporte-contabilidad-page .loading-container {
    padding: 4rem 2rem;
    text-align: center;
}

#reporte-contabilidad-page .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
    border-color: var(--admin-primary);
    border-right-color: transparent;
}

/* Views\Admin\login.cshtml (scope: .login-wrapper)
   Reestructurado (2026-08-05) siguiendo el patrón de login "tarjeta centrada"
   que se ve en la mayoría de paneles admin modernos (Vercel, Linear, GitHub
   Admin, etc.): logo arriba de la tarjeta (no al lado), tarjeta con esquinas
   redondeadas y sombra suave en vez de borde plano, inputs con ícono prefijo
   y esquinas redondeadas, botón primario global (fx-btn) en vez de uno propio
   de la página, y un pie de página discreto debajo de la tarjeta. */
.login-wrapper {
    --admin-primary: #4a5568;
    --admin-bg: #f5f5f5;
    --admin-text: #2d3748;
    --admin-border: #d1d5db;
    --admin-success: #10b981;
    --admin-error: #ef4444;
}

.login-wrapper {
    background: #e9ebee;
    margin: 0;
    padding: 0;
}

/* Hide header and footer on login */
/* NOTE: header/footer live in _LayoutLogin.cshtml as siblings/ancestors of
   .login-wrapper (never descendants), so a plain ".login-wrapper header" prefix
   would never match. Scoped via :has() instead so this stays login-page-only. */
body:has(.login-wrapper) header, body:has(.login-wrapper) footer {
    display: none !important;
}

/* Remove default container padding/margin */
/* NOTE: #body and .container are also ancestors of .login-wrapper in
   _LayoutLogin.cshtml (id="body" div / section.container wrapping @RenderBody()),
   not descendants — same :has() scoping reasoning as above. */
body:has(.login-wrapper) #body, body:has(.login-wrapper) .container {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Minimal Container */
.login-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

/* Columna centrada: tarjeta arriba, pie de página abajo. margin:0 auto de
   respaldo por si algún estilo del template Nicepage que comparte este layout
   interfiere con el centrado por flex del .login-wrapper. */
.login-wrapper .login-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.login-wrapper .login-box {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    padding: 2.75rem 2.5rem;
    width: 100%;
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.04);
}

/* Logo arriba de la tarjeta, centrado (antes vivía al costado en un layout
   horizontal, patrón más viejo de estas pantallas) */
.login-wrapper .login-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-wrapper .login-logo img {
    max-width: 150px;
    height: auto;
}

/* Encabezado centrado (el formulario debajo sigue alineado a la izquierda,
   solo el título/subtítulo se centran bajo el logo) */
.login-wrapper .login-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--admin-text);
    margin: 0;
    text-align: center;
    letter-spacing: -0.01em;
}

.login-wrapper .login-subtitle {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0.35rem 0 1.75rem 0;
    text-align: center;
}

.login-wrapper .login-footer {
    font-size: 0.75rem;
    color: #8792a2;
    text-align: center;
    margin: 1.5rem 0 0 0;
    padding: 0 1rem;
}

/* Form Field */
.login-wrapper .form-field {
    margin-bottom: 1.25rem;
}

.login-wrapper .form-label {
    display: block;
    font-size: 0.813rem;
    font-weight: 400;
    color: var(--admin-text);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Input redondeado con fondo tenue (antes plano, sin radio, borde marcado) */
.login-wrapper .form-input {
    width: 100%;
    padding: 0.7rem 0.875rem;
    font-size: 0.938rem;
    color: var(--admin-text);
    background: #f9fafb;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    outline: none;
}

.login-wrapper .form-input:focus {
    border-color: var(--admin-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.12);
}

.login-wrapper .form-input::placeholder {
    color: #9ca3af;
}

/* Ícono prefijo dentro del input (usuario/candado) -- wrapper compartido por
   ambos campos; el ícono es puramente decorativo (pointer-events:none) para
   no interferir con el foco/click del input. */
.login-wrapper .login-input-group {
    position: relative;
}

.login-wrapper .login-input-group .form-input {
    padding-left: 2.5rem;
}

.login-wrapper .login-input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.875rem;
    pointer-events: none;
    transition: color 0.15s ease;
}

.login-wrapper .login-input-group:focus-within .login-input-icon {
    color: var(--admin-primary);
}

/* Mostrar/ocultar contraseña -- botón absoluto dentro del mismo input, además
   del ícono de candado a la izquierda (así el input sigue midiendo 100% del
   ancho, sin un ícono aparte suelto al lado). */
.login-wrapper .login-password-group .form-input {
    padding-right: 2.5rem;
}

.login-wrapper .login-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.5rem;
    border: none;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper .login-password-toggle:hover {
    color: var(--admin-primary);
}

/* Botón "Acceder": clases globales fx-btn/fx-btn-primary (mismas que usa
   cualquier acción principal del panel admin) en vez de un botón verde propio
   de esta página -- solo se agrega el ancho 100% que fx-btn no trae por
   defecto. */
.login-wrapper .login-submit-btn {
    width: 100%;
    margin-top: 0.5rem;
}

/* Subtle Error */
.login-wrapper .error-box {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1.25rem;
    font-size: 0.813rem;
    color: #991b1b;
}

.login-wrapper .error-box i {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.login-wrapper .error-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
}

.login-wrapper .error-box li {
    line-height: 1.4;
}

/* Input Error State */
.login-wrapper .form-input.input-error {
    border-color: #fca5a5;
}

.login-wrapper .form-input.input-error:focus {
    border-color: var(--admin-error);
}

/* Responsive */
@media (max-width: 576px) {
    .login-wrapper .login-box {
        padding: 2.25rem 1.5rem;
        border-radius: 12px;
    }

    .login-wrapper .login-logo img {
        max-width: 130px;
    }
}

/* Views\Admin\Afiliados\Crear.cshtml + Editar.cshtml (scope: #admin-afiliado-page)
   Un solo bloque consolidado (2026-08-05) -- antes Crear y Editar reusaban el
   mismo id pero cada uno traía su propia copia casi idéntica de la CSS
   (declarada dos veces, con pequeñas diferencias que además se pisaban entre
   sí). Ahora comparten exactamente el mismo markup/CSS: page-header compacto
   con acciones (mismo patrón que Afiliados\Detalle.cshtml), form-card con
   fields-grid de 2 columnas + section-divider para agrupar, y fx-btn/fx-btn-primary/
   fx-btn-secondary para los botones en vez de los .btn-submit/.btn-cancel/.btn-info
   ad-hoc que había antes. */
#admin-afiliado-page {
    --admin-bg: #f8f9fa;
    --admin-card-bg: #ffffff;
    --admin-border: #e9ecef;
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-primary: #4a5568;
    --admin-success: #10b981;
    --admin-shadow: 0 1px 3px rgba(0,0,0,0.08);
    max-width: 1000px;
    margin: 0 auto;
}

/* ========== HEADER ========== */
#admin-afiliado-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--admin-shadow);
}

#admin-afiliado-page .page-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--admin-text);
    margin: 0;
}

#admin-afiliado-page .page-subtitle {
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
    margin: 0.2rem 0 0 0;
}

#admin-afiliado-page .btn-reset-link {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

#admin-afiliado-page .btn-reset-link:hover {
    color: var(--admin-primary);
    text-decoration: underline;
}

/* ========== FORM CARD ========== */
#admin-afiliado-page .form-card {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--admin-shadow);
}

/* ========== CAMPOS (grid de 2 columnas, misma densidad que Afiliados\Detalle.cshtml) ========== */
#admin-afiliado-page .fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem 1.5rem;
}

#admin-afiliado-page .field-input {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 0.875rem;
}

/* Dentro de .fields-grid el espacio ya lo da el "gap" del grid -- el margin
   de arriba es solo para los .field-input sueltos (ej. GenerarLink.cshtml,
   que no usa grid de 2 columnas porque los links deben leerse en una sola
   línea completa). */
#admin-afiliado-page .fields-grid > .field-input,
#admin-afiliado-page .fields-grid > .field-input-full {
    margin-bottom: 0;
}

#admin-afiliado-page .field-input-full {
    grid-column: 1 / -1;
}

#admin-afiliado-page .form-label-admin {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--admin-text-muted);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#admin-afiliado-page .form-control,
#admin-afiliado-page .form-select {
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#admin-afiliado-page .form-control:focus,
#admin-afiliado-page .form-select:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
    outline: none;
}

#admin-afiliado-page .form-text {
    font-size: 0.75rem;
    color: var(--admin-text-muted);
    margin-top: 0.25rem;
}

#admin-afiliado-page #codigoError,
#admin-afiliado-page #codigoSuccess {
    font-weight: 600;
}

/* Input + botón pegados en una sola caja -- usado para "Código Afiliado + Generar"
   (Crear.cshtml) y "link/código HTML + Copiar" (GenerarLink.cshtml). */
#admin-afiliado-page .input-group {
    display: flex;
    align-items: center;
}

#admin-afiliado-page .input-group.input-group-textarea {
    align-items: stretch;
}

#admin-afiliado-page .input-group .form-control {
    flex: 1;
    min-width: 0;
    border-radius: 6px 0 0 6px;
    border-right: none;
}

#admin-afiliado-page .input-group-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
    border: 1px solid var(--admin-border);
    border-radius: 0 6px 6px 0;
    background: #f8f9fa;
    color: var(--admin-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0 0.875rem;
}

#admin-afiliado-page .input-group-btn:hover:not(:disabled) {
    background: #eef2f7;
}

#admin-afiliado-page .input-group-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#admin-afiliado-page #codigoHtml.form-control {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    resize: vertical;
    border-right: 1px solid var(--admin-border);
}

/* Banner de instrucciones (GenerarLink.cshtml) -- mismo lenguaje flat con acento
   de color a la izquierda que .info-item de Afiliados\Detalle.cshtml, en vez del
   .alert-info con gradiente/borde redondeado de Bootstrap. */
#admin-afiliado-page .info-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    border-radius: 4px;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1.25rem;
    color: #1e3a5f;
}

#admin-afiliado-page .info-banner i {
    color: #3b82f6;
    margin-top: 0.15rem;
}

#admin-afiliado-page .info-banner p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ========== SECCIONES (divisor + título flotante, mismo patrón que Detail/Detalle) ========== */
#admin-afiliado-page .section-divider {
    border-top: 1px solid var(--admin-border);
    margin: 1.25rem 0 1rem 0;
    padding-top: 0.75rem;
    position: relative;
}

#admin-afiliado-page .section-divider .section-title {
    background: var(--admin-card-bg);
    display: inline-block;
    padding-right: 1rem;
    position: absolute;
    top: -0.65rem;
    left: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-muted);
}

/* ========== ESTADO (switch activo/inactivo) ========== */
#admin-afiliado-page .form-check.form-switch {
    display: flex;
    align-items: center;
}

#admin-afiliado-page .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
    cursor: pointer;
    flex-shrink: 0;
}

#admin-afiliado-page .form-check-label {
    margin-left: 0.5rem;
    font-weight: 600;
    color: var(--admin-text);
    cursor: pointer;
}

/* ========== ACCIONES ========== */
#admin-afiliado-page .form-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--admin-border);
}

#admin-afiliado-page .form-actions-row .fx-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 640px) {
    #admin-afiliado-page .fields-grid {
        grid-template-columns: 1fr;
    }
}

/* Views\Admin\DescuentosCantidades.cshtml + _facturaDescuentoPorCantidadesReport.cshtml
   (scope: .page-descuentos-cantidades-report) — mismo patrón que .page-codigo-descuento-report */
.page-descuentos-cantidades-report {
    --admin-bg: #f3f4f6;
    --admin-card-bg: #ffffff;
    --admin-border: #e5e7eb;
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-primary: #4a5568;
    --admin-success: #10b981;
    --admin-shadow: 0 1px 3px rgba(0,0,0,0.08);
}


.page-descuentos-cantidades-report .filters-section {
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--admin-border);
}

.page-descuentos-cantidades-report .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--admin-text-muted);
    margin-bottom: 0.25rem;
}

.page-descuentos-cantidades-report .form-control {
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: var(--admin-card-bg);
}

.page-descuentos-cantidades-report .form-control:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
    outline: none;
}

/* Rango de fecha: dos inputs + separador + buscar/limpiar integrados en una sola caja,
   mismo lenguaje visual que .search-box de Admin/Solicitudes */
.page-descuentos-cantidades-report .date-range-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background-color: var(--admin-card-bg);
    padding-left: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-descuentos-cantidades-report .date-range-box:focus-within {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
}

.page-descuentos-cantidades-report .date-range-icon {
    color: var(--admin-text-muted);
    flex-shrink: 0;
}

.page-descuentos-cantidades-report .date-range-box .form-control {
    border: none;
    background: none;
    padding-left: 0.5rem;
    min-width: 0;
}

.page-descuentos-cantidades-report .date-range-box .form-control:focus {
    box-shadow: none;
}

.page-descuentos-cantidades-report .date-range-sep {
    color: var(--admin-text-muted);
    flex-shrink: 0;
}

.page-descuentos-cantidades-report .date-range-box .search-icon-btn,
.page-descuentos-cantidades-report .date-range-box .search-clear-btn {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    cursor: pointer;
}

.page-descuentos-cantidades-report .date-range-box .search-icon-btn:hover,
.page-descuentos-cantidades-report .date-range-box .search-clear-btn:hover {
    color: var(--admin-primary);
}

.page-descuentos-cantidades-report .table-container {
    background: var(--admin-card-bg);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
    border: 1px solid var(--admin-border);
    overflow: visible;
}

.page-descuentos-cantidades-report .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

.page-descuentos-cantidades-report #datatable3 {
    width: 100% !important;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.page-descuentos-cantidades-report #datatable3 thead th {
    background-color: #f8f9fa;
    color: var(--admin-text);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

.page-descuentos-cantidades-report #datatable3 tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    color: var(--admin-text);
    border-bottom: 1px solid #f1f3f5;
}

.page-descuentos-cantidades-report #datatable3 tbody tr:hover {
    background-color: #f8f9fa;
}

.page-descuentos-cantidades-report #datatable3 tfoot {
    background-color: #f8f9fa;
}

.page-descuentos-cantidades-report #datatable3 > :not(:first-child) {
    border-top: 1px solid var(--admin-border);
}

.page-descuentos-cantidades-report .table-footer {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
}

.page-descuentos-cantidades-report .results-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-descuentos-cantidades-report .footer-stats-sep {
    color: var(--admin-border);
}

.page-descuentos-cantidades-report .pagination {
    gap: 0.2rem;
}

.page-descuentos-cantidades-report .page-link {
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 0;
}

.page-descuentos-cantidades-report .page-link:hover:not(.disabled) {
    background-color: #f8f9fa;
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

.page-descuentos-cantidades-report .page-item.active .page-link {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    color: white;
    box-shadow: var(--admin-shadow);
}

.page-descuentos-cantidades-report .page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: var(--admin-border);
    color: var(--admin-text-muted);
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .page-descuentos-cantidades-report #datatable3 {
        font-size: 0.8125rem;
    }

    .page-descuentos-cantidades-report #datatable3 thead th,
    .page-descuentos-cantidades-report #datatable3 tbody td {
        padding: 0.75rem 0.5rem;
    }
}

/* Views\Renovacion\Renovacion-Mantenimiento.cshtml (scope: .maintenance-container) */
.maintenance-container {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maintenance-container .maintenance-card {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    text-align: center;
}

.maintenance-container .maintenance-icon {
    font-size: 120px;
    color: #003881;
    margin-bottom: 30px;
}

.maintenance-container .maintenance-title {
    color: #003881;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.maintenance-container .maintenance-message {
    color: #555;
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.maintenance-container .maintenance-info {
    background-color: #f8f9fa;
    border-left: 4px solid #003881;
    padding: 20px;
    margin: 20px 0;
    text-align: left;
}

.maintenance-container .maintenance-info h4 {
    color: #003881;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.maintenance-container .maintenance-info ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.maintenance-container .maintenance-info li {
    color: #555;
    line-height: 2em;
}

.maintenance-container .contact-info {
    margin-top: 30px;
    padding: 20px;
    background-color: #e7f3ff;
    border-radius: 8px;
}

.maintenance-container .contact-info p {
    margin: 5px 0;
    color: #003881;
    font-weight: 500;
}

.maintenance-container .spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #003881;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: renovacion-mantenimiento-spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes renovacion-mantenimiento-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.maintenance-container .bg-primary {
    background-color: #003881 !important;
}

/* Views\Solicitud\Index-Mantenimiento.cshtml (scope: .maintenance-container) */
.maintenance-container {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maintenance-container .maintenance-card {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    text-align: center;
}

.maintenance-container .maintenance-icon {
    font-size: 120px;
    color: #003881;
    margin-bottom: 30px;
}

.maintenance-container .maintenance-title {
    color: #003881;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.maintenance-container .maintenance-message {
    color: #555;
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.maintenance-container .maintenance-info {
    background-color: #f8f9fa;
    border-left: 4px solid #003881;
    padding: 20px;
    margin: 20px 0;
    text-align: left;
}

.maintenance-container .maintenance-info h4 {
    color: #003881;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.maintenance-container .maintenance-info ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.maintenance-container .maintenance-info li {
    color: #555;
    line-height: 2em;
}

.maintenance-container .contact-info {
    margin-top: 30px;
    padding: 20px;
    background-color: #e7f3ff;
    border-radius: 8px;
}

.maintenance-container .contact-info p {
    margin: 5px 0;
    color: #003881;
    font-weight: 500;
}

.maintenance-container .spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #003881;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: solicitud-index-mantenimiento-spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes solicitud-index-mantenimiento-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.maintenance-container .bg-primary {
    background-color: #003881 !important;
}

/* Views\Solicitud\Index.cshtml (scope: #index-app) */
#index-app .nav-pills .nav-link.active, #index-app .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #003881;
}

#index-app a.subtab-item {
    height: 60px;
    width: 312px;
    text-align: center;
    background-color: #ffffff;
    color: #003881;
    border-radius: 0 !important;
    border: 1px solid #2196f3;
    font-size: smaller;
    text-decoration: none;
}

/*   #index-app .btn-primary {
    color: #fff;
    background-color: #003881;
    border-color: #003881;
}*/

#index-app #pills-tabContent {
    border-left: 1px solid #003881;
    border-right: 1px solid #003881;
    border-bottom: 1px solid #003881;
}

.swal-text-scroll {
    max-height: 65vh;
    overflow-y: auto;
    text-align: justify;
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 10px 20px;
}

#index-app .btn-request-cert {
    width: 300px;
}

#index-app h4 {
    font-size: 1.1rem;
}

/* Views\Solicitud\Index.cshtml (scope: #index-app) */
#index-app .btn {
    height: 60px;
    border-color: #003881;
    color: #003881;
    font-weight: bold;
}

#index-app .btn-check:active + .btn-outline-primary, #index-app .btn-check:checked + .btn-outline-primary, #index-app .btn-outline-primary.active, #index-app .btn-outline-primary.dropdown-toggle.show, #index-app .btn-outline-primary:active {
    color: #fff;
    background-color: #003881;
    border-color: #003881;
}

#index-app .btn-outline-primary:hover {
    color: #003881;
    background-color: transparent;
    border-color: #003881;
}

#index-app .btn-check:active + .btn-outline-primary, #index-app .btn-check:checked + .btn-outline-primary, #index-app .btn-outline-primary.active, #index-app .btn-outline-primary.dropdown-toggle.show, #index-app .btn-outline-primary:active {
    color: #fff;
    background-color: #003881;
    border-color: #003881;
}

#index-app .bg-primary {
    background-color: #003881 !important;
}

#index-app img {
    cursor: pointer;
}

/*    #index-app ul {
    list-style: square;
}*/

/* Views\Admin\Afiliados\Detalle.cshtml (scope: .page-admin-afiliados-detalle)
   Version compacta (2026-08-05): todo el perfil (datos + estadisticas) vive en
   una sola detail-card con fields-grid de 2 columnas, para que quepa sin
   scroll en la mayoria de pantallas. Header fusiona titulo+badge+acciones en
   una sola fila (acciones como icon-action-btn, no fx-btn de texto). La tabla
   de comisiones tiene alto maximo con scroll interno (table-scroll) en vez de
   estirar la pagina. Mismo lenguaje que Views\Admin\Logs\Detail.cshtml
   (section-divider, info-grid, value-*) y status-badge pill reusado de
   #admin-afiliados-index / .page-afiliados-comisiones. */
.page-admin-afiliados-detalle {
    --admin-bg: #f8f9fa;
    --admin-card-bg: #ffffff;
    --admin-border: #e9ecef;
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-primary: #4a5568;
    --admin-success: #10b981;
    --admin-warning: #f59e0b;
    --admin-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ========== HEADER (titulo + badge + acciones, una sola fila) ========== */
.page-admin-afiliados-detalle .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--admin-shadow);
}

.page-admin-afiliados-detalle .page-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--admin-text);
    margin: 0;
}

.page-admin-afiliados-detalle .page-subtitle {
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
    margin: 0.2rem 0 0 0;
}

.page-admin-afiliados-detalle .page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.page-admin-afiliados-detalle .header-actions-sep {
    width: 1px;
    height: 22px;
    background: var(--admin-border);
    margin: 0 0.3rem;
}

.page-admin-afiliados-detalle .icon-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    background: var(--admin-card-bg);
    color: var(--admin-primary);
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.page-admin-afiliados-detalle .icon-action-btn:hover {
    border-color: var(--admin-primary);
    background: #f8f9fa;
    color: var(--admin-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(74, 85, 104, 0.15);
}

.page-admin-afiliados-detalle .btn-reset-link {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

.page-admin-afiliados-detalle .btn-reset-link:hover {
    color: var(--admin-primary);
    text-decoration: underline;
}

/* ========== CARDS DE DETALLE ========== */
.page-admin-afiliados-detalle .detail-card {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    box-shadow: var(--admin-shadow);
    margin-bottom: 1rem;
    overflow: hidden;
}

.page-admin-afiliados-detalle .detail-card-header {
    background: #f8f9fa;
    padding: 0.75rem 1.25rem;
    border-bottom: 2px solid var(--admin-border);
}

.page-admin-afiliados-detalle .detail-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--admin-text);
    margin: 0;
}

.page-admin-afiliados-detalle .detail-card-body {
    padding: 1.25rem;
}

.page-admin-afiliados-detalle .detail-card-body.no-padding {
    padding: 0;
}

/* ========== DATOS DEL AFILIADO (grid de 2 columnas, sin filas apiladas) ========== */
.page-admin-afiliados-detalle .fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 2rem;
}

.page-admin-afiliados-detalle .field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.page-admin-afiliados-detalle .field-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-muted);
}

.page-admin-afiliados-detalle .field-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--admin-text);
    word-break: break-word;
}

.page-admin-afiliados-detalle .section-divider {
    border-top: 1px solid var(--admin-border);
    margin: 1.25rem 0 1rem 0;
    padding-top: 0.75rem;
    position: relative;
}

.page-admin-afiliados-detalle .section-divider .section-title {
    background: var(--admin-card-bg);
    display: inline-block;
    padding-right: 1rem;
    position: absolute;
    top: -0.65rem;
    left: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-muted);
}

.page-admin-afiliados-detalle .value-highlight {
    font-weight: 600;
    color: var(--admin-primary);
}

.page-admin-afiliados-detalle .value-success {
    color: var(--admin-success);
    font-weight: 600;
}

.page-admin-afiliados-detalle .value-warning {
    color: var(--admin-warning);
    font-weight: 600;
}

.page-admin-afiliados-detalle .value-muted {
    color: var(--admin-text-muted);
    font-style: italic;
}

/* ========== ESTADÍSTICAS (info-grid tipo KPI, compacto) ========== */
.page-admin-afiliados-detalle .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.page-admin-afiliados-detalle .info-item {
    background: #f8f9fa;
    padding: 0.65rem 0.85rem;
    border-radius: 4px;
    border-left: 3px solid var(--admin-border);
}

.page-admin-afiliados-detalle .info-item.success {
    border-left-color: var(--admin-success);
    background: #f0fdf9;
}

.page-admin-afiliados-detalle .info-item.warning {
    border-left-color: var(--admin-warning);
    background: #fffbeb;
}

.page-admin-afiliados-detalle .info-item-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-muted);
    margin-bottom: 0.2rem;
}

.page-admin-afiliados-detalle .info-item-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--admin-text);
}

/* ========== TABLA DE COMISIONES (alto maximo, scroll interno) ========== */
.page-admin-afiliados-detalle .table-scroll {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: auto;
}

.page-admin-afiliados-detalle .table {
    margin-bottom: 0;
    font-size: 0.8125rem;
    width: 100%;
}

.page-admin-afiliados-detalle .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f8f9fa;
    color: var(--admin-text);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

.page-admin-afiliados-detalle .table tbody td {
    padding: 0.45rem 1rem;
    vertical-align: middle;
    color: var(--admin-text);
    border-bottom: 1px solid #f1f3f5;
}

.page-admin-afiliados-detalle .table tbody tr:hover {
    background-color: #f8f9fa;
}

.page-admin-afiliados-detalle .table > :not(:first-child) {
    border-top: 1px solid var(--admin-border);
}

.page-admin-afiliados-detalle .no-data {
    text-align: center;
    padding: 2rem;
    color: var(--admin-text-muted);
}

.page-admin-afiliados-detalle .no-data i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #cbd5e0;
    display: block;
}

/* ========== ESTADO (badge pequeño tipo pill) ========== */
.page-admin-afiliados-detalle .status-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.page-admin-afiliados-detalle .status-activo {
    background-color: #d1fae5;
    color: #065f46;
}

.page-admin-afiliados-detalle .status-inactivo {
    background-color: #fee2e2;
    color: #991b1b;
}

.page-admin-afiliados-detalle .status-pendiente {
    background-color: #fef3c7;
    color: #92400e;
}

.page-admin-afiliados-detalle .status-confirmada {
    background-color: #d1fae5;
    color: #065f46;
}

.page-admin-afiliados-detalle .status-cancelada {
    background-color: #fee2e2;
    color: #991b1b;
}

/* ========== NOTAS (compacta, con icono en linea) ========== */
.page-admin-afiliados-detalle .notas-compact {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.9rem 1.25rem;
    color: var(--admin-text-muted);
}

.page-admin-afiliados-detalle .notas-text {
    margin: 0;
    color: var(--admin-text);
    font-size: 0.875rem;
    white-space: pre-wrap;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .page-admin-afiliados-detalle .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-admin-afiliados-detalle .fields-grid {
        grid-template-columns: 1fr;
    }
}

/* Views\Solicitud\Index-bk.cshtml (scope: .page-solicitud-index-bk) */
.page-solicitud-index-bk .nav-pills .nav-link.active, .page-solicitud-index-bk .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #003881;
}

.page-solicitud-index-bk a.subtab-item {
    height: 60px;
    width: 312px;
    text-align: center;
    background-color: #ffffff;
    color: #003881;
    border-radius: 0 !important;
    border: 1px solid #2196f3;
    font-size: smaller;
    text-decoration: none;
}

/*   .page-solicitud-index-bk .btn-primary {
    color: #fff;
    background-color: #003881;
    border-color: #003881;
}*/

.page-solicitud-index-bk #pills-tabContent {
    border-left: 1px solid #003881;
    border-right: 1px solid #003881;
    border-bottom: 1px solid #003881;
}

.page-solicitud-index-bk .btn-request-cert {
    width: 300px;
}

.page-solicitud-index-bk h4 {
    font-size: 1.1rem;
}

/* Views\Renovacion\Renovacion.cshtml (scope: .page-renovacion-renovacion) */
.page-renovacion-renovacion label {
    font-weight: bold;
}

.page-renovacion-renovacion .table > :not(caption) > * > * {
    border-bottom-width: 0px;
}

/* Views\Renovacion\Renovacion.cshtml (scope: .page-renovacion-renovacion) */
.page-renovacion-renovacion .question {
    cursor: pointer;
}

.page-renovacion-renovacion .link-recover-credentials {
    color: #003881;
    text-decoration: none;
}

.page-renovacion-renovacion .link-recover-credentials:hover {
    color: #0056d6;
    text-decoration: underline;
}

.page-renovacion-renovacion .question_usuario:hover {

}

.page-renovacion-renovacion .popover-body{
    font-weight:300;
}
/*    .page-renovacion-renovacion .container {
    max-width: 100% !important;
    padding: 0 !important;
}*/
.page-renovacion-renovacion .bg-primary {
    background-color: #003881 !important;
}

.page-renovacion-renovacion .modal-sm {
    max-width: 500px;
    background-color: rgba(0,0,0,0.2);
}

.page-renovacion-renovacion .loading-spinner {
    width: 30px;
    height: 30px;
    border: 2px solid indigo;
    border-radius: 50%;
    border-top-color: #0001;
    display: inline-block;
    animation: renovacion-renovacion-loadingspinner .7s linear infinite;
}

@keyframes renovacion-renovacion-loadingspinner {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/* Views\Solicitud\Main.cshtml (scope: .page-solicitud-main) */
.page-solicitud-main .table > :not(caption) > * > * {
    border-bottom-width: 0px;
}

.page-solicitud-main .add-titular {
    width: 75px;
    height: 75px;
    border-radius: 100px;
    box-shadow: 4px 3px 6px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 4px 3px 6px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 3px 6px 0px rgba(0,0,0,0.75);
}

.page-solicitud-main .add-titular-text {
    font-size: 50px;
    color: white;
}

.page-solicitud-main label {
    font-weight: bold;
}

.page-solicitud-main .tooltip-custom:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.page-solicitud-main p:not(.u-text-variant) {
    margin-top: 1px;
    margin-bottom: 1px;
}

.page-solicitud-main #btnSiguiente, .page-solicitud-main #btnBack {
    width: 300px;
}

/* Views\Solicitud\Main.cshtml (scope: .page-solicitud-main) */
.page-solicitud-main .modal-sm {
    max-width: 500px;
    background-color: rgba(0,0,0,0.2);
}

.page-solicitud-main .loading-spinner {
    width: 30px;
    height: 30px;
    border: 2px solid indigo;
    border-radius: 50%;
    border-top-color: #0001;
    display: inline-block;
    animation: solicitud-main-loadingspinner .7s linear infinite;
}

@keyframes solicitud-main-loadingspinner {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/* Views\Solicitud\Persona.cshtml (scope: #form-persona-main) */

/* Views\Solicitud\Persona.cshtml (scope: #form-persona-main) */
/*TODO LOS TEXTOS EN MAYUSCULAS */
/* Show the tooltip text when you mouse over the tooltip container */
#form-persona-main .tooltip-custom:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

#form-persona-main ::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}

#form-persona-main :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

#form-persona-main ::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}

#form-persona-main :-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}

#form-persona-main ::placeholder { /* Recent browsers */
    text-transform: none;
}

/* Payment.aspx (scope: #content_header) */
#content_header .loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: payment-spin 2s linear infinite; /* Safari */
    animation: payment-spin 2s linear infinite;
    align-content:center;
}

/* Safari */
@-webkit-keyframes payment-spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes payment-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
#content_header #transac {
  text-align: center;
  background-color: #99CCFF;
}

/* Views\Solicitud\_Onboarding.cshtml (scope: #form-onboarding) */
/*    #form-onboarding .card-img-top {
    width: 100%;
    height: 30vw;
    object-fit: cover;
}*/

/* Views\Renovacion\Detalle.cshtml (scope: #app) */
#app label {
    font-weight: bold;
}

/* Views\Renovacion\Detalle.cshtml (scope: #app) */
#app .table > :not(caption) > * > * {
    border-bottom-width: 0px;
}

/* Views\Solicitud\Detalle.cshtml (scope: #app) */
#app label {
    font-weight: bold;
}

/* Views\Solicitud\_Formulario.cshtml (scope: #form-persona) */
#form-persona label {
    font-weight: bold;
}

/* Views\Solicitud\_InfoFormulario\_facturaElectronica.cshtml (scope: .partial-factura-electronica) */
.partial-factura-electronica .btn {
    color: #fff
}

/* Views\Admin\Logs\Index.cshtml (scope: .page-admin-logs-index)
   Migrado (2026-08-05) al mismo patron que el resto del panel admin: sin
   DataTables, table-container/filters-section/search-box/date-range-box,
   status-badge pill, accion-icon-btn, footer con paginacion fusionada.
   Unica diferencia real con el resto: la paginacion sigue siendo server-side
   (AJAX GET a Admin/GetLogs con pageNumber/pageSize) en vez de cargar todas
   las filas y paginar client-side -- el volumen de logs puede ser demasiado
   grande para traerlo completo de una sola vez. */
.page-admin-logs-index {
    --admin-bg: #f8f9fa;
    --admin-card-bg: #ffffff;
    --admin-border: #e9ecef;
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-primary: #4a5568;
    --admin-success: #10b981;
    --admin-danger: #ef4444;
    --admin-warning: #f59e0b;
    --admin-info: #3b82f6;
    --admin-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.page-admin-logs-index #admin-logs-page {
    background-color: var(--admin-bg);
    padding: 1.25rem 1rem;
    min-height: 100vh;
}

/* ========== FILTROS ========== */
.page-admin-logs-index .filters-section {
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--admin-border);
}

.page-admin-logs-index .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--admin-text-muted);
    margin-bottom: 0.25rem;
}

.page-admin-logs-index .form-control,
.page-admin-logs-index .form-select {
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: var(--admin-card-bg);
}

.page-admin-logs-index .form-control:focus,
.page-admin-logs-index .form-select:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
    outline: none;
}

.page-admin-logs-index .search-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background-color: var(--admin-card-bg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-admin-logs-index .search-box:focus-within {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
}

.page-admin-logs-index .search-box .form-control {
    border: none;
    background: none;
    padding-left: 0.25rem;
}

.page-admin-logs-index .search-box .form-control:focus {
    box-shadow: none;
}

.page-admin-logs-index .search-icon-btn,
.page-admin-logs-index .search-clear-btn {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    cursor: pointer;
}

.page-admin-logs-index .search-icon-btn:hover,
.page-admin-logs-index .search-clear-btn:hover {
    color: var(--admin-primary);
}

.page-admin-logs-index .date-range-box {
    display: flex;
    align-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background-color: var(--admin-card-bg);
    padding-left: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-admin-logs-index .date-range-box:focus-within {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
}

.page-admin-logs-index .date-range-icon {
    color: var(--admin-text-muted);
    flex-shrink: 0;
}

.page-admin-logs-index .date-range-box .form-control {
    border: none;
    background: none;
    padding-left: 0.5rem;
    min-width: 0;
}

.page-admin-logs-index .date-range-box .form-control:focus {
    box-shadow: none;
}

.page-admin-logs-index .date-range-sep {
    color: var(--admin-text-muted);
    flex-shrink: 0;
}

.page-admin-logs-index .btn-reset-link {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.page-admin-logs-index .btn-reset-link:hover {
    color: var(--admin-primary);
    text-decoration: underline;
}

.page-admin-logs-index .filters-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 0.875rem;
}

/* Solo el primer elemento del grupo "derecha" necesita el margin-auto -- si
   se lo pongo también al fx-btn de al lado, cada margin-auto reparte el
   espacio libre por separado y abre un hueco de más entre los dos. */
.page-admin-logs-index .filters-actions-row > .btn-reset-link {
    margin-left: auto;
}

.page-admin-logs-index .filters-actions-row .fx-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

.page-admin-logs-index .page-size-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-admin-logs-index .page-size-group .form-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.page-admin-logs-index .page-size-group .form-select {
    width: auto;
    padding: 0.45rem 2rem 0.45rem 0.75rem;
}

/* ========== TABLA ========== */
.page-admin-logs-index .table-container {
    background: var(--admin-card-bg);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
    border: 1px solid var(--admin-border);
    overflow: visible;
}

.page-admin-logs-index #logsTable {
    margin-bottom: 0;
    font-size: 0.875rem;
    width: 100% !important;
    min-width: 900px;
}

.page-admin-logs-index #logsTable thead th {
    background-color: #f8f9fa;
    color: var(--admin-text);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

.page-admin-logs-index #logsTable tbody td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    color: var(--admin-text);
    border-bottom: 1px solid #f1f3f5;
}

.page-admin-logs-index #logsTable tbody tr:hover {
    background-color: #f8f9fa;
}

.page-admin-logs-index #logsTable > :not(:first-child) {
    border-top: 1px solid var(--admin-border);
}

.page-admin-logs-index .cell-truncate {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-admin-logs-index .value-muted {
    color: var(--admin-text-muted);
    font-style: italic;
}

.page-admin-logs-index .no-data {
    text-align: center;
    padding: 3rem;
    color: var(--admin-text-muted);
}

.page-admin-logs-index .no-data i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #cbd5e0;
    display: block;
}

/* ========== ESTADO (badge pequeño tipo pill) ========== */
.page-admin-logs-index .status-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.page-admin-logs-index .status-request {
    background: #dbeafe;
    color: #1e40af;
}

.page-admin-logs-index .status-error {
    background: #fee2e2;
    color: #991b1b;
}

.page-admin-logs-index .status-2xx {
    background: #d1fae5;
    color: #065f46;
}

.page-admin-logs-index .status-3xx {
    background: #fef3c7;
    color: #92400e;
}

.page-admin-logs-index .status-4xx {
    background: #fed7aa;
    color: #9a3412;
}

.page-admin-logs-index .status-5xx {
    background: #fecaca;
    color: #991b1b;
}

/* ========== ACCIONES ========== */
.page-admin-logs-index .acciones-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.page-admin-logs-index .accion-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    background: var(--admin-card-bg);
    font-size: 0.8125rem;
    transition: all 0.15s ease;
}

.page-admin-logs-index .accion-icon-btn:hover {
    transform: translateY(-1px);
}

.page-admin-logs-index .accion-icon-btn-ver {
    color: #2563eb;
}

.page-admin-logs-index .accion-icon-btn-ver:hover {
    background: #eff6ff;
    border-color: #2563eb;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

/* ========== PAGINACIÓN (footer de tabla) ========== */
.page-admin-logs-index .table-footer {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
}

.page-admin-logs-index .results-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-admin-logs-index .pagination {
    gap: 0.2rem;
}

.page-admin-logs-index .page-link {
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 0;
}

.page-admin-logs-index .page-link:hover:not(.disabled) {
    background-color: #f8f9fa;
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

.page-admin-logs-index .page-item.active .page-link {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    color: white;
    box-shadow: var(--admin-shadow);
}

.page-admin-logs-index .page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: var(--admin-border);
    color: var(--admin-text-muted);
    cursor: not-allowed;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .page-admin-logs-index #admin-logs-page {
        padding: 1rem 0.5rem;
    }

    .page-admin-logs-index #logsTable {
        font-size: 0.8125rem;
    }

    .page-admin-logs-index #logsTable thead th,
    .page-admin-logs-index #logsTable tbody td {
        padding: 0.5rem;
    }
}

/* Views\Admin\Logs\Detail.cshtml (scope: .page-admin-logs-detail) */
.page-admin-logs-detail {
    background: var(--admin-bg, #f8f9fa);
    --admin-bg: #f8f9fa;
    --admin-card-bg: #ffffff;
    --admin-border: #e9ecef;
    --admin-text: #212529;
    --admin-text-muted: #6c757d;
    --admin-primary: #4a5568;
    --admin-success: #10b981;
    --admin-danger: #ef4444;
    --admin-warning: #f59e0b;
    --admin-info: #3b82f6;
    --admin-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.page-admin-logs-detail .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--admin-shadow);
}

.page-admin-logs-detail .page-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--admin-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.page-admin-logs-detail .page-subtitle {
    font-size: 0.875rem;
    color: var(--admin-text-muted);
    margin: 0.5rem 0 0 0;
}

.page-admin-logs-detail .page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.page-admin-logs-detail .detail-card {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    box-shadow: var(--admin-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.page-admin-logs-detail .detail-card-header {
    background: #f8f9fa;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid var(--admin-border);
}

.page-admin-logs-detail .detail-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--admin-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.page-admin-logs-detail .detail-card-body {
    padding: 1.5rem;
}

.page-admin-logs-detail .detail-row {
    display: flex;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--admin-border);
}

.page-admin-logs-detail .detail-row:last-child {
    border-bottom: none;
}

/* Variantes "danger" -- reemplazan los style="" en línea que tenía esta vista
   para resaltar filas/cards de error (mismo tono #fef2f2/#fecaca/#991b1b en
   todos lados, ahora como clases en vez de estilos sueltos repetidos). */
.page-admin-logs-detail .detail-row-danger {
    background: #fef2f2;
}

.page-admin-logs-detail .detail-label-danger {
    color: var(--admin-danger);
}

.page-admin-logs-detail .detail-card-danger {
    border-color: #fecaca;
}

.page-admin-logs-detail .detail-card-header-danger {
    background: #fef2f2;
    border-bottom-color: #fecaca;
}

.page-admin-logs-detail .detail-card-title-danger {
    color: #991b1b;
}

.page-admin-logs-detail .section-divider-danger {
    border-color: #fecaca;
}

.page-admin-logs-detail .section-divider-danger .section-title {
    color: #991b1b;
}

.page-admin-logs-detail .detail-label {
    width: 200px;
    font-weight: 600;
    color: var(--admin-text);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    flex-shrink: 0;
}

.page-admin-logs-detail .detail-value {
    flex: 1;
    color: var(--admin-text);
    font-size: 0.938rem;
    word-break: break-word;
}

.page-admin-logs-detail .badge-log {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.page-admin-logs-detail .badge-request {
    background: #dbeafe;
    color: #1e40af;
}

.page-admin-logs-detail .badge-error {
    background: #fee2e2;
    color: #991b1b;
}

.page-admin-logs-detail .code-block {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.813rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
}

.page-admin-logs-detail .code-block.error {
    background: #450a0a;
    color: #fecaca;
    border: 1px solid #991b1b;
}

.page-admin-logs-detail .url-display {
    background: #f1f5f9;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    word-break: break-all;
    color: var(--admin-primary);
}

.page-admin-logs-detail .stacktrace-line {
    display: block;
    padding: 0.125rem 0;
}

.page-admin-logs-detail .stacktrace-file {
    color: #f59e0b;
    font-weight: 600;
}

.page-admin-logs-detail .btn-reset-link {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.page-admin-logs-detail .btn-reset-link:hover {
    color: var(--admin-primary);
    text-decoration: underline;
}

.page-admin-logs-detail .section-divider {
    border-top: 2px solid var(--admin-border);
    margin: 1.5rem 0 1rem 0;
    padding-top: 1rem;
    position: relative;
}

.page-admin-logs-detail .section-divider .section-title {
    background: var(--admin-card-bg);
    display: inline-block;
    padding-right: 1rem;
    position: absolute;
    top: -0.7rem;
    left: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-muted);
}

.page-admin-logs-detail .value-highlight {
    font-weight: 600;
    color: var(--admin-primary);
}

.page-admin-logs-detail .value-success {
    color: var(--admin-success);
    font-weight: 600;
}

.page-admin-logs-detail .value-error {
    color: var(--admin-danger);
    font-weight: 600;
}

.page-admin-logs-detail .value-muted {
    color: var(--admin-text-muted);
    font-style: italic;
}

.page-admin-logs-detail .timestamp-display {
    font-size: 1rem;
    font-weight: 600;
    color: var(--admin-text);
}

.page-admin-logs-detail .timestamp-utc {
    font-size: 0.813rem;
    color: var(--admin-text-muted);
    margin-top: 0.25rem;
}

.page-admin-logs-detail .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.page-admin-logs-detail .info-item {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    border-left: 3px solid var(--admin-border);
}

.page-admin-logs-detail .info-item.error {
    border-left-color: var(--admin-danger);
    background: #fef2f2;
}

.page-admin-logs-detail .info-item.request {
    border-left-color: var(--admin-info);
    background: #eff6ff;
}

.page-admin-logs-detail .info-item-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--admin-text-muted);
    margin-bottom: 0.25rem;
}

.page-admin-logs-detail .info-item-value {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--admin-text);
}

/* ==========================================================================
   AppModal - skin propio (reemplazo de SweetAlert2), ver
   Scripts/formularios/AppModal.js. Clases .appmodal-* propias, no reusar
   nombres .swal2-* al migrar vistas.

   Direccion "Marca": franja superior de color por tipo, etiqueta
   institucional en mayusculas en vez de circulo de icono, esquinas
   minimas, botones solidos en el azul de marca (#003881). Elegida sobre
   "Actual" (linea base) y "Suave" (moderna/redondeada) tras comparar
   mockup en vivo.
   ========================================================================== */

:root {
    --appmodal-brand: #003881;
    --appmodal-brand-soft: #e8eefc;
    --appmodal-success: #10b981;
    --appmodal-success-soft: #e3faf1;
    --appmodal-error: #ef4444;
    --appmodal-error-soft: #fdeceb;
    --appmodal-warning: #f59e0b;
    --appmodal-warning-soft: #fef3e2;
    --appmodal-ink: #17233b;
    --appmodal-ink-muted: #5b6b85;
    --appmodal-border: #dbe2ec;
}

/* Backdrop propio (Bootstrap crea .modal-backdrop dinamicamente; AppModal.js
   le agrega esta clase para no afectar otros modales Bootstrap nativos del
   sitio, ej. el modal "Marcar como Confirmada" en Comisiones.cshtml). */
.modal-backdrop.appmodal-backdrop {
    background: rgba(0, 22, 56, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 1;
}

.appmodal-popup.fade .appmodal-dialog {
    transform: translateY(14px) scale(0.98);
    transition: transform 0.25s cubic-bezier(.2, .9, .3, 1.1), opacity 0.2s ease;
}

.appmodal-popup.show .appmodal-dialog {
    transform: translateY(0) scale(1);
}

.appmodal-popup .appmodal-content {
    border: 1px solid var(--appmodal-border);
    border-radius: 14px;
    box-shadow: 0 30px 70px -24px rgba(0, 22, 56, 0.35);
    overflow: hidden;
    position: relative;
}

.appmodal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--appmodal-ink-muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.appmodal-close:hover {
    background: #f1f4f9;
    color: var(--appmodal-ink);
}

.appmodal-body {
    padding: 2rem;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.appmodal-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    color: var(--appmodal-ink);
}

/* Badge circular con el icono arriba del titulo, en vez de la etiqueta de
   texto en mayusculas ("Exito"/"Error"/...) que se usaba antes. */
.appmodal-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto .9rem;
    border-radius: 50%;
    font-size: 1.4rem;
}

.appmodal-icon-badge-success { background: var(--appmodal-success-soft); color: var(--appmodal-success); }
.appmodal-icon-badge-error { background: var(--appmodal-error-soft); color: var(--appmodal-error); }
.appmodal-icon-badge-warning { background: var(--appmodal-warning-soft); color: var(--appmodal-warning); }
.appmodal-icon-badge-question,
.appmodal-icon-badge-info { background: var(--appmodal-brand-soft); color: var(--appmodal-brand); }

/* Estado neutral/terminal (ej. "Solicitud Cancelada"): ni exito ni error,
   solo un hecho consumado -- gris apagado en vez del navy de marca. */
.appmodal-icon-badge-neutral { background: #f1f3f5; color: #6b7280; }

/* Modal de codigo de descuento (Main.cshtml#abrirCodigoDescuento) -- title
   mas grande que el default de AppModal, sin afectar otros modales. */
.fx-code-modal-title {
    font-size: 2rem;
    font-weight: 500;
}

/* Input de codigo de descuento (6 digitos): ancho proporcional al contenido, no full-width */
.fx-code-input {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .5em;
    font-variant-numeric: tabular-nums;
    padding: .55rem .75rem;
    padding-left: calc(.75rem + .5em);
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    box-sizing: border-box;
}

.fx-code-input:focus {
    border-color: #003881;
    box-shadow: 0 0 0 3px rgba(0, 56, 129, .12);
}

.appmodal-html-container {
    font-size: 0.92rem;
    color: var(--appmodal-ink-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* .appmodal-body centra todo por defecto (bien para icono/titulo, cortos) --
   para cuerpos de varios parrafos (ej. "Solicitud Recibida") texto centrado
   es mas dificil de leer. Clase opt-in via customClass.htmlContainer. */
.appmodal-text-left {
    text-align: left;
}

.appmodal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

/* Sin appmodal-html-container (modal solo con titulo, ej. confirmacion de
   renovacion) el titulo y los botones quedan pegados con solo su margin-bottom
   de 0.5rem -- se agrega mas aire cuando no hay contenido de por medio. */
.appmodal-title + .appmodal-actions {
    margin-top: 1rem;
}

.appmodal-actions .btn.appmodal-btn-confirm {
    background: var(--appmodal-brand);
    border-color: var(--appmodal-brand);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.65rem 1.4rem;
}

.appmodal-actions .btn.appmodal-btn-confirm:hover {
    filter: brightness(1.12);
    background: var(--appmodal-brand);
    border-color: var(--appmodal-brand);
    color: #fff;
}

.appmodal-actions .btn.appmodal-btn-cancel,
.appmodal-actions .btn.appmodal-btn-deny {
    background: transparent;
    border: 1.5px solid var(--appmodal-border);
    color: var(--appmodal-ink);
    border-radius: 10px;
    font-weight: 600;
    padding: 0.65rem 1.4rem;
}

.appmodal-actions .btn.appmodal-btn-cancel:hover,
.appmodal-actions .btn.appmodal-btn-deny:hover {
    border-color: var(--appmodal-ink-muted);
    background: #f7f9fc;
    color: var(--appmodal-ink);
}

.appmodal-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.2rem;
    margin-right: 0.5rem;
    color: var(--appmodal-brand);
}

.appmodal-toast-container {
    z-index: 1090;
}

.appmodal-toast {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 14px 34px -14px rgba(0, 22, 56, 0.4);
    border-left: 3px solid var(--appmodal-brand);
}

.appmodal-toast-success { border-left-color: var(--appmodal-success); }
.appmodal-toast-error { border-left-color: var(--appmodal-error); }
.appmodal-toast-warning { border-left-color: var(--appmodal-warning); }
.appmodal-toast-question,
.appmodal-toast-info { border-left-color: var(--appmodal-brand); }

.appmodal-toast .fa-check { color: var(--appmodal-success); }
.appmodal-toast .fa-times { color: var(--appmodal-error); }
.appmodal-toast .fa-exclamation { color: var(--appmodal-warning); }
.appmodal-toast .fa-question,
.appmodal-toast .fa-info { color: var(--appmodal-brand); }

@media (prefers-reduced-motion: reduce) {
    .appmodal-popup.fade .appmodal-dialog,
    .appmodal-popup.show .appmodal-dialog {
        transition: none;
        transform: none;
    }
}

/* ---- Componentes de datos: para modales que muestran informacion
   estructurada (JCE, LlaveUnica, enlace de solicitud, codigo generado)
   en vez de bloques de HTML con estilos inline sueltos. ---- */

.appmodal-data {
    text-align: left;
}

.appmodal-data-intro {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--appmodal-ink-muted);
    line-height: 1.55;
}

.appmodal-data-profile {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--appmodal-border);
}

.appmodal-data-photo {
    width: 96px;
    height: 112px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--appmodal-border);
    flex-shrink: 0;
}

.appmodal-data-name {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--appmodal-ink);
}

.appmodal-data-sub {
    margin: 0;
    font-size: 0.82rem;
    color: var(--appmodal-ink-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.appmodal-data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.appmodal-data-row {
    background: #f7f9fc;
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.75rem;
}

.appmodal-data-row:last-child { margin-bottom: 0; }

.appmodal-data-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--appmodal-ink-muted);
    margin-bottom: 0.3rem;
}

.appmodal-data-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--appmodal-ink);
}

.appmodal-data-value-mono {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    word-break: break-all;
    background: #f7f9fc;
    border: 1px solid var(--appmodal-border);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    color: var(--appmodal-ink);
    margin-top: 0.3rem;
}

.appmodal-data-link {
    color: var(--appmodal-brand);
    text-decoration: none;
    font-weight: 600;
    word-break: break-all;
}

.appmodal-data-link:hover { text-decoration: underline; }

.appmodal-data-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    background: var(--appmodal-brand-soft);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--appmodal-ink-muted);
    line-height: 1.5;
}

.appmodal-data-note i {
    color: var(--appmodal-brand);
    margin-top: 0.15rem;
}

.appmodal-data-highlight {
    background: var(--appmodal-success-soft);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.85rem;
}

.appmodal-data-highlight .appmodal-data-value {
    display: block;
    font-size: 1.4rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.03em;
    color: #047857;
    margin-top: 0.15rem;
}

/* Fila de checkbox dentro de una modal (ej. "enviar correo ahora") */
.appmodal-check-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
    padding: 0.8rem 0.9rem;
    border-radius: 6px;
    background: var(--appmodal-success-soft);
    margin-bottom: 1rem;
    cursor: pointer;
}

.appmodal-check-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--appmodal-success);
    flex-shrink: 0;
    cursor: pointer;
}

.appmodal-check-row span {
    font-size: 0.87rem;
    color: var(--appmodal-ink);
    font-weight: 500;
}

@media (max-width: 480px) {
    .appmodal-data-grid { grid-template-columns: 1fr; }
    .appmodal-data-profile { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   Views\Admin\SolicitudTitulares\Index.cshtml (scope: #admin-solicitudtitulares-index)
   Mismo diseño que #admin-solicitud-index (ver arriba), sin las tabs
   Nuevas/Renovaciones -- acá cada fila ya es un titular, no una solicitud.
   ========================================================================== */

#admin-solicitudtitulares-index {
    background-color: var(--admin-bg);
    padding: 1.25rem 1rem;
    min-height: 100vh;
}

/* Banner de contexto: aclara que el envío a Uanataca lo hace un proceso automático
   (ver comentario en AdminController.ReintentarEnvioInicialTitular) y que las acciones
   de esta tabla son intervenciones manuales excepcionales, no el flujo normal. Mismo
   patrón que .info-banner de Admin/Afiliados/GenerarLink.cshtml. */
#admin-solicitudtitulares-index .info-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    border-radius: 4px;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1.25rem;
    color: #1e3a5f;
}

#admin-solicitudtitulares-index .info-banner i {
    color: #3b82f6;
    margin-top: 0.15rem;
}

#admin-solicitudtitulares-index .info-banner p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ========== SECCIÓN DE FILTROS ========== */
#admin-solicitudtitulares-index .filters-section {
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--admin-border);
}

#admin-solicitudtitulares-index .form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--admin-text-muted);
    margin-bottom: 0.25rem;
}

#admin-solicitudtitulares-index .form-control, #admin-solicitudtitulares-index .form-select {
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: var(--admin-card-bg);
}

#admin-solicitudtitulares-index .form-control:focus, #admin-solicitudtitulares-index .form-select:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
    outline: none;
}

#admin-solicitudtitulares-index .form-control:disabled, #admin-solicitudtitulares-index .form-select:disabled {
    background-color: #f1f3f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ========== BOTONES ========== */
#admin-solicitudtitulares-index .btn {
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    transition: all 0.2s ease;
    border: none;
    letter-spacing: 0.3px;
}

#admin-solicitudtitulares-index .btn-outline-secondary {
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    background-color: white;
}

#admin-solicitudtitulares-index .btn-outline-secondary:hover:not(:disabled) {
    background-color: #f8f9fa;
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

/* Botones de acciones visibles en la fila (ver .acciones-inline): variantes warning
   (reintentar envío) y danger (ver error) para que salten a la vista sin abrir nada. */
#admin-solicitudtitulares-index .btn-outline-warning {
    border-color: var(--admin-warning);
    color: var(--admin-warning);
    background-color: white;
}

#admin-solicitudtitulares-index .btn-outline-warning:hover:not(:disabled) {
    background-color: var(--admin-warning);
    border-color: var(--admin-warning);
    color: white;
}

#admin-solicitudtitulares-index .btn-outline-danger {
    border-color: var(--admin-danger);
    color: var(--admin-danger);
    background-color: white;
}

#admin-solicitudtitulares-index .btn-outline-danger:hover:not(:disabled) {
    background-color: var(--admin-danger);
    border-color: var(--admin-danger);
    color: white;
}

#admin-solicitudtitulares-index .acciones-inline {
    flex-wrap: wrap;
}

#admin-solicitudtitulares-index .btn-reset-link {
    border: none;
    background: none;
    color: var(--admin-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

#admin-solicitudtitulares-index .btn-reset-link:hover:not(:disabled) {
    color: var(--admin-primary);
    text-decoration: underline;
}

#admin-solicitudtitulares-index .btn-reset-link:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

#admin-solicitudtitulares-index .btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

#admin-solicitudtitulares-index .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* ========== ESTADOS ========== */
#admin-solicitudtitulares-index .status-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Estado de envío a Uanataca (derivado, 3 valores -- ver SolicitudDTO.EstadoEnvioUanataca) */
#admin-solicitudtitulares-index .status-enviado {
    background-color: #d1fae5;
    color: #047857;
}

#admin-solicitudtitulares-index .status-pendiente-envio {
    background-color: #dbeafe;
    color: #1e40af;
}

#admin-solicitudtitulares-index .status-error-envio {
    background-color: #fee2e2;
    color: #b91c1c;
}

/* ========== TABLA ========== */
#admin-solicitudtitulares-index .table-container {
    background: var(--admin-card-bg);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
    border: 1px solid var(--admin-border);
    overflow: visible;
}

#admin-solicitudtitulares-index .table-responsive {
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: visible;
}

#admin-solicitudtitulares-index .table {
    margin-bottom: 0;
    font-size: 0.875rem;
}

#admin-solicitudtitulares-index .table thead th {
    background-color: #f8f9fa;
    color: var(--admin-text);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

#admin-solicitudtitulares-index .table tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    color: var(--admin-text);
    border-bottom: 1px solid #f1f3f5;
}

#admin-solicitudtitulares-index .table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

/* Agrupación visual por No. Solicitud (varios titulares pueden compartir el mismo
   IdSolicitud) -- franja alternada por grupo + separador más marcado al arrancar uno
   nuevo, para identificar de un vistazo qué filas pertenecen a la misma solicitud. */
#admin-solicitudtitulares-index .fila-grupo-impar {
    background-color: #f8fafc;
}

#admin-solicitudtitulares-index .fila-nuevo-grupo td {
    border-top: 2px solid var(--admin-border);
}

#admin-solicitudtitulares-index .table tfoot {
    background-color: #f8f9fa;
}

#admin-solicitudtitulares-index .table > :not(:first-child) {
    border-top: 1px solid var(--admin-border);
}

#admin-solicitudtitulares-index .table-footer {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8125rem;
    color: var(--admin-text-muted);
}

#admin-solicitudtitulares-index .results-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ========== PAGINACIÓN ========== */
#admin-solicitudtitulares-index .pagination {
    gap: 0.2rem;
}

#admin-solicitudtitulares-index .page-link {
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 0;
}

#admin-solicitudtitulares-index .page-link:hover:not(.disabled) {
    background-color: #f8f9fa;
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

#admin-solicitudtitulares-index .page-item.active .page-link {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    color: white;
    box-shadow: var(--admin-shadow);
}

#admin-solicitudtitulares-index .page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: var(--admin-border);
    color: var(--admin-text-muted);
    cursor: not-allowed;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    #admin-solicitudtitulares-index {
        padding: 1rem 0.5rem;
    }

    #admin-solicitudtitulares-index .filters-section {
        padding: 1rem;
    }

    #admin-solicitudtitulares-index .table {
        font-size: 0.8125rem;
    }

    #admin-solicitudtitulares-index .table thead th,
    #admin-solicitudtitulares-index .table tbody td {
        padding: 0.75rem 0.5rem;
    }

    #admin-solicitudtitulares-index .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}