/*************************************************************
 GENESYS UI • Estilos comunes para aplicaciones WebForms AUSA
 Versión: 1.0.0
 Autor: Equipo Genesys
*************************************************************/

/* =========================================================
   1) PALETA Y UTILIDADES
   ========================================================= */
/* Neutros */
.bg-blanco {
    background-color: #fdfefe !important;
}

.bg-gris {
    background-color: #d5d8dc !important;
}

.bg-gris-osc {
    background-color: #aeb2b5 !important;
}

/* Cálidos claros */
.bg-amarillo {
    background-color: #F1F5C1 !important;
}

.bg-amarillo-osc {
    background-color: #D4D78B !important;
}

.bg-naranja {
    background-color: #f6ddcc !important;
}

.bg-naranja-osc {
    background-color: #e5b899 !important;
}

.bg-rosa {
    background-color: #f2d7d5 !important;
}

.bg-rosa-osc {
    background-color: #e6a8a3 !important;
}

/* Fríos claros */
.bg-celeste {
    background-color: #d4e6f1 !important;
}

.bg-celeste-osc {
    background-color: #9ec6e0 !important;
}

.bg-verde {
    background-color: #d4efdf !important;
}

.bg-verde-osc {
    background-color: #9ed6b9 !important;
}

.bg-lila {
    background-color: #D6BFDB !important;
}

.bg-lila-osc {
    background-color: #b588c0 !important;
}

/* Contraste / acentos */
.bg-azul {
    background-color: #6287B5 !important;
}

.bg-azul-claro {
    background-color: #9cb4d4 !important;
}

.bg-dorado {
    background-color: #FAF3DD !important;
}

.bg-durazno {
    background-color: #FFE5CC !important;
}

.bg-salmon {
    background-color: #FFD9D9 !important;
}

.bg-rosado {
    background-color: #FDE2E4 !important;
}

.bg-limon {
    background-color: #F6FDDC !important;
}

.bg-menta {
    background-color: #E4F9F5 !important;
}

.bg-agua {
    background-color: #EAF6FF !important;
}

.bg-lavanda {
    background-color: #EDE7F6 !important;
}

.bg-hueso {
    background-color: #F5F5F5 !important;
}

.bg-marfil {
    background-color: #FFFDF0 !important;
}

.opaco {
    opacity: .5;
    pointer-events: none;
}

/* Checkbox: separa el checkbox del rótulo cuando TextAlign=Left */
.chk-gap input[type="checkbox"] {
    margin-left: .5rem;
}

/* Botón Buscar (pill) */
.btn-buscar {
    background-color: #34495e;
    color: #fff;
    border-radius: 50px;
    padding: .375rem 1rem;
    border: none;
}

/* =========================================================
   2) GRIDVIEW (gv-modern) • Header “metálico” + parche clean
   ========================================================= */
/* Cap wrapper sin fondo/borde detrás del header curvo */
.gv-cap {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Eliminar marco global y bordes heredados */
.gv-modern, .gv-modern.table-bordered {
    border: 0 !important;
}

    .gv-modern > :not(caption) > * > th,
    .gv-modern > :not(caption) > * > td {
        border: 0 !important;
    }

/* Modelo de bordes para que no asome detrás del cap */
.gv-modern {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

    /* Header metálico sticky */
    .gv-modern thead, .gv-modern thead tr {
        background: transparent !important;
    }

        .gv-modern thead th {
            background: linear-gradient(180deg,#bcbcbc 0%,#8a8a8a 60%,#757575 100%) !important;
            color: #fff !important;
            border: 0 !important;
            text-align: left !important;
            vertical-align: middle;
            text-shadow: 0 1px 0 rgba(0,0,0,.35);
            font-weight: 600;
            line-height: 1.15;
            padding-top: .55rem;
            padding-bottom: .55rem;
            position: sticky;
            top: 0;
            z-index: 2;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.08);
        }

            .gv-modern thead th:first-child {
                border-top-left-radius: 12px !important;
            }

            .gv-modern thead th:last-child {
                border-top-right-radius: 12px !important;
            }

            /* Divisor sutil entre TH (no borde real) */
            .gv-modern thead th + th {
                box-shadow: inset 1px 0 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(0,0,0,.08);
            }

            /* Links del header (sorting) siempre blancos y sin subrayado */
            .gv-modern thead th a,
            .gv-modern thead th a:link,
            .gv-modern thead th a:visited,
            .gv-modern thead th a:hover,
            .gv-modern thead th a:focus,
            .gv-modern thead th * {
                color: #fff !important;
                text-decoration: none !important;
            }
        /* Encabezados de texto alineados con el contenido */
        .gv-modern thead th {
            text-align: left !important;
            vertical-align: middle;
        }

            /* Acciones y selecciones centradas */
            .gv-modern thead th.th-action,
            .gv-modern tbody td.td-action,
            .gv-modern thead th.gv-col-select,
            .gv-modern tbody td.gv-col-select {
                text-align: center !important;
            }

            /* Identificadores centrados */
            .gv-modern thead th.gv-col-id,
            .gv-modern tbody td.gv-col-id {
                text-align: center !important;
            }

            /* Valores numéricos a la derecha */
            .gv-modern thead th.gv-col-number,
            .gv-modern tbody td.gv-col-number {
                text-align: right !important;
            }

    /* Columnas de acción compactas */
    .gv-modern .th-action, .gv-modern .td-action {
        text-align: center;
        vertical-align: middle;
        width: 48px;
        padding-left: .25rem !important;
        padding-right: .25rem !important;
    }

    /* Zebra MUY suave (si la tabla tiene .table-striped) */
    .gv-modern.table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-accent-bg: #fafafa;
        color: inherit;
    }

    /* Indicador de orden opcional (agregar clases en TH) */
    .gv-modern thead th.sorted-asc::after {
        content: " ▲";
        font-size: .75rem;
    }

    .gv-modern thead th.sorted-desc::after {
        content: " ▼";
        font-size: .75rem;
    }

   /* =========================================================
   Columnas reutilizables para GridView
   ========================================================= */

    /* Columna de checkbox o selección */
    .gv-modern .gv-col-select {
        width: 110px;
        min-width: 110px;
        text-align: center;
        vertical-align: middle;
    }

    /* Anchos estándar de columnas */
    .gv-modern .gv-col-xs {
        width: 80px;
        min-width: 80px;
    }

    .gv-modern .gv-col-sm {
        width: 140px;
        min-width: 140px;
    }

    .gv-modern .gv-col-md {
        width: 240px;
        min-width: 240px;
    }

    .gv-modern .gv-col-lg {
        width: 320px;
        min-width: 320px;
    }

    /* Alineaciones */
    .gv-modern .gv-text-start {
        text-align: left;
    }

    .gv-modern .gv-text-center {
        text-align: center;
    }

    .gv-modern .gv-text-end {
        text-align: right;
    }
/* Wrapper scroll horizontal (si lo necesitás) */
.table-responsive {
    overflow-x: auto;
}

/* =========================================================
   3) TREEVIEW (prefijo TreeO)
   ========================================================= */
/* Contenido inline del nodo */
[id*="TreeO"] .n-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 8px;
}
/* Ícono */
[id*="TreeO"] .n-ico {
    font-size: 16px;
    opacity: .9;
}
/* Badge compacto */
[id*="TreeO"] .n-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
}
/* Texto */
[id*="TreeO"] .n-text {
    font-weight: 500;
}

