/* =========================================================
   GESTOR DE CAJEROS — PREMIUM V2
   Capa visual global. No modifica lógica.
   ========================================================= */

:root{
    --gp-bg:#0b1017;
    --gp-bg2:#111925;
    --gp-panel:rgba(255,255,255,.94);
    --gp-panel-soft:rgba(255,255,255,.88);
    --gp-border:rgba(255,255,255,.28);
    --gp-dark:#171b22;
    --gp-text:#171a1f;
    --gp-muted:#68707c;
    --gp-accent:#d8ad55;
    --gp-green:#15864b;
    --gp-shadow:0 18px 55px rgba(0,0,0,.20);
    --gp-shadow-soft:0 10px 30px rgba(0,0,0,.13);
}

/* ---------- FONDO ---------- */

html{
    min-height:100%;
    background:#0b1017;
}

body{
    min-height:100vh !important;
    color:var(--gp-text);
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(216,173,85,.20) 0,
            rgba(216,173,85,.07) 18%,
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 18%,
            rgba(65,120,190,.23) 0,
            rgba(65,120,190,.08) 22%,
            transparent 42%
        ),
        radial-gradient(
            circle at 70% 90%,
            rgba(34,139,94,.15) 0,
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #0a0f16 0%,
            #121b28 48%,
            #0b1119 100%
        ) !important;
    background-attachment:fixed !important;
    position:relative;
}

/*
   Patrón tecnológico muy suave.
*/
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.30;
    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );
    background-size:42px 42px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.8),
            transparent 90%
        );
}

/* Mantener contenido por encima del fondo */

body > *{
    position:relative;
    z-index:1;
}

/* ---------- CABECERAS ---------- */

