/* ====== Base: colores, tipografía y elementos generales ====== */
:root {
    --azul: #001d3e;
    --azul-oscuro: #001529;
    --azul-acento: #0778fe;
    --azul-acento-oscuro: #0660cc;
    --naranja: #f8831b;
    --fondo: #f1f5f8;
    --texto: #222;
    --gris: #666;
    --borde: #ddd;
    --verde: #27ae60;
    --rojo: #c0392b;
    --amarillo: #f1c40f;
    --sombra: 0 2px 6px rgba(0, 0, 0, 0.1);
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--fondo);
    margin: 0;
    padding: 0;
    color: var(--texto);
    -webkit-text-size-adjust: 100%;
}

header {
    background-color: var(--azul);
    color: white;
    padding: 1rem 2rem;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}

main {
    padding: 2rem;
}

[hidden] { display: none !important; }   /* el atributo hidden debe ganarle a cualquier display */

img, canvas {
    max-width: 100%;
}

@media (max-width: 768px) {
    header { padding: 0.8rem 1rem; padding-top: calc(0.8rem + env(safe-area-inset-top, 0px)); }
    header h1 { font-size: 1.2rem; margin: 0; }
    main { padding: 1rem; }
}