@charset "UTF-8";
/* ==========================================================================
   Estilos del sistema (un solo archivo)
   --------------------------------------------------------------------------
   Cada pagina pone su clase en <html class="page-...">. Las reglas de cada
   seccion van dentro de :where(.page-...) para que solo apliquen en esa
   pagina. :where() no suma especificidad, asi las reglas se comportan igual
   que cuando estaban en un <style> dentro de la pagina.

   Para estilos de una pagina nueva: agrega la clase en su <html> y escribe
   las reglas como  :where(.page-nueva) .mi-clase { ... }
   ========================================================================== */


/* ==========================================================================
   Login  (public/login.php)  ->  .page-login
   ========================================================================== */
        /* Aquí va todo el CSS que compartiste */
        /* RESET GENERAL */
        :where(.page-login, .page-login *) {
            box-sizing: border-box;
            font-family: "Segoe UI", Roboto, Arial, sans-serif;
        }

        :where(.page-login) body {
            margin: 0;
            min-height: 100vh;
            background: linear-gradient(135deg, #1e4fa1 0%, #1f8f6a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        :where(.page-login) .login-container {
            width: 100%;
            max-width: 380px;
            padding: 20px;
        }

        :where(.page-login) .login-card {
            background: #ffffff;
            border-radius: 6px;
            padding: 32px 28px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
            border-top: 6px solid #1f8f6a;
        }

        :where(.page-login) .login-header {
            text-align: center;
            margin-bottom: 26px;
        }

        :where(.page-login) .login-header i {
            font-size: 36px;
            color: #1e4fa1;
            margin-bottom: 8px;
        }

        :where(.page-login) .login-header h1 {
            margin: 0;
            font-size: 22px;
            font-weight: 600;
            color: #2c3e50;
        }

        :where(.page-login) .login-header p {
            margin-top: 6px;
            font-size: 13px;
            color: #6c757d;
        }

        :where(.page-login) .error-message {
            background: #fdecea;
            color: #842029;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 18px;
            text-align: center;
            font-size: 13px;
            border: 1px solid #f5c2c7;
        }

        :where(.page-login) .input-group {
            position: relative;
            margin-bottom: 16px;
        }

        :where(.page-login) .input-group i {
            position: absolute;
            top: 50%;
            left: 12px;
            transform: translateY(-50%);
            color: #6c757d;
            font-size: 14px;
        }

        :where(.page-login) .input-group input {
            width: 100%;
            padding: 10px 12px 10px 38px;
            border-radius: 4px;
            border: 1px solid #ced4da;
            font-size: 14px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        :where(.page-login) .input-group input:focus {
            outline: none;
            border-color: #1e4fa1;
            box-shadow: 0 0 0 2px rgba(30, 79, 161, 0.15);
        }

        :where(.page-login) .btn-login {
            width: 100%;
            padding: 11px;
            border: none;
            border-radius: 4px;
            background: linear-gradient(135deg, #1e4fa1, #1f8f6a);
            color: #ffffff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s ease, box-shadow 0.2s ease;
        }

        :where(.page-login) .btn-login:hover {
            opacity: 0.92;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }

        :where(.page-login) .login-footer {
            text-align: center;
            margin-top: 18px;
        }

        :where(.page-login) .login-footer a {
            font-size: 13px;
            color: #1e4fa1;
            text-decoration: none;
        }

        :where(.page-login) .login-footer a:hover {
            text-decoration: underline;
        }
    


/* ==========================================================================
   Dashboard  (public/dashboard.php)  ->  .page-dashboard
   ========================================================================== */
/* =========================================================
   VARIABLES
========================================================= */

:root:where(.page-dashboard) {

    --premium-bg: #f5f7fb;

    --premium-card: rgba(255,255,255,.92);

    --premium-border: rgba(15,23,42,.07);

    --premium-text: #172033;

    --premium-muted: #718096;

    --premium-primary: #2563eb;

    --premium-success: #0f9f6e;

    --premium-danger: #e5484d;

    --premium-warning: #d99000;

    --premium-shadow:
        0 12px 35px rgba(15,23,42,.07);

    --premium-shadow-hover:
        0 18px 45px rgba(15,23,42,.13);
}


/* =========================================================
   GENERAL
========================================================= */

html:where(.page-dashboard) {
    scroll-behavior: smooth;
}


:where(.page-dashboard) body {

    background:

        radial-gradient(
            circle at 8% 0%,
            rgba(37,99,235,.08),
            transparent 28%
        ),

        radial-gradient(
            circle at 92% 8%,
            rgba(15,159,110,.06),
            transparent 25%
        ),

        var(--premium-bg);

    color: var(--premium-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    min-height: 100vh;
}


:where(.page-dashboard) .container-fluid {

    max-width: 1800px;
}


/* =========================================================
   TITULO
========================================================= */

:where(.page-dashboard) .dashboard-title {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 800;

    letter-spacing: -.04em;

    color: #111827;

    margin-bottom: 1.35rem !important;
}


:where(.page-dashboard) .dashboard-title::before {

    content: "";

    width: 7px;

    height: 34px;

    border-radius: 99px;

    background:
        linear-gradient(
            180deg,
            #2563eb,
            #0f9f6e
        );

    box-shadow:
        0 5px 18px rgba(37,99,235,.25);
}


/* =========================================================
   ALERTAS
========================================================= */

:where(.page-dashboard) .alert-danger {

    border:
        1px solid rgba(229,72,77,.15);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,246,246,.98),
            rgba(255,239,240,.94)
        );

    color: #b4232a;

    box-shadow:
        0 10px 28px rgba(229,72,77,.08);

    padding: .9rem 1rem;
}


:where(.page-dashboard) .alert-info {

    border:
        1px solid rgba(37,99,235,.10);

    border-radius: 15px;

    background:
        rgba(239,246,255,.9);

    color: #2856a6;
}


/* =========================================================
   TARJETAS KPI
========================================================= */

:where(.page-dashboard) .card-hover {

    position: relative;

    overflow: hidden;

    border:
        1px solid var(--premium-border) !important;

    border-radius: 20px !important;

    color: var(--premium-text) !important;

    background:
        var(--premium-card) !important;

    box-shadow:
        var(--premium-shadow);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    transform: translateY(0);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


:where(.page-dashboard) .card-hover::before {

    content: "";

    position: absolute;

    width: 115px;

    height: 115px;

    right: -42px;

    top: -48px;

    border-radius: 50%;

    background:
        var(--kpi-glow,
        rgba(37,99,235,.10));
}


:where(.page-dashboard) .card-hover::after {

    content: "";

    position: absolute;

    left: 0;

    top: 18px;

    bottom: 18px;

    width: 4px;

    border-radius:
        0 8px 8px 0;

    background:
        var(--kpi-color,#2563eb);
}


:where(.page-dashboard) .card-hover:hover {

    transform:
        translateY(-5px) !important;

    box-shadow:
        var(--premium-shadow-hover) !important;

    border-color:
        rgba(37,99,235,.14) !important;
}


:where(.page-dashboard) .card-hover .card-body {

    position: relative;

    z-index: 1;

    padding:
        1.15rem 1.2rem !important;

    text-align: left !important;
}


:where(.page-dashboard) .card-hover h6 {

    color:
        var(--premium-muted) !important;

    font-size:
        .75rem !important;

    font-weight: 700;

    letter-spacing: .04em;

    text-transform: uppercase;

    margin-bottom: .45rem;
}


:where(.page-dashboard) .card-hover h2 {

    color: #111827 !important;

    font-size:
        clamp(1.65rem,4vw,2.35rem) !important;

    font-weight: 800;

    letter-spacing: -.05em;
}


/* Colores */

:where(.page-dashboard) .row-cols-2 > .col:nth-child(1)
.card-hover {

    --kpi-color: #0f9f6e;

    --kpi-glow:
        rgba(15,159,110,.11);
}


:where(.page-dashboard) .row-cols-2 > .col:nth-child(2)
.card-hover {

    --kpi-color: #e5484d;

    --kpi-glow:
        rgba(229,72,77,.11);
}


:where(.page-dashboard) .row-cols-2 > .col:nth-child(3)
.card-hover {

    --kpi-color: #d99000;

    --kpi-glow:
        rgba(217,144,0,.12);
}


:where(.page-dashboard) .row-cols-2 > .col:nth-child(4)
.card-hover {

    --kpi-color: #64748b;

    --kpi-glow:
        rgba(100,116,139,.11);
}


:where(.page-dashboard) .row-cols-2 > .col:nth-child(5)
.card-hover {

    --kpi-color: #334155;

    --kpi-glow:
        rgba(51,65,85,.10);
}


/* =========================================================
   TITULOS
========================================================= */

:where(.page-dashboard) h4.mt-4 {

    font-size: 1.05rem;

    font-weight: 800;

    letter-spacing: -.02em;

    color: #1e293b;
}


/* =========================================================
   CARRUSEL SERVICIOS CRITICOS
========================================================= */

:where(.page-dashboard) .critical-section {

    position: relative;

    width: 100%;
}


:where(.page-dashboard) .critical-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;
}


/* Contenedor */

:where(.page-dashboard) .critical-carousel-wrapper {

    position: relative;

    width: 100%;

    overflow: hidden;
}


/* Carrusel */

:where(.page-dashboard) .critical-carousel {

    display: flex;

    gap: 1rem;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;

    padding:
        4px 2px 12px;

    scroll-snap-type:
        x mandatory;

    cursor: grab;
}


:where(.page-dashboard) .critical-carousel::-webkit-scrollbar {

    display: none;
}


:where(.page-dashboard) .critical-carousel.dragging {

    cursor: grabbing;

    scroll-behavior: auto;

    scroll-snap-type: none;
}


/* =========================================================
   TARJETA
========================================================= */

:where(.page-dashboard) .critical-slide {

    flex:
        0 0 calc(
            (100% - 4rem) / 5
        );

    min-width: 0;

    scroll-snap-align: start;
}


:where(.page-dashboard) .critical-slide .card {

    width: 100%;

    min-height: 100%;

    border:
        1px solid rgba(229,72,77,.13)
        !important;

    border-radius:
        18px !important;

    overflow: hidden;

    background:
        rgba(255,255,255,.94)
        !important;

    box-shadow:
        var(--premium-shadow)
        !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


:where(.page-dashboard) .critical-slide .card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--premium-shadow-hover)
        !important;
}


/* Cabecera */

:where(.page-dashboard) .critical-slide .card-header {

    border: 0 !important;

    background:
        linear-gradient(
            135deg,
            #c9343c,
            #ef5b61
        ) !important;

    padding:
        .9rem 1rem !important;
}


:where(.page-dashboard) .critical-slide .card-header strong {

    font-size: .82rem;

    font-weight: 700;

    line-height: 1.35;
}


:where(.page-dashboard) .critical-slide .card-header small {

    display: inline-block;

    margin-top: .3rem;

    opacity: .9;
}


/* Cuerpo */

:where(.page-dashboard) .critical-slide .card-body {

    padding:
        1rem !important;
}


:where(.page-dashboard) .critical-slide .card-body p {

    line-height: 1.35;
}


:where(.page-dashboard) .critical-slide .card-body p.fw-bold {

    text-transform: uppercase;

    letter-spacing: .05em;

    font-size: .66rem !important;

    margin-top: .65rem;
}


/* Pie */

:where(.page-dashboard) .critical-slide .card-footer {

    background:
        #fbfcfe !important;

    border-top:
        1px solid #edf0f4 !important;

    padding: .8rem !important;
}


:where(.page-dashboard) .critical-slide .card-footer .btn {

    border: 0;

    border-radius: 10px;

    font-weight: 700;

    background:
        #fce8e9;

    color:
        #c9343c;

    transition:
        .2s ease;
}


:where(.page-dashboard) .critical-slide .card-footer .btn:hover {

    background:
        #c9343c;

    color: #fff;
}


/* Texto */

:where(.page-dashboard) .critical-description {

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    min-height: 2.2em;
}


:where(.page-dashboard) .critical-text {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   BOTONES
========================================================= */

:where(.page-dashboard) .critical-controls {

    display: flex;

    gap: .5rem;
}


:where(.page-dashboard) .critical-btn {

    width: 40px;

    height: 40px;

    border:
        1px solid rgba(15,23,42,.08);

    border-radius: 12px;

    background:
        rgba(255,255,255,.95);

    color: #334155;

    font-size: 1.8rem;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow:
        0 5px 15px rgba(15,23,42,.08);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        opacity .2s ease;
}


:where(.page-dashboard) .critical-btn:hover:not(:disabled) {

    transform:
        translateY(-2px);

    background: #fff;

    box-shadow:
        0 8px 20px rgba(15,23,42,.14);
}


:where(.page-dashboard) .critical-btn:active:not(:disabled) {

    transform:
        scale(.94);
}


:where(.page-dashboard) .critical-btn:disabled {

    opacity: .35;

    cursor: default;
}


/* =========================================================
   INDICADOR
========================================================= */

:where(.page-dashboard) .critical-indicator {

    font-size: .78rem;

    font-weight: 600;

    color: #718096;
}


/* =========================================================
   GRAFICOS
========================================================= */

:where(.page-dashboard) .row.mt-4 > div > .card {

    border:
        1px solid var(--premium-border)
        !important;

    border-radius:
        20px !important;

    overflow: hidden;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        var(--premium-shadow)
        !important;
}


:where(.page-dashboard) .row.mt-4 > div > .card
.card-header {

    background: transparent;

    border-bottom:
        1px solid #edf0f4;

    padding:
        1rem 1.15rem;
}


:where(.page-dashboard) .row.mt-4 > div > .card
.card-title {

    font-size: .86rem;

    font-weight: 800;

    color: #1e293b;

    margin: 0;
}


:where(.page-dashboard) .row.mt-4 > div > .card
.card-body {

    padding:
        1rem 1.15rem;
}


:where(.page-dashboard) .row.mt-4 > div > .card canvas {

    max-height: 285px;
}


/* =========================================================
   ANIMACION
========================================================= */

:where(.page-dashboard) .dashboard-title,
:where(.page-dashboard) .alert,
:where(.page-dashboard) .card-hover,
:where(.page-dashboard) .critical-slide,
:where(.page-dashboard) .row.mt-4 > div > .card {

    animation:
        premiumFadeUp .45s ease both;
}


@keyframes premiumFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(10px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {

    :where(.page-dashboard) .critical-slide {

        flex:
            0 0 calc(
                (100% - 2rem) / 3
            );
    }
}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 767.98px) {

    :where(.page-dashboard) .critical-slide {

        flex:
            0 0 calc(
                (100% - 1rem) / 2
            );
    }

}


/* =========================================================
   MOVIL
========================================================= */

@media (max-width: 575.98px) {

    :where(.page-dashboard) .container-fluid {

        padding-left:
            .85rem !important;

        padding-right:
            .85rem !important;
    }


    :where(.page-dashboard) .dashboard-title {

        font-size:
            1.35rem;
    }


    :where(.page-dashboard) .dashboard-title::before {

        height: 27px;
    }


    :where(.page-dashboard) .card-hover {

        border-radius:
            16px !important;
    }


    :where(.page-dashboard) .card-hover .card-body {

        padding:
            .9rem !important;
    }


    :where(.page-dashboard) .card-hover h2 {

        font-size:
            1.55rem !important;
    }


    :where(.page-dashboard) .critical-slide {

        flex:
            0 0 88%;
    }


    :where(.page-dashboard) .critical-carousel {

        gap: .75rem;
    }


    :where(.page-dashboard) .critical-btn {

        width: 36px;

        height: 36px;

        font-size: 1.5rem;
    }


    :where(.page-dashboard) .row.mt-4 > div > .card {

        border-radius:
            16px !important;
    }

}


/* =========================================================
   REDUCIR MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    :where(.page-dashboard, .page-dashboard *),

    :where(.page-dashboard) *::before,

    :where(.page-dashboard) *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}


/* ==========================================================================
   Clientes - listado  (public/clientes/clientes.php)  ->  .page-clientes
   ========================================================================== */
        /* =====================================================
           GENERAL
        ===================================================== */

        :where(.page-clientes) body {

            background: #f4f6f9;

            color: #212529;

        }


        :where(.page-clientes) .main-container {

            max-width: 1600px;

            margin: 0 auto;

        }


        /* =====================================================
           HEADER
        ===================================================== */

        :where(.page-clientes) .page-header {

            background: #ffffff;

            border-radius: 18px;

            padding: 24px 28px;

            margin-bottom: 22px;

            box-shadow:
                0 3px 15px rgba(0,0,0,.05);

        }


        :where(.page-clientes) .page-header h3 {

            font-weight: 700;

            margin-bottom: 4px;

        }


        :where(.page-clientes) .page-header p {

            margin: 0;

            color: #6c757d;

            font-size: .9rem;

        }


        :where(.page-clientes) .header-icon {

            width: 48px;

            height: 48px;

            border-radius: 14px;

            background: #eef4ff;

            color: #0d6efd;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 23px;

        }


        /* =====================================================
           ESTADISTICAS
        ===================================================== */

        :where(.page-clientes) .stat-card {

            background: #ffffff;

            border-radius: 16px;

            padding: 18px;

            height: 100%;

            box-shadow:
                0 3px 14px rgba(0,0,0,.04);

            display: flex;

            align-items: center;

            gap: 14px;

        }


        :where(.page-clientes) .stat-icon {

            width: 44px;

            height: 44px;

            min-width: 44px;

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 20px;

        }


        :where(.page-clientes) .stat-icon.blue {

            background: #eaf2ff;

            color: #0d6efd;

        }


        :where(.page-clientes) .stat-icon.green {

            background: #eaf8f0;

            color: #198754;

        }


        :where(.page-clientes) .stat-info small {

            display: block;

            color: #6c757d;

            font-size: .78rem;

        }


        :where(.page-clientes) .stat-info strong {

            display: block;

            font-size: 1.3rem;

            line-height: 1.2;

        }


        /* =====================================================
           CARD PRINCIPAL
        ===================================================== */

        :where(.page-clientes) .clients-card {

            background: #ffffff;

            border-radius: 18px;

            box-shadow:
                0 3px 15px rgba(0,0,0,.05);

            overflow: hidden;

        }


        :where(.page-clientes) .clients-card-header {

            padding: 20px 22px;

            border-bottom:
                1px solid #edf0f2;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 15px;

            flex-wrap: wrap;

        }


        :where(.page-clientes) .clients-card-title {

            display: flex;

            align-items: center;

            gap: 10px;

        }


        :where(.page-clientes) .clients-card-title-icon {

            width: 38px;

            height: 38px;

            border-radius: 10px;

            background: #eef4ff;

            color: #0d6efd;

            display: flex;

            align-items: center;

            justify-content: center;

        }


        :where(.page-clientes) .clients-card-title h5 {

            margin: 0;

            font-weight: 700;

        }


        :where(.page-clientes) .clients-card-title small {

            color: #6c757d;

        }


        :where(.page-clientes) .clients-card-body {

            padding: 20px;

        }


        /* =====================================================
           DATATABLE
        ===================================================== */

        :where(.page-clientes) #tablaClientes {

            width: 100% !important;

            border-collapse: separate;

            border-spacing: 0 8px;

        }


        :where(.page-clientes) #tablaClientes thead th {

            border: 0;

            background: #f8f9fa;

            color: #6c757d;

            font-size: .76rem;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: .03em;

            padding: 13px 12px;

            white-space: nowrap;

        }


        :where(.page-clientes) #tablaClientes tbody tr {

            background: #ffffff;

        }


        :where(.page-clientes) #tablaClientes tbody td {

            border-top:
                1px solid #edf0f2;

            border-bottom:
                1px solid #edf0f2;

            padding: 14px 12px;

            vertical-align: middle;

        }


        :where(.page-clientes) #tablaClientes tbody td:first-child {

            border-left:
                1px solid #edf0f2;

            border-radius: 12px 0 0 12px;

        }


        :where(.page-clientes) #tablaClientes tbody td:last-child {

            border-right:
                1px solid #edf0f2;

            border-radius: 0 12px 12px 0;

        }


        :where(.page-clientes) #tablaClientes tbody tr:hover td {

            background: #f8fbff;

            border-color: #dceaff;

        }


        /* =====================================================
           CLIENTE
        ===================================================== */

        :where(.page-clientes) .client-main {

            display: flex;

            align-items: center;

            gap: 11px;

            min-width: 220px;

        }


        :where(.page-clientes) .client-avatar {

            width: 42px;

            height: 42px;

            min-width: 42px;

            border-radius: 11px;

            background: #eef4ff;

            color: #0d6efd;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 18px;

        }


        :where(.page-clientes) .client-name {

            font-weight: 700;

            color: #212529;

            max-width: 300px;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

        }


        :where(.page-clientes) .client-id {

            font-size: .72rem;

            color: #8a939c;

        }


        /* =====================================================
           CONTACTO
        ===================================================== */

        :where(.page-clientes) .contact-info {

            display: flex;

            flex-direction: column;

            gap: 3px;

        }


        :where(.page-clientes) .contact-name {

            font-weight: 600;

        }


        :where(.page-clientes) .contact-detail {

            font-size: .78rem;

            color: #6c757d;

        }


        /* =====================================================
           SERVICIOS
        ===================================================== */

        :where(.page-clientes) .services-badge {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            padding: 7px 11px;

            border-radius: 10px;

            background: #eaf8f0;

            color: #198754;

            font-weight: 700;

            font-size: .82rem;

        }


        :where(.page-clientes) .services-badge.empty {

            background: #f1f3f5;

            color: #6c757d;

        }


        /* =====================================================
           BOTONES
        ===================================================== */

        :where(.page-clientes) .action-buttons {

            display: flex;

            gap: 6px;

            flex-wrap: nowrap;

        }


        :where(.page-clientes) .btn-action {

            width: 36px;

            height: 36px;

            padding: 0;

            border-radius: 9px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

        }


        :where(.page-clientes) .btn-view {

            background: #eef4ff;

            color: #0d6efd;

            border: 1px solid #d7e6ff;

        }


        :where(.page-clientes) .btn-view:hover {

            background: #0d6efd;

            color: #ffffff;

        }


        :where(.page-clientes) .btn-edit {

            background: #fff5df;

            color: #c98500;

            border: 1px solid #ffe3a5;

        }


        :where(.page-clientes) .btn-edit:hover {

            background: #ffc107;

            color: #212529;

        }


        /* =====================================================
           DATATABLE CONTROLES
        ===================================================== */

        :where(.page-clientes) .dataTables_wrapper
        .dataTables_length select {

            border-radius: 9px;

            border:
                1px solid #dfe3e8;

            padding: 5px 28px 5px 10px;

        }


        :where(.page-clientes) .dataTables_wrapper
        .dataTables_filter input {

            border-radius: 10px;

            border:
                1px solid #dfe3e8;

            min-height: 40px;

            padding: 8px 12px;

            margin-left: 7px;

        }


        :where(.page-clientes) .dataTables_wrapper
        .dataTables_filter input:focus {

            border-color: #86b7fe;

            outline: none;

            box-shadow:
                0 0 0 .2rem rgba(13,110,253,.10);

        }


        :where(.page-clientes) .dataTables_wrapper
        .dataTables_paginate
        .paginate_button {

            border-radius: 8px !important;

        }


        /* =====================================================
           MODAL EDITAR
        ===================================================== */

        :where(.page-clientes) #modalEditar .modal-content {

            border: 0;

            border-radius: 18px;

            overflow: hidden;

            box-shadow:
                0 20px 60px rgba(0,0,0,.18);

        }


        :where(.page-clientes) #modalEditar .modal-header {

            padding: 20px 22px;

            border-bottom:
                1px solid #edf0f2;

            background: #ffffff;

        }


        :where(.page-clientes) .edit-header {

            display: flex;

            align-items: center;

            gap: 12px;

        }


        :where(.page-clientes) .edit-header-icon {

            width: 44px;

            height: 44px;

            border-radius: 12px;

            background: #fff5df;

            color: #c98500;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 20px;

        }


        :where(.page-clientes) .edit-header h5 {

            margin: 0;

            font-weight: 700;

        }


        :where(.page-clientes) .edit-header small {

            display: block;

            color: #6c757d;

            margin-top: 2px;

        }


        :where(.page-clientes) #modalEditar .modal-body {

            padding: 24px;

            background: #fafbfc;

        }


        :where(.page-clientes) #modalEditar .modal-footer {

            padding: 16px 22px;

            border-top:
                1px solid #edf0f2;

            background: #ffffff;

        }


        :where(.page-clientes) .edit-section {

            background: #ffffff;

            border:
                1px solid #edf0f2;

            border-radius: 14px;

            padding: 18px;

            margin-bottom: 15px;

        }


        :where(.page-clientes) .edit-section-title {

            display: flex;

            align-items: center;

            gap: 8px;

            font-weight: 700;

            margin-bottom: 16px;

        }


        :where(.page-clientes) .edit-section-title i {

            color: #0d6efd;

        }


        :where(.page-clientes) #modalEditar .form-label {

            font-weight: 600;

            font-size: .86rem;

        }


        :where(.page-clientes) #modalEditar .form-control {

            min-height: 44px;

            border-radius: 10px;

            border:
                1px solid #dfe3e8;

        }


        :where(.page-clientes) #modalEditar .form-control:focus {

            border-color: #86b7fe;

            box-shadow:
                0 0 0 .2rem rgba(13,110,253,.10);

        }


        /* =====================================================
           ESTADO VACIO
        ===================================================== */

        :where(.page-clientes) .empty-icon {

            font-size: 3rem;

            color: #adb5bd;

        }


        /* =====================================================
           RESPONSIVE
        ===================================================== */

        @media (max-width: 768px) {

            :where(.page-clientes) .page-header {

                padding: 20px;

            }


            :where(.page-clientes) .page-header
            .btn {

                width: 100%;

            }


            :where(.page-clientes) .header-buttons {

                width: 100%;

            }


            :where(.page-clientes) .header-buttons
            .btn {

                flex: 1;

            }


            :where(.page-clientes) .clients-card-header {

                align-items: flex-start;

            }


            :where(.page-clientes) .clients-card-body {

                padding: 12px;

            }


            :where(.page-clientes) .dataTables_wrapper
            .dataTables_length,
            :where(.page-clientes) .dataTables_wrapper
            .dataTables_filter {

                width: 100%;

                text-align: left !important;

                margin-bottom: 10px;

            }


            :where(.page-clientes) .dataTables_wrapper
            .dataTables_filter input {

                width: calc(100% - 65px);

            }


            :where(.page-clientes) .client-name {

                max-width: 200px;

            }


        }


        @media (max-width: 575px) {

            :where(.page-clientes) .client-main {

                min-width: 180px;

            }


            :where(.page-clientes) #tablaClientes {

                font-size: .84rem;

            }


            :where(.page-clientes) #modalEditar .modal-body {

                padding: 15px;

            }


            :where(.page-clientes) #modalEditar .edit-section {

                padding: 14px;

            }

        }

    


