:root{
    --bg:#050816;
    --panel:#0b1024;
    --card:rgba(13,19,42,.94);
    --soft:rgba(255,255,255,.07);
    --border:rgba(255,255,255,.13);
    --gold:#ffb800;
    --gold2:#ffd76a;
    --cyan:#00d9ff;
    --green:#9ccc65;
    --red:#d98b8b;
    --text:#fff;
    --muted:#aab3cc;
    --dark:#070b1c;
    --radius:22px;
    --shadow:0 24px 70px rgba(0,0,0,.45);
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    min-height:100vh;
    font-family:'Segoe UI',system-ui,sans-serif;
    color:var(--text);
    background:
        linear-gradient(135deg,rgba(5,8,22,.95),rgba(5,8,22,.82)),
        url('img/Fondo.png');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

a{
    color:inherit;
}

.app{
    min-height:100vh;
    display:flex;
}

.sidebar{
    width:250px;
    min-height:100vh;
    position:fixed;
    left:0;
    top:0;
    padding:24px;
    background:rgba(5,8,22,.94);
    border-right:1px solid var(--border);
    backdrop-filter:blur(18px);
    z-index:50;
}

.brand{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:32px;
}

.brand-icon{
    width:46px;
    height:46px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    color:#111827;
    font-weight:900;
}

.brand strong{
    display:block;
    font-size:17px;
}

.brand small{
    color:var(--muted);
}

.nav{
    display:grid;
    gap:10px;
}

.nav a{
    text-decoration:none;
    padding:13px 14px;
    border-radius:14px;
    color:var(--muted);
    background:rgba(255,255,255,.04);
    transition:.2s;
    font-weight:700;
}

.nav a:hover{
    background:rgba(255,184,0,.18);
    color:#fff;
}

.nav a.danger{
    color:#ffb3b3;
}

.main{
    width:100%;
    padding:36px;
    margin-left:250px;
}

.public-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:36px;
}

.layout{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    display:flex;
    gap:28px;
    align-items:flex-start;
}

.layout-column{
    flex-direction:column;
}

.card,
.calendar-card{
    background:linear-gradient(180deg,rgba(15,22,48,.96),rgba(7,11,28,.94));
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
    padding:28px;
}

.card{
    flex:1;
    min-width:300px;
}

.calendar-card{
    width:310px;
    min-width:310px;
}

.login-card{
    width:100%;
    max-width:460px;
    margin:60px auto;
}

.page-title{
    margin:0 0 8px;
    font-size:30px;
    font-weight:900;
    letter-spacing:-.04em;
    background:linear-gradient(90deg,#fff,var(--gold2));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.subtitle{
    color:var(--muted);
    margin:0 0 22px;
}

h3,h4{
    margin-top:0;
}

label{
    display:block;
    margin-bottom:7px;
    color:var(--muted);
    font-size:14px;
    font-weight:800;
}

input,
select,
textarea{
    width:100%;
    padding:14px 15px;
    margin-bottom:15px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--soft);
    color:#fff;
    outline:none;
    font-size:15px;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(255,184,0,.14);
}

input::placeholder,
textarea::placeholder{
    color:rgba(255,255,255,.42);
}

select option{
    background:#0b1024;
    color:#fff;
}

.btn,
button{
    border:0;
    border-radius:14px;
    padding:13px 18px;
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    color:#111827;
    font-weight:900;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:.25s;
    box-shadow:0 12px 28px rgba(255,184,0,.25);
}

.btn:hover,
button:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 38px rgba(255,184,0,.34);
}

.btn-danger{
    background:linear-gradient(135deg,#d9534f,#ff8a80);
    color:#fff;
}

.btn-dark{
    background:#111827;
    color:#fff;
}

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

.alert{
    padding:13px 15px;
    border-radius:14px;
    margin-bottom:16px;
    font-weight:800;
}

.alert-danger{
    background:rgba(217,83,79,.18);
    border:1px solid rgba(217,83,79,.45);
    color:#ffb3b3;
}

.alert-success{
    background:rgba(117,197,110,.18);
    border:1px solid rgba(117,197,110,.45);
    color:#d7ffd0;
}

.calendar-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.calendar-head a{
    text-decoration:none;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(255,255,255,.07);
}

.weekdays,
.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:7px;
}

.weekdays{
    margin-bottom:8px;
    color:var(--muted);
    font-size:12px;
    font-weight:900;
    text-align:center;
}

.day{
    min-height:38px;
    padding:9px 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:12px;
    background:rgba(255,255,255,.07);
    color:var(--muted);
    font-size:14px;
    font-weight:900;
    transition:.2s;
}

.day:hover{
    background:rgba(255,184,0,.25);
    color:#fff;
}

.day.selected{
    background:linear-gradient(135deg,var(--gold),var(--gold2)) !important;
    color:#111827 !important;
}

.day.available{
    background:rgba(156,204,101,.28);
    color:#d9ffd0;
}

.day.full,
.day.past{
    background:rgba(217,139,139,.25);
    color:#ffd7d7;
}

