/* Marca Licuna en el campus — tipografía, formas y acentos.
 * Creado el 2026-09-21.
 *
 * POR QUÉ ESTÁ SEPARADO DE `colors.css`
 * `colors.css` lo REGENERA Chamilo desde la base de datos cada vez que alguien
 * guarda el tema en Administración → Temas de color. Todo lo que no sean las
 * variables de color se perdería ahí. Este archivo no lo toca nadie más.
 *
 * CÓMO SE CARGA
 * `Layout/head.html.twig` → `{{ theme_asset_link_tag('licuna.css') }}`, justo
 * después de `colors.css` y DESPUÉS de todos los bundles de Encore. Ese orden es
 * lo que permite afinar sin recompilar assets: el repo trae `public/build/`
 * precompilado y `yarn encore production` es un paso que no queremos en cada
 * despliegue.
 *
 * `theme_asset_link_tag` devuelve cadena vacía si el archivo no existe, así que
 * la línea del template es inofensiva para cualquier otro tema.
 *
 * ALCANCE, A PROPÓSITO CORTO
 * Esto NO reescribe la interfaz de Chamilo. Cambia lo que hace que se reconozca
 * la marca —la letra, el redondeo, el foco, el logo— y se detiene ahí. Pelearse
 * con las utilidades de Tailwind a golpe de `!important` da un tema que se rompe
 * en la siguiente actualización del LMS.
 */

/* ───────────────────────────── Tipografía ─────────────────────────────
 * Lora para títulos, Montserrat para todo lo demás: las mismas dos del portal.
 * Self-hosted, como en Licuna — así no hay que abrir la CSP a Google Fonts en
 * producción, que es una pieza menos que mantener.
 *
 * Las rutas son relativas: este archivo se sirve en /themes/licuna/licuna.css,
 * así que `fonts/...` resuelve a /themes/licuna/fonts/...
 *
 * `unicode-range` divide latin y latin-ext: para texto en español el navegador
 * baja solo el primero. `font-display: swap` evita el texto invisible mientras
 * carga.
 */

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lora/lora-400-latin.woff2') format('woff2');
  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: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lora/lora-400-latin-ext.woff2') format('woff2');
  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: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/lora/lora-500-latin.woff2') format('woff2');
  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: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/lora/lora-500-latin-ext.woff2') format('woff2');
  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: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/lora/lora-600-latin.woff2') format('woff2');
  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: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/lora/lora-600-latin-ext.woff2') format('woff2');
  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: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lora/lora-700-latin.woff2') format('woff2');
  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: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lora/lora-700-latin-ext.woff2') format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat/montserrat-400-latin.woff2') format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat/montserrat-400-latin-ext.woff2') format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/montserrat/montserrat-500-latin.woff2') format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/montserrat/montserrat-500-latin-ext.woff2') format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat/montserrat-700-latin.woff2') format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat/montserrat-700-latin-ext.woff2') format('woff2');
  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;
}

/* ───────────────────── Tokens de marca reutilizables ───────────────────── */

:root {
  --licuna-navy: #1a104f;
  --licuna-navy-mid: #2d1c7a;
  --licuna-pink: #efaef0;
  --licuna-blue: #5c99e0;
  --licuna-lavender: #eee7fd;
  --licuna-lavender-soft: #f6f1ff;

  --licuna-font-title: 'Lora', Georgia, 'Times New Roman', serif;
  --licuna-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* El mismo halo de foco del portal. */
  --licuna-focus-ring: 0 0 0 3px rgba(92, 153, 224, 0.35);
}

/* ─────────────────────────── Aplicación ───────────────────────────
 * Sin `!important` salvo donde Tailwind no deja otra: este archivo carga
 * después, así que a igualdad de especificidad ya gana.
 */

