/* AsistControl — tema de marca compartido (header.php + login.php)
   Solo overrides de Bootstrap/SweetAlert2 que no viven ya en el <style> embebido
   de cada vista. No toca los colores semánticos success/warning/danger/info. */

:root {
  --brand-coral: #ff7a45;
  --brand-coral-dark: #f2643a;
  --brand-cyan: #5bc0de;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-soft: 0 10px 30px -14px rgba(20, 32, 51, 0.25);
}

/* ===== Wordmark "AsistControl" (dos tonos) =====
   Sobre fondo oscuro (sidebar, login-header): blanco + cian de marca,
   para mantener contraste — el navy+azul del isotipo original se pierde
   contra un fondo navy. */
.wm-light { color: #fff; }
.wm-accent { color: var(--brand-cyan); }

/* ===== Tipografía ===== */
body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.page-title, .brand span, .card-header, .modal-title,
.login-header h4 {
  font-family: 'Sora', 'Segoe UI', sans-serif;
}

/* ===== Color de marca (primary -> coral) ===== */
a {
  color: var(--sidebar-accent, #2d6a9f);
}
a:hover {
  color: var(--brand-coral);
}

.btn-primary {
  --bs-btn-bg: var(--brand-coral);
  --bs-btn-border-color: var(--brand-coral);
  --bs-btn-hover-bg: var(--brand-coral-dark);
  --bs-btn-hover-border-color: var(--brand-coral-dark);
  --bs-btn-active-bg: var(--brand-coral-dark);
  --bs-btn-active-border-color: var(--brand-coral-dark);
  --bs-btn-disabled-bg: var(--brand-coral);
  --bs-btn-disabled-border-color: var(--brand-coral);
  --bs-btn-focus-shadow-rgb: 255, 122, 69;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-coral);
  --bs-btn-border-color: var(--brand-coral);
  --bs-btn-hover-bg: var(--brand-coral);
  --bs-btn-hover-border-color: var(--brand-coral);
  --bs-btn-active-bg: var(--brand-coral);
  --bs-btn-active-border-color: var(--brand-coral);
  --bs-btn-focus-shadow-rgb: 255, 122, 69;
}
.bg-primary { background-color: var(--brand-coral) !important; }
.text-primary { color: var(--brand-coral) !important; }
.border-primary { border-color: var(--brand-coral) !important; }

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-coral);
  box-shadow: 0 0 0 .25rem rgba(255, 122, 69, .25);
}
.form-check-input:checked {
  background-color: var(--brand-coral);
  border-color: var(--brand-coral);
}

/* Paginación DataTables */
.page-link { color: var(--brand-coral); }
.page-item.active .page-link {
  background-color: var(--brand-coral);
  border-color: var(--brand-coral);
}

/* ===== Badges tipo chip, tono pastel =====
   Fondo claro + texto del mismo color, en vez del relleno sólido de Bootstrap.
   Los colores semánticos (verde=ok, rojo=peligro, ámbar=aviso...) no cambian,
   solo la intensidad del relleno — menos ruido visual en tablas con muchas filas. */
