:root{
    --io-navy:#08283a;
    --io-blue:#0b6f8f;
    --io-cyan:#18a8c2;
    --io-cyan-light:#7dd7e6;
    --io-ice:#edf8fb;
    --io-ice-2:#f6fbfd;
    --io-line:#cce8ef;
    --io-text:#163646;
    --io-muted:#637b87;
    --io-white:#ffffff;
    --io-shadow:0 18px 46px rgba(8,40,58,.12);
}

/* Identidad común de Informáticos Online. Este CSS NO se carga en Focus. */
.io-branded-body{
    color:var(--io-text);
    background:
        radial-gradient(circle at 10% 0%, rgba(24,168,194,.15), transparent 34rem),
        linear-gradient(180deg,var(--io-ice-2) 0%,#fff 52%,var(--io-ice) 100%);
}

.io-brand-link{display:block;width:100%;text-align:center;text-decoration:none}
.io-brand-logo-large{display:block;max-width:min(100%,360px);height:auto;margin:0 auto 24px}
.io-brand-logo-small{display:block;width:100px;height:auto;max-height:72px;object-fit:contain;margin:0 auto}

.io-footer{
    margin-top:auto;
    border-top:1px solid var(--io-line);
    background:rgba(255,255,255,.92);
    box-shadow:0 -10px 30px rgba(8,40,58,.04);
}
.io-footer__inner{
    width:min(1180px,calc(100% - 40px));
    margin:0 auto;
    padding:24px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.io-footer__brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--io-text);text-decoration:none}
.io-footer__text{display:flex;flex-direction:column;align-items:center;gap:3px}
.io-footer__text strong{color:var(--io-navy);font-size:15px}
.io-footer__text span{color:var(--io-muted);font-size:13px}

/* Componentes generales */
.io-card,.card{
    border-color:var(--io-line)!important;
}
.io-card{background:#fff;box-shadow:var(--io-shadow)}

.io-corporate-link,a.io-corporate-link{color:var(--io-blue)}
.io-corporate-link:hover,a.io-corporate-link:hover{color:var(--io-cyan)}

/* Bootstrap / Taller */
.io-navbar,
.navbar.bg-dark{
    background:linear-gradient(110deg,var(--io-navy),var(--io-blue))!important;
}
.navbar .navbar-brand{letter-spacing:.03em}
.navbar .btn-outline-secondary{color:#fff;border-color:rgba(255,255,255,.55)}
.navbar .btn-outline-secondary:hover{background:#fff;color:var(--io-blue);border-color:#fff}

/* Los botones de Taller conservan los colores Bootstrap originales (verde, rojo, gris, etc.)
   porque transmiten información visual. Solo la estructura general usa la identidad corporativa. */
.form-control:focus,.form-select:focus{
    border-color:var(--io-cyan);
    box-shadow:0 0 0 .25rem rgba(24,168,194,.16);
}
.table thead th{color:var(--io-navy)!important;background:var(--io-ice)!important}
.card-header{background:var(--io-ice-2)!important;color:var(--io-navy)}
.badge.text-bg-secondary{background-color:var(--io-blue)!important}

.workflow-menu{background:linear-gradient(180deg,#fff,var(--io-ice-2))!important}
.workflow-item{border-color:var(--io-line)!important;background:#fff!important;color:var(--io-text)!important}
.workflow-item:hover{background:var(--io-ice)!important;color:var(--io-navy)!important;border-color:var(--io-cyan-light)!important}
.workflow-item.active{background:linear-gradient(135deg,var(--io-blue),var(--io-cyan))!important;border-color:var(--io-blue)!important;color:#fff!important}
.workflow-number,.module-step{background:var(--io-navy)!important}
.workflow-item.active .workflow-number{background:#fff!important;color:var(--io-blue)!important}
.module-card{border-top-color:var(--io-blue)!important}
.module-card-red{border-top-color:var(--io-cyan)!important}

/* Botón flotante de vuelta al portfolio: el componente compartido conserva su aspecto en Focus,
   porque esta regla solo existe en páginas que cargan corporate.css. */
a[title="Volver a proyectos"]{
    background:linear-gradient(135deg,var(--io-blue),var(--io-cyan))!important;
    border-color:rgba(255,255,255,.28)!important;
    box-shadow:0 12px 30px rgba(11,111,143,.30)!important;
}
a[title="Volver a proyectos"]:hover{filter:brightness(.94)}

/* Reservas */
.reservas-shell{min-height:100vh;display:flex;flex-direction:column}
.reservas-shell .page{width:100%}
.reservas-shell .card{box-shadow:var(--io-shadow)!important}
.reservas-shell .btn{
    background:linear-gradient(135deg,var(--io-blue),var(--io-cyan))!important;
    color:#fff!important;
}
.reservas-shell .btn.secondary{
    background:#fff!important;
    color:var(--io-blue)!important;
    border-color:var(--io-cyan-light)!important;
}
.reservas-shell .btn.secondary:hover{background:var(--io-ice)!important}
.reservas-shell input:focus,.reservas-shell select:focus,.reservas-shell textarea:focus{
    border-color:var(--io-cyan)!important;
    outline:none;
    box-shadow:0 0 0 3px rgba(24,168,194,.13)!important;
}
.reservas-shell .reserva-widget{--rw-primary:var(--io-blue)!important}

@media(max-width:720px){
    .io-footer__inner{padding:20px 0}
}


/* Logos del selector de proyectos */
.card-logo{
    position:absolute;
    top:14px;
    left:18px;
    width:52px;
    height:52px;
    object-fit:contain;
    z-index:3;
}
.card-logo-focus{width:40px;height:40px;top:20px;left:24px}
.card-shell .num{position:absolute;top:30px;left:82px;z-index:3}
.card-shell .card h2{margin-top:58px}

@media(max-width:700px){
    .card-logo,
    .card-logo-focus{
        width:35px;
        height:35px;
        top:18px;
        left:18px;
    }
    .card-shell .num{
        top:28px;
        left:64px;
    }
}