/* Glorick (tema) — retoques de componente.
   Un tema aporta tokens; aquí solo va lo que NO es expresable como token y que, sin
   ello, dejaría de parecerse a Glorick. Son tres cosas medidas en su web:
   el borde de 2 px, el botón de contorno negro y el chevron del desplegable.

   OJO CON EL ORDEN: `ThemeManager::stylesheets()` devuelve theme.css y overrides.css,
   y `templates/element/head.php` los pinta ANTES de alumneflex-ui.css. Con la misma
   especificidad ganaría la capa común, así que aquí se antepone `:root` para subir
   un punto y ganar. No es un truco gratuito: es la única forma de retocar un
   componente desde el tema sin tocar el núcleo. */

/* --- Borde de 2 px ---------------------------------------------------------
   En su web las tarjetas y las pestañas llevan 2 px, no 1. Es lo que sostiene el
   diseño ahora que las sombras están prácticamente anuladas: sin sombra y sin borde
   grueso, las superficies no se separarían del lienzo. */
:root .af-card,
:root .af-panel {
  border-width: 2px;
}

/* --- Tarjeta de acceso -----------------------------------------------------
   El fondo de la pantalla de acceso es su ilustracion, que es clara y esta llena de
   detalle. Una tarjeta blanca con sombra —y las sombras aqui estan casi anuladas— se
   diluiria encima. El borde negro de 2 px la recorta con nitidez, y ademas es
   exactamente como son sus tarjetas de «propuesta de valor». */
:root .af-auth-card {
  border: 2px solid var(--border-brand);
}

/* --- Botón de contorno -----------------------------------------------------
   Su botón secundario es de borde negro, no de borde gris neutro. */
:root .btn-outline-brand {
  --bs-btn-border-color: var(--border-brand);
  --bs-btn-hover-border-color: var(--border-brand);
  --bs-btn-color: var(--text-strong);
  border-width: 1px;
}

/* --- Chevron del desplegable -----------------------------------------------
   La capa común lo dibuja con un data-URI y el color va quemado dentro (#8B837A,
   el gris arena de Alumne Flex). Al ir dentro de la URL no admite var(), así que la
   única manera de teñirlo con el gris de Glorick es reemplazar la imagen entera. */
:root .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23605E5E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239AA2B4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
}