/* ============================================================
   3S Proveedores - Admin Panel Stylesheet
   Modern, dense, professional UI inspired by Linear/Stripe/Vercel.
   ============================================================ */

/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --navy:        #00295E;
  --navy-700:    #003a85;
  --navy-300:    #5a7ba8;
  --cyan:        #007FB6;
  --cyan-700:    #0066a0;
  --cyan-100:    #e0f1fa;

  /* Neutral palette */
  --gray-50:     #f8fafc;
  --gray-100:    #f1f5f9;
  --gray-200:    #e2e8f0;
  --gray-300:    #cbd5e1;
  --gray-400:    #94a3b8;
  --gray-500:    #64748b;
  --gray-600:    #475569;
  --gray-700:    #334155;
  --gray-800:    #1e293b;
  --gray-900:    #0f172a;

  /* Semantic */
  --success:     #10b981;
  --warning:     #f59e0b;
  --danger:      #ef4444;
  --info:        #3b82f6;

  /* Surfaces */
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --border:      #e2e8f0;
  --text:        #0f172a;
  --text-muted:  #64748b;

  /* Layout metrics */
  --topbar-h:     56px;
  --sidebar-w:   240px;

  /* Misc */
  --radius:      8px;
  --radius-lg:   12px;
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, .05);
  --shadow:      0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg:   0 12px 32px rgba(15, 23, 42, .12);
}

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.fw-bold { font-weight: 600; }
.fw-bolder { font-weight: 700; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .82rem; }

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
  z-index: 50;
  box-shadow: var(--shadow);
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.topbar__brand span { color: var(--cyan-100); font-weight: 500; }
.topbar__title {
  font-size: .9rem;
  color: rgba(255,255,255,.7);
  font-weight: 500;
}
.topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar__link {
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.15);
  transition: background .15s;
}
.topbar__link:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.topbar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
}

/* Avatar del Topbar */
.topbar__user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color .15s ease;
  box-sizing: border-box;
}

/* Cuando tiene imagen de avatar (se activa desde JS) */
.topbar__user-avatar.has-image {
  background-color: transparent;
  border-color: var(--border);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 16px 0;
  overflow-y: auto;
  z-index: 40;
}
.sidebar__section {
  padding: 8px 20px 4px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .06em;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: var(--gray-700);
  font-size: .88rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  cursor: pointer;
}
.nav-link:hover {
  background: var(--gray-50);
  color: var(--navy);
  text-decoration: none;
}
.nav-link.active {
  background: var(--cyan-100);
  color: var(--navy);
  border-left-color: var(--cyan);
  font-weight: 600;
}
.nav-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-link .badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: .65rem;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
}