.topbar,
.top{
    background:
        linear-gradient(
            110deg,
            rgba(16,19,24,.97),
            rgba(27,32,40,.94)
        ) !important;
    border-bottom:
        1px solid rgba(216,173,85,.32) !important;
    box-shadow:
        0 8px 30px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.brand,
.topbar > strong,
.top > strong{
    letter-spacing:-.25px;
    text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.brand::before{
    content:"◆";
    display:inline-block;
    margin-right:9px;
    color:var(--gp-accent);
    font-size:14px;
    transform:translateY(-1px);
}

.nav a,
.topbar a,
.top a{
    transition:
        transform .18s ease,
        opacity .18s ease,
        color .18s ease;
}

.nav a:hover,
.topbar a:hover,
.top a:hover{
    color:#f1cb7b !important;
    transform:translateY(-1px);
}

/* ---------- CONTENEDORES ---------- */

.container{
    position:relative;
}

/* ---------- TARJETAS / PANELES ---------- */

.card,
.filters,
.activity,
.stat,
.profile-card,
.summary-card,
.panel,
.table-wrap,
section.card{
    border:
        1px solid rgba(255,255,255,.50) !important;
    box-shadow:var(--gp-shadow-soft) !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

/*
   Tarjetas claras para mantener excelente lectura.
*/
.card,
.filters,
.stat,
.profile-card,
.summary-card,
.panel,
.table-wrap{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(247,249,252,.91)
        ) !important;
}

/* Tarjetas genéricas que no tengan clase conocida */
main section{
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

/* ---------- TITULOS ---------- */

h1,
h2,
h3{
    letter-spacing:-.45px;
}

main > h1,
.heading h1{
    color:#fff !important;
    text-shadow:
        0 3px 20px rgba(0,0,0,.35);
}

.heading{
    position:relative;
}

.heading::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;
    width:62px;
    height:3px;
    border-radius:999px;
    background:
        linear-gradient(
            90deg,
            #d8ad55,
            rgba(216,173,85,.15)
        );
}

/* ---------- BOTONES ---------- */

.btn,
button[type="submit"],
input[type="submit"]{
    border:none !important;
    border-radius:9px !important;
    background:
        linear-gradient(
            135deg,
            #171b22,
            #292f39
        ) !important;
    color:#fff !important;
    box-shadow:
        0 7px 18px rgba(0,0,0,.17) !important;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease !important;
}

.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover{
    transform:translateY(-2px);
    box-shadow:
        0 10px 25px rgba(0,0,0,.22) !important;
    filter:brightness(1.08);
}

.btn:active,
button[type="submit"]:active{
    transform:translateY(0);
}

/* Botón principal Agregar */

.heading .btn{
    background:
        linear-gradient(
            135deg,
            #d1a64f,
            #e5c16d
        ) !important;
    color:#17130b !important;
    box-shadow:
        0 8px 24px rgba(216,173,85,.25) !important;
}

/* Mantener acciones destructivas rojas */
button[style*="#b3261e"],
.btn-suspend{
    background:
        linear-gradient(
            135deg,
            #a82c27,
            #c53b34
        ) !important;
    color:#fff !important;
}

/* ---------- INPUTS ---------- */

input[type="text"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="tel"],
input[type="url"],
input[type="file"],
select,
textarea{
    border:
        1px solid #d4d9e1 !important;
    border-radius:9px !important;
    background:
        rgba(255,255,255,.96) !important;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

input:focus,
select:focus,
textarea:focus{
    outline:none !important;
    border-color:#c6a052 !important;
    box-shadow:
        0 0 0 3px rgba(216,173,85,.15) !important;
}

/* ---------- BUSCADOR ---------- */

.filters{
    border-radius:13px !important;
}

.filters input,
.filters select{
    min-height:44px;
}

.filters button{
    min-height:44px;
}

/* ---------- ESTADOS ---------- */

.estado-activo,
.status.ACTIVO,
.status.activo{
    background:
        linear-gradient(
            135deg,
            #dff5e7,
            #ccefd9
        ) !important;
    color:#0d6939 !important;
    box-shadow:
        inset 0 0 0 1px rgba(21,134,75,.10);
}

.estado-deudor,
.status.DEUDOR,
.status.deudor{
    background:
        linear-gradient(
            135deg,
            #ffe3df,
            #ffd2cc
        ) !important;
    color:#9b271f !important;
}

.estado-inactivo,
.status.INACTIVO,
.status.inactivo{
    background:
        linear-gradient(
            135deg,
            #e8ebef,
            #dce1e7
        ) !important;
    color:#59616b !important;
}

/* ---------- PERFIL ---------- */

.activity{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(246,248,251,.93)
        ) !important;
    border-radius:12px !important;
}

.activity:hover{
    box-shadow:
        0 13px 32px rgba(0,0,0,.12) !important;
}

/* ---------- TABLAS ---------- */

table{
    border-collapse:separate;
    border-spacing:0;
}

thead th{
    background:
        rgba(20,25,32,.055);
}

tbody tr{
    transition:background .15s ease;
}

tbody tr:hover{
    background:
        rgba(216,173,85,.075);
}

/* ---------- ALERTAS ---------- */

.alert{
    border-radius:10px !important;
    box-shadow:
        0 8px 22px rgba(0,0,0,.09);
}

/* ---------- LINKS SECUNDARIOS ---------- */

.back{
    color:#e5c16d !important;
    font-weight:700;
    text-decoration:none;
}

.back:hover{
    text-decoration:underline;
}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:#101722;
}

::-webkit-scrollbar-thumb{
    background:#47505d;
    border-radius:20px;
    border:2px solid #101722;
}

::-webkit-scrollbar-thumb:hover{
    background:#626d7c;
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:760px){

    .topbar,
    .top{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .nav{
        gap:10px !important;
    }

    .container{
        width:94% !important;
    }

    .filters{
        padding:14px !important;
    }

    h1{
        font-size:27px !important;
    }
}


/* =========================================================
   GESTOR DE CAJEROS — WOW V3
   ========================================================= */

/* ---------- ATMOSFERA ---------- */

body{
    overflow-x:hidden;
}

body::after{
    content:"";
    position:fixed;
    z-index:0;
    pointer-events:none;

    width:700px;
    height:700px;

    right:-260px;
    top:110px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(70,126,203,.20) 0%,
            rgba(39,88,157,.10) 32%,
            transparent 68%
        );

    filter:blur(12px);

    animation:
        gestorAmbient 12s ease-in-out infinite alternate;
}

@keyframes gestorAmbient{
    from{
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to{
        transform:
            translate3d(-70px,45px,0)
            scale(1.13);
    }
}


/* ---------- CONTENIDO ---------- */

.container{
    animation:
        gestorEntrada .48s ease-out both;
}

@keyframes gestorEntrada{
    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* ---------- HEADER WOW ---------- */

.topbar,
.top{
    position:relative;
    overflow:hidden;
}

.topbar::after,
.top::after{
    content:"";
    position:absolute;

    width:420px;
    height:120px;

    top:-80px;
    left:12%;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse,
            rgba(231,193,112,.22),
            transparent 70%
        );

    filter:blur(18px);
}

.brand{
    font-size:21px !important;
}

.brand::before{
    text-shadow:
        0 0 16px rgba(232,190,101,.75);
}


/* ---------- TITULO PRINCIPAL ---------- */

.heading h1{
    font-size:36px !important;
    font-weight:800 !important;
    margin-bottom:5px !important;
}

.heading::before{
    content:"GESTIÓN GLOBAL";
    display:block;

    margin-bottom:7px;

    color:#d8ad55;

    font-size:10px;
    font-weight:800;
    letter-spacing:2.6px;

    opacity:.9;
}


/* ---------- TARJETAS PREMIUM ---------- */

.card,
.filters,
.activity,
.stat,
.profile-card,
.summary-card,
.panel,
.table-wrap{

    position:relative;

    border:
        1px solid rgba(255,255,255,.60) !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18),
        0 1px 0 rgba(255,255,255,.85) inset !important;

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease !important;
}

.card::before,
.profile-card::before,
.summary-card::before,
.stat::before{

    content:"";
    position:absolute;

    left:16px;
    right:16px;
    top:0;

    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216,173,85,.60),
            transparent
        );
}

