/* ─── Project Theme Override ─────────────────────────────────────────────
 * Personalizar la paleta de color del proyecto aquí.
 * Se aplica sobre Metronic's styles.css — solo sobrescribir lo necesario.
 * ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Color primario — ADAPTAR al proyecto */
  --tw-primary: #FBBE02;
  --tw-primary-rgb: 251, 190, 2;
  --tw-primary-light: rgba(59, 130, 246, 0.1);
  --tw-primary-active: rgba(59, 130, 246, 0.2);
  --tw-primary-clarity: rgba(59, 130, 246, 0.2);

  --bs-body-font-family: 'Inter', sans-serif;
}

/* ─── Symbol / Avatar — forzar círculo en .symbol-label dentro de .symbol-circle
 * Metronic no aplica border-radius al label interno en todos los contextos. */
.symbol-circle > .symbol-label {
  border-radius: 50% !important;
}

/* ─── Toast notifications ─────────────────────────────────────────────── */
#app-toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

.app-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.app-toast--success { background: #dcfce7; border: 1px solid #86efac; color: #166534; }
.app-toast--error   { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }
.app-toast--warning { background: #fef9c3; border: 1px solid #fde047; color: #854d0e; }
.app-toast--info    { background: #dbeafe; border: 1px solid #93c5fd; color: #1e40af; }

.app-toast__icon { flex: 0 0 auto; font-weight: 700; }
.app-toast__msg  { flex: 1 1 auto; word-break: break-word; }
.app-toast__close {
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  opacity: .6;
  padding: 0 4px;
  line-height: 1;
}
.app-toast__close:hover { opacity: 1; }

/* ─── Botones light-* — legibilidad al hacer hover ───────────────────────
 * Metronic en modo claro oscurece el fondo al hacer hover pero en algunos
 * casos el texto queda casi invisible. Forzamos negro sobre fondo claro.  */
.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus  { color: #1d4ed8 !important; }

.btn.btn-light-danger:hover,
.btn.btn-light-danger:focus   { color: #b91c1c !important; }

.btn.btn-light-success:hover,
.btn.btn-light-success:focus  { color: #15803d !important; }

.btn.btn-light-warning:hover,
.btn.btn-light-warning:focus  { color: #b45309 !important; }

/* ─── Header: topbar siempre a la derecha ─────────────────────────────── */
#header_container {
  justify-content: flex-end;
}

#header #topbar {
  margin-inline-start: auto;
}

/* ─── Inputs / selects Metronic ──────────────────────────────────────────
 * Los formularios deben usar class="input" / class="select" en los widgets.
 * En modo oscuro, fondo claro y texto oscuro para buena legibilidad.        */
.input,
.input:focus,
.input:active,
.input:has(input:focus),
.input:has(input:active),
.select,
.select:focus,
.select:active,
.textarea,
.textarea:focus,
.textarea:active {
  background-color: #fff !important;
  color: var(--tw-gray-900, #1f2937) !important;
}

.input:not(input) input {
  color: var(--tw-gray-900, #1f2937) !important;
  border: none !important;
  padding: 0 !important;
  min-height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Fallback: inputs nativos de Django sin clase explícita en formularios */
.card-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not(.input):not(.flatpickr-date),
.card-body select:not(.select),
.card-body textarea:not(.textarea) {
  display: flex;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.25;
  border-radius: 0.375rem;
  border: 1px solid var(--tw-gray-300, #d1d5db);
  background-color: #fff;
  color: var(--tw-gray-900, #1f2937);
}

.card-body input[type="checkbox"]:not(.checkbox),
.card-body input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--tw-primary, #3b82f6);
}

/* Labels legibles en modo oscuro */
.dark .form-label:not(.text-danger):not(.text-primary):not(.text-success):not(.text-warning):not(.text-info) {
  color: var(--tw-gray-900, #e8f0f8) !important;
}

/* ─── DataTables — integración con el theme del proyecto ─────────────────
 * Ocultar controles nativos de DT (usamos filtro custom en cada vista).
 * Se aplica globalmente a todas las vistas de lista que usen DatatableMixin.
 * ──────────────────────────────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { display: none !important; }

/* Footer: info + paginación en una sola fila */
.dt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e4e6ef;
  padding: 12px 20px;
}
.dt-footer .dataTables_info {
  color: #a1a5b7;
  font-size: 12.5px;
  padding: 0;
  margin: 0;
}
.dt-footer .dataTables_paginate { padding: 0; }
.dataTables_wrapper .page-link {
  color: #5e6278;
  border-radius: 6px !important;
  font-size: 13px;
  min-width: 32px;
  text-align: center;
}
.dataTables_wrapper .page-item.active .page-link {
  background-color: var(--tw-primary, #3b82f6);
  border-color: var(--tw-primary, #3b82f6);
  color: #fff;
}
.dataTables_wrapper .page-item.disabled .page-link { opacity: .4; }

/* ─── Sidebar logo ───────────────────────────────────────────────────────
 * max-h-[50px] de Tailwind no existe en el bundle pre-compilado de Metronic;
 * se aplica aquí con CSS plano para que tome efecto. */
.sidebar .sidebar-header .default-logo,
.sidebar .sidebar-header .small-logo {
  max-height: 50px;
  width: auto;
}

/* Avatar circular en columna de identificación */
.dt-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 4px;
}
.dt-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(59, 130, 246, .12);
  color: var(--tw-primary, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}