/**
 * ADOS Gestión IT
 * ============================================================================
 * FICHERO: assets/css/ados.css
 * RESPONSABILIDAD: centralizar todos los estilos propios y reutilizables.
 *
 * ORDEN DE CARGA:
 * Este fichero debe cargarse después de tabler.min.css y después de
 * tom-select.bootstrap5.css. De ese modo, los ajustes propios de ADOS pueden
 * prevalecer sin modificar directamente los archivos de las librerías.
 *
 * NORMA DE MANTENIMIENTO:
 * - No modificar dist/css/tabler.min.css.
 * - No modificar los CSS incluidos dentro de dist/libs.
 * - Añadir aquí los ajustes globales con un comentario que indique finalidad.
 * - Los estilos exclusivos de una sola página deben llevar una clase propia
 *   que evite afectar accidentalmente al resto de la aplicación.
 */

/* ========================================================================== */
/* MARCA ADOS EN LA CABECERA                                                   */
/* ========================================================================== */

/**
 * Contenedor del enlace de marca.
 * inline-flex mantiene el símbolo ADOS y el nombre en una misma línea.
 */
.ados-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

/**
 * Conservamos color y ausencia de subrayado al pasar el cursor para que la
 * marca mantenga un aspecto estable dentro de la barra de navegación.
 */
.ados-brand:hover {
    color: inherit;
    text-decoration: none;
}

/**
 * Pastilla visual que contiene el texto ADOS.
 * Utiliza la variable de color primario de Tabler para integrarse con el tema.
 */
.ados-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.25rem;
    padding: .25rem .5rem;
    border-radius: .5rem;
    background: var(--tblr-primary);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ========================================================================== */
/* INDICADOR DE CLIENTE ACTIVO                                                 */
/* ========================================================================== */

/**
 * Alinea el indicador de cliente activo dentro de la cabecera y lo separa de
 * la marca. margin-inline-start funciona correctamente en distintas
 * direcciones de escritura.
 */
.cliente-activo-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-inline-start: 1rem;
}

/**
 * Aspecto común del indicador. Se apoya en variables de Tabler para respetar
 * el tema y evitar colores rígidos innecesarios.
 */
.cliente-activo-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    background: linear-gradient( 135deg, #dcfce7, #bbf7d0 );
    border: 1px solid #86efac;
    border-radius: 999px;
    color: #166534;
    font-size: .875rem;
    font-weight: 500;
}

.cliente-activo-badge strong {
    color: #15803d;
    font-weight: 700;
}

/**
 * Ausencia de cliente activo: no es un cliente llamado "Todos".
 * El gris indica contexto vacío, no un filtro global.
 */
.cliente-activo-badge--sin-cliente {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border: 1px solid #cbd5e1;
    color: #475569;
}

.cliente-activo-ver-todos {
    white-space: nowrap;
}

