/* base.css - estilos globales para html, body y tipografía */
html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);

    font-size: var(--font-size-base);
    background-color: var(--color-page);
    color: var(--color-text);
    height: 100%;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary-dark);
}

h1,
h2,

h4,
h5 {
    color: var(--color-primary);
    margin-top: 0;
}

h3 {
    color: var(--color-primary-dark);
    margin-top: 0;
}

/* Loader Overlay */
#loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Loader Spinner */
.loader-spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #273be2; /* tu color institucional */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

/* Spinner Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {

    html,
    body {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    p {
        line-height: 1.6;
        margin-bottom: 1em;
    }
}