/*
 * soferp-ui — capa de estilo sobre Vuetify 2, inspirada en el aire de Vuexy:
 * esquinas suaves, sombras difusas en vez de las duras de Material, botones sin
 * mayúsculas forzadas y tablas más tranquilas.
 *
 * PARA REVERTIR: en el .env, UI_TEMA=legacy  (y limpiar la caché de vistas con
 * `php artisan view:clear`). Eso deja de cargar este archivo y devuelve la
 * paleta anterior; no hace falta editar ningún componente.
 *
 * Todo cuelga de .soferp-ui (clase que app.blade.php pone en <html>), así que
 * incluso si el archivo se cargara suelto, sin esa clase no pinta nada.
 *
 * Los colores NO se definen aquí: salen del tema de Vuetify (public/app.js) a
 * través de las variables --v-*-base que expone options.customProperties.
 *
 * MODO OSCURO: lo único que cambia son los tokens de abajo. La clase .s-oscuro
 * la pone public/js/tema.js en <html> antes de pintar; Vuetify mueve sus
 * propios colores por su cuenta ($vuetify.theme.dark). Nada más en este
 * archivo conoce el tema, así que una regla nueva sirve para los dos con sólo
 * usar los tokens en vez de un color suelto.
 */

.soferp-ui {
  /* Sombras difusas al estilo Vuexy (Material 2 las hace duras y oscuras) */
  --sui-sombra-1: 0 2px 4px rgba(47, 43, 61, .1);
  --sui-sombra-2: 0 4px 12px rgba(47, 43, 61, .12);
  --sui-radio: 6px;
  --sui-borde: rgba(47, 43, 61, .12);
  --sui-texto-tenue: rgba(47, 43, 61, .6);
  /* Velos sobre la superficie: hover de un renglón, fondo de un chip tenue.
     En claro oscurecen, en oscuro aclaran. */
  --sui-velo-1: rgba(47, 43, 61, .04);
  --sui-velo-2: rgba(47, 43, 61, .06);
  --sui-velo-3: rgba(47, 43, 61, .12);
  /* Borde marcado: el punteado de una zona para soltar archivos, por ejemplo */
  --sui-borde-fuerte: rgba(47, 43, 61, .3);
  /* Superficie y su texto, para el CSS que no puede usar clases de Vuetify */
  --sui-superficie: #FFFFFF;
  --sui-fondo: #F8F7FA;
  --sui-texto: rgba(47, 43, 61, .87);
}

/* Oscuro. Las sombras se vuelven casi negras (una sombra gris no se ve sobre
   un fondo oscuro) y los velos invierten el sentido: aclaran en vez de
   oscurecer. El texto es el blanco azulado de Vuexy, nunca blanco puro. */
.soferp-ui.s-oscuro {
  --sui-sombra-1: 0 2px 4px rgba(15, 17, 28, .35);
  --sui-sombra-2: 0 4px 12px rgba(15, 17, 28, .45);
  --sui-borde: rgba(231, 227, 252, .14);
  --sui-texto-tenue: rgba(231, 227, 252, .6);
  --sui-velo-1: rgba(231, 227, 252, .05);
  --sui-velo-2: rgba(231, 227, 252, .08);
  --sui-velo-3: rgba(231, 227, 252, .14);
  --sui-borde-fuerte: rgba(231, 227, 252, .3);
  --sui-superficie: #2F3349;
  --sui-fondo: #25293C;
  --sui-texto: rgba(231, 227, 252, .9);
}

/* ---------------------------------------------------------------- Botones */

.soferp-ui .v-btn {
  text-transform: none;      /* Vuexy no grita en mayúsculas */
  letter-spacing: .02em;
  font-weight: 500;
  border-radius: var(--sui-radio);
}

.soferp-ui .v-btn--is-elevated {
  box-shadow: var(--sui-sombra-1);
}

.soferp-ui .v-btn--is-elevated:hover {
  box-shadow: var(--sui-sombra-2);
}

/* Los redondos (icon/fab) conservan su forma */
.soferp-ui .v-btn--icon,
.soferp-ui .v-btn--fab,
.soferp-ui .v-btn--round {
  border-radius: 50%;
}

/* --------------------------------------------------- Tarjetas y superficies */

.soferp-ui .v-card {
  border-radius: var(--sui-radio);
}

.soferp-ui .v-card.v-sheet--outlined {
  border-color: var(--sui-borde);
}

.soferp-ui .v-card:not(.v-sheet--outlined):not(.elevation-0) {
  box-shadow: var(--sui-sombra-1);
}

.soferp-ui .v-menu__content,
.soferp-ui .v-dialog:not(.v-dialog--fullscreen) {
  border-radius: var(--sui-radio);
  box-shadow: var(--sui-sombra-2);
}

.soferp-ui .v-expansion-panel,
.soferp-ui .v-alert,
.soferp-ui .v-chip {
  border-radius: var(--sui-radio);
}

/* ------------------------------------------------------------------ Campos */

.soferp-ui .v-text-field:not(.v-text-field--outlined) > .v-input__control > .v-input__slot::before {
  border-color: var(--sui-borde);
}

.soferp-ui .v-text-field--outlined fieldset {
  border-color: var(--sui-borde);
  border-radius: var(--sui-radio);
}

.soferp-ui .v-label {
  font-size: .9rem;
  color: var(--sui-texto-tenue);
}

/* --------------------------------------------------------------- Toolbars */

.soferp-ui .v-toolbar,
.soferp-ui .v-app-bar {
  box-shadow: var(--sui-sombra-1);
}

.soferp-ui .v-toolbar__title {
  font-weight: 500;
  letter-spacing: 0;
}

/* Las pestañas de los diálogos: etiqueta legible, sin mayúsculas */
.soferp-ui .v-tab {
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 500;
}

/* ---------------------------------------------------------------- Tablas */

.soferp-ui .v-data-table > .v-data-table__wrapper > table > thead > tr > th {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sui-texto-tenue);
  white-space: nowrap;
}

.soferp-ui .v-data-table > .v-data-table__wrapper > table > tbody > tr > td,
.soferp-ui .v-data-table > .v-data-table__wrapper > table > thead > tr > th {
  border-bottom-color: var(--sui-borde) !important;
}

.soferp-ui .v-data-table > .v-data-table__wrapper > table > tbody > tr:hover {
  background: var(--sui-velo-1) !important;
}

/* Con show-group-by, Vuetify 2 mete un <span>group</span> suelto detrás del
   ícono de orden: quedaba un "GROUP" pegado al título de cada columna, como
   si fuera parte del encabezado. Se le da forma de chip discreto para que se
   lea como el botón que en realidad es (agrupar por esa columna).
   En columnas align:'end' Vuetify pone el ícono antes del título, así que el
   título también es el último span: se excluye el que sigue al ícono. */
.soferp-ui .v-data-table th > span:last-child:not(:first-child):not(.v-data-table-header__icon + span) {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--sui-velo-2);
  color: var(--sui-texto-tenue);
  font-size: .6rem;
  line-height: 1.5;
  cursor: pointer;
  opacity: .8;
}

.soferp-ui .v-data-table th > span:last-child:not(:first-child):not(.v-data-table-header__icon + span):hover {
  opacity: 1;
  background: var(--sui-velo-3);
}

/* ------------------------------------------------------------ Tipografía */

.soferp-ui .text-overline {
  letter-spacing: .08em !important;
  font-weight: 600;
}