/* PEAD Docentes: capa de marca común a todas las páginas (se carga al final). */
:root {
    --pead-marino: #113871;
    --pead-marino-oscuro: #0a2246;
    --pead-turquesa: #57bdb9;
    --pead-rosado: #e96493;
    --pead-amarillo: #fbbb1b;
    --pead-celeste: #36cbfd;
    --pead-tinta: #1d2b44;
    --pead-fondo: #f5f7fb;
}

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Dosis', system-ui, sans-serif;
    font-weight: 500;
    color: var(--pead-tinta);
    font-feature-settings: 'lnum' 1;
}
h1, h2, h3, h4, .font-bold { letter-spacing: .005em; }
h1, h2, h3 { text-wrap: balance; }
input, select, textarea, button { font-family: inherit; }
textarea, .result, .md, .lectura { font-weight: 500; }
table td, table th { font-variant-numeric: tabular-nums; }

/* Sello: la franja tricolor del sitio del PEAD, una sola vez, arriba de cada pantalla */
body::before {
    content: '';
    position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 60; pointer-events: none;
    background: linear-gradient(90deg,
        var(--pead-turquesa) 0 33.33%, var(--pead-amarillo) 33.33% 66.66%, var(--pead-rosado) 66.66% 100%);
}

/* Superficies del navegador */
::selection { background: rgba(251, 187, 27, .45); color: var(--pead-marino-oscuro); }
* { caret-color: var(--pead-marino); }
:focus-visible { outline: 2px solid var(--pead-marino); outline-offset: 2px; border-radius: 6px; }
a { text-underline-offset: 3px; }
* { scrollbar-width: thin; scrollbar-color: #b7c3d6 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #b7c3d6; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #8aa7d4; background-clip: content-box; }

/* Vocabulario de botones y campos único en todas las herramientas */
.btn { font-weight: 700; letter-spacing: .01em; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.btn-main { background: var(--pead-marino) !important; color: #fff !important; border: 1px solid var(--pead-marino); }
.btn-main:hover { background: var(--pead-marino-oscuro) !important; }
.btn-main:disabled { opacity: .45; cursor: not-allowed; }
.btn-sec { background: #fff !important; color: var(--pead-marino) !important; border: 1px solid #c5d2e6 !important; }
.btn-sec:hover { background: #eef3fa !important; border-color: #8aa7d4 !important; }
.field { font-weight: 500; }
.field:focus { box-shadow: 0 0 0 2px rgba(17, 56, 113, .35) !important; border-color: var(--pead-marino) !important; }
.lbl, .mini { letter-spacing: .04em !important; color: #4b5a75 !important; }

/* Profundidad: sombras con desplazamiento y desenfoque suave */
.shadow-sm { box-shadow: 0 1px 2px rgba(17, 56, 113, .06), 0 1px 1px rgba(17, 56, 113, .04) !important; }
.shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: 0 12px 28px -12px rgba(10, 34, 70, .28), 0 2px 6px rgba(10, 34, 70, .06) !important; }