



@font-face {
  font-family: 'EB Garamond';          
  src: url('/static/fonts/eb-garamond-latin-italic.woff2') format('woff2');
  font-weight: 400 600; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';          
  src: url('/static/fonts/eb-garamond-latin-ext-italic.woff2') format('woff2');
  font-weight: 400 600; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';          
  src: url('/static/fonts/eb-garamond-greek-italic.woff2') format('woff2');
  font-weight: 400 600; font-style: italic; font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'EB Garamond';          
  src: url('/static/fonts/eb-garamond-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';          
  src: url('/static/fonts/eb-garamond-latin-ext.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';          
  src: url('/static/fonts/eb-garamond-greek.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Public Sans';          
  src: url('/static/fonts/public-sans-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';          
  src: url('/static/fonts/public-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  
  
  --navy:        #123A60;   
  --navy-hondo:  #0C2843;   
  --navy-medio:  #245E8F;   
  
  --navy-noche:  #081B2D;   

  
  --sobre-oscuro:       #D7DDE0;   
  --sobre-oscuro-tenue: #A6B4C0;   

  
  --oro:         #C0A252;   
                            
                            
  --oro-claro:   #C6B685;   
  --oro-hondo:   #7A6520;   
                            
                            
                            
                            

  
  --papel:       #FBFAF7;
  --pergamino:   #F4EFE6;
  --tinta:       #1F2430;   
  --tinta-suave: #5B6473;   
  --filete:      #E3DED4;   

  
  --correcto:    #2E6B4F;   
  
  --correcto-hondo: #245540; 
  --atencion:    #8A5A21;   
  --error:       #9B2C2C;   
  --aviso:       #245E8F;   

  
  --correcto-tenue: #EBF7F1;
  --error-tenue:    #F8EAEA;
  --atencion-tenue: #F8F2EA;

  
  --navy-rgb:  18, 58, 96;
  --navy-medio-rgb: 36, 94, 143;   
  --oro-rgb:   192, 162, 82;
  --tinta-rgb: 31, 36, 48;
  --ia-rgb:    84, 80, 147;
  --correcto-rgb: 46, 107, 79;   
  --tinta-suave-rgb: 91, 100, 115;  
  
  --navy-hondo-rgb: 12, 40, 67;
  --error-rgb:      155, 44, 44;
  --atencion-rgb:   138, 90, 33;

  
  --ia:          #5F5AA0;   

  
  --pareja-1: #6F472A;  
  --pareja-2: #7B822B;  
  --pareja-3: #238B8B;  
  --pareja-4: #3D5B71;  
  --pareja-5: #281E8F;  
  --pareja-6: #421C4A;  
  --pareja-1-fondo: #F5ECE5;
  --pareja-2-fondo: #F5F6E4;
  --pareja-3-fondo: #E3F7F7;
  --pareja-4-fondo: #E8EEF2;
  --pareja-5-fondo: #E5E3F7;
  --pareja-6-fondo: #F2E5F5;

  
  --tipo-institucional: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --tipo-lectura:       'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --tipo-interfaz:      'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  
  --tipo-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  
  --radio-xs:  4px;   
  --radio-s:   6px;   
  --radio-m:   8px;   
  --radio-l:  12px;   
  --radio-xl: 16px;   
  --radio-2xl: 20px;  
  --radio-3xl: 32px;  
  --radio-pastilla: 999px;   

  
  --sombra-1: 0 1px 2px rgba(var(--navy-hondo-rgb), .08);
  --sombra-2: 0 4px 8px -2px rgba(var(--navy-hondo-rgb), .12);
  --sombra-3: 0 10px 20px -4px rgba(var(--navy-hondo-rgb), .16);
  --sombra-4: 0 20px 40px -8px rgba(var(--navy-hondo-rgb), .22);

  
  --t-interfaz:  0.95rem;   
  --lh-interfaz: 1.5;

  
  --t-xs:   0.6875rem;  
  --t-s:    0.75rem;    
  --t-sm:   0.8125rem;  
  --t-m:    0.875rem;   
  --t-base: 1rem;       
  --t-l:    1.125rem;   
  --t-xl:   1.25rem;    
  --t-2xl:  1.5rem;     
  --t-3xl:  1.75rem;    
  --t-4xl:  2rem;       

  
  --tactil-min:  44px;
}


html[lang="zh"] {
  --tipo-institucional: 'Noto Serif SC', 'Songti SC', 'SimSun', 'Noto Serif CJK SC', serif;
  --tipo-lectura:       'Noto Serif SC', 'Songti SC', 'SimSun', 'Noto Serif CJK SC', serif;
  --tipo-interfaz:      'Noto Sans SC', system-ui, sans-serif;
}


[data-modo="sepia"] {
  --papel:       #F2E9D6;
  --pergamino:   #E8DCC2;
  --tinta:       #2E2823;   
  --tinta-suave: #5C5448;   
  --filete:      #DACEB2;

  
  --ia:          #545093;   

  --oro-hondo:   #6E5A1C;   
  --atencion:    #7E5220;   
  --correcto:    #2A6349;   

  
  --correcto-tenue: #DBF0E6;
  --error-tenue:    #F2D9D9;
  --atencion-tenue: #F2E6D9;
}




.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--navy-medio);
  box-shadow: none;
}


:focus-visible:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--papel);
}


.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--papel), 0 0 0 0.25rem rgba(var(--navy-rgb), 0.5);
}




