/* Layout base - tenant 'default' (paleta Sorni Train). Mobile-first. */

/* Tipografías Sorni Train */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --st-primary:       #E97323; /* naranja Sorni */
    --st-primary-dark:  #C75F1A;
    --st-secondary:     #0E3A4A; /* teal profundo */
    --st-secondary-2:   #163E4D;
    --st-accent:        #F0BC2A; /* amarillo */
    --st-text:          #1f2937;
    --st-muted:         #6b7280;
    --st-bg:            #fafafa;
    --st-bg-alt:        #f3f4f6;
    --st-border:        #e5e7eb;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--st-text);
    background: var(--st-bg);
}
a { color: var(--st-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, .t4t-display {
    font-family: 'Bebas Neue', 'Inter', sans-serif;
    letter-spacing: .5px;
    color: var(--st-secondary);
    font-weight: 400;
}

.t4t-container { max-width: 960px; margin: 0 auto; padding: 16px; width: 100%; }
@media (max-width: 600px) {
    .t4t-container { padding: 12px; }
}

/* =====================================================================
   Branding
===================================================================== */
.t4t-brand {
    color: #fff; font-weight: 700; font-size: 1.4rem;
    font-family: 'Bebas Neue', 'Inter', sans-serif; letter-spacing: 1.5px;
    display: inline-flex; align-items: center; gap: 8px;
}
.t4t-brand:hover { text-decoration: none; color: var(--st-accent); }
.t4t-brand__dot { color: var(--st-accent); }

/* =====================================================================
   Topbar (barra superior fija)
===================================================================== */
.st-topbar {
    background: var(--st-secondary);
    color: #fff;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 0 rgba(0,0,0,.15);
    height: 56px;
}
.st-topbar__public { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.st-topbar__public a { color: #fff; font-weight: 500; }
.st-topbar__public a.t4t-btn { color: #fff; }

.st-hamburger {
    background: transparent; border: 0; color: #fff;
    font-size: 1.4rem; cursor: pointer; padding: 4px 10px;
    line-height: 1; border-radius: 6px;
}
.st-hamburger:hover { background: rgba(255,255,255,.08); }

/* Dropdown del usuario en la topbar */
.st-user { margin-left: auto; position: relative; }
.st-user > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 6px; user-select: none;
}
.st-user > summary::-webkit-details-marker { display: none; }
.st-user > summary:hover { background: rgba(255,255,255,.08); }
.st-user__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--st-primary); color: #fff; font-weight: 700; font-size: .82rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.st-user__name { font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-user__chev { font-size: .8rem; opacity: .7; }
.st-user__menu {
    position: absolute; right: 0; top: calc(100% + 4px);
    background: #fff; color: var(--st-text);
    padding: 6px; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    min-width: 200px; z-index: 60;
}
.st-user__menu a, .st-user__menu .st-user__menu-link {
    display: block; padding: 8px 12px; color: var(--st-text); border-radius: 6px;
    text-decoration: none; cursor: pointer; background: transparent; border: 0; width: 100%; text-align: left; font: inherit;
}
.st-user__menu a:hover, .st-user__menu .st-user__menu-link:hover {
    background: var(--st-bg-alt); color: var(--st-primary); text-decoration: none;
}
.st-user__menu hr { border: 0; border-top: 1px solid var(--st-border); margin: 4px 0; }

@media (max-width: 480px) {
    .st-user__name { display: none; }
}

/* =====================================================================
   Sidebar lateral
===================================================================== */
.st-sidebar {
    position: fixed;
    top: 56px; left: 0; bottom: 0;
    width: 240px;
    background: var(--st-secondary-2);
    color: #fff;
    overflow-y: auto;
    padding: 14px 10px 24px;
    z-index: 40;
    transition: transform .2s ease;
}
.st-sidebar section { margin-bottom: 18px; }
.st-sidebar h4 {
    color: var(--st-accent);
    font-family: 'Bebas Neue', 'Inter', sans-serif;
    font-size: 1rem; letter-spacing: 1.5px;
    margin: 6px 6px 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-bottom: 4px;
}
.st-sidebar a {
    display: block; padding: 7px 10px; color: #e5e7eb;
    border-radius: 6px; font-size: .92rem; font-weight: 500;
    margin: 1px 0;
}
.st-sidebar a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }

.st-backdrop {
    position: fixed; inset: 56px 0 0 0;
    background: rgba(0,0,0,.4);
    z-index: 35; display: none;
}

/* Layout principal — el <main> hermano del sidebar deja sitio al sidebar.
   Header (topbar + sidebar) y main están todos dentro de <form>, por tanto son
   hermanos directos y el combinator '~' aplica correctamente. */
.st-sidebar ~ main { padding-left: 240px; }

/* En tablets/móviles: sidebar oculto por defecto, se abre con hamburguesa */
@media (max-width: 1024px) {
    .st-sidebar { transform: translateX(-100%); width: 260px; }
    .st-sidebar.is-open { transform: translateX(0); box-shadow: 0 0 30px rgba(0,0,0,.3); }
    .st-backdrop.is-open { display: block; }
    .st-sidebar ~ main { padding-left: 0; }
}
@media (min-width: 1025px) {
    .st-hamburger { display: none; }
}