.card:hover,
.profile-card:hover,
.summary-card:hover{

    transform:translateY(-3px);

    border-color:
        rgba(216,173,85,.38) !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.22),
        0 0 0 1px rgba(216,173,85,.07) !important;
}


/* ---------- BUSCADOR WOW ---------- */

.filters{
    position:relative;
    overflow:hidden;
}

.filters::after{

    content:"";

    position:absolute;

    width:200px;
    height:200px;

    right:-110px;
    top:-110px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(216,173,85,.16),
            transparent 68%
        );

    pointer-events:none;
}


/* ---------- BOTONES PREMIUM ---------- */

.btn,
button[type="submit"]{

    position:relative;
    overflow:hidden;

    font-weight:700 !important;

    letter-spacing:.1px;
}

.btn::after,
button[type="submit"]::after{

    content:"";

    position:absolute;

    top:-80%;
    left:-80%;

    width:55%;
    height:260%;

    pointer-events:none;

    transform:rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
        );

    transition:left .55s ease;
}

.btn:hover::after,
button[type="submit"]:hover::after{
    left:135%;
}


/* ---------- BOTON AGREGAR ---------- */

.heading .btn{

    border:
        1px solid rgba(255,225,154,.55) !important;

    background:
        linear-gradient(
            135deg,
            #c99b42,
            #e8c773 52%,
            #c89b43
        ) !important;

    box-shadow:
        0 10px 30px rgba(207,162,70,.30),
        inset 0 1px 0 rgba(255,255,255,.55) !important;
}


/* ---------- ESTADOS ---------- */

.estado-activo,
.status.ACTIVO,
.status.activo{

    border:
        1px solid rgba(24,145,81,.16) !important;

    box-shadow:
        0 4px 14px rgba(24,145,81,.10) !important;
}

.estado-deudor,
.status.DEUDOR,
.status.deudor{

    border:
        1px solid rgba(185,54,43,.16) !important;

    box-shadow:
        0 4px 14px rgba(185,54,43,.10) !important;
}


/* ---------- PERFIL ---------- */

.profile-card h1,
.card h1{

    position:relative;
}

.profile-card h1::after{

    content:"";

    display:block;

    width:45px;
    height:3px;

    margin-top:10px;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            #d3a74f,
            #f1d28c
        );
}


/* ---------- IMAGENES ---------- */

.card img,
.profile-card img{

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

.card a:hover img,
.profile-card a:hover img{

    transform:scale(1.025);

    filter:
        brightness(1.04)
        contrast(1.02);

    box-shadow:
        0 12px 28px rgba(0,0,0,.20);
}


/* ---------- FORMULARIOS ---------- */

input,
select,
textarea{

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.035);
}

input:hover,
select:hover,
textarea:hover{

    border-color:
        #bcc3cc !important;
}


/* ---------- SCROLL SUPERIOR ---------- */

body{
    scrollbar-color:
        #596473
        #101722;
}


/* ---------- SELECCION ---------- */

