/* =====================================================================
   JesusLitruS · Estilo común para la ayuda y las políticas de todas las apps
   ---------------------------------------------------------------------
   - Se adapta solo al modo claro u oscuro del dispositivo.
   - Los colores propios de cada app (--accent, --heading, --link) se
     definen en <app>/app.css, que se carga DESPUÉS de este archivo.
   - Tipos de página:
       <body class="menu">  → menú centrado (portada de una app)
       <body>               → documento (políticas, ayuda)
   ===================================================================== */

/* ---------- Colores: modo claro ---------- */
:root {
    color-scheme: light dark;
    --bg: #f6f7fa;
    --bg-header: #ffffff;
    --fg: #1b1d22;          /* títulos y texto fuerte */
    --text: #2a2d35;        /* texto normal */
    --muted: #5b6170;       /* textos secundarios (.hint) */
    --faint: #7a8090;       /* pie de página */
    --line: #e3e6ee;
    --line-strong: #d5d9e3;
    --btn: #ffffff;
    --btn-border: #d5d9e3;
    --btn-hover: #eef1f7;
    --card: #ffffff;

    /* Valores por defecto; cada app los cambia en su app.css */
    --accent: #4a49d6;
    --heading: #1b1d22;
    --link: #3a39c4;
}

/* ---------- Colores: modo oscuro ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f0f0f;
        --bg-header: #000000;
        --fg: #eaeaea;
        --text: #dddddd;
        --muted: #aaaaaa;
        --faint: #777777;
        --line: #222222;
        --line-strong: #333333;
        --btn: #222222;
        --btn-border: #3a3a3a;
        --btn-hover: #333333;
        --card: #181818;

        --accent: #5b5ae6;
        --heading: #eaeaea;
        --link: #9d9cff;
    }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.6;
}

a { color: var(--link); }

/* ---------- Cabecera ---------- */
header {
    padding: 24px 20px;
    text-align: center;
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
}
header h1 { margin: 0; color: var(--accent); font-size: 25px; line-height: 1.3; }

/* ---------- Contenido ---------- */
section { padding: 20px; max-width: 900px; margin: auto; }

h2 {
    color: var(--heading);
    margin-top: 40px;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 6px;
    line-height: 1.3;
}
h3 { color: var(--fg); margin-top: 28px; }
p, ul, ol { color: var(--text); margin: 12px 0; }
ul, ol { padding-left: 32px; }
li { margin: 7px 0; }

.hint    { color: var(--muted); font-size: 14px; }
.tr-note { color: var(--muted); font-size: 13px; font-style: italic; }

/* Recuadro destacado ("En resumen", avisos…) */
.summary {
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 16px 0;
    color: var(--text);
}
/* Recuadro "en preparación" */
.pending {
    background: var(--card);
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
    color: var(--muted);
}

/* Capturas de pantalla */
.image-block { margin: 16px 0 28px; text-align: center; }
.image-block img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--line-strong);
}

/* ---------- Botones y navegación ---------- */
.button {
    display: inline-block;
    padding: 11px 17px;
    border-radius: 9px;
    text-decoration: none;
    color: var(--fg);
    background: var(--btn);
    border: 1px solid var(--btn-border);
    font-weight: 600;
}
.button:hover, .button:focus-visible { background: var(--btn-hover); }

.top-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 18px 20px 0;
    max-width: 900px;
    margin: auto;
}

.return-home { max-width: 900px; margin: 36px auto 0; padding: 0 20px; text-align: center; }

/* ---------- Pie de página ---------- */
footer {
    text-align: center;
    padding: 24px;
    font-size: 13px;
    color: var(--faint);
    border-top: 1px solid var(--line);
    margin-top: 40px;
}

.app-brand-icon {
    width: 1.25em; height: 1.25em;
    object-fit: contain;
    vertical-align: -0.22em;
    margin-right: 0.28em;
    border-radius: 0.18em;
}
.corporate-logo {
    width: 1.15em; height: 1.15em;
    object-fit: contain;
    vertical-align: -0.22em;
    margin: 0 0.25em 0 0.08em;
}

/* ---------- Selector de idioma (lo crea comun/idioma.js) ---------- */
.lang-bar { display: flex; justify-content: flex-end; max-width: 900px; margin: 0 auto; }
.lang-top { position: fixed; z-index: 5; top: 12px; right: 12px; }
.lang-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.lang-wrap select {
    background: var(--btn);
    color: var(--fg);
    border: 1px solid var(--btn-border);
    border-radius: 9px;
    padding: 7px 10px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.lang-wrap select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Botón "← Todas las apps" (menú de cada app → portada) */
.back-top {
    position: fixed; z-index: 6; top: 12px; left: 12px;   /* por encima de la barra de idioma */
    padding: 7px 12px;
    border-radius: 9px;
    background: var(--btn);
    border: 1px solid var(--btn-border);
    color: var(--fg);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.back-top:hover, .back-top:focus-visible { background: var(--btn-hover); }

/* ---------- Página tipo menú (portada de cada app) ---------- */
body.menu { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.menu .container { width: min(92%, 430px); text-align: center; padding: 30px 20px; }
.menu h1 { color: var(--accent); margin-bottom: 10px; }
.menu .container > p { color: var(--muted); margin-bottom: 28px; }
.menu .button { display: block; margin: 13px auto; padding: 15px 20px; border-radius: 10px; font-weight: 700; font-size: 16px; }
.menu .button img { width: 28px; height: 28px; border-radius: 6px; vertical-align: middle; margin-right: 8px; }
.menu footer { border-top: 0; margin-top: 35px; padding: 0; font-size: 12px; }

/* ---------- Móvil ---------- */
@media (max-width: 520px) {
    .lang-top { position: static; text-align: right; padding: 10px 12px 0; }
    .back-top { position: absolute; top: 10px; left: 12px; }
    .menu .lang-top { align-self: stretch; }
    .menu .lang-wrap > span { display: none; }   /* deja sitio al botón "Todas las apps" */
    body.menu { flex-direction: column; justify-content: flex-start; }
    .menu .container { margin: auto; }
    header { padding: 16px 12px; }
}