/* 🔴 EL DATO QUE MANDA AL TEMATIZAR ESTE LMS: `tailwind.config.js` tiene
 *    `important: true`, así que **TODAS las utilidades de Tailwind salen con
 *    `!important`**. Ni la especificidad ni el orden de carga las tocan.
 *
 * Consecuencia práctica, y la regla de oro de este archivo:
 *
 *   · Para pisar una UTILIDAD de Tailwind (`.font-sans`, `.rounded-*`,
 *     `.text-*`…) hace falta `!important`. No hay alternativa: no es
 *     descuido, es la única forma.
 *   · Para lo demás —elementos, clases de componente de Chamilo— NO se usa,
 *     porque este archivo ya carga el último y gana sin ayuda.
 *
 * El caso que lo destapó: `<body class="font-sans …">` y `app.css` define
 * `.font-sans { font-family: "Helvetica Neue" … !important }`. Con `body {}`
 * a secas la letra no cambiaba, y en el navegador seguía saliendo Helvetica.
 */
body,
.font-sans {
  font-family: var(--licuna-font-body) !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Los títulos en serif son la mitad del carácter de Licuna. Se aplica a los
   encabezados reales, no a `.h1`-de-utilidad, para no invadir componentes que
   usan esas clases por tamaño y no por jerarquía. */
h1,
h2,
h3 {
  font-family: var(--licuna-font-title);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--licuna-navy);
}

h4,
h5,
h6 {
  font-family: var(--licuna-font-body);
  font-weight: 600;
}

/* ─────────────────────────── Formas ───────────────────────────
 * Licuna usa botones de píldora y tarjetas de 16 px. Es de lo que más se nota
 * al saltar de un sitio a otro, y de lo más barato de igualar.
 */

.btn,
button.btn,
a.btn {
  border-radius: 9999px;
  font-family: var(--licuna-font-body);
  font-weight: 600;
}

/* Los botones del campus son de PrimeVue (`.p-button`), no `.btn`, y traen
 * `border-radius: 6px`. La píldora es una firma visual de Licuna, así que se
 * aplica también aquí — pero con dos exclusiones que NO son opcionales:
 *
 *   `.p-buttonset` / `.p-splitbutton`  son grupos de botones pegados. Sus
 *   esquinas interiores DEBEN ser rectas o el grupo se ve como pastillas
 *   sueltas mal alineadas, no como un control segmentado.
 *
 * Lleva `!important` porque `tailwind.config.js` tiene `important: true` y
 * cualquier `rounded-*` en el marcado ganaría si no.
 *
 * Si algún día chirría en un componente nuevo, se quita este bloque y ya: el
 * resto de la marca —color, letra, logo— no depende de él. */
.p-button:not(.p-buttonset .p-button):not(.p-splitbutton .p-button) {
  border-radius: 9999px !important;
}

/* Foco visible con el azul de marca. Va sobre `:focus-visible` y no sobre
   `:focus` para no dibujar el halo a quien navega con ratón. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--licuna-focus-ring);
  border-radius: 6px;
}

/* ───────────────────── El rosa, donde sí funciona ─────────────────────
 * Como acento sobre fondos claros: fondos suaves, no texto ni bordes finos.
 * Un `1px solid #efaef0` sobre blanco es invisible (1,75:1); un relleno con
 * texto navy encima son 9,7:1 y se lee perfecto.
 */

.licuna-accent {
  background-color: var(--licuna-pink);
  color: var(--licuna-navy);
}

.licuna-surface {
  background-color: var(--licuna-lavender-soft);
}

/* ───────────────────────────── El logo ─────────────────────────────
 * El logo de Licuna es apaisado (924×266, ~3,5:1). Las cajas de logo de Chamilo
 * esperan algo más cuadrado, así que sin esto sale o diminuto o deformado.
 * `object-fit: contain` conserva la proporción pase lo que pase con la caja.
 */

img[src*="header-logo"],
img[src*="email-logo"] {
  max-height: 44px;
  width: auto;
  object-fit: contain;
}