/* Borde por nivel */
[id*="TreeO"] .n-root {
    border-left: 4px solid #6c757d;
}

[id*="TreeO"] .n-proy {
    border-left: 4px solid #2e7d32;
}

[id*="TreeO"] .n-ticket {
    border-left: 4px solid #1565c0;
}

[id*="TreeO"] .n-interv {
    border-left: 4px solid #ef6c00;
}

/* Paleta para badges por nivel */
[id*="TreeO"] .n-badge.n-root {
    background: #f1f3f5;
    color: #495057;
    border-color: #dee2e6;
}

[id*="TreeO"] .n-badge.n-proy {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7;
}

[id*="TreeO"] .n-badge.n-ticket {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #90caf9;
}

[id*="TreeO"] .n-badge.n-interv {
    background: #fff3e0;
    color: #ef6c00;
    border-color: #ffcc80;
}

/* Alineación general del renglón */
[id*="TreeO"] td, [id*="TreeO"] span, [id*="TreeO"] a {
    vertical-align: middle !important;
    line-height: 1.2 !important;
}

/* =========================================================
   4) FOTOS / AVATARS
   ========================================================= */
/* Foto redonda 36x36 para base64 o handler VGFoto.ashx */
[id*="TreeO"] img[src^="data:image"],
[id*="TreeO"] img[src*="VGFoto.ashx"],
.img-usuarios img[src^="data:image/"] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-right: 8px !important;
    box-shadow: 0 0 0 2px #fff inset !important;
}

/* Compatibilidad: img con alt vacío dentro del TreeView principal */
[id^="MainContent_TreeO"] img[alt=""] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    box-shadow: 0 0 0 2px #fff inset !important;
}

/* =========================================================
   5) BOTÓN REDONDO 36x36 (borde blanco)
   ========================================================= */
input[type="image"].ibtn-round-36 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid #fff;
    overflow: hidden;
    display: inline-block;
    padding: 0;
    margin: 0;
    line-height: 0;
}
/* Variantes de borde */
.ibtn-borde-blanco {
    border-color: #fff !important;
}

.ibtn-borde-rojo {
    border-color: #dc3545 !important;
}
/* danger */
.ibtn-borde-negro {
    border-color: #212529 !important;
}

.ibtn-borde-verde {
    border-color: #198754 !important;
}
/* success */
/* Halo opcional */
.ibtn-halo {
    box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

/* =========================================================
   6) MENÚ CONTEXTUAL Y CONTENEDORES
   ========================================================= */
.tv-host {
    position: relative;
}
/* contenedor scroll de TreeView */

#ctxMenu {
    position: absolute !important;
    display: none;
    z-index: 99999;
    min-width: 260px;
    width: max-content;
    white-space: nowrap;
}

    #ctxMenu.show {
        display: block;
    }

/* =========================================================
   7) MISC
   ========================================================= */
.node-bold {
    font-weight: 700;
}

.tv-node.selected {
    text-transform: uppercase;
}