::selection{
    background:#d8ad55;
    color:#17130b;
}


/* ---------- MOBILE ---------- */

@media(max-width:760px){

    body::after{
        width:420px;
        height:420px;
        right:-230px;
    }

    .heading h1{
        font-size:29px !important;
    }

    .card:hover,
    .profile-card:hover,
    .summary-card:hover{
        transform:none;
    }
}


/* ---------- REDUCIR MOVIMIENTO SI EL SISTEMA LO PIDE ---------- */

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

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }
}


/* =========================================================
   LISTADO DE CAJEROS — WOW FINAL
   ========================================================= */

/* ----- Encabezado ----- */

.heading{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:25px !important;

    margin-top:20px !important;
    margin-bottom:28px !important;
}

.heading h1{
    margin:0 !important;
    text-align:left !important;
}

.heading::before{
    position:absolute;
    left:0;
    top:-25px;
}

.heading::after{
    bottom:-12px !important;
    width:64px !important;

    box-shadow:
        0 0 16px rgba(216,173,85,.38);
}


/* ----- Resultado de búsqueda ----- */

.results-count,
.result-count,
.count,
small.muted{
    color:rgba(255,255,255,.62) !important;
}

/*
   cajeros.php actualmente muestra el contador antes
   de las tarjetas. Esta regla cubre texto secundario
   directo dentro del listado.
*/

.container > p{
    color:rgba(255,255,255,.64) !important;
}


/* ----- Botón volver ----- */

#btn-volver-listado{
    background:
        rgba(255,255,255,.09) !important;

    color:#f5f6f8 !important;

    border:
        1px solid rgba(255,255,255,.18) !important;

    border-radius:10px !important;

    padding:10px 17px !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.15) !important;

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

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}

#btn-volver-listado:hover{
    transform:translateX(-3px);

    background:
        rgba(216,173,85,.13) !important;

    border-color:
        rgba(216,173,85,.48) !important;

    box-shadow:
        0 10px 28px rgba(0,0,0,.20) !important;
}


/* ----- Fichas del listado ----- */

.card{
    overflow:hidden;
}

.card::after{
    content:"";

    position:absolute;

    left:0;
    top:18px;
    bottom:18px;

    width:3px;

    border-radius:0 10px 10px 0;

    background:
        linear-gradient(
            180deg,
            transparent,
            #d8ad55,
            transparent
        );

    opacity:.25;

    transition:
        opacity .20s ease,
        box-shadow .20s ease;
}

.card:hover::after{
    opacity:.9;

    box-shadow:
        0 0 15px rgba(216,173,85,.55);
}


/* Nombre */

.card h2,
.card h3{
    color:#171a20 !important;
    font-weight:800 !important;
}


/* Etiquetas */

.card .label,
.card dt{
    color:#777f89 !important;

    font-size:11px !important;

    letter-spacing:.35px !important;

    text-transform:uppercase;
}


/* ----- Ver perfil completo ----- */

/*
   El enlace que apunta al perfil recibe aspecto de
   botón aunque el HTML existente siga intacto.
*/

.card a[href*="perfil.php"]{
    display:inline-flex !important;

    align-items:center;
    justify-content:center;

    padding:9px 14px !important;

    border:
        1px solid rgba(26,31,39,.13);

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            #20252d,
            #303640
        );

    color:#fff !important;

    font-size:12px !important;
    font-weight:750 !important;

    text-decoration:none !important;

    box-shadow:
        0 6px 16px rgba(0,0,0,.12);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}

.card a[href*="perfil.php"]::after{
    content:"  →";

    margin-left:7px;

    color:#e5bd67;

    transition:
        transform .18s ease;
}

.card a[href*="perfil.php"]:hover{
    transform:translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #161a20,
            #272d36
        );

    box-shadow:
        0 9px 22px rgba(0,0,0,.18);
}

.card a[href*="perfil.php"]:hover::after{
    transform:translateX(3px);
}


/* ----- Estado activo ----- */

.card .status,
.card [class*="estado"]{
    font-weight:750 !important;
}


/* ----- Hover completo ----- */

.card:hover{
    transform:
        translateY(-4px)
        scale(1.002);

    box-shadow:
        0 26px 65px rgba(0,0,0,.24),
        0 0 0 1px rgba(216,173,85,.13) !important;
}


/* ----- Search panel ----- */

