/*
 * Adaptador de Bootstrap 5 → tokens de Clean OS.
 *
 * Cubre las páginas de Identity (Components/Account/Pages/*, salvo Login que
 * ya tiene su propio diseño aislado) y cualquier .btn/.form-control suelto
 * que aparezca mezclado con Radzen en el resto de la app. Global, no scoped
 * — mismo criterio que Login.razor.css usó para .alert, aplicado ahora a
 * nivel de toda la app en vez de una sola página.
 *
 * Carga después de bootstrap.min.css y de tokens.css/rz-adapter.css.
 */

/* Las variables propias de Bootstrap, apuntadas a los tokens.
 *
 * Sin esto, cada regla de Bootstrap que lee una --bs-* se queda clavada en el
 * valor claro de fábrica, pase lo que pase con el tema. El caso que lo destapó:
 * .form-control:focus declara `color: var(--bs-body-color)` — al escribir en un
 * campo, el texto (y los puntos de una contraseña) volvía a #212529, tinta casi
 * negra, sobre la hoja oscura. Redeclarar cada regla una por una sería perseguir
 * síntomas; alias sobre los tokens arregla de una vez las que ya existen y las
 * que traiga una futura versión de Bootstrap.
 *
 * Los tokens ya cambian solos con [data-theme="dark"], así que estos alias
 * cambian con ellos y no hace falta un bloque oscuro… salvo para las *-rgb, que
 * Bootstrap consume dentro de rgba() y por eso necesitan los canales sueltos:
 * esas sí van escritas en los dos temas, con el valor de --text-primary. */
:root {
  --bs-body-color: var(--text-primary);
  --bs-body-color-rgb: 20, 26, 26;              /* #141A1A = --text-primary claro */
  --bs-body-bg: var(--surface);
  --bs-body-bg-rgb: 255, 255, 255;              /* #FFFFFF = --surface claro */
  --bs-emphasis-color: var(--text-primary);
  --bs-heading-color: var(--heading-color);
  --bs-secondary-color: var(--text-secondary);
  --bs-secondary-bg: var(--surface-secondary);
  --bs-tertiary-color: var(--text-tertiary);
  --bs-tertiary-bg: var(--surface-secondary);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius);
  --bs-link-color: var(--text-link);
  --bs-link-hover-color: var(--text-link);
  --bs-font-sans-serif: var(--font-sans);
}

[data-theme="dark"] {
  --bs-body-color-rgb: 232, 235, 240;           /* #E8EBF0 = --text-primary oscuro */
  --bs-body-bg-rgb: 22, 27, 33;                 /* #161B21 = --surface oscuro */
}

.btn {
  border-radius: var(--radius);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small-size);
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  transition: var(--transition-control);
}

.btn:focus,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-primary {
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--accent-on-solid);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-solid-hover);
  border-color: var(--accent-solid-hover);
  color: var(--accent-on-solid);
}
.btn-primary:active {
  background-color: var(--accent-solid-press) !important;
  border-color: var(--accent-solid-press) !important;
  color: var(--accent-on-solid) !important;
}

.btn-secondary,
.btn-outline-secondary {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text-secondary);
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-danger {
  background-color: var(--danger-solid);
  border-color: var(--danger-solid);
  color: #fff;
}
.btn-danger:hover {
  filter: brightness(0.92);
}

.btn-link {
  color: var(--text-link);
}
.btn-link:hover {
  color: var(--text-link-hover);
}

.form-control,
.form-select {
  height: var(--input-h);
  padding: var(--input-py) var(--input-px);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-small-size);
  transition: var(--transition-control);
}
.form-control::placeholder {
  color: var(--text-tertiary);
}
/* El color va declarado también en :focus a propósito: Bootstrap lo redeclara
   ahí, y sin esto el campo cambiaba de tinta justo al empezar a escribir. */
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  background-color: var(--surface);
  color: var(--text-primary);
}
/* Al autocompletar, el navegador pinta su propio fondo claro y su propia tinta,
   por encima de cualquier color declarado — en tema oscuro dejaba el campo como un
   parche claro, y es justo lo que pasa con un usuario y una contraseña guardados.
   -webkit-text-fill-color y la sombra interna son la única vía de recuperarlo. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--text-primary);
}

.form-check-input:checked {
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}
.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.form-label {
  font-size: var(--text-caption-size);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.invalid-feedback,
.text-danger {
  color: var(--danger-text) !important;
}
.valid.modified:not([type=checkbox]),
.form-control.valid,
.is-valid {
  border-color: var(--success) !important;
}
.invalid,
.form-control.invalid,
.is-invalid {
  border-color: var(--danger) !important;
}

.card {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  box-shadow: none;
}

.alert {
  border: 0;
  border-radius: var(--radius-inner);
  font-size: var(--text-small-size);
}
.alert-danger {
  background-color: var(--danger-soft);
  color: var(--danger-text);
}
.alert-success {
  background-color: var(--success-soft);
  color: var(--success-text);
}
.alert-warning {
  background-color: var(--warning-soft);
  color: var(--warning-text);
}
.alert-info {
  background-color: var(--info-soft);
  color: var(--info-text);
}

a,
.btn-link.nav-link {
  color: var(--text-link);
}
a:hover,
.btn-link.nav-link:hover {
  color: var(--text-link-hover);
}