/* Base visual compartida */
:root {
    --app-ink: #13231f;
    --app-ink-soft: #263a34;
    --app-surface: #f5f7f2;
    --app-panel: #ffffff;
    --app-line: #dfe5d8;
    --app-muted: #66746d;
    --app-green: #236b4f;
    --app-green-dark: #164534;
    --app-gold: #d6a23a;
    --app-red: #d83b32;
    --app-blue: #2e6f9e;
    --app-ink-rgb: 19, 35, 31;
    --app-green-rgb: 35, 107, 79;
    --app-shadow-sm: 0 8px 18px rgba(var(--app-ink-rgb), 0.08);
    --app-shadow-md: 0 14px 34px rgba(var(--app-ink-rgb), 0.12);
    --app-radius-sm: 6px;
    --app-radius-md: 8px;
    --app-radius-lg: 10px;
}

* {
    letter-spacing: 0;
}

html {
    min-height: 100%;
    background: var(--app-surface);
}

body {
    min-height: 100vh;
    color: var(--app-ink);
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

a {
    color: var(--app-green);
}

a:hover {
    color: var(--app-green-dark);
}

.app-shell {
    min-height: 100vh;
}

.app-container {
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
}

.app-muted {
    color: var(--app-muted) !important;
}

.app-surface {
    background: var(--app-surface) !important;
}

.app-panel {
    background: var(--app-panel) !important;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-md);
    box-shadow: var(--app-shadow-sm);
}

@media (max-width: 768px) {
    .app-container {
        width: min(100% - 20px, 1280px);
    }
}