.filters{
    box-shadow:
        0 18px 45px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.filters button{
    min-width:170px;
}


/* ----- Mobile ----- */

@media(max-width:760px){

    .heading{
        align-items:flex-start !important;
        flex-direction:column !important;
        gap:18px !important;
    }

    .heading::before{
        position:static;
        margin-bottom:-11px;
    }

    .heading .btn{
        width:100%;
        text-align:center;
    }

    .filters button{
        min-width:0;
        width:100%;
    }

    .card:hover{
        transform:none;
    }

    .card a[href*="perfil.php"]{
        width:100%;
        margin-top:8px;
    }
}


/* =========================================================
   GESTOR DE CAJEROS
   DIAMANTE V4 — LISTADO FINAL
   ========================================================= */


/* =========================================================
   FONDO DIAMANTE
   ========================================================= */

body{
    background:
        radial-gradient(
            ellipse at 14% 4%,
            rgba(218,174,83,.14) 0%,
            rgba(218,174,83,.045) 24%,
            transparent 43%
        ),
        radial-gradient(
            ellipse at 91% 22%,
            rgba(55,113,190,.25) 0%,
            rgba(36,77,136,.10) 30%,
            transparent 53%
        ),
        radial-gradient(
            ellipse at 57% 91%,
            rgba(20,151,126,.13) 0%,
            rgba(20,151,126,.035) 28%,
            transparent 48%
        ),
        linear-gradient(
            128deg,
            #090d12 0%,
            #101822 42%,
            #101c2c 72%,
            #0b1119 100%
        ) !important;
}


/*
   Facetas geométricas muy sutiles.
   No interfieren con botones ni contenido.
*/

body::before{
    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;
    z-index:0;

    opacity:.30;

    background:
        linear-gradient(
            125deg,
            transparent 0 18%,
            rgba(255,255,255,.025) 18.1%,
            transparent 18.3% 47%,
            rgba(216,173,85,.025) 47.1%,
            transparent 47.4%
        ),
        linear-gradient(
            35deg,
            transparent 0 57%,
            rgba(88,139,207,.035) 57.1%,
            transparent 57.4%
        ),
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:
        100% 100%,
        100% 100%,
        48px 48px,
        48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            rgba(0,0,0,.75) 60%,
            transparent 100%
        );
}


/* =========================================================
   HALO AMBIENTAL
   ========================================================= */

body::after{
    width:760px !important;
    height:760px !important;

    right:-270px !important;
    top:70px !important;

    opacity:.85;

    background:
        radial-gradient(
            circle,
            rgba(65,126,207,.18) 0%,
            rgba(46,101,174,.075) 35%,
            transparent 68%
        ) !important;

    filter:blur(18px) !important;
}


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

.topbar{
    border-bottom:
        1px solid rgba(218,174,83,.34) !important;

    box-shadow:
        0 10px 35px rgba(0,0,0,.32),
        inset 0 -1px 0 rgba(255,255,255,.025) !important;
}

.brand{
    font-weight:800 !important;
}

.brand::before{
    color:#e2b85f !important;

    text-shadow:
        0 0 7px rgba(226,184,95,.55),
        0 0 20px rgba(226,184,95,.25);
}


/* =========================================================
   ZONA SUPERIOR
   ========================================================= */

.heading{
    margin-top:31px !important;
}

.heading::before{
    top:-31px !important;

    color:#e1b65a !important;

    text-shadow:
        0 0 18px rgba(216,173,85,.22);
}

.heading h1{
    font-size:38px !important;

    text-shadow:
        0 5px 25px rgba(0,0,0,.35) !important;
}

.heading::after{
    height:3px !important;
    width:64px !important;

    background:
        linear-gradient(
            90deg,
            #e0b75f,
            rgba(224,183,95,.12)
        ) !important;

    box-shadow:
        0 0 15px rgba(224,183,95,.32);
}


/* =========================================================
   VOLVER
   ========================================================= */

#btn-volver-listado{
    margin-bottom:3px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.055)
        ) !important;

    border:
        1px solid rgba(255,255,255,.18) !important;

    color:#f4f5f7 !important;

    font-weight:700 !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#btn-volver-listado:hover{
    border-color:
        rgba(225,182,90,.60) !important;

    background:
        rgba(225,182,90,.12) !important;

    color:#f4d48c !important;
}