/* ── Main content area ────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  padding: 24px;
  min-height: calc(100vh - var(--topbar-h));
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.page-subtitle {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Card ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 20px;
}
.card__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--gray-900);
}
.card__body { padding: 20px; }

/* ── Stat cards (dashboard) ───────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.stat-card__icon {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cyan-100);
  color: var(--cyan-700);
}
.stat-card__num {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin-top: 8px;
}
.stat-card__label {
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.stat-card--accent  { background: linear-gradient(135deg, var(--navy), var(--cyan)); color: #fff; }
.stat-card--accent .stat-card__num { color: #fff; }
.stat-card--accent .stat-card__label { color: rgba(255,255,255,.85); }
.stat-card--accent .stat-card__icon { background: rgba(255,255,255,.2); color: #fff; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-700); }
.btn--secondary { background: var(--cyan); color: #fff; }
.btn--secondary:hover { background: var(--cyan-700); }
.btn--outline { background: var(--surface); color: var(--gray-700); border-color: var(--border); }
.btn--outline:hover { background: var(--gray-50); border-color: var(--gray-300); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #dc2626; }
.btn--ghost { background: transparent; color: var(--gray-600); }
.btn--ghost:hover { background: var(--gray-100); color: var(--navy); }

.btn--sm { padding: 5px 10px; font-size: .76rem; }
.btn--xs { padding: 3px 8px; font-size: .72rem; }
.btn--block { width: 100%; justify-content: center; }

.btn svg { width: 14px; height: 14px; }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-700);
}
.form-label .required { color: var(--danger); }
.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .88rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.form-control:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,127,182,.12);
}
.form-control:disabled { background: var(--gray-100); cursor: not-allowed; }

.form-hint {
  font-size: .74rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.form-error {
  font-size: .75rem;
  color: var(--danger);
  margin-top: 4px;
  font-weight: 500;
}
.form-control.is-invalid {
  border-color: var(--danger);
}

.form-grid {
  display: grid;
  gap: 14px;
}
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid--full { grid-column: 1/-1; }

.checkbox-row {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: var(--gray-700); cursor: pointer;
}
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--cyan); }

/* ── Tables ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}
.table th, .table td {
  padding: 12px 16px;
  text-align: left;
  font-size: .85rem;
  border-bottom: 1px solid var(--border);
}
.table th {
  background: var(--gray-50);
  font-weight: 700;
  color: var(--gray-700);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  position: sticky; top: 0; z-index: 1;
}
.table tbody tr:hover { background: var(--gray-50); }
.table tbody tr:last-child td { border-bottom: none; }
.table .actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

/* ── Status pills ────────────────────────────────────────── */
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status--active   { background: #d1fae5; color: #065f46; }
.status--inactive { background: #fee2e2; color: #991b1b; }
.status--new      { background: #dbeafe; color: #1e40af; }
.status--review   { background: #fef3c7; color: #92400e; }
.status--done     { background: #d1fae5; color: #065f46; }
.status--closed   { background: var(--gray-200); color: var(--gray-700); }

/* ── Toolbar ─────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.search-input {
  flex: 1; min-width: 220px;
  position: relative;
}
.search-input input {
  width: 100%; padding: 8px 12px 8px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
  background: var(--surface);
}
.search-input::before {
  content: '🔍';
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: .82rem; opacity: .5;
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--gray-50);
  font-size: .82rem;
}
.pagination__info { color: var(--text-muted); }
.pagination__controls { display: flex; gap: 4px; }
.pagination__btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  font-size: .8rem;
  color: var(--gray-700);
}
.pagination__btn:hover:not(:disabled) { background: var(--cyan-100); border-color: var(--cyan); }
.pagination__btn:disabled { opacity: .4; cursor: not-allowed; }
.pagination__btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 600px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal--lg { max-width: 820px; }
.modal--sm { max-width: 420px; }
.modal__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal__title { font-size: 1rem; font-weight: 700; color: var(--gray-900); }
.modal__close {
  background: none; border: none;
  font-size: 1.4rem;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0; width: 28px; height: 28px;
  border-radius: 6px;
}
.modal__close:hover { color: var(--gray-700); background: var(--gray-100); }
.modal__body { padding: 20px; overflow-y: auto; flex: 1; }
.modal__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
  background: var(--gray-50);
}

/* ── Toast ───────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 70px; right: 20px;
  z-index: 200;
  display: flex; flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--gray-900);
  color: #fff;
  padding: 11px 16px;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  min-width: 240px; max-width: 380px;
  pointer-events: auto;
  animation: toastIn .25s ease-out;
}
.toast--success { background: var(--success); }
.toast--error   { background: var(--danger); }
.toast--warning { background: var(--warning); color: var(--gray-900); }
.toast--info    { background: var(--info); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Login screen ────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy), var(--cyan));
  padding: 20px;
}
.login-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 36px;
  width: 100%; max-width: 400px;
  box-shadow: var(--shadow-lg);
}
.login-card__brand {
  text-align: center;
  margin-bottom: 28px;
}
.login-card__title {
  font-size: 1.5rem; font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
}
.login-card__title span { color: var(--cyan); }
.login-card__sub {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Empty / loading states ──────────────────────────────── */
.empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
}
.empty__icon { font-size: 2.4rem; opacity: .4; margin-bottom: 12px; }
.empty__text { font-size: .9rem; }

.loader {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--cyan-100);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-row { text-align: center; padding: 28px; color: var(--text-muted); }

/* ── Image preview ───────────────────────────────────────── */
.img-thumb {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--gray-100);
}
.img-thumb--lg { width: 80px; height: 80px; }

.img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.img-grid__item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
}
.img-grid__item img { width: 100%; height: 100%; object-fit: cover; }
.img-grid__item--primary { border-color: var(--success); box-shadow: 0 0 0 2px rgba(16,185,129,.3); }
.img-grid__actions {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
  padding: 6px;
  display: flex; gap: 4px;
  opacity: 0; transition: opacity .15s;
}
.img-grid__item:hover .img-grid__actions { opacity: 1; }


/* ── Profile page ────────────────────────────────────────── */
.profile-avatar-wrap {
  width: 160px; height: 160px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--cyan-100);
  box-shadow: var(--shadow);
  background: var(--gray-100);
}
.profile-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-avatar--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy), var(--cyan));
  color: #fff;
  font-size: 3.5rem;
  font-weight: 700;
}

