/* =============================================
   ZATELITAL OS — STANDALONE BASE
   Shared design system for all standalone pages
   (propuesta, reunion, reporte, etc.)
   ============================================= */

/* =============================================
   DESIGN SYSTEM FONTS
   ============================================= */
@font-face {
    font-family: 'Alliance';
    src: url('../fonts/Alliance-PlattSemiBold.woff2') format('woff2'),
        url('../fonts/Alliance-PlattSemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'),
        url('../fonts/IBMPlexSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inconsolata';
    src: url('../fonts/Inconsolata-SemiExpandedSemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* =============================================
   DESIGN SYSTEM VARIABLES & RESET
   ============================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-primary: #161616;
    --color-background: #fafafa;
    --color-muted: #b7b7b7;
    --color-border: rgba(22, 22, 22, 0.1);
    --color-hover: rgba(22, 22, 22, 0.05);
    --color-surface: #ffffff;
    --font-alliance: 'Alliance', 'SF Pro Display', system-ui, sans-serif;
    --font-ibm: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'Inconsolata', monospace;
}

body {
    font-family: var(--font-ibm);
    background: var(--color-background);
    color: var(--color-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.material-icons-outlined {
    font-size: inherit;
    vertical-align: middle;
    line-height: 1;
}

/* =============================================
   LAYOUT
   ============================================= */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* =============================================
   SECTIONS (shared card component)
   ============================================= */
.section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 0.75rem;
}

.section-title {
    font-family: var(--font-alliance);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title .material-icons-outlined {
    font-size: 18px;
    color: rgba(22, 22, 22, 0.35);
}

.section-text {
    font-family: var(--font-ibm);
    font-size: 0.85rem;
    color: rgba(22, 22, 22, 0.65);
    line-height: 1.75;
    white-space: pre-line;
}

/* =============================================
   META CARDS (shared info cards)
   ============================================= */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.meta-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.meta-icon {
    font-size: 20px;
    color: var(--color-muted);
    margin-bottom: 0.5rem;
}

.meta-icon .material-icons-outlined {
    font-size: 20px;
    line-height: 1;
}

.meta-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 0.4rem;
}

.meta-value {
    font-family: var(--font-ibm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-primary);
}

.meta-value.big {
    font-family: var(--font-alliance);
    font-size: 1.35rem;
    font-weight: 600;
}

.meta-sub {
    font-family: var(--font-ibm);
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: 0.15rem;
}

/* =============================================
   BRAND HEADER (shared)
   ============================================= */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.brand-name {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* =============================================
   SPINNER
   ============================================= */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =============================================
   SHARED FOOTER
   ============================================= */
.standalone-footer {
    text-align: center;
    padding: 2.5rem 0 1.5rem;
    border-top: 1px solid var(--color-border);
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.standalone-footer svg {
    opacity: 0.35;
}

.standalone-footer p {
    font-family: var(--font-ibm);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-muted);
    letter-spacing: 0.02em;
}