.day.disabled{
    background:rgba(255,255,255,.05);
    color:#66708a;
    pointer-events:none;
}

.legend{
    margin-top:18px;
    display:grid;
    gap:8px;
    color:var(--muted);
    font-size:13px;
}

.legend-item{
    display:flex;
    gap:8px;
    align-items:center;
}

.dot{
    width:14px;
    height:14px;
    border-radius:4px;
}

.dot.gold{background:var(--gold);}
.dot.green{background:var(--green);}
.dot.red{background:var(--red);}
.dot.gray{background:#66708a;}

.slot{
    display:flex;
    overflow:hidden;
    border-radius:16px;
    border:1px solid var(--border);
    margin-bottom:12px;
    background:rgba(255,255,255,.06);
}

.slot-time{
    width:155px;
    padding:16px;
    background:#050816;
    color:var(--gold);
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.slot-info{
    flex:1;
    padding:16px;
}

.slot.free{
    background:rgba(255,255,255,.06);
}

.slot.busy{
    background:rgba(156,204,101,.18);
}

.slot.done{
    background:rgba(255,184,0,.18);
}

.hours-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin:15px 0 20px;
}

.hour-box{
    background:rgba(255,255,255,.07);
    border:1px solid var(--border);
    color:#fff;
    padding:13px;
    border-radius:14px;
    text-align:center;
    cursor:pointer;
    font-weight:800;
}

.hour-box:hover,
.hour-box.saved{
    background:rgba(255,184,0,.22);
    border-color:var(--gold);
}

.hour-box.busy{
    opacity:.55;
    cursor:not-allowed;
}

.table{
    width:100%;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:16px;
}

.table th,
.table td{
    padding:13px;
    border-bottom:1px solid var(--border);
    text-align:left;
}

.table th{
    color:var(--gold);
    font-size:13px;
    text-transform:uppercase;
}

.badge{
    padding:5px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    background:rgba(255,255,255,.1);
}

.badge.ok{
    background:rgba(156,204,101,.22);
    color:#d9ffd0;
}

.badge.warn{
    background:rgba(255,184,0,.22);
    color:#ffe7a8;
}

.badge.danger{
    background:rgba(217,139,139,.22);
    color:#ffd7d7;
}

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    align-items:center;
    justify-content:center;
    z-index:999;
    padding:18px;
}

.modal-box{
    width:100%;
    max-width:420px;
    background:linear-gradient(180deg,#111936,#080d22);
    border:1px solid var(--border);
    border-radius:22px;
    padding:24px;
    box-shadow:var(--shadow);
}

.nav-link-card{display:block;text-decoration:none;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);margin-bottom:8px;color:#fff;font-weight:800;}
.nav-link-card:hover{background:rgba(255,184,0,.18);}

@media(max-width:1000px){
    .sidebar{
        position:relative;
        width:100%;
        min-height:auto;
    }

    .app{
        display:block;
    }

    .main{
        margin-left:0;
        padding:20px;
    }

    .layout{
        flex-direction:column;
    }

    .calendar-card{
        width:100%;
        min-width:100%;
    }
}

@media(max-width:768px){
    body{
        background-attachment:scroll;
    }

    .public-page{
        padding:16px;
    }

    .card,
    .calendar-card{
        padding:20px;
    }

    .page-title{
        font-size:24px;
        text-align:center;
    }

    .slot{
        flex-direction:column;
    }

    .slot-time{
        width:100%;
    }

    .hours-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .actions,
    button,
    .btn{
        width:100%;
    }

    .table{
        font-size:13px;
    }
}
.check-group{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:10px;
    margin:8px 0 18px;
}

.check-group label{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    min-height:46px;
    margin:0;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    color:#fff;
    cursor:pointer;
    font-size:14px;
    font-weight:700;
    line-height:1.25;
}

.check-group input[type="checkbox"]{
    width:18px;
    height:18px;
    min-width:18px;
    margin:0;
    accent-color:var(--gold);
}

.check-group label:has(input:checked){
    border-color:var(--gold);
    background:rgba(255,184,0,.18);
    color:#fff;
    box-shadow:0 0 0 3px rgba(255,184,0,.08);
}

.form-section{
    margin-top:26px;
    padding-top:22px;
    border-top:1px solid var(--border);
}

.form-section h3{
    margin:0 0 14px;
    color:var(--gold);
    font-size:18px;
}

.field-help{
    display:block;
    margin:-8px 0 12px;
    color:var(--muted);
    font-size:12px;
}
.history-box{
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(255,255,255,.05);
    margin-bottom:12px;
    overflow:hidden;
}

.history-box summary{
    list-style:none;
    cursor:pointer;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    font-weight:800;
}

.history-box summary::-webkit-details-marker{
    display:none;
}

.history-content{
    padding:0 15px 15px;
    color:#fff;
}

.history-box[open] summary{
    border-bottom:1px solid var(--border);
    background:rgba(255,184,0,.08);
}