/* Cake Platform — UI base del Sprint 01 (valida arquitectura, no diseño). */
:root {
    --plum: #3B2233;
    --raspberry: #8E2C55;
    --icing: #FBF6F8;
    --line: #E8DCE2;
    --muted: #76636F;
    --ok: #2F7A57;
    --down: #B3261E;
    --font: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--icing);
    color: var(--plum);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
}

a { color: var(--raspberry); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--raspberry); outline-offset: 2px; }

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.brand {
    color: var(--plum);
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
}

.lang-switch { display: flex; align-items: center; gap: .375rem; color: var(--muted); }

.lang-switch button {
    border: 0;
    background: none;
    padding: .25rem .375rem;
    font: inherit;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-radius: 4px;
}

.lang-switch button[aria-pressed="true"] { color: var(--raspberry); text-decoration: underline; text-underline-offset: 4px; }

.site-main {
    flex: 1;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: clamp(2rem, 8vh, 5rem) clamp(1rem, 4vw, 2.5rem);
}

h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.1; letter-spacing: -.01em; }

.status-line { display: flex; align-items: center; gap: .5rem; margin: 0 0 2rem; font-size: 1.125rem; }

.dot { display: inline-block; width: .625rem; height: .625rem; border-radius: 50%; flex: none; }
.dot--ok { background: var(--ok); }
.dot--down { background: var(--down); }

.facts { margin: 0; border-top: 1px solid var(--line); }
.facts > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 0;
    border-bottom: 1px solid var(--line);
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; display: flex; align-items: center; gap: .5rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.error-code { margin: 0; font-size: 1rem; font-weight: 700; color: var(--raspberry); }

.debug { margin-top: 2rem; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.debug pre { overflow-x: auto; font-size: .8125rem; white-space: pre-wrap; }

.site-footer {
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .875rem;
}

@media (max-width: 30rem) {
    .facts > div { flex-direction: column; gap: .125rem; }
}