/* Topbar avatar with image background */
.topbar__user-avatar {
  background-size: cover;
  background-position: center;
}


/* ── Cropper modal ───────────────────────────────────────── */
/* ... (tus estilos existentes del cropper) ... */

/* NUEVO: Keyframe para el resplandor pulsante y rotante */
@keyframes cropGlow {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* NUEVO: Pseudo-elemento que crea el anillo de luz */
.cropper-glow-wrapper {
  position: relative;
  display: inline-block; /* Para que se ajuste al canvas */
}

.cropper-glow-wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  /* 
    Ajusta el tamaño para que sea mayor que el canvas (320px) 
    y así envuelva el borde del círculo de recorte.
    El radio del círculo es 160px (320/2). 
    Un ancho/alto de 340px hará que el borde exterior del glow coincida con el borde del círculo.
  */
  width: 334px;  
  height: 334px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 127, 182, 0.2) 40deg,
    rgba(0, 127, 182, 0.8) 90deg,
    rgba(255, 255, 255, 0.9) 140deg,
    rgba(0, 127, 182, 0.8) 190deg,
    rgba(0, 127, 182, 0.2) 240deg,
    transparent 300deg,
    transparent 360deg
  );
  filter: blur(6px); /* Difumina para que sea un resplandor, no un borde duro */
  animation: cropGlow 3s linear infinite;
  pointer-events: none; /* Para no interferir con el arrastre */
  z-index: 10; /* Asegura que esté sobre el canvas */
}


/* ── Roles guide ─────────────────────────────────────────── */
#roles-guide-header {
  user-select: none;
  transition: background .12s;
}
#roles-guide-header:hover {
  background: var(--gray-50);
}



/* ============================================================
   DASHBOARD MEJORADO - 3S Proveedores (Actualizado Jun 2026)
   ============================================================ */

/* --- KPI Cards (más vivos y con color) --- */
.kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  border-left-width: 5px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.kpi-card:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