/* ==========================================================================
   Clientes - detalle  (public/clientes/detalle.php)  ->  .page-cliente-detalle
   ========================================================================== */
        /* =====================================================
           GENERAL
        ====================================================== */

        :where(.page-cliente-detalle) body {

            background: #f4f6f9;

            color: #212529;

        }


        :where(.page-cliente-detalle) .main-container {

            max-width: 1600px;

            margin: 0 auto;

        }


        /* =====================================================
           HEADER CLIENTE
        ====================================================== */

        :where(.page-cliente-detalle) .client-header {

            background: #ffffff;

            border-radius: 18px;

            padding: 25px;

            box-shadow:
                0 3px 15px rgba(0,0,0,.05);

            margin-bottom: 20px;

        }


        :where(.page-cliente-detalle) .client-header-main {

            display: flex;

            align-items: flex-start;

            gap: 16px;

        }


        :where(.page-cliente-detalle) .client-big-avatar {

            width: 62px;

            height: 62px;

            min-width: 62px;

            border-radius: 16px;

            background: #eef4ff;

            color: #0d6efd;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 28px;

        }


        :where(.page-cliente-detalle) .client-header h2 {

            font-size: 1.5rem;

            font-weight: 700;

            margin: 0 0 5px;

        }


        :where(.page-cliente-detalle) .client-id {

            color: #8a939c;

            font-size: .78rem;

        }


        :where(.page-cliente-detalle) .client-contact-grid {

            display: grid;

            grid-template-columns:
                repeat(5, minmax(0, 1fr));

            gap: 10px;

            margin-top: 22px;

            padding-top: 20px;

            border-top:
                1px solid #edf0f2;

        }


        :where(.page-cliente-detalle) .contact-item {

            display: flex;

            align-items: flex-start;

            gap: 9px;

            min-width: 0;

        }


        :where(.page-cliente-detalle) .contact-icon {

            width: 34px;

            height: 34px;

            min-width: 34px;

            border-radius: 9px;

            background: #f4f6f9;

            color: #0d6efd;

            display: flex;

            align-items: center;

            justify-content: center;

        }


        :where(.page-cliente-detalle) .contact-item small {

            display: block;

            color: #8a939c;

            font-size: .72rem;

            margin-bottom: 2px;

        }


        :where(.page-cliente-detalle) .contact-item strong {

            display: block;

            font-size: .82rem;

            word-break: break-word;

        }


        /* =====================================================
           BOTONES HEADER
        ====================================================== */

        :where(.page-cliente-detalle) .header-actions {

            display: flex;

            gap: 8px;

            flex-wrap: wrap;

        }


        :where(.page-cliente-detalle) .header-actions .btn {

            border-radius: 10px;

        }


        /* =====================================================
           ESTADISTICAS
        ====================================================== */

        :where(.page-cliente-detalle) .summary-card {

            background: #ffffff;

            border-radius: 16px;

            padding: 18px;

            box-shadow:
                0 3px 14px rgba(0,0,0,.04);

            display: flex;

            align-items: center;

            gap: 13px;

            height: 100%;

        }


        :where(.page-cliente-detalle) .summary-icon {

            width: 46px;

            height: 46px;

            min-width: 46px;

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 21px;

        }


        :where(.page-cliente-detalle) .summary-icon.blue {

            background: #eaf2ff;

            color: #0d6efd;

        }


        :where(.page-cliente-detalle) .summary-icon.green {

            background: #eaf8f0;

            color: #198754;

        }


        :where(.page-cliente-detalle) .summary-icon.warning {

            background: #fff5df;

            color: #c98500;

        }


        :where(.page-cliente-detalle) .summary-icon.danger {

            background: #ffecec;

            color: #dc3545;

        }


        :where(.page-cliente-detalle) .summary-content small {

            display: block;

            color: #6c757d;

            font-size: .76rem;

        }


        :where(.page-cliente-detalle) .summary-content strong {

            display: block;

            font-size: 1.35rem;

            line-height: 1.2;

        }


        /* =====================================================
           SECTION CARD
        ====================================================== */

        :where(.page-cliente-detalle) .section-card {

            background: #ffffff;

            border-radius: 18px;

            box-shadow:
                0 3px 15px rgba(0,0,0,.05);

            overflow: hidden;

            margin-bottom: 22px;

        }


        :where(.page-cliente-detalle) .section-header {

            padding: 18px 21px;

            border-bottom:
                1px solid #edf0f2;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 15px;

            flex-wrap: wrap;

        }


        :where(.page-cliente-detalle) .section-title {

            display: flex;

            align-items: center;

            gap: 10px;

        }


        :where(.page-cliente-detalle) .section-title-icon {

            width: 39px;

            height: 39px;

            border-radius: 10px;

            background: #eef4ff;

            color: #0d6efd;

            display: flex;

            align-items: center;

            justify-content: center;

        }


        :where(.page-cliente-detalle) .section-title h5 {

            margin: 0;

            font-weight: 700;

        }


        :where(.page-cliente-detalle) .section-title small {

            display: block;

            color: #6c757d;

            font-size: .78rem;

            margin-top: 2px;

        }


        :where(.page-cliente-detalle) .section-body {

            padding: 20px;

        }


        /* =====================================================
           TABLES
        ====================================================== */

        :where(.page-cliente-detalle) .table-responsive-wrapper {

            width: 100%;

            overflow-x: auto;

            -webkit-overflow-scrolling: touch;

        }


        :where(.page-cliente-detalle) #tablaEquipos,
        :where(.page-cliente-detalle) #tablaServicios {

            width: 100% !important;

            border-collapse: separate;

            border-spacing: 0 8px;

        }


        :where(.page-cliente-detalle) #tablaEquipos thead th,
        :where(.page-cliente-detalle) #tablaServicios thead th {

            background: #f8f9fa;

            border: 0;

            color: #6c757d;

            font-size: .73rem;

            text-transform: uppercase;

            letter-spacing: .03em;

            font-weight: 700;

            padding: 12px;

            white-space: nowrap;

        }


        :where(.page-cliente-detalle) #tablaEquipos tbody td,
        :where(.page-cliente-detalle) #tablaServicios tbody td {

            padding: 13px 12px;

            border-top:
                1px solid #edf0f2;

            border-bottom:
                1px solid #edf0f2;

            vertical-align: middle;

        }


        :where(.page-cliente-detalle) #tablaEquipos tbody td:first-child,
        :where(.page-cliente-detalle) #tablaServicios tbody td:first-child {

            border-left:
                1px solid #edf0f2;

            border-radius: 11px 0 0 11px;

        }


        :where(.page-cliente-detalle) #tablaEquipos tbody td:last-child,
        :where(.page-cliente-detalle) #tablaServicios tbody td:last-child {

            border-right:
                1px solid #edf0f2;

            border-radius: 0 11px 11px 0;

        }


        :where(.page-cliente-detalle) #tablaEquipos tbody tr:hover td,
        :where(.page-cliente-detalle) #tablaServicios tbody tr:hover td {

            background: #f8fbff;

            border-color: #dceaff;

        }


        /* =====================================================
           EQUIPO
        ====================================================== */

        :where(.page-cliente-detalle) .equipment-info {

            display: flex;

            align-items: center;

            gap: 10px;

            min-width: 190px;

        }


        :where(.page-cliente-detalle) .equipment-icon {

            width: 39px;

            height: 39px;

            min-width: 39px;

            border-radius: 10px;

            background: #eef4ff;

            color: #0d6efd;

            display: flex;

            align-items: center;

            justify-content: center;

        }


        :where(.page-cliente-detalle) .equipment-name {

            font-weight: 700;

        }


        :where(.page-cliente-detalle) .equipment-reference {

            font-size: .72rem;

            color: #8a939c;

        }


        :where(.page-cliente-detalle) .serial-value {

            font-family:
                "Consolas",
                monospace;

            font-size: .78rem;

            background: #f5f6f7;

            padding: 5px 8px;

            border-radius: 6px;

        }


        /* =====================================================
           BADGES PLATAFORMA
        ====================================================== */

        :where(.page-cliente-detalle) .platform-badge {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            padding: 6px 10px;

            border-radius: 8px;

            font-size: .76rem;

            font-weight: 700;

            white-space: nowrap;

        }


        :where(.page-cliente-detalle) .platform-eicom {

            background: #eaf2ff;

            color: #0d6efd;

        }


        :where(.page-cliente-detalle) .platform-hytera {

            background: #ffecec;

            color: #dc3545;

        }


        :where(.page-cliente-detalle) .platform-walkie {

            background: #eaf8f0;

            color: #198754;

        }


        :where(.page-cliente-detalle) .platform-wave {

            background: #fff5df;

            color: #9a6800;

        }


        :where(.page-cliente-detalle) .platform-default {

            background: #f1f3f5;

            color: #6c757d;

        }


        /* =====================================================
           ESTADOS
        ====================================================== */

        :where(.page-cliente-detalle) .status-badge {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            padding: 7px 10px;

            border-radius: 8px;

            font-size: .75rem;

            font-weight: 700;

            white-space: nowrap;

        }


        :where(.page-cliente-detalle) .status-success {

            background: #eaf8f0;

            color: #198754;

        }


        :where(.page-cliente-detalle) .status-warning {

            background: #fff5df;

            color: #9a6800;

        }


        :where(.page-cliente-detalle) .status-danger {

            background: #ffecec;

            color: #dc3545;

        }


        /* =====================================================
           RENOVACION
        ====================================================== */

        :where(.page-cliente-detalle) .renew-button {

            border-radius: 10px;

            font-weight: 600;

        }


        :where(.page-cliente-detalle) .selection-info {

            background: #eef4ff;

            color: #0d6efd;

            border: 0;

            border-radius: 10px;

            padding: 10px 13px;

            font-size: .82rem;

        }


        /* =====================================================
           MODAL
        ====================================================== */

        :where(.page-cliente-detalle) #modalRenovarMultiple .modal-content,
        :where(.page-cliente-detalle) #modalEditarEquipo .modal-content {

            border: 0;

            border-radius: 18px;

            overflow: hidden;

            box-shadow:
                0 20px 60px rgba(0,0,0,.18);

        }


        :where(.page-cliente-detalle) #modalRenovarMultiple .modal-header,
        :where(.page-cliente-detalle) #modalEditarEquipo .modal-header {

            padding: 20px 22px;

            border-bottom:
                1px solid #edf0f2;

        }


        :where(.page-cliente-detalle) .modal-title-wrapper {

            display: flex;

            align-items: center;

            gap: 12px;

        }


        :where(.page-cliente-detalle) .modal-title-icon {

            width: 43px;

            height: 43px;

            border-radius: 11px;

            background: #eaf8f0;

            color: #198754;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 20px;

        }


        :where(.page-cliente-detalle) .modal-title-wrapper h5 {

            margin: 0;

            font-weight: 700;

        }


        :where(.page-cliente-detalle) .modal-title-wrapper small {

            display: block;

            color: #6c757d;

            font-size: .76rem;

            margin-top: 2px;

        }


        :where(.page-cliente-detalle) #modalRenovarMultiple .modal-body,
        :where(.page-cliente-detalle) #modalEditarEquipo .modal-body {

            background: #fafbfc;

            padding: 22px;

        }


        :where(.page-cliente-detalle) .renew-section {

            background: #ffffff;

            border:
                1px solid #edf0f2;

            border-radius: 14px;

            padding: 18px;

        }


        :where(.page-cliente-detalle) .renew-section .form-label {

            font-size: .84rem;

            font-weight: 600;

        }


        :where(.page-cliente-detalle) .renew-section .form-control {

            min-height: 44px;

            border-radius: 10px;

        }


        :where(.page-cliente-detalle) #modalRenovarMultiple .modal-footer,
        :where(.page-cliente-detalle) #modalEditarEquipo .modal-footer {

            border-top:
                1px solid #edf0f2;

            padding: 16px 22px;

        }


        /* =====================================================
           DATATABLES
        ====================================================== */

        :where(.page-cliente-detalle) .dataTables_wrapper
        .dataTables_length select {

            border-radius: 9px;

            border:
                1px solid #dfe3e8;

            padding: 5px 25px 5px 9px;

        }


        :where(.page-cliente-detalle) .dataTables_wrapper
        .dataTables_filter input {

            border-radius: 10px;

            border:
                1px solid #dfe3e8;

            min-height: 40px;

            padding: 7px 11px;

        }


        :where(.page-cliente-detalle) .dataTables_wrapper
        .dataTables_filter input:focus {

            outline: none;

            border-color: #86b7fe;

            box-shadow:
                0 0 0 .2rem rgba(13,110,253,.10);

        }


        /* =====================================================
           RESPONSIVE
        ====================================================== */

        @media (max-width: 1100px) {

            :where(.page-cliente-detalle) .client-contact-grid {

                grid-template-columns:
                    repeat(3, minmax(0, 1fr));

            }

        }


        @media (max-width: 768px) {

            :where(.page-cliente-detalle) .client-header {

                padding: 20px;

            }


            :where(.page-cliente-detalle) .client-header-main {

                flex-direction: column;

            }


            :where(.page-cliente-detalle) .client-big-avatar {

                width: 52px;

                height: 52px;

                min-width: 52px;

                font-size: 23px;

            }


            :where(.page-cliente-detalle) .client-header h2 {

                font-size: 1.25rem;

            }


            :where(.page-cliente-detalle) .client-contact-grid {

                grid-template-columns:
                    repeat(2, minmax(0, 1fr));

            }


            :where(.page-cliente-detalle) .header-actions {

                width: 100%;

            }


            :where(.page-cliente-detalle) .header-actions .btn {

                flex: 1;

            }


            :where(.page-cliente-detalle) .section-body {

                padding: 12px;

            }


            :where(.page-cliente-detalle) .section-header {

                padding: 16px;

            }

        }


        @media (max-width: 575px) {

            :where(.page-cliente-detalle) .client-contact-grid {

                grid-template-columns: 1fr;

            }


            :where(.page-cliente-detalle) .summary-card {

                padding: 14px;

            }


            :where(.page-cliente-detalle) .summary-icon {

                width: 40px;

                height: 40px;

                min-width: 40px;

            }


            :where(.page-cliente-detalle) .summary-content strong {

                font-size: 1.15rem;

            }


            :where(.page-cliente-detalle) .dataTables_wrapper
            .dataTables_length,
            :where(.page-cliente-detalle) .dataTables_wrapper
            .dataTables_filter {

                width: 100%;

                text-align: left !important;

                margin-bottom: 10px;

            }


            :where(.page-cliente-detalle) .dataTables_wrapper
            .dataTables_filter input {

                width: calc(100% - 60px);

            }

        }


    


