/* =============================================================================
 * adminlte3-compat.css  —  SHIM TEMPORAL de compatibilidad AdminLTE 3 -> AdminLTE 4
 * -----------------------------------------------------------------------------
 * Por que existe:
 *   La migracion a Bootstrap 5 + AdminLTE 4 (GA 4.0.2) ELIMINO varias clases que
 *   la app todavia usa en ~40 vistas. Al perder su definicion, esos elementos se
 *   ven rotos (botones sin color, radios apilados, stats descuadrados, etc.).
 *   Este archivo RESTAURA esas clases con los valores EXACTOS de AdminLTE 3.2 /
 *   Bootstrap 4, pero escritos de forma compatible con Bootstrap 5.
 *
 * Naturaleza:
 *   Es DEUDA TECNICA EXPLICITA y REMOVIBLE. A medida que se modernice el markup
 *   de cada vista (radio-inline -> .form-check.form-check-inline, help-block ->
 *   .form-text, paleta custom -> utilidades nativas BS5/AdminLTE4), las secciones
 *   correspondientes de este archivo se podran ir borrando hasta eliminarlo.
 *
 * Reglas de mantenimiento:
 *   - NO redefinir clases que AdminLTE 4 SI conserva (info-box, small-box, callout,
 *     timeline, card, etc.). Solo van aqui las ELIMINADAS.
 *   - Evitar !important salvo donde es imprescindible para ganar a una utilidad
 *     nativa equivalente que ya carga adminlte.min.css (caso de la paleta de color,
 *     que reproduce el comportamiento de las utilidades .bg-*\/.text-* de v3 que
 *     llevaban !important por diseno).
 *   - Cablear DESPUES de adminlte.min.css en el bundle ~/Assets/theme.
 *
 * Origen de los valores: IqCoope/Content/adminLte/AdminLTE.css (AdminLTE v3.2,
 * aun presente en el repo como referencia) + spec de Bootstrap 3/4.
 * ============================================================================= */


/* =============================================================================
 * SECCION 2 — .radio-inline / .checkbox-inline  (Bootstrap 3, eliminado en BS4+)
 * -----------------------------------------------------------------------------
 * Markup real en la app (input DENTRO del label):
 *     <div class="form-control no-border">
 *         <label class="radio-inline">@Html.RadioButtonFor(...) Si</label>
 *         <label class="radio-inline">@Html.RadioButtonFor(...) No</label>
 *     </div>
 * Objetivo: que cada par de opciones quede EN LINEA horizontal, con el radio/check
 * alineado verticalmente al texto y separacion correcta entre opciones. No se toca
 * el markup; solo se restaura el layout que daba la clase BS3.
 * ============================================================================= */
.radio-inline,
.checkbox-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer;
}

/* Separacion entre opciones contiguas (equivalente al margin-left de BS3). */
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
    margin-left: 10px;
}

/* El input vive dentro del label; lo separamos del texto y lo alineamos. */
.radio-inline > input[type="radio"],
.radio-inline > input[type="checkbox"],
.checkbox-inline > input[type="radio"],
.checkbox-inline > input[type="checkbox"] {
    margin-top: 0;
    margin-right: 0.35rem;
    vertical-align: middle;
}


/* =============================================================================
 * SECCION 3 — .help-block  (Bootstrap 3, eliminado en BS4+)
 * -----------------------------------------------------------------------------
 * Texto de ayuda bajo el campo. Equivale a .form-text de BS5: bloque, margen
 * superior pequeno, color atenuado. Markup real: <p class="help-block">...</p>.
 * ============================================================================= */
.help-block {
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    color: #6c757d; /* = var(--bs-secondary-color) aprox; gris atenuado de BS */
}


/* =============================================================================
 * SECCION 4 — .description-block  (AdminLTE 3, eliminado en v4)
 * -----------------------------------------------------------------------------
 * Bloque centrado para "stats" en el footer de cards (Cuentas/Details, Creditos/
 * Saldos). Subelementos usados: .description-header (titulo) y .description-text
 * (valor, en mayusculas). Valores EXACTOS de AdminLTE v3.2.
 * ============================================================================= */
.description-block {
    display: block;
    margin: 10px 0;
    text-align: center;
}

.description-block.margin-bottom {
    margin-bottom: 25px;
}

.description-block > .description-header {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
}

.description-block > .description-text {
    text-transform: uppercase;
}

.description-block .description-icon {
    font-size: 16px;
}


/* =============================================================================
 * SECCION 5 — .btn-flat  (AdminLTE 3, eliminado en v4)
 * -----------------------------------------------------------------------------
 * Boton sin border-radius ni sombra. Markup real: <a class="btn bg-blue btn-sm
 * btn-flat">. Valores EXACTOS de AdminLTE v3.2 (selector .btn.btn-flat).
 * ============================================================================= */
.btn.btn-flat {
    border-radius: 0;
    border-width: 1px;
    box-shadow: none;
}