/* Colores de borde izquierdo según tono */
.kpi-card.border-l-emerald-500 { border-left-color: #10b981; }
.kpi-card.border-l-amber-500   { border-left-color: #f59e0b; }
.kpi-card.border-l-red-500     { border-left-color: #ef4444; }
.kpi-card.border-l-blue-500    { border-left-color: #3b82f6; }
.kpi-card.border-l-\[\#00295E\] { border-left-color: #00295E; }

/* --- Tarjetas principales del dashboard --- */
.dashboard-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.dashboard-card:hover {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

/* Header de las tarjetas */
.dashboard-card .card-header {
  background: #f8fafc;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 700;
  color: #00295E;
}

/* --- Filtros de actividad --- */
.filter-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  transition: all 0.1s ease;
  cursor: pointer;
}

.filter-btn:hover {
  background: #f1f5f9;
}

.filter-btn.active {
  background: #00295E;
  color: white;
  border-color: #00295E;
}

/* --- Activity Feed --- */
#activity-feed > div {
  transition: background-color 0.1s ease;
}

#activity-feed > div:hover {
  background-color: #f8fafc;
}

/* --- Status Pills mejorados --- */
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9999px;
  text-transform: capitalize;
}

/* --- Product Mini Cards --- */
.product-mini-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.product-mini-card:hover {
  border-color: #007FB6;
  box-shadow: 0 4px 12px rgba(0, 127, 182, 0.1);
  transform: translateY(-1px);
}

/* --- Funnel visual --- */
.funnel-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

/* --- Tablas más modernas --- */
.table-modern {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.table-modern thead {
  background: #f8fafc;
}

.table-modern th {
  font-weight: 700;
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table-modern tbody tr {
  transition: background 0.1s ease;
}

.table-modern tbody tr:hover {
  background: #f8fafc;
}

/* --- Mejoras generales de espaciado y vida --- */
.dashboard-section {
  margin-bottom: 24px;
}

.card-header {
  font-weight: 700;
  color: #00295E;
  font-size: 15px;
}

/* Sombras más suaves y modernas */
.shadow-sm {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* Hover lift effect en tarjetas */
.hover-lift {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.09);
}

/* Mejor contraste en textos */
.text-\[\#00295E\] {
  color: #00295E !important;
}

.text-\[\#64748b\] {
  color: #64748b !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .lg\:col-span-7,
  .lg\:col-span-5 {
    grid-column: span 12 / span 12;
  }
}

/* ── Fullscreen app loader ─────────────────────────────────── */
.app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .22s ease;
}
.app-loader.is-visible { opacity: 1; }
 
.app-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
 
.app-loader__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
  animation: app-loader-rise .5s ease both;
}
.app-loader__brand-text {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.app-loader__brand-text span { color: var(--cyan); font-weight: 600; }
 
.app-loader__spinner {
  width: 52px;
  height: 52px;
  position: relative;
  animation: app-loader-rise .5s .1s ease both;
}
.app-loader__spinner::before,
.app-loader__spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}
.app-loader__spinner::before {
  border-top-color: var(--cyan);
  border-right-color: var(--cyan);
  animation: app-loader-spin 0.8s linear infinite;
}
.app-loader__spinner::after {
  border-bottom-color: var(--navy);
  border-left-color: var(--navy);
  opacity: .35;
  animation: app-loader-spin 1.4s linear infinite reverse;
}
 
.app-loader__msg {
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  color: var(--gray-500);
  font-weight: 500;
  letter-spacing: .01em;
  animation: app-loader-rise .5s .2s ease both;
}
 
@keyframes app-loader-spin {
  to { transform: rotate(360deg); }
}
@keyframes app-loader-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
/* ── Inline module loader ──────────────────────────────────── */
.module-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 240px;
  padding: 40px 20px;
  color: var(--gray-500);
}
.module-loader__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: app-loader-spin .8s linear infinite;
}
.module-loader__msg {
  font-size: .85rem;
  font-weight: 500;
  color: var(--gray-500);
}
 
/* ── Button spinner ────────────────────────────────────────── */
.btn-loader__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: app-loader-spin .7s linear infinite;
  margin-right: 6px;
  vertical-align: -2px;
  opacity: .85;
}
 
/* ── Bonus: improve existing .loader for legacy callers ───── */
.loader {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: app-loader-spin .8s linear infinite;
}
 
.loading-row {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-500);
}


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0; }
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; padding: 16px; }
  .form-grid--2, .form-grid--3 { grid-template-columns: 1fr; }
  .topbar { padding: 0 12px; }
  .topbar__title { display: none; }
  .topbar__user span { display: none; }
}