/* static/css/fonts.css */

@font-face {
  font-family: 'Corsiva';
  src: url("../fonts/Corsiva.1aea3285a462.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.navbar-brand {
  font-family: 'Corsiva', sans-serif;
  font-size: 170%;
  color: #000088;
}

.navbar-aqua .nav-link {
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.navbar-aqua {
  background-color: #e3f2fd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.comment-cell {
  min-width: 220px;
  max-width: 600px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* ===== Theme toggle switch ===== */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1.5px solid var(--bs-border-color);
  border-radius: 999px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--bs-body-color);
  transition: border-color 0.2s;
}

.theme-toggle:hover {
  border-color: var(--bs-primary);
}

.theme-toggle__track {
  position: relative;
  width: 30px;
  height: 17px;
  background: var(--bs-border-color);
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 0.25s;
}

.theme-toggle__thumb {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}

[data-bs-theme="dark"] .theme-toggle__track {
  background: #5b9bd5;
}

[data-bs-theme="dark"] .theme-toggle__thumb {
  transform: translateX(13px);
}

/* Texto base en dark mode: un escalón más brillante que el default de Bootstrap (#dee2e6) */
[data-bs-theme="dark"] {
  --bs-body-color: #e9ecef;
}

[data-bs-theme="dark"] .navbar-aqua {
  background-color: #1a2e4a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ===== Navbar active link ===== */

.navbar-aqua .nav-link.active {
  font-weight: 600;
  border-bottom: 2px solid #000088;
  color: #000088;
}

[data-bs-theme="dark"] .navbar-aqua .nav-link.active {
  border-bottom-color: #7799ff;
  color: #7799ff;
}

/* ===== Badge pulse animation ===== */

.badge-pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

[data-bs-theme="dark"] .navbar-brand {
  color: #7799ff;
}

[data-bs-theme="dark"] .navbar-brand:hover {
  color: #fff;
}

/* Select2: dark mode.
   select2-bootstrap-5-theme@1.2.0 predata el dark mode de Bootstrap 5.3 — sus colores
   están hardcodeados en Sass compilado, por lo que se requiere !important para sobreescribirlos. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--bs-tertiary-bg)    !important;
  border-color:     var(--bs-secondary-color) !important;
  color:            var(--bs-body-color)      !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
  color: var(--bs-secondary-color) !important;
}

/* Flecha: select2-bootstrap-5-theme usa background-image SVG (igual que form-select de Bootstrap),
   no el border trick del <b> clásico de Select2. Se reemplaza con el mismo chevron en tono claro. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e9ecef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--bs-tertiary-bg)     !important;
  border-color:     var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search__field {
  background-color: var(--bs-tertiary-bg)     !important;
  color:            var(--bs-body-color)      !important;
  border-color:     var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
  background-color: var(--bs-tertiary-bg) !important;
  color:            var(--bs-body-color)  !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: var(--bs-primary) !important;
  color:            #fff              !important;
}

/* Borde más grueso en todos los botones outline */
[class*="btn-outline-"] {
  --bs-btn-border-width: 2px;
}

/* btn-outline-warning en light mode: el amarillo #ffc107 sobre blanco tiene contraste ~1:1 (ilegible).
   Dorado medio #c08c00: más contraste sin caer en mostaza, dark mode no se toca. */
[data-bs-theme="light"] .btn-outline-warning {
  --bs-btn-color:        #c08c00;
  --bs-btn-border-color: #c08c00;
}

/* btn-success y btn-outline-success en dark mode: verde más claro para contrastar con el fondo oscuro */
[data-bs-theme="dark"] .btn-success {
  --bs-btn-bg:              #1ea862;
  --bs-btn-border-color:    #1ea862;
  --bs-btn-hover-bg:        #198a50;
  --bs-btn-hover-border-color: #198a50;
}

[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color:              #4dbf7f;
  --bs-btn-border-color:       #4dbf7f;
  --bs-btn-hover-bg:           #4dbf7f;
  --bs-btn-hover-border-color: #4dbf7f;
  --bs-btn-hover-color:        #000;
}

/* btn-outline-secondary en dark mode: gris más claro para contrastar con el fondo oscuro */
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color:              #adb5bd;
  --bs-btn-border-color:       #adb5bd;
  --bs-btn-hover-color:        #000;
  --bs-btn-hover-bg:           #adb5bd;
  --bs-btn-hover-border-color: #adb5bd;
  --bs-btn-active-color:       #000;
  --bs-btn-active-bg:          #adb5bd;
  --bs-btn-active-border-color:#adb5bd;
}

/* ===== Modern Table Design ===== */

/* Header: navy sólido, etiquetas en caps pequeñas */
.table > thead > tr > th {
  background-color: #d6e8f7;
  color: #1a3a6b;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.9rem 1rem;
  border: none;
  line-height: 1.35;
}

/* Body: padding generoso, solo separador inferior */
.table > tbody > tr > td {
  padding: 0.75rem 1rem;
  border-top: none;
  border-bottom: 1px solid var(--bs-table-border-color);
  vertical-align: middle;
}

/* Rayas con tinte azul de marca en lugar del gris genérico */
.table {
  --bs-table-striped-bg: rgba(21, 101, 192, 0.05);
  --bs-table-hover-bg:   rgba(21, 101, 192, 0.09);
}

/* Hover: barra de acento lateral izquierda */
.table-hover > tbody > tr:hover > td:first-child {
  box-shadow: inset 4px 0 0 #1565c0;
}

/* Dark mode — header más oscuro que el navbar, texto azul claro */
[data-bs-theme="dark"] .table > thead > tr > th {
  background-color: #0f1f35;
  color: #90caf9;
}

[data-bs-theme="dark"] .table {
  --bs-table-striped-bg: rgba(100, 180, 255, 0.07);
  --bs-table-hover-bg:   rgba(100, 180, 255, 0.12);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td:first-child {
  box-shadow: inset 4px 0 0 #5b9bd5;
}

/* Sustituye .bg-light en selección de días de semana (se adapta sola al tema) */
.bg-weekend {
  background-color: var(--bs-secondary-bg) !important;
}