.badge { border-radius: 999px; font-weight: 600; }
.badge.bg-success { background-color: #e3f8ee !important; color: #1f9d5c !important; }
.badge.bg-danger  { background-color: #fde8e8 !important; color: #c0392b !important; }
.badge.bg-warning { background-color: #fff4e0 !important; color: #b7791f !important; }
.badge.bg-info    { background-color: #e0f4fb !important; color: #0f7490 !important; }
.badge.bg-primary { background-color: #ffe9e0 !important; color: var(--brand-coral-dark) !important; }
.badge.bg-secondary { background-color: #eef1f5 !important; color: #5b6472 !important; }
.badge.bg-dark    { background-color: #e4e8ee !important; color: #1f2937 !important; }

/* ===== Encabezados de tabla ===== */
.table thead th {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  color: #6b7788;
  background: #f6f9fc;
}

/* ===== Botones y controles ligeramente más redondeados ===== */
.btn { border-radius: .65rem; }
.btn-sm { border-radius: .5rem; }
.form-control, .form-select { border-radius: .6rem; }
.modal-content { border-radius: var(--radius-md); border: none; }

/* ===== SweetAlert2 ===== */
.swal2-popup {
  border-radius: var(--radius-lg) !important;
  font-family: 'Inter', 'Segoe UI', sans-serif !important;
}
.swal2-title {
  font-family: 'Sora', 'Segoe UI', sans-serif !important;
}
.swal2-confirm {
  background-color: var(--brand-coral) !important;
  border-radius: .6rem !important;
}
.swal2-confirm:focus {
  box-shadow: 0 0 0 .25rem rgba(255, 122, 69, .35) !important;
}

/* ===== Avatar + menú de usuario (topbar) ===== */
.user-avatar-btn { background: transparent; border: none; padding: 0; cursor: pointer; line-height: 0; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #1e3a5f, var(--brand-cyan));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: .82rem;
}
.user-menu-dropdown {
  min-width: 230px; padding: .5rem; margin-top: .5rem !important;
  border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
}
.user-menu-header { padding: .5rem .75rem .25rem; }
.user-menu-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: .92rem; color: #14202e; }
.user-menu-meta { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.user-menu .dropdown-item { border-radius: .5rem; padding: .5rem .75rem; }
.user-menu .dropdown-item.text-danger:hover { background: #fde8e8; }

/* ===== Buscador rápido (quick nav) del topbar ===== */
.quick-nav { position: relative; }
.quick-nav-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #8996a6; font-size: .78rem; pointer-events: none;
}
.quick-nav-input {
  width: 170px; border: 1px solid #e3e9f0; background: #f6f9fc;
  border-radius: 999px; padding: .4rem .75rem .4rem 2rem; font-size: .84rem;
  transition: width .2s ease, background .2s ease, border-color .2s ease;
}
.quick-nav-input:focus {
  outline: none; width: 240px; background: #fff;
  border-color: var(--brand-coral); box-shadow: 0 0 0 .2rem rgba(255, 122, 69, .15);
}
.quick-nav-results {
  position: absolute; top: calc(100% + 8px); left: 0; width: 240px;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  overflow: hidden; z-index: 1050; display: none;
}
.quick-nav-results.show { display: block; }
.quick-nav-result {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem;
  font-size: .85rem; color: #14202e; text-decoration: none;
}
.quick-nav-result:hover, .quick-nav-result.is-active { background: #f6f9fc; color: #14202e; }
.quick-nav-result i { width: 16px; color: var(--brand-coral); font-size: .8rem; }
.quick-nav-empty { padding: .6rem .8rem; font-size: .82rem; color: #8996a6; }

/* ===== Breadcrumb ===== */
.app-breadcrumb { margin-bottom: .9rem; }
.app-breadcrumb .breadcrumb { margin: 0; font-size: .8rem; }
.app-breadcrumb .breadcrumb-item, .app-breadcrumb .breadcrumb-item a { color: #8996a6; }
.app-breadcrumb .breadcrumb-item a { text-decoration: none; }
.app-breadcrumb .breadcrumb-item a:hover { color: var(--brand-coral); }
.app-breadcrumb .breadcrumb-item.active { color: #14202e; font-weight: 600; }

/* ===== Tarjetas de estadísticas planas (dashboard) ===== */
.stat-tile {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .65rem;
  height: 100%;
}
.stat-tile-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.stat-tile-value { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.6rem; color: #14202e; line-height: 1; }
.stat-tile-label { font-size: .82rem; color: #6b7788; }
.stat-tile-icon.tint-blue    { background: #e0f4fb; color: #0f7490; }
.stat-tile-icon.tint-green   { background: #e3f8ee; color: #1f9d5c; }
.stat-tile-icon.tint-orange  { background: #fff4e0; color: #b7791f; }
.stat-tile-icon.tint-red     { background: #fde8e8; color: #c0392b; }
.stat-tile-icon.tint-purple  { background: #ebe5f6; color: #6f42c1; }
.stat-tile-icon.tint-neutral { background: #eef1f5; color: #5b6472; }

@media (max-width: 991px) {
  .quick-nav { display: none; }
}