/* ==========================================================================
   Servicios - crear  (public/servicios/crear.php)  ->  .page-servicio-crear
   ========================================================================== */
        /* =====================================================
           GENERAL
        ===================================================== */

        :where(.page-servicio-crear) body {
            background: #f4f6f9;
            color: #212529;
        }


        /* =====================================================
           HEADER
        ===================================================== */

        :where(.page-servicio-crear) .page-header {

            background: #ffffff;

            border-radius: 16px;

            padding: 24px 28px;

            margin-bottom: 24px;

            box-shadow:
                0 2px 10px rgba(0,0,0,0.04);

        }


        :where(.page-servicio-crear) .page-header h3 {

            font-weight: 700;

            margin-bottom: 4px;

        }


        :where(.page-servicio-crear) .page-header p {

            margin: 0;

            color: #6c757d;

        }


        /* =====================================================
           CARDS
        ===================================================== */

        :where(.page-servicio-crear) .service-card {

            background: #ffffff;

            border: 0;

            border-radius: 16px;

            margin-bottom: 20px;

            box-shadow:
                0 3px 14px rgba(0,0,0,0.05);

            overflow: hidden;

        }


        :where(.page-servicio-crear) .service-card-header {

            padding: 18px 22px;

            border-bottom:
                1px solid #edf0f2;

            display: flex;

            align-items: center;

            gap: 12px;

        }


        :where(.page-servicio-crear) .service-card-header .icon {

            width: 42px;

            height: 42px;

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: #eef4ff;

            color: #0d6efd;

            font-size: 20px;

        }


        :where(.page-servicio-crear) .service-card-header h5 {

            margin: 0;

            font-weight: 700;

        }


        :where(.page-servicio-crear) .service-card-header small {

            color: #6c757d;

        }


        :where(.page-servicio-crear) .service-card-body {

            padding: 24px;

        }


        /* =====================================================
           FORMULARIOS
        ===================================================== */

        :where(.page-servicio-crear) .form-label {

            font-weight: 600;

            font-size: .9rem;

            margin-bottom: 7px;

        }


        :where(.page-servicio-crear) .form-control {

            min-height: 45px;

            border-radius: 10px;

            border:
                1px solid #dfe3e8;

        }


        :where(.page-servicio-crear) .form-control:focus {

            border-color: #86b7fe;

            box-shadow:
                0 0 0 .2rem rgba(13,110,253,.10);

        }


        :where(.page-servicio-crear) textarea.form-control {

            min-height: 100px;

            resize: vertical;

        }


        /* =====================================================
           TABS CLIENTE
        ===================================================== */

        :where(.page-servicio-crear) .client-tabs {

            display: flex;

            gap: 10px;

            margin-bottom: 22px;

        }


        :where(.page-servicio-crear) .client-tab {

            flex: 1;

            border:
                1px solid #dee2e6;

            background: #fff;

            border-radius: 12px;

            padding: 15px;

            text-align: left;

            transition: all .2s ease;

            cursor: pointer;

        }


        :where(.page-servicio-crear) .client-tab:hover {

            border-color: #86b7fe;

            background: #f8fbff;

        }


        :where(.page-servicio-crear) .client-tab.active {

            border-color: #0d6efd;

            background: #eef5ff;

        }


        :where(.page-servicio-crear) .client-tab-icon {

            font-size: 22px;

            color: #0d6efd;

            margin-bottom: 5px;

        }


        :where(.page-servicio-crear) .client-tab-title {

            font-weight: 700;

            display: block;

        }


        :where(.page-servicio-crear) .client-tab-description {

            color: #6c757d;

            font-size: .82rem;

        }


        /* =====================================================
           SELECTOR FLOTANTE
        ===================================================== */

        :where(.page-servicio-crear) .floating-selector {

            width: 100%;

            min-height: 48px;

            background: #ffffff;

            border:
                1px solid #dfe3e8;

            border-radius: 11px;

            padding: 9px 14px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            cursor: pointer;

            transition: all .2s ease;

        }


        :where(.page-servicio-crear) .floating-selector:hover {

            border-color: #86b7fe;

            background: #f8fbff;

        }


        :where(.page-servicio-crear) .floating-selector-content {

            display: flex;

            align-items: center;

            gap: 10px;

            min-width: 0;

        }


        :where(.page-servicio-crear) .floating-selector-icon {

            width: 32px;

            height: 32px;

            min-width: 32px;

            border-radius: 9px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: #eef4ff;

            color: #0d6efd;

        }


        :where(.page-servicio-crear) .floating-selector-text {

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            color: #6c757d;

        }


        :where(.page-servicio-crear) .floating-selector.has-value
        .floating-selector-text {

            color: #212529;

            font-weight: 600;

        }


        :where(.page-servicio-crear) .floating-selector-arrow {

            color: #6c757d;

            margin-left: 10px;

        }


        /* =====================================================
           MODAL SELECTOR
        ===================================================== */

        :where(.page-servicio-crear) .selector-modal .modal-content {

            border: 0;

            border-radius: 18px;

            overflow: hidden;

            box-shadow:
                0 20px 60px rgba(0,0,0,.18);

        }


        :where(.page-servicio-crear) .selector-modal .modal-header {

            padding: 20px 22px;

            border-bottom:
                1px solid #edf0f2;

        }


        :where(.page-servicio-crear) .selector-modal .modal-title {

            font-weight: 700;

        }


        :where(.page-servicio-crear) .selector-modal .modal-body {

            padding: 0;

        }


        :where(.page-servicio-crear) .selector-search {

            padding: 16px;

            border-bottom:
                1px solid #edf0f2;

            background: #fafbfc;

        }


        :where(.page-servicio-crear) .selector-search-wrapper {

            position: relative;

        }


        :where(.page-servicio-crear) .selector-search-wrapper > i {

            position: absolute;

            left: 15px;

            top: 50%;

            transform: translateY(-50%);

            color: #6c757d;

            font-size: 18px;

        }


        :where(.page-servicio-crear) .selector-search input {

            padding-left: 44px;

            min-height: 48px;

            border-radius: 11px;

        }


        :where(.page-servicio-crear) .selector-list {

            max-height: 420px;

            overflow-y: auto;

            padding: 10px;

        }


        /* =====================================================
           ITEMS CLIENTES
        ===================================================== */

        :where(.page-servicio-crear) .selector-item {

            display: flex;

            align-items: center;

            gap: 12px;

            padding: 13px;

            margin-bottom: 7px;

            border:
                1px solid transparent;

            border-radius: 12px;

            background: #ffffff;

            cursor: pointer;

            transition: all .15s ease;

        }


        :where(.page-servicio-crear) .selector-item:hover {

            background: #f8fbff;

            border-color: #b8d4ff;

            transform: translateY(-1px);

        }


        :where(.page-servicio-crear) .selector-item.selected {

            background: #eef5ff;

            border-color: #0d6efd;

        }


        :where(.page-servicio-crear) .selector-avatar {

            width: 42px;

            height: 42px;

            min-width: 42px;

            border-radius: 11px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: #e9f2ff;

            color: #0d6efd;

            font-size: 18px;

        }


        :where(.page-servicio-crear) .selector-item.selected
        .selector-avatar {

            background: #0d6efd;

            color: #ffffff;

        }


        :where(.page-servicio-crear) .selector-info {

            flex: 1;

            min-width: 0;

        }


        :where(.page-servicio-crear) .selector-name {

            font-weight: 600;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }


        :where(.page-servicio-crear) .selector-description {

            color: #6c757d;

            font-size: .78rem;

        }


        :where(.page-servicio-crear) .selector-check {

            width: 30px;

            height: 30px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            color: transparent;

        }


        :where(.page-servicio-crear) .selector-item.selected
        .selector-check {

            background: #198754;

            color: #ffffff;

        }


        /* =====================================================
           ITEMS REFERENCIA / PLATAFORMA
        ===================================================== */

        :where(.page-servicio-crear) .option-grid {

            display: grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap: 10px;

        }


        :where(.page-servicio-crear) .option-card {

            border:
                1px solid #e1e5e9;

            border-radius: 12px;

            padding: 15px;

            background: #ffffff;

            cursor: pointer;

            transition: all .15s ease;

            display: flex;

            align-items: center;

            gap: 12px;

        }


        :where(.page-servicio-crear) .option-card:hover {

            border-color: #86b7fe;

            background: #f8fbff;

            transform: translateY(-1px);

        }


        :where(.page-servicio-crear) .option-card.selected {

            border-color: #0d6efd;

            background: #eef5ff;

        }


        :where(.page-servicio-crear) .option-icon {

            width: 38px;

            height: 38px;

            border-radius: 10px;

            background: #eef4ff;

            color: #0d6efd;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 18px;

        }


        :where(.page-servicio-crear) .option-card.selected
        .option-icon {

            background: #0d6efd;

            color: #ffffff;

        }


        :where(.page-servicio-crear) .option-name {

            font-weight: 600;

            font-size: .9rem;

        }


        :where(.page-servicio-crear) .option-check {

            margin-left: auto;

            color: transparent;

        }


        :where(.page-servicio-crear) .option-card.selected
        .option-check {

            color: #198754;

        }


        /* =====================================================
           CLIENTE SELECCIONADO
        ===================================================== */

        :where(.page-servicio-crear) .selected-client {

            display: none;

            margin-top: 15px;

            padding: 14px 16px;

            border-radius: 12px;

            background: #eef8f2;

            border:
                1px solid #cce8d6;

        }


        :where(.page-servicio-crear) .selected-client.show {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 15px;

        }


        :where(.page-servicio-crear) .selected-client-info {

            display: flex;

            align-items: center;

            gap: 10px;

            min-width: 0;

        }


        :where(.page-servicio-crear) .selected-client-info > i {

            color: #198754;

            font-size: 20px;

        }


        :where(.page-servicio-crear) .selected-client-name {

            font-weight: 700;

            color: #146c43;

        }


        :where(.page-servicio-crear) .selected-client-label {

            display: block;

            font-size: .75rem;

            color: #6c757d;

        }


        :where(.page-servicio-crear) .btn-clear-client {

            border: 0;

            background: transparent;

            color: #dc3545;

            font-size: .82rem;

            white-space: nowrap;

        }


        /* =====================================================
           FECHA
        ===================================================== */

        :where(.page-servicio-crear) .date-result {

            background: #f1f8ff;

            border:
                1px solid #cfe2ff;

            border-radius: 10px;

            padding: 11px 14px;

        }


        :where(.page-servicio-crear) .date-result small {

            display: block;

            color: #6c757d;

            font-size: .75rem;

            margin-bottom: 3px;

        }


        :where(.page-servicio-crear) .date-result strong {

            color: #0d6efd;

        }


        /* =====================================================
           RESUMEN
        ===================================================== */

        :where(.page-servicio-crear) .summary-box {

            background: #f8f9fa;

            border-radius: 12px;

            padding: 18px;

            margin-top: 20px;

        }


        :where(.page-servicio-crear) .summary-title {

            font-weight: 700;

            margin-bottom: 15px;

        }


        :where(.page-servicio-crear) .summary-item {

            display: flex;

            justify-content: space-between;

            gap: 15px;

            padding: 8px 0;

            border-bottom:
                1px solid #e9ecef;

        }


        :where(.page-servicio-crear) .summary-item:last-child {

            border-bottom: 0;

        }


        :where(.page-servicio-crear) .summary-label {

            color: #6c757d;

            font-size: .85rem;

        }


        :where(.page-servicio-crear) .summary-value {

            font-weight: 600;

            text-align: right;

        }


        /* =====================================================
           BOTONES
        ===================================================== */

        :where(.page-servicio-crear) .bottom-actions {

            background: #ffffff;

            border-radius: 16px;

            padding: 18px 22px;

            box-shadow:
                0 3px 14px rgba(0,0,0,0.05);

            display: flex;

            justify-content: flex-end;

            gap: 10px;

            margin-bottom: 30px;

        }


        :where(.page-servicio-crear) .btn-main {

            padding: 11px 24px;

            border-radius: 10px;

            font-weight: 600;

        }


        /* =====================================================
           SECCION
        ===================================================== */

        :where(.page-servicio-crear) .section-number {

            width: 28px;

            height: 28px;

            border-radius: 50%;

            background: #0d6efd;

            color: #fff;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            font-size: .8rem;

            font-weight: 700;

        }


        :where(.page-servicio-crear) .alert {

            border-radius: 12px;

        }


        /* =====================================================
           RESPONSIVE
        ===================================================== */

        @media (max-width: 768px) {

            :where(.page-servicio-crear) .page-header {

                padding: 20px;

            }


            :where(.page-servicio-crear) .service-card-body {

                padding: 18px;

            }


            :where(.page-servicio-crear) .client-tabs {

                flex-direction: column;

            }


            :where(.page-servicio-crear) .bottom-actions {

                flex-direction: column-reverse;

            }


            :where(.page-servicio-crear) .bottom-actions button {

                width: 100%;

            }


            :where(.page-servicio-crear) .option-grid {

                grid-template-columns: 1fr;

            }


            :where(.page-servicio-crear) .selector-list {

                max-height: 55vh;

            }

        }

    


