:root{
    --bg-1:#0b1220;
    --bg-2:#111827;
    --bg-3:#1f2937;
    --text:#e5eefc;
    --muted:#a9b8d0;
    --line:rgba(255,255,255,.10);
    --card:rgba(255,255,255,.06);
    --card-strong:rgba(255,255,255,.09);
    --accent:#38bdf8;
    --accent-hover:#0ea5e9;
    --shadow:0 20px 60px rgba(0,0,0,.28);
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:"Inter","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top left, rgba(56,189,248,.12), transparent 35%),
        radial-gradient(circle at bottom right, rgba(14,165,233,.10), transparent 30%),
        linear-gradient(135deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3));
    min-height:100vh;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    text-decoration:none;
}

.custom-nav{
    background:rgba(11,18,32,.85);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.brand-mark{
    font-size:1.15rem;
    letter-spacing:.3px;
}

.navbar-dark .navbar-nav .nav-link{
    color:rgba(255,255,255,.84);
    font-weight:500;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus{
    color:#fff;
}

.btn-accent{
    background:var(--accent);
    border:1px solid var(--accent);
    color:#06121c;
    font-weight:700;
    border-radius:14px;
    transition:.2s ease;
}

.btn-accent:hover,
.btn-accent:focus{
    background:var(--accent-hover);
    border-color:var(--accent-hover);
    color:#06121c;
}

.btn-outline-light{
    border-radius:14px;
}

.hero-section{
    padding-top:3rem;
    padding-bottom:2rem;
}

.hero-box{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid var(--line);
    border-radius:28px;
    padding:3rem;
    box-shadow:var(--shadow);
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.5rem .9rem;
    border-radius:999px;
    background:rgba(56,189,248,.14);
    color:#aee7ff;
    border:1px solid rgba(56,189,248,.24);
    font-size:.92rem;
    font-weight:700;
}

.hero-title{
    font-size:clamp(2.1rem, 5vw, 4rem);
    line-height:1.08;
    font-weight:800;
    margin:0;
}

.hero-text{
    font-size:1.08rem;
    line-height:1.75;
    color:var(--muted);
    max-width:720px;
}

.hero-card{
    background:rgba(255,255,255,.07);
    border:1px solid var(--line);
    border-radius:24px;
    padding:1.6rem;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.hero-list{
    margin:0;
    padding-left:1.1rem;
    color:var(--muted);
    line-height:1.8;
}

.section-head{
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
}

.section-title{
    font-size:clamp(1.8rem, 3vw, 2.6rem);
    font-weight:800;
    color:#fff;
    margin-bottom:.8rem;
}

.section-subtitle{
    color:var(--muted);
    font-size:1.02rem;
    line-height:1.75;
}

.card-glass{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow);
    overflow:hidden;
    color:var(--text);
}

.service-card{
    padding:1.6rem;
}

.service-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:rgba(56,189,248,.12);
    border:1px solid rgba(56,189,248,.20);
    color:#b7ecff;
    font-weight:800;
    margin-bottom:1rem;
}

.project-card{
    height:100%;
}

.project-thumb{
    width:100%;
    height:240px;
    object-fit:cover;
    background:rgba(255,255,255,.05);
    border-bottom:1px solid var(--line);
}

.project-main-image{
    width:100%;
    max-height:460px;
    object-fit:cover;
}

.project-gallery img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:18px;
    border:1px solid var(--line);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.contact-box{
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
    border:1px solid var(--line);
    border-radius:28px;
    box-shadow:var(--shadow);
}

.form-label{
    color:#dbe8fb;
    font-weight:600;
}

.form-control,
.form-select,
textarea.form-control{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    border-radius:16px;
    padding:.85rem 1rem;
}

.form-control::placeholder,
textarea.form-control::placeholder{
    color:rgba(255,255,255,.45);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus{
    background:rgba(255,255,255,.08);
    color:#fff;
    border-color:rgba(56,189,248,.55);
    box-shadow:0 0 0 .2rem rgba(56,189,248,.15);
}

.badge-soft{
    background:rgba(56,189,248,.12);
    color:#b8ecff;
    border:1px solid rgba(56,189,248,.20);
}

footer,
.footer-pro{
    border-top:1px solid rgba(255,255,255,.06);
}

.text-light-emphasis{
    color:var(--muted) !important;
}

.alert{
    border-radius:16px;
}

.admin-body{
    background:#f4f7fb;
    color:#0f172a;
}

.stat-card,
.table-card,
.mobile-stack-card,
.preview-box,
.login-card{
    border-radius:20px;
    box-shadow:0 12px 30px rgba(15,23,42,.08);
}

.login-wrapper{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #eaf4fb, #f8fbff);
}

.login-card{
    width:100%;
    max-width:460px;
    border:none;
}

.admin-thumb{
    width:84px;
    height:64px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid #dbe3ea;
    background:#fff;
}

.table td,
.table th{
    vertical-align:middle;
}

.empty-state{
    padding:40px 20px;
    text-align:center;
    color:#64748b;
}

.preview-box{
    border:1px dashed #cbd5e1;
    background:#fff;
    padding:14px;
}

@media (max-width: 991.98px){
    .hero-box{
        padding:2rem;
    }

    .hero-title{
        font-size:2.4rem;
    }

    .project-thumb{
        height:220px;
    }
}

@media (max-width: 575.98px){
    .hero-box{
        padding:1.4rem;
        border-radius:22px;
    }

    .hero-title{
        font-size:2rem;
    }

    .hero-text{
        font-size:1rem;
    }

    .section-title{
        font-size:1.65rem;
    }

    .project-thumb,
    .project-gallery img{
        height:200px;
    }
}

/* =========================================================
   LOGIN ADMIN CHARLSDEV
========================================================= */

.admin-login-body{
    margin:0;
    min-height:100vh;
    font-family:'Inter',sans-serif;
    color:#e8eefc;
    background:
        linear-gradient(135deg, #081120 0%, #0f172a 35%, #111827 65%, #1e293b 100%);
    overflow:hidden;
    position:relative;
}

.admin-login-bg{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(18px);
    opacity:.35;
    animation:floatBlob 12s ease-in-out infinite;
}

.blob-1{
    width:340px;
    height:340px;
    background:rgba(56,189,248,.35);
    top:8%;
    left:8%;
    animation-delay:0s;
}

.blob-2{
    width:300px;
    height:300px;
    background:rgba(139,92,246,.28);
    right:10%;
    top:18%;
    animation-delay:2s;
}

.blob-3{
    width:380px;
    height:380px;
    background:rgba(16,185,129,.20);
    left:50%;
    bottom:-40px;
    transform:translateX(-50%);
    animation-delay:4s;
}

@keyframes floatBlob{
    0%,100%{
        transform:translateY(0px) scale(1);
    }
    50%{
        transform:translateY(-24px) scale(1.06);
    }
}

.admin-login-wrapper{
    position:relative;
    z-index:2;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
}

.admin-login-card{
    width:100%;
    max-width:460px;
    padding:34px 30px;
    border-radius:28px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.admin-login-brand{
    margin-bottom:26px;
}

.admin-logo-circle{
    width:78px;
    height:78px;
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:2rem;
    font-weight:800;
    color:#06121c;
    background:linear-gradient(135deg, #67e8f9, #38bdf8, #22d3ee);
    box-shadow:
        0 10px 30px rgba(56,189,248,.35),
        inset 0 2px 8px rgba(255,255,255,.35);
}

.admin-login-title{
    margin:0;
    font-size:2rem;
    font-weight:800;
    letter-spacing:-0.02em;
    color:#ffffff;
}

.admin-login-subtitle{
    margin:.55rem 0 0;
    color:rgba(226,232,240,.78);
    font-size:.98rem;
}

.admin-login-form{
    margin-top:8px;
}

.admin-label{
    color:#dbeafe;
    font-weight:600;
    margin-bottom:8px;
}

.admin-input{
    height:54px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.07);
    color:#ffffff;
    padding:0 16px;
    transition:all .22s ease;
    box-shadow:none;
}

.admin-input::placeholder{
    color:rgba(255,255,255,.45);
}

.admin-input:focus{
    color:#fff;
    background:rgba(255,255,255,.10);
    border-color:rgba(56,189,248,.65);
    box-shadow:0 0 0 .22rem rgba(56,189,248,.16);
}

.admin-login-btn{
    margin-top:10px;
    height:54px;
    border:none;
    border-radius:16px;
    font-weight:700;
    font-size:1rem;
    color:#07111d;
    background:linear-gradient(135deg, #67e8f9, #38bdf8);
    box-shadow:0 12px 30px rgba(56,189,248,.28);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.admin-login-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.02);
    box-shadow:0 16px 34px rgba(56,189,248,.34);
    color:#07111d;
}

.admin-login-btn:focus{
    color:#07111d;
    box-shadow:0 0 0 .22rem rgba(56,189,248,.18), 0 16px 34px rgba(56,189,248,.34);
}

.admin-login-footer{
    margin-top:20px;
    color:rgba(226,232,240,.58);
    font-size:.9rem;
}

.admin-login-card .alert{
    border-radius:16px;
}

@media (max-width: 575.98px){
    .admin-login-wrapper{
        padding:18px;
    }

    .admin-login-card{
        padding:26px 20px;
        border-radius:22px;
    }

    .admin-logo-circle{
        width:68px;
        height:68px;
        font-size:1.7rem;
    }

    .admin-login-title{
        font-size:1.65rem;
    }
}

/* =========================================================
   DASHBOARD ADMIN CON ESTÉTICA DEL SITIO PÚBLICO
========================================================= */

.admin-body{
    margin:0;
    min-height:100vh;
    color:var(--text);
    background:
        radial-gradient(circle at top left, rgba(56,189,248,.12), transparent 35%),
        radial-gradient(circle at bottom right, rgba(14,165,233,.10), transparent 30%),
        linear-gradient(135deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3));
}

.admin-body .container-fluid{
    position:relative;
    z-index:1;
}

.admin-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    padding:28px;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.admin-dashboard-title{
    margin:0;
    font-size:clamp(2rem, 4vw, 3rem);
    line-height:1.1;
    font-weight:800;
    color:#fff;
}

.admin-dashboard-subtitle{
    color:var(--muted);
    font-size:1rem;
}

.admin-dashboard-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.dashboard-stat-card{
    height:100%;
    padding:24px;
    border-radius:24px;
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:var(--text);
}

.dashboard-stat-label{
    color:var(--muted);
    font-size:.95rem;
    margin-bottom:10px;
    font-weight:600;
}

.dashboard-stat-value{
    color:#fff;
    font-size:2.2rem;
    font-weight:800;
    line-height:1;
}

.dashboard-panel{
    padding:24px;
    border-radius:28px;
    background:var(--card);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:var(--text);
}

.dashboard-panel-title{
    color:#fff;
    font-size:1.25rem;
    font-weight:800;
}

.dashboard-table{
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: rgba(255,255,255,.08);
}

.dashboard-table thead th{
    color:var(--muted);
    background:rgba(255,255,255,.03);
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:.9rem;
    font-weight:700;
    padding-top:14px;
    padding-bottom:14px;
}

.dashboard-table tbody td{
    color:var(--text);
    border-top:1px solid rgba(255,255,255,.06);
    background:transparent;
}

.dashboard-table tbody tr:hover{
    background:rgba(255,255,255,.025);
}

.dashboard-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:700;
    border:1px solid transparent;
}

.dashboard-badge-success{
    background:rgba(34,197,94,.12);
    color:#bbf7d0;
    border-color:rgba(34,197,94,.18);
}

.dashboard-badge-muted{
    background:rgba(148,163,184,.12);
    color:#cbd5e1;
    border-color:rgba(148,163,184,.18);
}

/* Navbar admin más integrada con el sitio público */
.navbar.admin-navbar,
.admin-navbar{
    background:rgba(11,18,32,.85) !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.admin-navbar .navbar-brand,
.admin-navbar .nav-link{
    color:rgba(255,255,255,.84) !important;
}

.admin-navbar .nav-link:hover,
.admin-navbar .nav-link:focus,
.admin-navbar .navbar-brand:hover{
    color:#fff !important;
}

@media (max-width: 767.98px){
    .admin-hero{
        padding:20px;
        border-radius:22px;
    }

    .admin-dashboard-title{
        font-size:1.7rem;
    }

    .dashboard-stat-card,
    .dashboard-panel{
        padding:18px;
        border-radius:22px;
    }
}

/* =========================================================
   HEADER ADMIN BONITO
========================================================= */

.admin-navbar{
    background:rgba(11,18,32,.82) !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:0 10px 30px rgba(0,0,0,.20);
    min-height:76px;
}

.admin-brand-public{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.admin-brand-public:hover{
    text-decoration:none;
}

.admin-brand-badge{
    width:44px;
    height:44px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:1.15rem;
    color:#06121c;
    background:linear-gradient(135deg, #67e8f9, #38bdf8);
    box-shadow:0 10px 24px rgba(56,189,248,.25);
    flex:0 0 auto;
}

.admin-brand-text-wrap{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.admin-brand-main{
    color:#fff;
    font-size:1rem;
    font-weight:800;
    letter-spacing:.2px;
}

.admin-brand-sub{
    color:rgba(255,255,255,.58);
    font-size:.78rem;
    font-weight:500;
    margin-top:2px;
}

.admin-nav-links{
    gap:4px;
    margin-left:24px;
}

.admin-nav-links .nav-link{
    color:rgba(255,255,255,.80) !important;
    font-weight:600;
    padding:.7rem .95rem !important;
    border-radius:12px;
    transition:all .18s ease;
}

.admin-nav-links .nav-link:hover,
.admin-nav-links .nav-link:focus{
    color:#fff !important;
    background:rgba(255,255,255,.06);
}

.admin-user-pill{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:#dbeafe;
    font-size:.92rem;
    font-weight:600;
    white-space:nowrap;
}

.admin-logout-btn{
    height:40px;
    padding:0 16px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.admin-logout-btn:hover,
.admin-logout-btn:focus{
    color:#fff;
    background:rgba(239,68,68,.18);
    border-color:rgba(239,68,68,.24);
}

.admin-navbar-toggler{
    border-color:rgba(255,255,255,.15);
}

.admin-navbar-toggler:focus{
    box-shadow:0 0 0 .2rem rgba(56,189,248,.18);
}

@media (max-width: 991.98px){
    .admin-nav-links{
        margin-left:0;
        margin-top:14px;
    }

    .admin-navbar-right{
        margin-top:14px;
        flex-direction:column;
        align-items:stretch !important;
    }

    .admin-user-pill{
        justify-content:center;
    }

    .admin-logout-btn{
        width:100%;
    }
}