/* =========================================================
   BOTON AGREGAR
   ========================================================= */

.heading .btn{
    padding:12px 19px !important;

    border-radius:10px !important;

    background:
        linear-gradient(
            135deg,
            #bd8e35 0%,
            #e6bd63 48%,
            #c8973d 100%
        ) !important;

    border:
        1px solid rgba(255,225,153,.72) !important;

    box-shadow:
        0 10px 28px rgba(201,151,61,.28),
        0 0 25px rgba(218,173,85,.08),
        inset 0 1px 0 rgba(255,255,255,.50) !important;
}

.heading .btn:hover{
    transform:
        translateY(-2px)
        scale(1.015);

    box-shadow:
        0 14px 34px rgba(201,151,61,.36),
        0 0 30px rgba(218,173,85,.12) !important;
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.filters{
    border:
        1px solid rgba(255,255,255,.72) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.97),
            rgba(242,245,249,.91)
        ) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.22),
        inset 0 1px 0 #fff !important;
}

.filters input,
.filters select{
    background:
        rgba(255,255,255,.90) !important;

    border:
        1px solid #d7dce3 !important;
}

.filters input:focus,
.filters select:focus{
    border-color:#d0aa57 !important;

    box-shadow:
        0 0 0 3px rgba(216,173,85,.13) !important;
}


/* =========================================================
   CONTADOR — SELECTOR REAL
   ========================================================= */

.results{
    margin-top:21px !important;
    margin-bottom:15px !important;

    color:
        rgba(235,239,244,.72) !important;

    font-size:13px !important;
    font-weight:600 !important;

    letter-spacing:.15px;
}


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

.card{
    border:
        1px solid rgba(255,255,255,.74) !important;

    border-radius:11px !important;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.985),
            rgba(248,249,251,.955)
        ) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.17),
        inset 0 1px 0 #fff !important;
}

.card::before{
    left:28px !important;
    right:28px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216,173,85,.42),
            transparent
        ) !important;
}

.card::after{
    width:3px !important;

    opacity:.32 !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            #d8ad55 30%,
            #efca78 50%,
            #d8ad55 70%,
            transparent
        ) !important;
}

.card:hover{
    transform:
        translateY(-4px)
        scale(1.003) !important;

    border-color:
        rgba(222,181,92,.52) !important;

    box-shadow:
        0 28px 70px rgba(0,0,0,.24),
        0 0 25px rgba(216,173,85,.07),
        inset 0 1px 0 #fff !important;
}


/* =========================================================
   NOMBRE
   ========================================================= */

.card h2,
.card h3{
    font-weight:800 !important;
    letter-spacing:-.25px !important;
}


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

.status,
[class*="estado"]{
    border-radius:999px !important;
}

.status.ACTIVO,
.status.activo,
.estado-activo{
    background:
        linear-gradient(
            135deg,
            #dff6e8,
            #ccefd9
        ) !important;

    border:
        1px solid rgba(20,133,74,.14) !important;

    box-shadow:
        0 5px 15px rgba(20,133,74,.09) !important;
}


/* =========================================================
   VER PERFIL — SELECTOR REAL
   ========================================================= */

.profile-link{
    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    min-height:38px;

    padding:
        9px 15px !important;

    border-radius:
        9px !important;

    border:
        1px solid rgba(20,24,30,.10) !important;

    background:
        linear-gradient(
            135deg,
            #1b2027,
            #303640
        ) !important;

    color:
        #ffffff !important;

    text-decoration:
        none !important;

    font-size:
        12px !important;

    font-weight:
        750 !important;

    box-shadow:
        0 7px 18px rgba(0,0,0,.14) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

.profile-link::after{
    content:"→";

    margin-left:8px;

    color:#e6bd66;

    font-size:15px;

    transition:
        transform .18s ease;
}

.profile-link:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(216,173,85,.50) !important;

    box-shadow:
        0 11px 25px rgba(0,0,0,.21),
        0 0 18px rgba(216,173,85,.08) !important;
}

.profile-link:hover::after{
    transform:
        translateX(3px);
}


/* =========================================================
   MICRO ACABADO
   ========================================================= */

.card,
.filters,
.heading .btn,
.profile-link,
#btn-volver-listado{
    -webkit-font-smoothing:antialiased;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

    .heading{
        margin-top:28px !important;
    }

    .heading h1{
        font-size:30px !important;
    }

    .profile-link{
        width:100% !important;
    }

    .results{
        color:
            rgba(235,239,244,.78) !important;
    }
}


