/* ==========================================================
   AGENDA BCC · CSS personalizado para Gancio 1.28.x
   Tipografía (Barlow / Ubuntu) + fondo #1E191F
   Pegar en: Admin → Tema → Estilo CSS personalizado
   (reemplaza todo lo que haya en el cuadro)
   El @import debe ser lo PRIMERO del cuadro.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600;700;800;900&family=Ubuntu:wght@300;400;500;700&display=swap');

:root {
  --fuente-titulos: 'Barlow', sans-serif;
  --fuente-cuerpo: 'Ubuntu', sans-serif;
  --fondo: #1e191f;                    /* mismo color que FONDO en el menú (JS) */
  --borde: rgba(255, 255, 255, 0.08);  /* línea sutil entre bloques del mismo tono */
}

/* 1. BASE: todo hereda Ubuntu, incluidos los campos de formulario */
html,
body,
body .v-application,
input,
textarea,
select {
  font-family: var(--fuente-cuerpo) !important;
}

/* 2. CLASES DE TEXTO DE VUETIFY: anulan el Roboto que fuerza el framework
      (el prefijo "body" sube la especificidad para ganarle) */
body .v-application :is(.text-body-1, .text-body-2, .text-subtitle-1,
                        .text-subtitle-2, .text-caption, .text-overline) {
  font-family: var(--fuente-cuerpo) !important;
}

/* 3. DESCRIPCIÓN bajo el título: Ubuntu regular (Gancio la pone en 300) */
body .v-application div.text-body-1.font-weight-light {
  font-weight: 400 !important;
}

/* 4. TÍTULOS, PESTAÑAS Y BOTONES: Barlow */
body .v-application :is(h1, h2, h3, h4, h5, h6,
                        .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6,
                        .v-toolbar__title, .v-card__title, .v-tab, .v-btn) {
  font-family: var(--fuente-titulos) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 5. TÍTULO DEL SITIO ("AGENDA BCC"): Barlow pesado en TODAS las páginas.
      En la portada está dentro de un h1 y en la página de un evento no,
      por eso se declara directamente sobre el enlace #title. */
body .v-application a#title {
  font-family: var(--fuente-titulos) !important;
  font-weight: 800 !important; /* cambia a 900 para "Black" */
  letter-spacing: 0.01em;
}

/* 6. CALENDARIO (librería v-calendar): Ubuntu en todo su interior */
.vc-container,
.vc-container * {
  font-family: var(--fuente-cuerpo) !important;
}

/* ==========================================================
   FONDO
   ========================================================== */

/* 7. FONDO DE LA PÁGINA (Vuetify lo pone en #121212).
      background-color, no "background": la imagen de encabezado se respeta. */
html,
body,
body .v-application.theme--dark {
  background-color: var(--fondo) !important;
}

/* 8. TARJETAS, PANELES, PESTAÑAS Y PIE DEL MISMO TONO (Vuetify usa #1e1e1e y #272727).
      SIN !important a propósito: así los elementos con color propio
      (anuncios, botones, avisos, chips) conservan su color.
      La clase repetida (.theme--dark.theme--dark) solo sube la prioridad
      lo justo para ganarle a los grises por defecto de Vuetify. */
body .v-application.theme--dark.theme--dark :is(.v-sheet, .v-card, .v-footer, .v-toolbar,
                                                 .v-tabs-bar, .v-tabs-items, .v-list,
                                                 .v-data-table, .v-expansion-panel,
                                                 .v-stepper, .v-menu__content, .v-picker__body) {
  background-color: var(--fondo);
}

/* 9. CALENDARIO (librería v-calendar) */
body .v-application .vc-container.vc-is-dark {
  background-color: var(--fondo) !important;
}

/* 10. Con todo del mismo tono, un borde fino mantiene visible cada bloque */
body .v-application.theme--dark :is(.v-card, .v-menu__content, .v-footer) {
  border: 1px solid var(--borde);
}