/* static/css/base.css — colores de marca y temas (claro institucional / oscuro morado) */

:root {
  --color-primario: #cc1010;
  --color-primario-oscuro: #1b5597;
  --color-acento: #D4A017;
  --color-texto: #1a1a1a;
  --color-fondo: #f4f6f8;

  /* Tema claro (institucional): estos valores reproducen el diseño original */
  --fondo: #f4f6f8;
  --texto: #1a1a1a;
  --texto-suave: #6b7280;
  --tarjeta: #ffffff;
  --tarjeta-2: #f8fafc;
  --tarjeta-borde: rgba(31, 35, 71, 0.08);
  --acento: #cc1010;
  --acento-2: #1b5597;
  --acento-suave: rgba(204, 16, 16, 0.1);
  --acento-texto: #ffffff;
  --sombra: 0 4px 16px rgba(0, 0, 0, 0.08);
  --glow: 0 4px 12px rgba(0, 0, 0, 0.12);
  --borde-detalle: var(--acento);   /* barrita junto a los títulos */
  --sidebar-fondo: linear-gradient(180deg, #1b5597, #210610);
  --sidebar-borde: transparent;
  --sidebar-texto: rgba(255, 255, 255, 0.88);
  --sidebar-hover: rgba(255, 255, 255, 0.1);
  --sidebar-activo: #D4A017;
  --sidebar-activo-texto: #1a1a1a;
  --sidebar-activo-glow: none;
  --header-fondo: #1f2347;   /* azul institucional liso */
  --header-texto: #ffffff;
  --campo: #ffffff;
  --campo-borde: #e2e8f0;
  --campo-texto: #1a1a1a;
}

/* Tema oscuro: azul marino institucional, bordes sutiles y sombras naturales */
html[data-tema="oscuro"] {
  --fondo: #050a1c;
  --texto: #f2f6ff;
  --texto-suave: #9fb3d9;
  --tarjeta: #0b1633;
  --tarjeta-2: #11214a;
  --tarjeta-borde: rgba(255, 255, 255, 0.08);
  --acento: #1d6bff;
  --acento-2: #38bdf8;
  --acento-suave: rgba(29, 107, 255, 0.16);
  --acento-texto: #ffffff;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
  --glow: 0 4px 14px rgba(0, 0, 0, 0.35);
  --borde-detalle: rgba(255, 255, 255, 0.22);
  --sidebar-fondo: #081331;
  --sidebar-borde: rgba(255, 255, 255, 0.08);
  --sidebar-texto: #c7d6f5;
  --sidebar-hover: rgba(29, 107, 255, 0.14);
  --sidebar-activo: #1d6bff;
  --sidebar-activo-texto: #ffffff;
  --sidebar-activo-glow: none;
  --header-fondo: transparent;
  --header-texto: #ffffff;
  --campo: #0a1430;
  --campo-borde: rgba(255, 255, 255, 0.14);
  --campo-texto: #f4f4ff;
  --color-texto: #f4f4ff;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--texto);
  background-color: var(--color-fondo);
  background-image:
    linear-gradient(180deg, rgba(122, 16, 48, 0.25) 0%, rgba(244, 246, 248, 0.55) 40%, rgba(244, 246, 248, 0.85) 100%),
    url('../img/fondo_UPEATV.jpeg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Fondo azul marino sobrio: una sola luz suave arriba a la derecha */
html[data-tema="oscuro"] body {
  background-color: var(--fondo);
  background-image:
    radial-gradient(1100px 620px at 100% -5%, rgba(29, 107, 255, 0.14), transparent 62%),
    linear-gradient(180deg, #071431 0%, #050a1c 55%, #040816 100%);
  background-size: cover;
  background-attachment: fixed;
}

/* Al cambiar de tema los colores se funden en vez de saltar */
html.tema-transicion body,
html.tema-transicion .sidebar,
html.tema-transicion .topbar,
html.tema-transicion .tarjeta-ui {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

@media (max-width: 768px) {
  body { background-attachment: scroll; }
}

main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

/* Botón principal del sitio (rojo en claro, morado con brillo en oscuro) */
.btn-acento {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 8px;
  background: var(--acento);
  color: var(--acento-texto);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--glow);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-acento:hover { color: var(--acento-texto); filter: brightness(1.12); transform: translateY(-2px); }
.btn-acento:active { transform: scale(0.97); }