/* =========================================================
   PERFIL — DIAMANTE FINAL
   ========================================================= */


/* ---------- VOLVER AL LISTADO ---------- */

a.back{
    display:inline-flex !important;
    align-items:center !important;

    margin-bottom:20px !important;
    padding:10px 16px !important;

    border:1px solid rgba(255,255,255,.17) !important;
    border-radius:10px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.045)
        ) !important;

    color:#f4f5f7 !important;
    font-size:13px !important;
    font-weight:750 !important;
    text-decoration:none !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease !important;
}

a.back:hover{
    transform:translateX(-3px);

    color:#f1cd7e !important;

    border-color:
        rgba(216,173,85,.55) !important;

    background:
        rgba(216,173,85,.10) !important;
}


/* =========================================================
   LAYOUT PERFIL
   ========================================================= */

.profile{
    gap:20px !important;
}


/* =========================================================
   TARJETA IDENTIDAD IZQUIERDA
   ========================================================= */

.profile > :first-child{
    position:relative;
    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.70) !important;

    border-radius:13px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.985),
            rgba(244,246,249,.95)
        ) !important;

    box-shadow:
        0 22px 60px rgba(0,0,0,.21),
        inset 0 1px 0 #fff !important;
}


/* línea dorada lateral */

.profile > :first-child::before{
    content:"";

    position:absolute;

    left:0;
    top:25px;
    bottom:25px;

    width:3px;

    border-radius:0 10px 10px 0;

    background:
        linear-gradient(
            180deg,
            transparent,
            #d8ad55 25%,
            #f0cb78 50%,
            #d8ad55 75%,
            transparent
        );

    box-shadow:
        0 0 16px rgba(216,173,85,.18);
}


/* brillo superior */

.profile > :first-child::after{
    content:"";

    position:absolute;

    top:0;
    left:25px;
    right:25px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216,173,85,.50),
            transparent
        );
}


/* Nombre */

.profile > :first-child h1{
    font-size:29px !important;
    font-weight:850 !important;
    letter-spacing:-.7px !important;
    color:#171a20 !important;

    margin-bottom:4px !important;
}


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

.summary{
    gap:12px !important;
}

.summary-box{
    position:relative;
    overflow:hidden;

    min-height:85px;

    border:
        1px solid rgba(255,255,255,.72) !important;

    border-radius:12px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.985),
            rgba(244,247,250,.94)
        ) !important;

    box-shadow:
        0 13px 34px rgba(0,0,0,.16),
        inset 0 1px 0 #fff !important;

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

.summary-box::after{
    content:"";

    position:absolute;

    width:90px;
    height:90px;

    right:-45px;
    top:-48px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(216,173,85,.18),
            transparent 70%
        );
}

.summary-box:hover{
    transform:translateY(-3px);

    border-color:
        rgba(216,173,85,.38) !important;

    box-shadow:
        0 17px 40px rgba(0,0,0,.19) !important;
}

.summary-number{
    font-size:27px !important;
    font-weight:850 !important;
    color:#171a20 !important;
}

.summary-label{
    color:#737b86 !important;
    font-size:12px !important;
}


/* =========================================================
   PANELES GRANDES DEL PERFIL
   ========================================================= */

/*
   Los paneles principales que ya poseen fondo claro
   reciben profundidad sin cambiar su estructura.
*/

.profile > div > section,
.profile section{
    border:
        1px solid rgba(255,255,255,.70) !important;

    border-radius:13px !important;

    box-shadow:
        0 18px 48px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.85) !important;
}


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

.profile h2{
    color:#181b21 !important;
    font-weight:850 !important;
    letter-spacing:-.45px !important;
}

.title-row{
    position:relative;
}

.title-row h2{
    position:relative;
}

.title-row h2::after{
    content:"";

    display:block;

    width:45px;
    height:3px;

    margin-top:7px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #d6aa51,
            rgba(214,170,81,.16)
        );
}


/* =========================================================
   BOTONES DE ACCION
   ========================================================= */

.actions{
    display:flex;
    gap:8px !important;
    flex-wrap:wrap;
}