/* =============================================================================
 * SECCION 6 — .widget-user  (AdminLTE 3, eliminado en v4)
 * -----------------------------------------------------------------------------
 * Tarjeta "perfil" con header de color, imagen circular superpuesta y footer con
 * description-blocks. Usado en Cuentas/Details, Cuentas/Saldos y Creditos/Saldos
 * (los 3 con widget-user-header bg-info). Valores EXACTOS de AdminLTE v3.2.
 * El header lleva texto blanco; ademas se restaura el tono info de v3 (#17a2b8)
 * SOLO en el header, porque el bg-info de BS5 es un cian mas claro donde el texto
 * blanco no contrasta. (La tarjeta .card ya es position:relative, asi que la imagen
 * absoluta se posiciona respecto a ella.)
 * ============================================================================= */
.widget-user .widget-user-header {
    height: 135px;
    padding: 1rem;
    text-align: center;
    color: #fff;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.widget-user .widget-user-header.bg-info {
    background-color: #17a2b8 !important;
}

.widget-user .widget-user-username {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 25px;
    font-weight: 300;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.widget-user .widget-user-desc {
    margin-top: 0;
}

.widget-user .widget-user-image {
    position: absolute;
    left: 50%;
    top: 80px;
    margin-left: -45px;
}

.widget-user .widget-user-image > img {
    width: 90px;
    height: auto;
    border: 3px solid #fff;
}

.widget-user .card-footer {
    padding-top: 50px;
}


/* =============================================================================
 * SECCION 7 — .border-right / .border-left  (Bootstrap 4, renombrado en BS5)
 * -----------------------------------------------------------------------------
 * En BS5 son .border-end / .border-start. La app aun usa las de BS4 como divisores
 * (Cuentas/Details, Creditos/Saldos, CajaTurnos/Details, Entidad). Se restauran con
 * color/grosor del tema (no hardcode) para que funcionen en claro y oscuro.
 * ============================================================================= */
.border-right {
    border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
}

.border-left {
    border-left: var(--bs-border-width) solid var(--bs-border-color) !important;
}


/* #############################################################################
 * ## INICIO SECCION 1 — PALETA DE COLORES AdminLTE 3 (DESHABILITADA POR AHORA) ##
 * #############################################################################
 *
 * NOTA OPERATIVA: esta seccion de COLOR esta DIFERIDA por decision del usuario
 * (se habilitara en una fase posterior). El RESTO del archivo (secciones 2-5) ya
 * esta en uso. Para habilitarla, simplemente DESCOMENTAR este bloque completo
 * (quitar el "/*" de la linea siguiente y el "* /" del cierre marcado mas abajo).
 *
 * Reproduce las utilidades .bg-*, .text-* y .bg-gradient-* extra de AdminLTE 3
 * (las que NO existen en Bootstrap ni en AdminLTE 4) con sus HEX EXACTOS, mas el
 * comportamiento de boton: un .btn.bg-purple (etc.) tiene texto blanco/oscuro
 * segun contraste y se oscurece en :hover / :active. Se conserva el uso de
 * !important porque las utilidades de color de AdminLTE 3 lo llevaban por diseno
 * (debian ganar a las clases de componente).*/

.bg-navy            { background-color: #001f3f !important; }
.bg-navy,
.bg-navy > a        { color: #fff !important; }
.bg-navy.btn:hover  { border-color: #00060c; color: #ececec; }
.bg-navy.btn:active, .bg-navy.btn.active {
    background-color: #00060c !important; border-color: #000; color: #fff;
}

.bg-olive           { background-color: #3d9970 !important; }
.bg-olive,
.bg-olive > a       { color: #fff !important; }
.bg-olive.btn:hover { border-color: #2e7555; color: #ececec; }
.bg-olive.btn:active, .bg-olive.btn.active {
    background-color: #2e7555 !important; border-color: #2b6b4f; color: #fff;
}

.bg-lime            { background-color: #01ff70 !important; }
.bg-lime,
.bg-lime > a        { color: #1f2d3d !important; }
.bg-lime.btn:hover  { border-color: #00cd5a; color: #121a24; }
.bg-lime.btn:active, .bg-lime.btn.active {
    background-color: #00cd5a !important; border-color: #00c054; color: #fff;
}

.bg-fuchsia            { background-color: #f012be !important; }
.bg-fuchsia,
.bg-fuchsia > a        { color: #fff !important; }
.bg-fuchsia.btn:hover  { border-color: #c30c9a; color: #ececec; }
.bg-fuchsia.btn:active, .bg-fuchsia.btn.active {
    background-color: #c30c9a !important; border-color: #b70c90; color: #fff;
}

.bg-maroon            { background-color: #d81b60 !important; }
.bg-maroon,
.bg-maroon > a        { color: #fff !important; }
.bg-maroon.btn:hover  { border-color: #ab154c; color: #ececec; }
.bg-maroon.btn:active, .bg-maroon.btn.active {
    background-color: #ab154c !important; border-color: #9f1447; color: #fff;
}

.bg-blue            { background-color: #007bff !important; }
.bg-blue,
.bg-blue > a        { color: #fff !important; }
.bg-blue.btn:hover  { border-color: #0062cc; color: #ececec; }
.bg-blue.btn:active, .bg-blue.btn.active {
    background-color: #0062cc !important; border-color: #005cbf; color: #fff;
}

.bg-indigo            { background-color: #6610f2 !important; }
.bg-indigo,
.bg-indigo > a        { color: #fff !important; }
.bg-indigo.btn:hover  { border-color: #510bc4; color: #ececec; }
.bg-indigo.btn:active, .bg-indigo.btn.active {
    background-color: #510bc4 !important; border-color: #4c0ab8; color: #fff;
}

.bg-purple            { background-color: #6f42c1 !important; }
.bg-purple,
.bg-purple > a        { color: #fff !important; }
.bg-purple.btn:hover  { border-color: #59339d; color: #ececec; }
.bg-purple.btn:active, .bg-purple.btn.active {
    background-color: #59339d !important; border-color: #533093; color: #fff;
}

.bg-pink            { background-color: #e83e8c !important; }
.bg-pink,
.bg-pink > a        { color: #fff !important; }
.bg-pink.btn:hover  { border-color: #d91a72; color: #ececec; }
.bg-pink.btn:active, .bg-pink.btn.active {
    background-color: #d91a72 !important; border-color: #ce196c; color: #fff;
}

.bg-orange            { background-color: #fd7e14 !important; }
.bg-orange,
.bg-orange > a        { color: #1f2d3d !important; }
.bg-orange.btn:hover  { border-color: #dc6502; color: #121a24; }
.bg-orange.btn:active, .bg-orange.btn.active {
    background-color: #dc6502 !important; border-color: #cf5f02; color: #fff;
}

.bg-teal            { background-color: #20c997 !important; }
.bg-teal,
.bg-teal > a        { color: #fff !important; }
.bg-teal.btn:hover  { border-color: #199d76; color: #ececec; }
.bg-teal.btn:active, .bg-teal.btn.active {
    background-color: #199d76 !important; border-color: #17926e; color: #fff;
}

.bg-gray            { background-color: #6c757d !important; }
.bg-gray,
.bg-gray > a        { color: #fff !important; }
.bg-gray.btn:hover  { border-color: #545b62; color: #ececec; }
.bg-gray.btn:active, .bg-gray.btn.active {
    background-color: #545b62 !important; border-color: #4e555b; color: #fff;
}

.bg-gray-light      { background-color: #f2f4f5; color: #1f2d3d !important; }


.text-navy    { color: #001f3f !important; }
.text-olive   { color: #3d9970 !important; }
.text-lime    { color: #01ff70 !important; }
.text-fuchsia { color: #f012be !important; }
.text-maroon  { color: #d81b60 !important; }
.text-blue    { color: #007bff !important; }
.text-indigo  { color: #6610f2 !important; }
.text-purple  { color: #6f42c1 !important; }
.text-pink    { color: #e83e8c !important; }
.text-orange  { color: #fd7e14 !important; }
.text-teal    { color: #20c997 !important; }
.text-gray    { color: #6c757d !important; }


.bg-gradient-navy    { background: #001f3f linear-gradient(180deg, #26415c, #001f3f) repeat-x !important; color: #fff; }
.bg-gradient-olive   { background: #3d9970 linear-gradient(180deg, #5aa885, #3d9970) repeat-x !important; color: #fff; }
.bg-gradient-lime    { background: #01ff70 linear-gradient(180deg, #27ff85, #01ff70) repeat-x !important; color: #1f2d3d; }
.bg-gradient-fuchsia { background: #f012be linear-gradient(180deg, #f236c8, #f012be) repeat-x !important; color: #fff; }
.bg-gradient-maroon  { background: #d81b60 linear-gradient(180deg, #de3d78, #d81b60) repeat-x !important; color: #fff; }
.bg-gradient-indigo  { background: #6610f2 linear-gradient(180deg, #7d34f4, #6610f2) repeat-x !important; color: #fff; }
.bg-gradient-purple  { background: #6f42c1 linear-gradient(180deg, #855eca, #6f42c1) repeat-x !important; color: #fff; }
.bg-gradient-pink    { background: #e83e8c linear-gradient(180deg, #eb5b9d, #e83e8c) repeat-x !important; color: #fff; }
.bg-gradient-orange  { background: #fd7e14 linear-gradient(180deg, #fd9137, #fd7e14) repeat-x !important; color: #1f2d3d; }
.bg-gradient-teal    { background: #20c997 linear-gradient(180deg, #41d1a7, #20c997) repeat-x !important; color: #fff; }
.bg-gradient-gray    { background: #6c757d linear-gradient(180deg, #828a91, #6c757d) repeat-x !important; color: #fff; }

 /** #############################################################################
 * ## FIN SECCION 1 — PALETA DE COLORES AdminLTE 3                             ##
 * ## (cerrar el comentario de bloque en la linea siguiente al habilitar)     ##
 * #############################################################################
 */