/* ==========================================================================
   Servicios - activos  (public/servicios/activos.php)  ->  .page-servicios-activos
   ========================================================================== */
        :where(.page-servicios-activos) .table-responsive-wrapper {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        :where(.page-servicios-activos) td.dtr-control { cursor: pointer; }
        :where(.page-servicios-activos) tr.child td    { padding: 0.5rem 1rem; }

        @media (max-width: 575.98px) {
            :where(.page-servicios-activos) h3 { font-size: 1.2rem; }
        }

        :where(.page-servicios-activos) .dataTables_wrapper .dataTables_length select,
        :where(.page-servicios-activos) .dataTables_wrapper .dataTables_filter input {
            border-radius: 0.375rem;
        }
    


/* ==========================================================================
   Equipos - listado  (public/equipos/equipos.php)  ->  .page-equipos
   ========================================================================== */
        /* Scroll horizontal en pantallas muy pequeñas */
        :where(.page-equipos) .table-responsive-wrapper {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Filas de detalle expandido */
        :where(.page-equipos) td.dtr-control { cursor: pointer; }
        :where(.page-equipos) tr.child td    { padding: 0.5rem 1rem; }

        /* Ajustes móvil (< 576px)  */
        @media (max-width: 575.98px) {
            :where(.page-equipos) .badge       { font-size: 0.85rem; padding: 0.4em 0.7em; }
            :where(.page-equipos) .btn-nuevo   { font-size: 0.85rem; padding: 0.35rem 0.7rem; }
            :where(.page-equipos) h3           { font-size: 1.2rem; }
        }

        /* Inputs de DataTables  */
        :where(.page-equipos) .dataTables_wrapper .dataTables_length select,
        :where(.page-equipos) .dataTables_wrapper .dataTables_filter input {
            border-radius: 0.375rem;
        }
    


/* ==========================================================================
   Equipos - cancelados  (public/equipos/cancelados.php)  ->  .page-equipos-cancelados
   ========================================================================== */
:where(.page-equipos-cancelados) .card-hover:hover {
    transform: scale(1.01);
    transition: 0.2s;
}


/* ==========================================================================
   Usuarios  (public/usuarios/index.php)  ->  .page-usuarios
   ========================================================================== */
        :where(.page-usuarios) body { background: #f4f6f9; }
        :where(.page-usuarios) .page-header {
            background: #fff;
            border-radius: 16px;
            padding: 22px 25px;
            box-shadow: 0 3px 15px rgba(0,0,0,.05);
            margin-bottom: 20px;
        }
        :where(.page-usuarios) .section-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 3px 15px rgba(0,0,0,.05);
            overflow: hidden;
        }
        :where(.page-usuarios) .user-avatar {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: #eef4ff;
            color: #0d6efd;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            margin-right: 10px;
        }
        :where(.page-usuarios) table thead th {
            background: #f8f9fa;
            font-size: .78rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            color: #6c757d;
        }
        :where(.page-usuarios) .btn-icon { border-radius: 8px; }
        :where(.page-usuarios) .badge-self {
            font-size: .68rem;
            vertical-align: middle;
        }