.cliente-activo-header-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.cliente-activo-select {
    max-width: 16rem;
    width: auto;
    margin: 0;
    padding: .1rem 1.35rem .1rem .45rem;
    border: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #e5e7eb);
    border-radius: var(--tblr-border-radius, 6px);
    background-color: var(--tblr-bg-forms, #fff);
    background-image: var(
        --tblr-form-select-bg-img,
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
    );
    background-repeat: no-repeat;
    background-position: right .35rem center;
    background-size: 12px 9px;
    color: var(--tblr-body-color, #1f2937);
    font: inherit;
    font-weight: 500;
    line-height: inherit;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.cliente-activo-select::-ms-expand {
    display: none;
}

.cliente-activo-select:hover {
    border-color: var(--tblr-gray-300, #d1d5db);
}

.cliente-activo-select:focus,
.cliente-activo-select:focus-visible {
    border-color: var(--tblr-primary, #066fd1);
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--tblr-primary-rgb, 6, 111, 209), .25);
}

.cliente-activo-badge--sin-cliente .cliente-activo-select {
    color: var(--tblr-secondary, #6b7280);
    font-weight: 500;
}

/* ========================================================================== */
/* INTEGRACIÓN DE TOM SELECT CON TABLER                                        */
/* ========================================================================== */

/**
 * El contenedor creado por Tom Select debe ocupar todo el ancho disponible de
 * la columna Bootstrap en la que se encuentra.
 */
.ts-wrapper {
    width: 100%;
}

/**
 * Al transformar un <select class="form-select tom-select">, Tom Select mueve
 * clases al wrapper. Eliminamos del wrapper el padding, borde y fondo propios
 * de form-select porque el control interno ya dibuja la caja visible.
 * Esto evita el efecto de doble borde o doble campo.
 */

/* comnentado porque tom-select no se ve bien con este estilo, se ve cortado y no se puede ver el texto completo
.ts-wrapper.form-select {
    padding: 0;
    border: 0;
    background: none;
}
*/

/**
 * Altura mínima coherente con los campos de formulario de Tabler.
 * No se define una altura fija para permitir que el control crezca si en el
 * futuro se utiliza selección múltiple.
 */
.ts-control {
    min-height: 40px;
}

/**
 * Elevamos el menú de opciones por encima de tarjetas, tablas, cabeceras y
 * otros componentes que puedan crear contextos de apilamiento.
 */
.ts-dropdown {
    z-index: 1080;
}

/* ========================================================================== */
/* CORRECCIÓN VISUAL TOM SELECT                                                */
/* ========================================================================== */

.ts-dropdown {
    background: #ffffff !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    border: 1px solid #dce1e7;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.ts-dropdown-content {
    background: #ffffff !important;
}

.ts-dropdown .option {
    background: #ffffff !important;
}

/* ========================================================================== */
/* ACCIONES EN TABLAS DE LISTADO                                               */
/* ========================================================================== */

/**
 * Agrupa los botones Ver / Editar / Eliminar de las filas sin que se
 * desborden. Se extrae de servicios.php para que el layout canónico no
 * dependa de CSS embebido.
 */
.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/**
 * Alinea el grupo de acciones a la derecha. Solo debe usarse en listados
 * que lo pidan de forma explícita (class="table-actions table-actions--end").
 * No se aplica a .table-actions global para no alterar servicios.php.
 */
.table-actions--end {
    justify-content: flex-end;
}

/**
 * Alineación vertical de celdas. Tabler ya aplica vertical-align: middle
 * mediante .table-vcenter, que es la clase usada en los listados. Se
 * conserva la regla para no alterar el aspecto de tablas que aún no
 * lleven table-vcenter.
 */
.table td,
.table th {
    vertical-align: middle;
}

/* ========================================================================== */
/* PANTALLA DE ACCESO (login.php)                                              */
/* ========================================================================== */

body.ados-login-page {
    background-color: #f4f6f9;
    background-image:
        radial-gradient(ellipse 70% 55% at 8% 6%, rgba(32, 107, 196, .14), transparent 58%),
        radial-gradient(ellipse 65% 50% at 96% 94%, rgba(32, 107, 196, .11), transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
    background-attachment: fixed;
}

body.ados-login-page .page {
    background: transparent;
    justify-content: safe center;
}

.ados-login {
    max-width: 68rem;
    position: relative;
    z-index: 1;
}

.ados-login-intro {
    padding-right: .5rem;
    animation: ados-login-intro-in .65s ease-out both;
}

.ados-login-brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .7rem;
}

.ados-login-title {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #1e293b;
}

.ados-login-accent {
    width: 76px;
    height: 3px;
    margin: 0 0 1rem;
    border-radius: 999px;
    background: var(--tblr-primary);
}

.ados-login-lead {
    margin-bottom: .25rem;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: #0f172a;
}

.ados-login-hero {
    margin: 0 auto .7rem 0;
    max-width: 20rem;
}

.ados-login-hero .ados-login-eco {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: inherit;
}

.ados-login-eco-label {
    font-size: 11px;
    font-weight: 600;
    fill: #334155;
}

.ados-login-eco-hub-title {
    font-size: 12.5px;
    font-weight: 700;
    fill: #0b2748;
}

.ados-login-eco-hub-sub {
    font-size: 8.5px;
    font-weight: 500;
    fill: #64748b;
}

.ados-login-eco-mark {
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: .4px;
    fill: #fff;
}

.ados-login-eco-halo,
.ados-login-eco-hub,
.ados-login-eco-card,
.ados-login-eco-lines {
    transform-box: fill-box;
    transform-origin: center;
}

.ados-login-eco-halo {
    animation: ados-login-eco-fade-in .38s ease-out both;
}

.ados-login-eco-hub {
    animation: ados-login-eco-rise-in .42s ease-out .07s both;
}

.ados-login-eco-card {
    animation: ados-login-eco-card-in .4s ease-out both;
}

.ados-login-eco-card--g1 {
    animation-delay: .16s;
}

.ados-login-eco-card--g2 {
    animation-delay: .23s;
}

.ados-login-eco-card--g3 {
    animation-delay: .3s;
}

.ados-login-eco-card--g4 {
    animation-delay: .37s;
}

.ados-login-eco-lines {
    animation: ados-login-eco-fade-in .4s ease-out .46s both;
}

.ados-login .text-secondary {
    font-size: .95rem;
    line-height: 1.65;
    color: #64748b !important;
}

.ados-login-features {
    list-style: none;
    margin: 1.15rem 0 1.1rem;
    padding: 0;
}

.ados-login-features li {
    position: relative;
    padding: .38rem 0 .38rem 1.85rem;
    font-weight: 500;
    font-size: .95rem;
    color: #334155;
}

.ados-login-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: rgba(32, 107, 196, .12);
    box-shadow: inset 0 0 0 1px rgba(32, 107, 196, .28);
}

.ados-login-features li::after {
    content: "";
    position: absolute;
    left: .28rem;
    top: .82rem;
    width: .34rem;
    height: .18rem;
    border-left: 2px solid var(--tblr-primary);
    border-bottom: 2px solid var(--tblr-primary);
    transform: rotate(-45deg);
}

.ados-login-close {
    margin-bottom: 0;
}

.ados-login-card {
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
    animation: ados-login-card-in .75s cubic-bezier(.22, 1, .36, 1) both;
    transition: box-shadow .2s ease, transform .2s ease;
}

.ados-login-card .card-body {
    padding: 1.75rem 1.65rem;
}

.ados-login-card .card-title {
    font-weight: 600;
    letter-spacing: -.01em;
    color: #1e293b;
}

.ados-login-card .form-control {
    border-radius: .55rem;
}

.ados-login-card .btn-primary {
    border-radius: .55rem;
    font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease;
}

.ados-login-card .btn-primary:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 2px;
}

.ados-login-card .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(4, 87, 184, .2);
}

@keyframes ados-login-intro-in {
    from {
        opacity: 0;
        transform: translateX(-1.15rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ados-login-eco-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes ados-login-eco-rise-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ados-login-eco-card-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ados-login-card-in {
    from {
        opacity: 0;
        transform: translateY(.9rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (hover: hover) and (pointer: fine) {
    .ados-login-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 24px 44px rgba(0, 0, 0, .1);
    }

    .ados-login-card .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(4, 87, 184, .28);
    }
}

@media (max-width: 991.98px) {
    body.ados-login-page .page {
        justify-content: flex-start;
    }

    .ados-login-intro {
        padding-right: 0;
    }

    .ados-login-hero {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575.98px) {
    .ados-login-hero {
        max-width: 18.25rem;
    }
}

/* F3-SEG-001: aviso de sesión iniciada mediante testing. No usar para autorización. */
.ados-testing-banner {
    background: #9a3412;
    color: #fff;
    text-align: center;
    padding: .55rem 1rem;
    font-size: .875rem;
    line-height: 1.4;
    letter-spacing: .01em;
}

.ados-testing-banner strong {
    display: inline-block;
    margin-right: .75rem;
    font-weight: 700;
}

.ados-testing-banner span {
    display: inline-block;
    margin: 0 .45rem;
    opacity: .95;
}

/* ========================================================================== */
/* RESPONSIVE-01 — adaptación funcional, sin rediseño de escritorio            */
/* ========================================================================== */

/**
 * Tablet y portátil estrecho (< xl): el menú pasa a hamburguesa
 * (navbar-expand-xl). La cabecera envuelve marca + usuario en la primera
 * fila y deja el selector de cliente en una segunda fila completa.
 */
@media (max-width: 1199.98px) {
    header.navbar {
        flex-wrap: wrap;
    }

    header.navbar > .container-xl {
        flex-wrap: wrap !important;
        row-gap: .5rem;
    }

    header.navbar .navbar-toggler {
        order: 1;
    }

    header.navbar .navbar-brand {
        order: 2;
        flex: 0 1 auto;
        min-width: 0;
    }

    header.navbar .navbar-nav.flex-row {
        order: 3;
        margin-left: auto;
        flex: 0 0 auto;
    }

    header.navbar .cliente-activo-header {
        order: 4;
        flex: 1 1 100%;
        margin-inline-start: 0;
        max-width: 100%;
    }

    .cliente-activo-header-form,
    .cliente-activo-badge {
        max-width: 100%;
        width: 100%;
    }

    .cliente-activo-select {
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
    }

    .ados-testing-banner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .25rem .75rem;
    }
}

/**
 * Móvil: los botones de cabecera de página bajan debajo del título.
 * Los grupos nowrap pueden partirse. Las celdas de acciones pueden envolver.
 */
@media (max-width: 767.98px) {
    .page-header .col-auto {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .page-header .col-auto.ms-auto {
        margin-left: 0 !important;
    }

    .page-header .btn-list {
        justify-content: flex-start;
    }

    .card-footer.d-flex {
        flex-wrap: wrap;
        gap: .5rem;
    }

    td.acciones {
        white-space: normal;
    }
}

@media (max-width: 991.98px) {
    .btn-list.flex-nowrap {
        flex-wrap: wrap !important;
    }
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
    .ados-login-intro,
    .ados-login-hero,
    .ados-login-eco-halo,
    .ados-login-eco-hub,
    .ados-login-eco-card,
    .ados-login-eco-lines,
    .ados-login-card,
    .ados-login-card .btn-primary {
        animation: none;
        transform: none;
        opacity: 1;
        transition: none;
    }

    .ados-login-card:hover,
    .ados-login-card .btn-primary:hover,
    .ados-login-card .btn-primary:active {
        transform: none;
    }
}