:root {
  --bs-body-bg: var(--papel);
  --bs-body-color: var(--tinta);
  --bs-emphasis-color: var(--tinta);
  --bs-border-color: var(--filete);
  --bs-secondary-bg: var(--pergamino);

  
  --bs-border-radius:      var(--radio-s);
  --bs-border-radius-sm:   var(--radio-xs);
  --bs-border-radius-lg:   var(--radio-m);
  --bs-border-radius-xl:   var(--radio-xl);
  --bs-border-radius-xxl:  var(--radio-3xl);
  --bs-border-radius-pill: var(--radio-pastilla);
  --bs-tertiary-bg: var(--pergamino);
  
  --bs-dropdown-header-color: var(--tinta-suave);   

  --bs-link-color: var(--navy-medio);

  
  --bs-code-color: var(--navy-hondo);
  --bs-link-color-rgb: var(--navy-medio-rgb);
  --bs-link-hover-color: var(--navy);
  --bs-link-hover-color-rgb: var(--navy-rgb);
}


.text-warning { color: var(--atencion) !important; }   
.text-info    { color: var(--aviso)    !important; }   
.text-success { color: var(--correcto) !important; }   
.text-danger  { color: var(--error)    !important; }   


.text-white-50 { color: var(--sobre-oscuro-tenue) !important; }


.badge.bg-warning,
.badge.bg-info { color: var(--tinta); }


:root {
  --bs-secondary: var(--tinta-suave);
  --bs-secondary-rgb: var(--tinta-suave-rgb);

  
  --bs-primary: var(--navy-medio);
  --bs-primary-rgb: var(--navy-medio-rgb);

  
  --bs-success: var(--correcto);
  --bs-success-rgb: var(--correcto-rgb);
  --bs-danger: var(--error);
  --bs-danger-rgb: var(--error-rgb);
}


.btn-outline-success {
  --bs-btn-color: var(--correcto);
  --bs-btn-border-color: var(--correcto);
  --bs-btn-hover-bg: var(--correcto);
  --bs-btn-hover-border-color: var(--correcto);
  --bs-btn-active-bg: var(--correcto-hondo);
  --bs-btn-active-border-color: var(--correcto-hondo);
  --bs-btn-disabled-color: var(--tinta-suave);
  --bs-btn-disabled-border-color: var(--filete);
}

.btn-outline-danger {
  --bs-btn-color: var(--error);
  --bs-btn-border-color: var(--error);
  --bs-btn-hover-bg: var(--error);
  --bs-btn-hover-border-color: var(--error);
  --bs-btn-disabled-color: var(--tinta-suave);
  --bs-btn-disabled-border-color: var(--filete);
}

.btn-outline-info {
  --bs-btn-color: var(--aviso);
  --bs-btn-border-color: var(--aviso);
  --bs-btn-hover-bg: var(--aviso);
  --bs-btn-hover-border-color: var(--aviso);
  --bs-btn-disabled-color: var(--tinta-suave);
  --bs-btn-disabled-border-color: var(--filete);
}



.dropdown-menu {
  --bs-dropdown-header-color: var(--tinta-suave);
  --bs-dropdown-bg: var(--papel);
  --bs-dropdown-link-color: var(--tinta);
}

.btn-primary {
  --bs-btn-border-color: var(--navy-medio);
  --bs-btn-hover-border-color: var(--navy);
  --bs-btn-active-border-color: var(--navy);
}

.btn-outline-primary {
  --bs-btn-color: var(--navy-medio);
  --bs-btn-border-color: var(--navy-medio);
  --bs-btn-hover-bg: var(--navy-medio);
  --bs-btn-hover-border-color: var(--navy-medio);
  --bs-btn-active-bg: var(--navy);
  --bs-btn-active-border-color: var(--navy);
  
  --bs-btn-disabled-color: var(--tinta-suave);
  --bs-btn-disabled-border-color: var(--filete);
}

.btn-outline-secondary {
  --bs-btn-color: var(--tinta-suave);
  --bs-btn-border-color: var(--tinta-suave);
  --bs-btn-hover-bg: var(--tinta-suave);
  --bs-btn-hover-border-color: var(--tinta-suave);
  --bs-btn-active-bg: var(--tinta-suave);
  --bs-btn-active-border-color: var(--tinta-suave);
  
  --bs-btn-disabled-color: var(--tinta-suave);
  --bs-btn-disabled-border-color: var(--filete);
}

.btn-secondary {
  --bs-btn-bg: var(--tinta-suave);
  --bs-btn-border-color: var(--tinta-suave);
  --bs-btn-hover-bg: var(--tinta);
  --bs-btn-hover-border-color: var(--tinta);
  --bs-btn-active-bg: var(--tinta);
  --bs-btn-active-border-color: var(--tinta);
}

.btn-outline-warning {
  --bs-btn-color: var(--atencion);
  --bs-btn-border-color: var(--atencion);
  --bs-btn-hover-bg: var(--atencion);
  --bs-btn-hover-border-color: var(--atencion);
  --bs-btn-active-bg: var(--atencion);
  --bs-btn-active-border-color: var(--atencion);
}


@media (pointer: coarse) {
  .pie-del-aula a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tactil-min);
  }
}


@media (pointer: coarse) {
  .form-control,
  .form-select {
    min-height: var(--tactil-min);
    padding-top: .6rem;
    padding-bottom: .6rem;
  }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
