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 #258cfb;
}

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

:root {
  /* Paleta Claro (rojo) */
  --claro-red: #da291c;
  --claro-red-dark: #b21e14;
  --claro-red-darker: #951910;
  --bs-primary: #da291c;
  --bs-primary-rgb: 218, 41, 28;
  --bs-link-color: #b21e14;
  --bs-link-hover-color: #951910;
}

body {
  margin-bottom: 60px;
  background: #f5f6f8;
}

/* Ribbon superior */
.ribbon {
  background: linear-gradient(90deg, var(--claro-red) 0%, var(--claro-red-dark) 100%);
}
.ribbon .nav-link { color: rgba(255,255,255,.9); }
.ribbon .nav-link:hover, .ribbon .nav-link:focus { color: #fff; }
.ribbon .navbar-brand { color: #fff; }
.ribbon .dropdown-item.active { background-color: var(--claro-red); }

/* Botones y acentos en rojo Claro */
.btn-primary {
  --bs-btn-bg: var(--claro-red);
  --bs-btn-border-color: var(--claro-red);
  --bs-btn-hover-bg: var(--claro-red-dark);
  --bs-btn-hover-border-color: var(--claro-red-dark);
  --bs-btn-active-bg: var(--claro-red-darker);
  --bs-btn-active-border-color: var(--claro-red-darker);
  --bs-btn-disabled-bg: var(--claro-red);
  --bs-btn-disabled-border-color: var(--claro-red);
}
.btn-outline-primary {
  --bs-btn-color: var(--claro-red);
  --bs-btn-border-color: var(--claro-red);
  --bs-btn-hover-bg: var(--claro-red);
  --bs-btn-hover-border-color: var(--claro-red);
  --bs-btn-active-bg: var(--claro-red-dark);
  --bs-btn-active-border-color: var(--claro-red-dark);
}
.text-primary { color: var(--claro-red) !important; }
.border-primary { border-color: var(--claro-red) !important; }
a { color: var(--claro-red-dark); }
a:hover { color: var(--claro-red-darker); }
.form-control:focus, .form-select:focus {
  border-color: #e8746b;
  box-shadow: 0 0 0 .25rem rgba(218, 41, 28, .25);
}

.card { border: none; }
.dashboard-tile .display-6 { font-weight: 700; }

/* Layout con menú lateral */
.app-body { display: flex; align-items: stretch; min-height: calc(100vh - 56px); }
.main-content { flex: 1 1 auto; min-width: 0; padding: 1.25rem; }

.sidebar {
  width: 250px;
  background: #fff;
  border-right: 1px solid #e5e7eb;
}
@media (min-width: 992px) {
  .sidebar { flex: 0 0 250px; }
  .sidebar .offcanvas-body { position: sticky; top: 0; max-height: calc(100vh - 56px); overflow-y: auto; }
}
.sidebar .side-top {
  display: block; padding: .55rem .9rem; font-weight: 600; color: #1f2937;
  border-bottom: 1px solid #eef0f2;
}
.sidebar .accordion-button {
  padding: .55rem .9rem; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; color: #6b7280; background: #fff;
}
.sidebar .accordion-button:not(.collapsed) { color: var(--claro-red); background: #fff; box-shadow: none; }
.sidebar .accordion-button:focus { box-shadow: none; }
.sidebar .accordion-body .nav-link {
  padding: .4rem .9rem .4rem 1.6rem; font-size: .875rem; color: #374151;
}
.sidebar .accordion-body .nav-link:hover { background: #f8f9fb; color: var(--claro-red); }
.sidebar .nav-link.active {
  color: var(--claro-red); font-weight: 600; background: #fdecea;
  border-left: 3px solid var(--claro-red);
}

/* Menu lateral plegado. Solo aplica de lg para arriba: abajo de eso el menu ya es un
   offcanvas y no ocupa lugar. */
@media (min-width: 992px) {
  body.menu-oculto .sidebar,
  html.menu-oculto .sidebar { display: none; }
  body.menu-oculto .main-content,
  html.menu-oculto .main-content { padding-left: 1rem; padding-right: 1rem; }
}

.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;
}