:root{
    --sg-blue:#165bff;
    --sg-blue-dark:#123cb8;
    --sg-indigo:#2a1e8c;
    --sg-cyan:#00d4ff;
    --sg-bg:#f5f7fa;
    --sg-surface:#ffffff;
    --sg-text:#1a1f2b;
    --sg-muted:#64748b;
    --sg-border:#dbe3ef;
    --sg-success:#22c55e;
    --sg-warning:#f59e0b;
    --sg-danger:#ef4444;
    --sg-radius:14px;
    --sg-shadow:0 10px 28px rgba(15,23,42,.08);
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--sg-bg);
    color:var(--sg-text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}

.sg-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:64px;
    padding:10px 3vw;
    background:var(--sg-surface);
    border-bottom:1px solid var(--sg-border);
}

.sg-brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.sg-brand img{
    width:auto;
    height:42px;
    object-fit:contain;
}

.sg-brand-text{
    min-width:0;
}

.sg-brand-title{
    display:block;
    color:var(--sg-text);
    font-size:17px;
    font-weight:900;
    line-height:1.15;
}

.sg-brand-subtitle{
    display:block;
    margin-top:2px;
    color:var(--sg-muted);
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sg-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.sg-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    padding:8px 13px;
    border:0;
    border-radius:10px;
    background:var(--sg-blue);
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}

.sg-button:hover{
    background:var(--sg-blue-dark);
}

.sg-button-secondary{
    background:#e8eef8;
    color:var(--sg-text);
}

.sg-button-secondary:hover{
    background:#dce5f2;
}

.sg-button-danger{
    background:var(--sg-danger);
}

.sg-main{
    width:min(1500px,97vw);
    margin:14px auto;
}

.sg-hero{
    padding:18px 20px;
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            var(--sg-blue),
            var(--sg-indigo)
        );
    color:#fff;
    box-shadow:var(--sg-shadow);
}

.sg-hero h1{
    margin:0 0 6px;
    font-size:30px;
    line-height:1.1;
}

.sg-hero p{
    margin:3px 0;
    opacity:.95;
}

.sg-panel{
    margin-top:12px;
    padding:14px;
    border:1px solid var(--sg-border);
    border-radius:var(--sg-radius);
    background:var(--sg-surface);
    box-shadow:0 4px 14px rgba(15,23,42,.04);
}

.sg-panel h2{
    margin:0 0 10px;
    font-size:20px;
}

.sg-card{
    padding:14px;
    border:1px solid var(--sg-border);
    border-radius:var(--sg-radius);
    background:var(--sg-surface);
}

.sg-status{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.sg-status-success{
    background:#dcfce7;
    color:#166534;
}

.sg-status-warning{
    background:#fef3c7;
    color:#92400e;
}

.sg-status-danger{
    background:#fee2e2;
    color:#991b1b;
}

.sg-status-info{
    background:#dbeafe;
    color:#1e40af;
}

input,
select,
textarea{
    border:1px solid #b8c6d9;
    border-radius:9px;
    background:#fff;
    color:var(--sg-text);
}

table{
    background:#fff;
}

th{
    background:#f1f5f9;
    color:#172033;
}

@media(max-width:700px){
    .sg-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .sg-brand img{
        height:36px;
    }

    .sg-main{
        width:min(100%,96vw);
    }

    .sg-hero h1{
        font-size:25px;
    }
}

/* Cabecera comercial común de ScoreGym */
.sg-commercial-brand{
    display:flex;
    align-items:center;
    gap:11px;
    flex-shrink:0;
}

.sg-commercial-brand img{
    display:block;
    width:auto;
    height:40px;
    max-width:190px;
    object-fit:contain;
}

.sg-commercial-copy{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.sg-commercial-name{
    color:#10213a;
    font-size:16px;
    font-weight:950;
    line-height:1.05;
}

.sg-commercial-area{
    margin-top:3px;
    color:#64748b;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}

header{
    min-height:62px;
}

header > .sg-commercial-brand{
    margin-right:auto;
}

header > .sg-commercial-brand + div{
    margin-left:8px;
}

@media(max-width:760px){
    .sg-commercial-brand img{
        height:34px;
        max-width:155px;
    }

    .sg-commercial-copy{
        display:none;
    }

    header{
        flex-wrap:wrap;
    }
}