html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(153, 27, 27, 0.5);
}

html {
  position: relative;
  min-height: 100%;
}

/* ============================================================
   IDENTIDAD DE MARCA: Azul Marino / Carmesí
   El scaffolding de ASP.NET Core (Categorías, Contacto, Entrevistas,
   Publicidades, Rankings...) trae los colores azul/verde por defecto
   de Bootstrap. Esto los unifica con la paleta institucional que ya
   usan el Home, el dashboard de Admin y los paneles de Radio/Clima,
   sin tener que tocar cada vista una por una.
   ============================================================ */
:root {
  --brand-navy: #0F172A;
  --brand-crimson: #991B1B;
  --brand-crimson-light: #FCA5A5;

  /* bg-primary, text-primary, border-primary... pasan a usar el Azul Marino */
  --bs-primary: var(--brand-navy);
  --bs-primary-rgb: 15, 23, 42;
}

/* Checkboxes y switches marcados (AutoDJ, Activa, Destacada...): Carmesí en vez del azul por defecto */
.form-check-input:checked {
  background-color: var(--brand-crimson);
  border-color: var(--brand-crimson);
}

/* Botón de acción principal. .btn-fuego ya se usaba en varias vistas de Noticias pero
   nunca estuvo definido en ningún lado (esos botones se veían sin estilo); de paso,
   btn-primary y btn-success (los colores por defecto de Bootstrap para "Guardar"/"Crear"
   en el resto del panel) pasan a verse igual que este botón de referencia. */
.btn-fuego,
.btn-primary,
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-crimson);
  --bs-btn-border-color: var(--brand-crimson);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-navy);
  --bs-btn-hover-border-color: var(--brand-navy);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-navy);
  --bs-btn-active-border-color: var(--brand-navy);
  --bs-btn-focus-shadow-rgb: 153, 27, 27;
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-navy);
  --bs-btn-border-color: var(--brand-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-navy);
  --bs-btn-hover-border-color: var(--brand-navy);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-navy);
  --bs-btn-active-border-color: var(--brand-navy);
}

.pagination {
  --bs-pagination-active-bg: var(--brand-crimson);
  --bs-pagination-active-border-color: var(--brand-crimson);
  --bs-pagination-color: var(--brand-navy);
  --bs-pagination-hover-color: var(--brand-crimson);
}

/* Etiquetas de categoría/estado, iguales a las que ya se ven en la portada pública */
.badge-red { background-color: var(--brand-crimson); color: #fff; }
.badge-gray { background-color: #64748B; color: #fff; }

.text-crimson { color: var(--brand-crimson) !important; }
.bg-crimson { background-color: var(--brand-crimson) !important; }

/* El bloque izquierdo del reproductor flotante reserva 250px para el nombre de la
   radio + canción, pero ese texto está oculto en mobile (d-none d-md-block). Sin este
   ajuste, esos 250px vacíos empujan y superponen los demás elementos de la barra. */
@media (max-width: 767.98px) {
  .sticky-player .player-info {
    min-width: 0 !important;
    max-width: none !important;
    border-right: none !important;
    padding-right: 0.5rem !important;
  }
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}