/* ═══════════════════════════════════════════════════════════
   PITAZO — Page layouts
   layout.css  ·  structural skeletons only, no colors/components
   ═══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   SPLIT LAYOUT  —  Login / Register
   ──────────────────────────────────────────────────────────── */
.layout-split {
    display: flex;
    min-height: 100vh;
}

/* Left branding panel */
.split-left {
    width: 35%;
    background: linear-gradient(145deg, #1F4E79 0%, #2E75B6 100%);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 40px;
}

/* Right form panel */
.split-right {
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;        /* centra el contenido horizontalmente */
    justify-content: flex-start;
    padding: 48px 28px;
    overflow-y: auto;
}

/* Branding panel sections */
.brand-header  { }
.brand-body    { }
.brand-footer  { display: flex; gap: 32px; }

.brand-logo         { font-size: 32px; font-weight: 900; color: white; letter-spacing: -1px; }
.brand-logo span    { color: #60B4FF; }
.brand-logo-sub     { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 2px; margin-top: 4px; }

.brand-title        { font-size: 34px; font-weight: 800; color: white; line-height: 1.2; margin-bottom: 14px; }
.brand-title span   { color: #60B4FF; }
.brand-sub          { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.6; max-width: 280px; }

.brand-features     { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.brand-feature      { display: flex; align-items: flex-start; gap: 14px; }
.brand-feat-icon    {
    width: 38px; height: 38px;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.brand-feat-text strong { display: block; font-size: 13.5px; color: white; font-weight: 600; }
.brand-feat-text span   { font-size: 12px; color: rgba(255,255,255,0.5); }

.stat-val { font-size: 26px; font-weight: 800; color: white; }
.stat-lbl { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; }


/* ────────────────────────────────────────────────────────────
   APP SHELL  —  Authenticated role dashboards
   ──────────────────────────────────────────────────────────── */

/* Sidebar */
.sidebar {
    width: 240px;
    background: var(--accent);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
}

.sidebar-header {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.sidebar-nav    { flex: 1; padding: 12px 0; }
.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

/* Main content area */
.main-wrap {
    margin-left: 240px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.topbar {
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    gap: 16px;
}

.content {
    padding: 28px 32px;
    flex: 1;
}


/* ────────────────────────────────────────────────────────────
   GRID UTILITIES
   ──────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.mb-4  { margin-bottom: 4px;  }
.mb-8  { margin-bottom: 8px;  }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }


/* ────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
    .split-left  { width: 40%; }
    .split-right { width: 60%; }
}

@media (max-width: 900px) {
    .split-left  { width: 45%; padding: 40px 32px; }
    .split-right { width: 55%; padding: 40px 28px; }
    .grid-3      { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* Split layout stacks vertically */
    .layout-split { flex-direction: column; }
    .split-left   { width: 100%; height: auto; position: static; padding: 32px 24px; }
    .split-right  { width: 100%; padding: 32px 24px; }

    /* Sidebar collapses */
    .sidebar    { transform: translateX(-100%); transition: transform 0.25s ease; }
    .main-wrap  { margin-left: 0; }
    .content    { padding: 20px 16px; }
    .topbar     { padding: 14px 16px; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}