/* =========================================================
   style_global.css — Sistema de diseno global
   v3.0.0 | 2026-02-22
   Estilo Apple — limpio, espacioso, legible
   ========================================================= */

@charset "utf-8";

/* ========================= Reset ========================= */

*, *::before, *::after {
  box-sizing: border-box;
}

* { scroll-behavior: smooth }

::selection {
  background: rgba(0, 102, 204, .18);
  color: inherit;
}

/* ========================= Utilities ========================= */

.hidden { display: none }
.pointer { cursor: pointer }

.hover {
  opacity: .88;
  transition: opacity .25s cubic-bezier(.4, 0, .2, 1);
}
.hover:hover { opacity: 1 }

/* Overlay utilities */
.opacity-dark-20 { background-color: rgba(0,0,0,.2) }
.opacity-dark-40 { background-color: rgba(0,0,0,.4) }
.opacity-dark-60 { background-color: rgba(0,0,0,.6) }
.opacity-dark-80 { background-color: rgba(0,0,0,.8) }
.opacity-light-20 { background-color: rgba(255,255,255,.2) }
.opacity-light-40 { background-color: rgba(255,255,255,.4) }
.opacity-light-60 { background-color: rgba(255,255,255,.6) }
.opacity-light-80 { background-color: rgba(255,255,255,.8) }

/* ========================= Loading ========================= */

#loading {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
}

@keyframes spin {
  to { transform: rotate(360deg) }
}

#loading::after {
  content: "";
  width: 32px;
  height: 32px;
  border: 3px solid #d2d2d7;
  border-top-color: var(--brand-accent, #0066cc);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ========================= Footer ========================= */

footer {
  margin-top: 3rem;
  padding: 2.5rem 0;
  border-top: 1px solid #d2d2d7;
}

footer p {
  font-size: 12px;
  font-weight: 400;
  color: #86868b;
  line-height: 1.33;
}

footer .min p {
  font-size: 11px;
  font-weight: 400;
  color: #86868b;
}

footer #logo {
  width: 72px;
  margin: 1.5rem;
  opacity: .6;
  transition: opacity .2s;
}
footer #logo:hover { opacity: .8 }

footer #logo_min {
  width: 36px;
  margin: .5rem;
  filter: grayscale(100%);
  opacity: .5;
}

footer ul { padding: 12px }
footer ul a:link,
footer ul a:visited,
footer ul a:active {
  color: #424245;
  font-size: 12px;
  font-weight: 400;
}
footer ul a:hover {
  color: #1d1d1f;
}

/* ========================= Sections ========================= */

.section-container {
  padding-top: 12vh !important;
  padding-bottom: 12vh !important;
  min-height: 40vh !important;
}
.section-container img { max-height: 40vh !important }

/* ========================= Text shadows ========================= */

.font-shadow-white { text-shadow: 0 1px 3px rgba(255,255,255,.4) !important }
.font-shadow-black { text-shadow: 0 1px 3px rgba(0,0,0,.4) }

.text-shadow-white { text-shadow: 0 1px 3px rgba(255,255,255,.3) }
.text-bright-white { text-shadow: 0 0 4px rgba(255,255,255,.3) }
.text-shadow-dark  { text-shadow: 0 1px 3px rgba(0,0,0,.3) }
.text-bright-dark  { text-shadow: 0 0 4px rgba(0,0,0,.3) }

.text-border-white {
  text-shadow:
    .5px 0 0 rgba(255,255,255,.4), -.5px 0 0 rgba(255,255,255,.4),
    0 .5px 0 rgba(255,255,255,.4), 0 -.5px 0 rgba(255,255,255,.4);
}
.text-border-dark {
  text-shadow:
    .5px 0 0 rgba(0,0,0,.4), -.5px 0 0 rgba(0,0,0,.4),
    0 .5px 0 rgba(0,0,0,.4), 0 -.5px 0 rgba(0,0,0,.4);
}

/* ========================= Help tooltip ========================= */

.loadHelp {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #1d1d1f;
  border: 1px solid #d2d2d7;
  background: #fff;
  float: left;
  clear: both;
  display: none;
  width: 280px;
  z-index: 1000;
  border-radius: 12px;
  outline: none;
  position: absolute;
  margin: 8px;
  padding: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.loadHelpIcon {
  color: #86868b;
  cursor: pointer;
  font-size: 14px;
  transition: color .15s;
}
.loadHelpIcon:hover { color: #1d1d1f }

/* ========================= Sticky ========================= */

.sticky {
  position: sticky;
  top: 3%;
  right: auto;
}
.sticky_content {
  position: sticky;
  top: 10vh;
  right: auto;
}
.sticky + .container { padding-top: 200px }

/* ========================= Cards ========================= */

.rounded-lg { border-radius: 16px }

.hover-light:hover { background-color: rgba(0,0,0,.015) !important }
.hover-dark:hover  { background-color: rgba(255,255,255,.04) !important }

.block_box,
.block-box {
  padding: 2rem;
  margin-bottom: 2rem;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.block-box-min {
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
}

/* ========================= Debug guides ========================= */

.guide       { border: 3px dashed red }
.guide-green { border: 3px dashed green }
.guide-blue  { border: 3px dashed blue }

/* ========================= Pagination ========================= */

.pagination { gap: .25rem }

.page-link {
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  color: #86868b;
  background: transparent;
  border: 1px solid rgba(0,0,0,.06);
  transition: all .15s;
}
.page-link:hover {
  color: #1d1d1f;
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.1);
}
.page-item.active .page-link {
  color: #fff;
  background: var(--brand-accent, #0066cc);
  border-color: var(--brand-accent, #0066cc);
}
.page-item.disabled .page-link {
  color: rgba(0,0,0,.25);
  background: transparent;
  border-color: rgba(0,0,0,.06);
}

/* ========================= Subject colors ========================= */

.color-matematicas      { border-left: 3px solid #34c759 }
.color-matematicas:hover { border-left: 10px solid #34c759 }
.color-hcl              { border-left: 3px solid #5ac8fa !important }
.color-hcl:hover        { border-left: 10px solid #5ac8fa !important }
.color-sociales         { border-left: 3px solid #ff9500 !important }
.color-sociales:hover   { border-left: 10px solid #ff9500 !important }
.color-experimentales         { border-left: 3px solid #af52de !important }
.color-experimentales:hover   { border-left: 10px solid #af52de !important }

/* ========================= Mobile ========================= */

@media (max-width: 576px) {
  footer { padding: 1.5rem 0 }
  footer #logo { margin: .75rem }

  .section-container {
    padding-top: 8vh !important;
    padding-bottom: 8vh !important;
  }

  .block_box,
  .block-box {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 16px;
  }
  .block-box-min { padding: .75rem .9rem }
}