.actions a,
.actions button{
    border-radius:9px !important;

    background:
        linear-gradient(
            135deg,
            #1c2128,
            #303640
        ) !important;

    color:#fff !important;

    border:
        1px solid rgba(255,255,255,.06) !important;

    box-shadow:
        0 7px 18px rgba(0,0,0,.15) !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}

.actions a:hover,
.actions button:hover{
    transform:translateY(-2px);

    border-color:
        rgba(216,173,85,.38) !important;

    box-shadow:
        0 11px 24px rgba(0,0,0,.20),
        0 0 15px rgba(216,173,85,.07) !important;
}


/* =========================================================
   HISTORIAL
   ========================================================= */

.activity{
    position:relative;
    overflow:hidden;

    border:
        1px solid #e3e6ea !important;

    border-radius:11px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(247,249,251,.94)
        ) !important;

    box-shadow:
        0 9px 25px rgba(0,0,0,.075) !important;
}

.activity::before{
    content:"";

    position:absolute;

    left:0;
    top:14px;
    bottom:14px;

    width:3px;

    border-radius:0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            transparent,
            #d8ad55,
            transparent
        );

    opacity:.60;
}

.activity:hover{
    transform:translateY(-2px);

    border-color:
        rgba(216,173,85,.35) !important;

    box-shadow:
        0 13px 30px rgba(0,0,0,.11) !important;
}

.activity-name{
    font-weight:800 !important;
    color:#181b21 !important;
}

.activity-date{
    color:#737b85 !important;
}


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

.status{
    padding:6px 11px !important;

    border-radius:999px !important;

    font-weight:800 !important;
    font-size:11px !important;
    letter-spacing:.15px;
}

.status.activo,
.status.ACTIVO{
    color:#08723d !important;

    background:
        linear-gradient(
            135deg,
            #ddf7e7,
            #caefd8
        ) !important;

    border:
        1px solid rgba(13,126,67,.14) !important;

    box-shadow:
        0 5px 14px rgba(13,126,67,.09) !important;
}

.status.deudor,
.status.DEUDOR{
    color:#9b2922 !important;

    background:
        linear-gradient(
            135deg,
            #ffe3df,
            #ffd0ca
        ) !important;
}

.status.inactivo,
.status.INACTIVO,
.status.sin-estado{
    color:#59616c !important;

    background:#e8ebef !important;
}


/* =========================================================
   INPUT FILE / SUBIDA
   ========================================================= */

input[type="file"]{
    min-height:45px;

    padding:7px 10px !important;

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

    border:
        1px solid #d6dbe2 !important;
}

input[type="file"]::file-selector-button{
    margin-right:10px;

    padding:7px 12px;

    border:0;
    border-radius:7px;

    background:
        linear-gradient(
            135deg,
            #e4e7eb,
            #f5f6f8
        );

    color:#262b32;

    font-weight:700;

    cursor:pointer;
}


/* =========================================================
   MICRO DETALLE — DATOS DEL PERFIL
   ========================================================= */

.profile hr{
    border:0 !important;
    border-top:
        1px solid rgba(20,25,32,.065) !important;
}


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

@media(max-width:760px){

    a.back{
        margin-bottom:16px !important;
    }

    .summary{
        gap:9px !important;
    }

    .summary-box{
        min-height:75px;
    }

    .summary-number{
        font-size:24px !important;
    }

    .title-row{
        align-items:flex-start !important;
    }

    .actions{
        width:100%;
    }

    .actions a,
    .actions button{
        flex:1;
        text-align:center;
    }
}


/* =========================================================
   PERFIL DIAMANTE — AJUSTE FINAL DE ALTURA
   ========================================================= */

/*
   La columna izquierda no debe estirarse a la altura
   completa de la columna derecha.
*/

.profile{
    align-items:flex-start !important;
}

.profile > :first-child{
    align-self:flex-start !important;
    height:auto !important;
    min-height:0 !important;
}


/*
   Evita que grids/flex internos obliguen al panel
   de identidad a estirarse verticalmente.
*/

.profile > :first-child{
    flex-grow:0 !important;
}


/* Pequeño acabado al pie de la tarjeta */

.profile > :first-child{
    padding-bottom:26px !important;
}


/* Sombra flotante definitiva */

.profile > :first-child{
    box-shadow:
        0 24px 60px rgba(0,0,0,.23),
        0 4px 12px rgba(0,0,0,.08),
        inset 0 1px 0 #fff !important;
}