*{box-sizing:border-box}
:root{
    --negro:#17140f;
    --oro:#d78605;
    --oro2:#efb14a;
    --crema:#fffaf2;
    --fondo:#f7f2ea;
    --card:#ffffff;
    --texto:#2f2a23;
    --suave:#7b7165;
    --borde:rgba(23,20,15,.10);
    --ok:#176b3a;
    --okbg:#e8f7ee;
    --err:#9f1d1d;
    --errbg:#fdeaea;
    --av:#7a5200;
    --avbg:#fff4d7;
    --shadow:0 14px 34px rgba(23,20,15,.08);
}
html,body{min-height:100%}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--texto);background:var(--fondo)}
a,button,input,textarea,select{font-family:inherit}
button{cursor:pointer}

/* LOGIN APP */
.login-app-body{
    min-height:100dvh;
    background:linear-gradient(180deg,#fffaf2 0%,#f4ead9 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}
.login-app{
    width:100%;
    max-width:430px;
}
.login-app.wide-login{
    max-width:720px;
}
.login-panel{
    background:var(--card);
    border:1px solid var(--borde);
    border-radius:28px;
    box-shadow:var(--shadow);
    padding:22px;
}
.login-logo-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:12px;
}
.login-logo{
    width:clamp(130px,42vw,190px);
    max-height:120px;
    object-fit:contain;
    display:block;
}
.login-copy{text-align:center;margin-bottom:18px}
.login-copy h1{
    margin:0 0 6px;
    color:var(--negro);
    font-size:clamp(24px,7vw,32px);
    letter-spacing:-.04em;
}
.login-copy p{margin:0;color:var(--suave);line-height:1.35}
.login-actions-app{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:16px;
    text-align:center;
}
.login-actions-app a{
    color:var(--negro);
    font-weight:800;
    text-decoration:none;
    padding:12px;
    border-radius:16px;
    background:#f8f1e6;
}
.logo-texto{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    color:var(--negro);
    font-weight:900;
    border:2px solid var(--oro);
    padding:12px 18px;
    border-radius:18px;
}

/* APP HEADER */
.app-body{
    background:linear-gradient(180deg,#fffaf2 0%,#f5ecdf 100%);
    min-height:100dvh;
}
.app-topbar{
    position:sticky;
    top:0;
    z-index:30;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:10px;
    align-items:center;
    padding:10px 14px;
    background:rgba(255,250,242,.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--borde);
}
.app-logo{display:flex;align-items:center;text-decoration:none}
.app-logo img{
    width:108px;
    max-height:52px;
    object-fit:contain;
    display:block;
}
.app-user{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.app-user strong{
    font-size:14px;
    color:var(--negro);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}
.app-user small{
    font-size:12px;
    color:var(--suave);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}
.app-exit{
    color:#fff;
    background:var(--negro);
    text-decoration:none;
    font-weight:900;
    padding:9px 12px;
    border-radius:14px;
    white-space:nowrap;
}
.app-nav{
    position:sticky;
    top:73px;
    z-index:25;
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:10px 14px;
    background:rgba(255,250,242,.94);
    border-bottom:1px solid var(--borde);
    -webkit-overflow-scrolling:touch;
}
.app-nav a{
    flex:0 0 auto;
    color:var(--texto);
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    padding:10px 14px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--borde);
}
.app-nav a.nav-active{
    background:var(--negro);
    color:#fff;
}

.app-main{
    max-width:900px;
    margin:0 auto;
    padding:18px 14px 36px;
}
.app-hero{
    background:linear-gradient(135deg,var(--negro),#4a3218);
    color:#fff;
    border-radius:28px;
    padding:22px;
    box-shadow:var(--shadow);
    margin-bottom:16px;
}
.app-hero span{
    color:var(--oro2);
    text-transform:uppercase;
    font-weight:900;
    font-size:12px;
    letter-spacing:.08em;
}
.app-hero h1{
    margin:10px 0 6px;
    font-size:clamp(28px,8vw,44px);
    letter-spacing:-.05em;
    line-height:1;
}
.app-hero p{margin:0;color:rgba(255,255,255,.75)}
.app-page-title{
    padding:4px 2px 14px;
}
.app-page-title h1{
    margin:0 0 6px;
    color:var(--negro);
    font-size:clamp(28px,8vw,40px);
    letter-spacing:-.05em;
    line-height:1;
}
.app-page-title p{margin:0;color:var(--suave);line-height:1.4}

.app-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.app-tile{
    display:flex;
    min-height:120px;
    flex-direction:column;
    justify-content:space-between;
    padding:18px;
    border-radius:24px;
    background:#fff;
    border:1px solid var(--borde);
    text-decoration:none;
    color:var(--texto);
    box-shadow:var(--shadow);
}
.app-tile.primary{
    grid-column:1/-1;
    background:linear-gradient(135deg,#fff,#fff6e8);
    border-color:rgba(215,134,5,.25);
}
.app-tile.admin{border-top:5px solid var(--oro)}
.app-tile strong{font-size:21px;color:var(--negro);letter-spacing:-.03em}
.app-tile p{margin:8px 0 0;color:var(--suave);line-height:1.35}

.app-card{
    background:#fff;
    border:1px solid var(--borde);
    border-radius:26px;
    box-shadow:var(--shadow);
    padding:18px;
    margin-bottom:16px;
}
.app-card h2{margin:0 0 14px;color:var(--negro);letter-spacing:-.04em}
.app-form{display:grid;gap:14px}
.app-form.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.app-form .full{grid-column:1/-1}
label{
    display:block;
    font-weight:900;
    color:var(--negro);
    font-size:14px;
    margin-bottom:6px;
}
input,select,textarea{
    width:100%;
    border:1px solid var(--borde);
    border-radius:16px;
    background:#fff;
    color:var(--texto);
    font-size:16px;
    padding:13px 14px;
    outline:none;
}
input:focus,select:focus,textarea:focus{
    border-color:var(--oro);
    box-shadow:0 0 0 4px rgba(215,134,5,.15);
}
textarea{resize:vertical}
.field-help{
    display:block;
    margin-top:6px;
    color:var(--suave);
    font-weight:800;
    font-size:13px;
}
.remember-check{
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:#fbf7ef;
    border:1px solid var(--borde);
    border-radius:16px;
    padding:12px;
    line-height:1.35;
}
.remember-check input{
    width:auto;
    margin-top:2px;
}
.remember-check span{
    color:var(--texto);
}

.btn-principal,.btn-secundario,.btn-mini{
    border:0;
    border-radius:16px;
    padding:13px 16px;
    font-weight:900;
    text-decoration:none;
}
.btn-principal{
    color:#fff;
    background:linear-gradient(135deg,var(--negro),#443425);
}
.btn-secundario{
    color:var(--negro);
    background:#fff;
    border:1px solid var(--borde);
}
.btn-mini{
    color:#fff;
    background:var(--negro);
    padding:9px 12px;
    font-size:13px;
}
.btn-mini.danger{background:#9f1d1d}
.btn-full{width:100%}

.alerta-ok,.alerta-error,.alerta-aviso{
    border-radius:18px;
    padding:13px 15px;
    font-weight:800;
    margin-bottom:14px;
}
.alerta-ok{background:var(--okbg);color:var(--ok)}
.alerta-error{background:var(--errbg);color:var(--err)}
.alerta-aviso{background:var(--avbg);color:var(--av)}
.compact-alert{margin-top:14px;margin-bottom:0}
.email-help-box{
    background:#fff8e8;
    border:1px solid rgba(215,134,5,.24);
    border-radius:18px;
    padding:14px;
    color:var(--av);
    font-weight:800;
    line-height:1.45;
    margin-bottom:14px;
}

.app-list{display:grid;gap:10px}
.app-list-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px;
    background:#fbf7ef;
    border:1px solid var(--borde);
    border-radius:20px;
}
.app-list-item.stack-item{display:grid;align-items:stretch}
.app-list-item strong{display:block;color:var(--negro);font-size:17px}
.app-list-item span,.app-list-item small{display:block;color:var(--suave);line-height:1.35}
.app-list-item p{margin:10px 0 0;color:var(--texto);line-height:1.45}
.app-tag{
    display:inline-flex;
    width:fit-content;
    margin-bottom:6px;
    color:var(--oro);
    font-weight:900;
    font-size:12px;
    text-transform:uppercase;
    font-style:normal;
}
.empty-box{
    padding:16px;
    background:#fbf7ef;
    border:1px solid var(--borde);
    border-radius:18px;
    color:var(--suave);
    font-weight:800;
}
.action-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.app-details summary{
    cursor:pointer;
    color:var(--oro);
    font-weight:900;
    margin-top:10px;
}
.compact-form{margin-top:12px}
.selection-summary{
    background:#fbf7ef;
    border:1px solid var(--borde);
    border-radius:18px;
    padding:14px;
    color:var(--texto);
    font-weight:800;
}

/* WIZARD */
.wizard-card{overflow:hidden}
.wizard-progress{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:18px;
}
.step-dot{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:#f0e6d8;
    color:var(--suave);
    font-weight:900;
}
.step-dot.active{
    background:var(--negro);
    color:#fff;
}
.step-dot.done{
    background:var(--oro);
    color:#fff;
}
.wizard-step{display:none}
.wizard-step.active{display:block}
.wizard-step h2{
    margin:0 0 6px;
    color:var(--negro);
    font-size:26px;
    letter-spacing:-.04em;
}
.step-help{margin:0 0 16px;color:var(--suave);line-height:1.4}
.option-list{display:grid;gap:10px}
.area-option{
    width:100%;
    display:grid;
    gap:4px;
    text-align:left;
    padding:16px;
    border-radius:20px;
    border:1px solid var(--borde);
    background:#fbf7ef;
    color:var(--texto);
}
.area-option strong{font-size:18px;color:var(--negro)}
.area-option span{font-size:14px;color:var(--suave);font-weight:800}
.area-option.selected{
    border-color:var(--oro);
    box-shadow:0 0 0 4px rgba(215,134,5,.15);
    background:#fff8ec;
}
.wizard-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:18px;
}
.wizard-actions #btnEnviar,
.wizard-actions #btnConfirmar{
    grid-column:1/-1;
}

.availability-box{
    border-radius:18px;
    padding:15px;
    border:1px solid var(--borde);
    background:#fbf7ef;
    color:var(--suave);
    font-weight:800;
    line-height:1.55;
}
.availability-box.good{
    background:var(--okbg);
    color:var(--ok);
    border-color:rgba(23,107,58,.22);
}
.availability-box.bad{
    background:var(--errbg);
    color:var(--err);
    border-color:rgba(159,29,29,.22);
}

/* Compatibilidad páginas anteriores */
.contenedor{max-width:900px;margin:0 auto;padding:18px 14px 36px}
.page-header,.form-card,.table-card,.info-card,.card-panel{
    background:#fff;
    border:1px solid var(--borde);
    border-radius:26px;
    box-shadow:var(--shadow);
    padding:18px;
    margin-bottom:16px;
}
.page-header h1{margin:0 0 6px;color:var(--negro)}
.page-header p{margin:0;color:var(--suave)}
.grid-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-form .full{grid-column:1/-1}
.tabla-responsive{width:100%;overflow-x:auto}
table{width:100%;min-width:720px;border-collapse:collapse}
th,td{padding:12px;border-bottom:1px solid var(--borde);text-align:left}
th{font-size:12px;text-transform:uppercase;color:var(--negro)}
td{color:var(--texto)}
.mini-form,.mini-form-inline{display:grid;gap:8px}
.muted{color:var(--suave)}

@media (max-width:720px){
    .login-app-body{
        align-items:flex-start;
        padding:12px;
    }
    .login-panel{
        border-radius:24px;
        padding:18px;
        margin-top:8px;
    }
    .login-logo{
        width:min(150px,48vw);
        max-height:92px;
    }
    .app-topbar{
        grid-template-columns:auto minmax(0,1fr) auto;
        padding:8px 10px;
    }
    .app-logo img{
        width:86px;
        max-height:42px;
    }
    .app-user strong{font-size:13px}
    .app-user small{font-size:11px}
    .app-exit{padding:8px 10px;font-size:13px}
    .app-nav{
        top:59px;
        padding:8px 10px;
    }
    .app-nav a{
        font-size:13px;
        padding:9px 12px;
    }
    .app-main{
        padding:14px 10px 30px;
    }
    .app-grid{
        grid-template-columns:1fr;
    }
    .app-form.two-cols,.grid-form,.grid-panel{
        grid-template-columns:1fr;
    }
    .app-card,.app-hero,.page-header,.form-card,.table-card,.info-card,.card-panel{
        border-radius:22px;
        padding:16px;
    }
    .wizard-actions{
        grid-template-columns:1fr;
    }
}


/* FIX LOGIN MÓVIL - LOGO Y ANCHO */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.login-app-body {
    width: 100%;
    min-height: 100dvh;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 12px !important;
    overflow-x: hidden !important;
}

.login-app {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
}

.login-panel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.login-logo-wrap {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}

.login-logo,
.login-logo-wrap img,
.login-panel img,
.login-app img,
body.login-app-body img {
    width: auto !important;
    height: auto !important;
    max-width: min(170px, 58vw) !important;
    max-height: 118px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

.login-copy h1 {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.login-copy p {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

.form-login,
.login-panel form,
.login-panel input,
.login-panel select,
.login-panel textarea,
.login-panel button {
    max-width: 100% !important;
}

@media (max-width: 720px) {
    .login-app-body {
        padding: 10px !important;
    }

    .login-app {
        max-width: 100% !important;
    }

    .login-panel {
        border-radius: 22px !important;
        padding: 16px !important;
    }

    .login-logo,
    .login-logo-wrap img,
    .login-panel img,
    .login-app img,
    body.login-app-body img {
        max-width: min(138px, 46vw) !important;
        max-height: 92px !important;
    }

    .login-copy {
        margin-bottom: 14px !important;
    }

    .login-copy h1 {
        font-size: 30px !important;
        line-height: 1.05 !important;
    }

    .login-copy p {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    .login-panel label {
        font-size: 15px !important;
    }

    .login-panel input,
    .login-panel select,
    .login-panel textarea {
        font-size: 16px !important;
        padding: 13px 14px !important;
        border-radius: 16px !important;
    }
}

@media (max-width: 390px) {
    .login-logo,
    .login-logo-wrap img,
    .login-panel img,
    .login-app img,
    body.login-app-body img {
        max-width: 120px !important;
        max-height: 82px !important;
    }

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