/* ============================================================
   CENTRAL SEOluciones — Design System & Styles
   Professional, responsive, neutral, reusable
   ============================================================ */

/* ---------- RESET & BASE ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #f0f2f5;
  color: #1a1a2e;
  line-height:1.5;
  min-height:100vh;
}

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #dbeafe;
  --success: #16a34a;
  --success-light: #dcfce7;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --danger: #dc2626;
  --danger-light: #fecaca;
  --info: #0891b2;
  --info-light: #cffafe;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --sidebar-width: 250px;
  --sidebar-collapsed: 64px;
  --topbar-height: 60px;
  --radius: 8px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
  --transition: 0.2s ease;
}

a { color: var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4,h5,h6 { font-weight:600; line-height:1.3; }
h1 { font-size:1.75rem; }
h2 { font-size:1.4rem; }
h3 { font-size:1.15rem; }
small { font-size:.8rem; color: var(--gray-500); }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gray-400); }

/* ---------- LOGIN SCREEN ---------- */
.login-screen {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #2563eb 100%);
  padding:1rem;
}
.login-container {
  background:#fff; border-radius:16px; padding:2.5rem;
  width:100%; max-width:440px; box-shadow: var(--shadow-lg);
}
.login-header { text-align:center; margin-bottom:2rem; }
.login-logo { font-size:3rem; margin-bottom:.5rem; }
.login-header h1 { font-size:1.5rem; color: var(--gray-900); }
.login-subtitle { color: var(--gray-500); margin-top:.25rem; }
.login-form .form-group { margin-bottom:1.25rem; }
.login-form label { display:block; font-size:.85rem; font-weight:600; color:var(--gray-700); margin-bottom:.35rem; }
.login-form .form-input { width:100%; }
.login-footer { text-align:center; margin-top:1.5rem; }

/* ---------- APP SHELL ---------- */
.app-shell { display:flex; min-height:100vh; }

/* ---------- SIDEBAR ---------- */
.sidebar {
  width: var(--sidebar-width); min-height:100vh;
  background: var(--gray-900); color:#fff;
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:100;
  transition: transform var(--transition);
  overflow-y:auto;
}
.sidebar.collapsed { transform: translateX(-100%); }
.sidebar-brand {
  display:flex; align-items:center; gap:.5rem;
  padding:1rem 1.25rem; border-bottom:1px solid var(--gray-700);
  height: var(--topbar-height);
}
.sidebar-logo { font-size:1.5rem; }
.sidebar-title { font-weight:700; font-size:1.1rem; white-space:nowrap; }
.sidebar-toggle { background:none; border:none; color:#fff; font-size:1.25rem; cursor:pointer; margin-left:auto; padding:.25rem; }
.sidebar-nav { flex:1; padding:.75rem 0; }
.sidebar-nav .nav-section { padding:.5rem 1.25rem .25rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-400); }
.sidebar-nav a {
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem 1.25rem; color:var(--gray-300);
  font-size:.9rem; transition: all var(--transition);
  border-left:3px solid transparent;
  text-decoration:none;
}
.sidebar-nav a:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.sidebar-nav a.active { background:rgba(37,99,235,.2); color:#fff; border-left-color:var(--primary); font-weight:600; }
.sidebar-nav a .nav-icon { font-size:1.1rem; width:1.5rem; text-align:center; }
.sidebar-footer { padding:1rem 1.25rem; border-top:1px solid var(--gray-700); }
.sidebar-user { font-size:.85rem; color:var(--gray-300); display:flex; align-items:center; gap:.5rem; }

.sidebar-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99;
}
.sidebar-overlay.show { display:block; }

/* ---------- MAIN CONTENT ---------- */
.main-content { flex:1; margin-left:var(--sidebar-width); transition: margin-left var(--transition); min-width:0; }
.sidebar.collapsed ~ .main-content { margin-left:0; }

/* ---------- TOPBAR ---------- */
.topbar {
  display:flex; align-items:center; gap:1rem;
  height: var(--topbar-height); padding:0 1.5rem;
  background:#fff; border-bottom:1px solid var(--gray-200);
  position:sticky; top:0; z-index:50;
}
.topbar-menu-btn {
  display:none; background:none; border:none;
  font-size:1.4rem; cursor:pointer; color:var(--gray-600);
}
.topbar-breadcrumb { font-size:.9rem; color:var(--gray-600); font-weight:500; flex:1; }
.topbar-breadcrumb span { color:var(--gray-400); }
.topbar-actions { display:flex; align-items:center; gap:.5rem; }
.topbar-btn {
  background:none; border:none; font-size:1.2rem; cursor:pointer;
  padding:.35rem; border-radius:var(--radius-sm); color:var(--gray-500);
}
.topbar-btn:hover { background:var(--gray-100); }
.topbar-user-btn {
  display:flex; align-items:center; gap:.5rem;
  background:none; border:none; cursor:pointer; padding:.35rem .5rem;
  border-radius:var(--radius-sm); font-size:.9rem; color:var(--gray-700);
}
.topbar-user-btn:hover { background:var(--gray-100); }
.topbar-avatar { font-size:1.2rem; }
.topbar-user-dropdown { position:relative; }
.topbar-dropdown {
  position:absolute; right:0; top:110%; background:#fff;
  border:1px solid var(--gray-200); border-radius:var(--radius);
  box-shadow: var(--shadow-md); min-width:180px; z-index:200;
}
.topbar-dropdown a {
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; color:var(--gray-700); font-size:.85rem;
  text-decoration:none; transition: background var(--transition);
}
.topbar-dropdown a:hover { background:var(--gray-50); text-decoration:none; }

/* ---------- PAGE CONTENT ---------- */
.page-content { padding:1.5rem; }

/* ---------- CARDS ---------- */
.card {
  background:#fff; border-radius:var(--radius);
  box-shadow: var(--shadow); border:1px solid var(--gray-100);
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--gray-100);
}
.card-header h3 { font-size:1.05rem; }
.card-body { padding:1.25rem; }
.card-footer {
  padding:.75rem 1.25rem; border-top:1px solid var(--gray-100);
  display:flex; gap:.5rem; justify-content:flex-end;
}

/* ---------- STATS CARDS ---------- */
.stats-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:1rem; margin-bottom:1.5rem;
}
.stat-card {
  background:#fff; border-radius:var(--radius); padding:1.25rem;
  box-shadow: var(--shadow-sm); border:1px solid var(--gray-100);
}
.stat-card .stat-icon { font-size:2rem; margin-bottom:.5rem; }
.stat-card .stat-value { font-size:1.75rem; font-weight:700; color:var(--gray-900); }
.stat-card .stat-label { font-size:.8rem; color:var(--gray-500); margin-top:.25rem; }
.stat-card.primary { border-left:4px solid var(--primary); }
.stat-card.success { border-left:4px solid var(--success); }
.stat-card.warning { border-left:4px solid var(--warning); }
.stat-card.danger { border-left:4px solid var(--danger); }

/* ---------- TABLES ---------- */
.table-responsive { overflow-x:auto; }
table {
  width:100%; border-collapse:collapse; font-size:.9rem;
}
thead th {
  background:var(--gray-50); padding:.65rem .75rem;
  text-align:left; font-weight:600; color:var(--gray-600);
  border-bottom:2px solid var(--gray-200); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.02em; white-space:nowrap;
}
tbody td {
  padding:.65rem .75rem; border-bottom:1px solid var(--gray-100);
  color:var(--gray-700); vertical-align:middle;
}
tbody tr:hover { background:var(--gray-50); }
tbody tr.clickable { cursor:pointer; }

/* ---------- FORMS ---------- */
.form-group { margin-bottom:1.25rem; }
.form-group label {
  display:block; font-size:.85rem; font-weight:600;
  color:var(--gray-700); margin-bottom:.35rem;
}
.form-input, .form-select, textarea {
  width:100%; padding:.55rem .75rem; font-size:.9rem;
  border:1px solid var(--gray-300); border-radius:var(--radius-sm);
  background:#fff; color:var(--gray-900); transition: border-color var(--transition);
  font-family:inherit;
}
.form-input:focus, .form-select:focus, textarea:focus {
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light);
}
.form-input.sm { padding:.35rem .55rem; font-size:.8rem; }
textarea { resize:vertical; min-height:80px; }
.form-hint { font-size:.75rem; color:var(--gray-400); margin-top:.25rem; }
.form-inline { display:flex; gap:.75rem; align-items:center; }
.form-inline .form-group { margin-bottom:0; }
.form-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; }

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1rem; font-size:.85rem; font-weight:500;
  border-radius:var(--radius-sm); cursor:pointer; border:1px solid transparent;
  transition: all var(--transition); text-decoration:none;
  white-space:nowrap; font-family:inherit;
}
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#15803d; }
.btn-warning { background:var(--warning); color:#000; }
.btn-warning:hover { background:#d97706; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#b91c1c; }
.btn-outline { background:transparent; border-color:var(--gray-300); color:var(--gray-700); }
.btn-outline:hover { background:var(--gray-50); border-color:var(--gray-400); }
.btn-sm { padding:.3rem .65rem; font-size:.78rem; }
.btn-lg { padding:.65rem 1.25rem; font-size:.95rem; }
.btn-block { width:100%; justify-content:center; }
.btn-icon { padding:.4rem; min-width:32px; justify-content:center; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

/* ---------- BADGES ---------- */
.badge {
  display:inline-flex; align-items:center; padding:.15em .55em;
  font-size:.75rem; font-weight:600; border-radius:20px;
  white-space:nowrap;
}
.badge-primary { background:var(--primary-light); color:var(--primary); }
.badge-success { background:var(--success-light); color:var(--success); }
.badge-warning { background:var(--warning-light); color:#92400e; }
.badge-danger { background:var(--danger-light); color:var(--danger); }
.badge-info { background:var(--info-light); color:var(--info); }
.badge-gray { background:var(--gray-100); color:var(--gray-600); }

/* ---------- MODALS ---------- */
.modal-overlay {
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:500;
  padding:1rem;
}
.modal-container {
  background:#fff; border-radius:var(--radius); width:100%;
  max-width:700px; max-height:90vh; overflow-y:auto;
  box-shadow: var(--shadow-lg);
}
.modal-container.modal-lg { max-width:900px; }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--gray-200);
}
.modal-header h3 { font-size:1.1rem; }
.modal-close { background:none; border:none; font-size:1.25rem; cursor:pointer; color:var(--gray-400); }
.modal-close:hover { color:var(--gray-700); }
.modal-body { padding:1.25rem; }

/* ---------- TOASTS ---------- */
.toast-container {
  position:fixed; top:1rem; right:1rem; z-index:9999;
  display:flex; flex-direction:column; gap:.5rem; max-width:380px;
}
.toast {
  padding:.85rem 1rem; border-radius:var(--radius);
  color:#fff; font-size:.85rem; box-shadow: var(--shadow-md);
  display:flex; align-items:center; gap:.5rem; animation: slideIn .25s ease;
  cursor:pointer;
}
.toast-success { background:var(--success); }
.toast-error { background:var(--danger); }
.toast-info { background:var(--info); }
.toast-warning { background:var(--warning); color:#000; }
@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* ---------- TABS ---------- */
.tabs { display:flex; gap:0; border-bottom:2px solid var(--gray-200); margin-bottom:1.25rem; }
.tab-btn {
  padding:.65rem 1.25rem; font-size:.85rem; font-weight:500;
  border:none; background:none; cursor:pointer; color:var(--gray-500);
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition: all var(--transition);
}
.tab-btn:hover { color:var(--gray-700); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }

/* ---------- BUILDER SPECIFIC ---------- */
.builder-layout { display:grid; grid-template-columns:1fr 340px; gap:1.5rem; }
.builder-preview { min-height:400px; }
.builder-settings { }
.field-item {
  display:flex; align-items:center; gap:.75rem; padding:.65rem .75rem;
  background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-sm);
  margin-bottom:.5rem; cursor:move; transition: background var(--transition);
}
.field-item:hover { background:#fff; }
.field-item.dragging { opacity:.5; background:var(--primary-light); }
.field-item .field-drag-handle { color:var(--gray-400); cursor:grab; font-size:1.1rem; }
.field-item .field-info { flex:1; min-width:0; }
.field-item .field-info .field-label { font-weight:600; font-size:.85rem; }
.field-item .field-info .field-type { font-size:.75rem; color:var(--gray-500); }
.field-item .field-actions { display:flex; gap:.25rem; }
.field-toggle { display:flex; align-items:center; gap:.5rem; font-size:.85rem; }

/* ---------- SWITCH TOGGLE ---------- */
.switch {
  position:relative; display:inline-block; width:40px; height:22px;
}
.switch input { opacity:0; width:0; height:0; }
.switch .slider {
  position:absolute; cursor:pointer; inset:0;
  background:var(--gray-300); border-radius:22px; transition: var(--transition);
}
.switch .slider::before {
  content:''; position:absolute; height:16px; width:16px;
  left:3px; bottom:3px; background:#fff; border-radius:50%; transition: var(--transition);
}
.switch input:checked + .slider { background:var(--primary); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* ---------- EMPTY STATE ---------- */
.empty-state {
  text-align:center; padding:3rem 1.5rem; color:var(--gray-400);
}
.empty-state .empty-icon { font-size:3rem; margin-bottom:1rem; }
.empty-state h3 { color:var(--gray-600); margin-bottom:.5rem; }
.empty-state p { font-size:.9rem; }

/* ---------- DASHBOARD SPECIFIC ---------- */
.chart-placeholder {
  display:flex; align-items:center; justify-content:center;
  height:200px; background:var(--gray-50); border-radius:var(--radius);
  color:var(--gray-400); font-size:.9rem; border:2px dashed var(--gray-200);
}
.activity-list { list-style:none; }
.activity-list li {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.65rem 0; border-bottom:1px solid var(--gray-100);
}
.activity-list li:last-child { border-bottom:none; }
.activity-dot {
  width:8px; height:8px; border-radius:50%; background:var(--primary);
  margin-top:.4rem; flex-shrink:0;
}
.activity-time { font-size:.75rem; color:var(--gray-400); }
.dashboard-heading {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.data-source-tag {
  display:inline-flex; align-items:center; padding:.35rem .65rem; border-radius:999px;
  color:#166534; background:#dcfce7; border:1px solid #bbf7d0; font-size:.75rem; font-weight:700;
}
.mock-data-notice {
  margin:0 0 1rem; padding:.75rem 1rem; border:1px solid #fde68a; border-radius:var(--radius);
  color:#854d0e; background:#fffbeb; font-size:.85rem;
}
.mock-label {
  display:inline-block; margin-left:.35rem; color:#854d0e; font-size:.7rem; font-weight:600;
}
.login-alert {
  margin-bottom:1rem; padding:.75rem 1rem; border:1px solid #fecaca; border-radius:var(--radius);
  color:#991b1b; background:#fef2f2; font-size:.9rem;
}
.login-notice {
  margin-bottom:1rem; padding:.75rem 1rem; border:1px solid #bbf7d0; border-radius:var(--radius);
  color:#166534; background:#f0fdf4; font-size:.9rem;
}

/* ---------- UTILITIES ---------- */
.mb-1 { margin-bottom:.5rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }
.mt-1 { margin-top:.5rem; }
.mt-2 { margin-top:1rem; }
.mr-1 { margin-right:.5rem; }
.d-flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.gap-1 { gap:.5rem; }
.gap-2 { gap:1rem; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.flex-1 { flex:1; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.text-danger { color:var(--danger); }
.text-success { color:var(--success); }
.text-muted { color:var(--gray-500); }
.text-sm { font-size:.8rem; }
.text-lg { font-size:1.1rem; }
.font-bold { font-weight:700; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hidden { display:none; }
.color-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.35rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .builder-layout { grid-template-columns:1fr; }
}
@media (max-width: 768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0 !important; }
  .topbar-menu-btn { display:block; }
  .page-content { padding:1rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns:1fr; }
  .modal-container { max-width:95vw; }
  .table-responsive { font-size:.8rem; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns:1fr; }
  .topbar { padding:0 .75rem; }
  .topbar-breadcrumb { display:none; }
  .login-container { padding:1.5rem; }
}

/* ============================================================
   BLOCK 7 — LIGHT INTERFACE
   ============================================================ */
:root {
  --primary:#1a73e8;
  --primary-dark:#1558b0;
  --primary-light:#e8f0fe;
  --success:#188038;
  --success-light:#e6f4ea;
  --warning:#b06000;
  --warning-light:#fef7e0;
  --danger:#d93025;
  --danger-light:#fce8e6;
  --info:#087ea4;
  --info-light:#e0f2fe;
  --gray-50:#f8fafd;
  --gray-100:#f1f3f4;
  --gray-200:#e3e7ed;
  --gray-300:#cbd2dc;
  --gray-400:#9aa0a6;
  --gray-500:#6b7280;
  --gray-600:#5f6368;
  --gray-700:#3c4043;
  --gray-800:#202124;
  --gray-900:#17181a;
  --sidebar-width:268px;
  --topbar-height:68px;
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(60,64,67,.06);
  --shadow:0 1px 2px rgba(60,64,67,.08),0 1px 3px 1px rgba(60,64,67,.04);
  --shadow-md:0 4px 14px rgba(60,64,67,.12);
  --shadow-lg:0 12px 32px rgba(60,64,67,.15);
}

body { background:#f6f8fc; color:var(--gray-800); letter-spacing:-.005em; }
h1,h2,h3,h4,h5,h6 { letter-spacing:-.02em; }
a { transition:color var(--transition),background var(--transition); }

.login-screen {
  background:
    radial-gradient(circle at 12% 12%,rgba(26,115,232,.09),transparent 30%),
    radial-gradient(circle at 90% 88%,rgba(66,133,244,.07),transparent 28%),
    #f8fafd;
  padding:2rem 1rem;
}
.login-container {
  max-width:430px; padding:2.75rem; border:1px solid var(--gray-200);
  border-radius:24px; box-shadow:0 12px 40px rgba(60,64,67,.10);
}
.login-header { margin-bottom:2.25rem; }
.login-logo {
  display:grid; place-items:center; width:58px; height:58px; margin:0 auto 1rem;
  border-radius:18px; color:#fff; background:linear-gradient(145deg,#1a73e8,#4c8bf5);
  font-size:1.75rem; box-shadow:0 8px 20px rgba(26,115,232,.20);
}
.login-header h1 { font-size:1.65rem; font-weight:650; }
.login-subtitle { margin-top:.45rem; font-size:.92rem; }
.login-form .form-group { margin-bottom:1.35rem; }
.login-footer { margin-top:1.75rem; font-size:.9rem; }

.app-shell { background:#f6f8fc; }
.sidebar {
  background:#fff; color:var(--gray-700); border-right:1px solid var(--gray-200);
  box-shadow:none; padding:.65rem .75rem .8rem;
}
.sidebar-brand {
  height:var(--topbar-height); padding:.5rem .7rem 1rem; border-bottom:0;
}
.sidebar-logo {
  display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px;
  border-radius:12px; color:#fff; background:linear-gradient(145deg,#1a73e8,#4c8bf5);
  font-size:1.05rem; box-shadow:0 5px 12px rgba(26,115,232,.18);
}
.sidebar-title { color:var(--gray-800); font-size:1.05rem; letter-spacing:-.02em; }
.sidebar-toggle {
  width:38px; height:38px; display:grid; place-items:center; color:var(--gray-600);
  border-radius:50%; transition:background var(--transition),color var(--transition);
}
.sidebar-toggle:hover { background:var(--gray-100); color:var(--gray-800); }
.sidebar-nav { padding:.35rem 0; }
.sidebar-nav .nav-section {
  padding:1rem .85rem .4rem; color:#8a9099; font-size:.68rem; font-weight:700;
  letter-spacing:.08em;
}
.sidebar-nav a {
  min-height:44px; margin:.1rem 0; padding:.65rem .85rem; color:var(--gray-600);
  border:0; border-radius:22px; font-size:.88rem; font-weight:500;
}
.sidebar-nav a:hover { background:#f1f4f9; color:var(--gray-800); }
.sidebar-nav a.active { background:var(--primary-light); color:#185abc; border:0; font-weight:650; }
.sidebar-nav a .nav-icon { font-size:1rem; opacity:.86; }
.sidebar-footer { margin-top:.5rem; padding:1rem .8rem .25rem; border-top:1px solid var(--gray-200); }
.sidebar-user { color:var(--gray-600); font-size:.82rem; font-weight:500; }
.sidebar-overlay { background:rgba(32,33,36,.32); backdrop-filter:blur(2px); }

.topbar {
  height:var(--topbar-height); padding:0 1.75rem; background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--gray-200); box-shadow:0 1px 2px rgba(60,64,67,.04);
  backdrop-filter:blur(12px);
}
.topbar-breadcrumb { color:var(--gray-800); font-size:.95rem; font-weight:600; }
.topbar-breadcrumb span { color:inherit; }
.topbar-btn,.topbar-user-btn { border-radius:20px; }
.topbar-btn { width:40px; height:40px; padding:0; display:grid; place-items:center; }
.topbar-btn:hover,.topbar-user-btn:hover { background:#f1f4f9; }
.topbar-user-btn { min-height:42px; padding:.4rem .75rem; font-weight:500; }
.topbar-avatar {
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--primary-light); font-size:.95rem;
}
.topbar-dropdown { top:calc(100% + 8px); border-color:var(--gray-200); border-radius:14px; box-shadow:var(--shadow-md); padding:.4rem; }
.topbar-dropdown a { padding:.7rem .85rem; border-radius:9px; }
.topbar-dropdown a:hover { background:#f1f4f9; }

.page-content { max-width:1540px; padding:2rem 2.25rem 3rem; margin:0 auto; }
.page-eyebrow { margin:0 0 .2rem; color:var(--primary); font-size:.73rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.dashboard-heading h2,.account-heading h2 { font-size:1.65rem; font-weight:650; }
.card { border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-header { padding:1.15rem 1.35rem; }
.card-header h3 { font-size:1rem; }
.card-body { padding:1.35rem; }
.stats-grid { grid-template-columns:repeat(4,minmax(180px,1fr)); gap:1rem; margin-bottom:1.75rem; }
.stat-card {
  min-height:154px; padding:1.25rem; border:1px solid var(--gray-200); border-left:1px solid var(--gray-200)!important;
  border-radius:16px; box-shadow:var(--shadow-sm); transition:box-shadow var(--transition),transform var(--transition);
}
.stat-card:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.stat-card .stat-icon {
  display:grid; place-items:center; width:40px; height:40px; margin-bottom:1rem;
  border-radius:12px; background:var(--primary-light); font-size:1.15rem;
}
.stat-card.success .stat-icon { background:var(--success-light); }
.stat-card.warning .stat-icon { background:var(--warning-light); }
.stat-card.danger .stat-icon { background:var(--danger-light); }
.stat-card .stat-value { font-size:2rem; line-height:1; font-weight:650; }
.stat-card .stat-label { margin-top:.55rem; color:var(--gray-600); font-size:.82rem; }

thead th { background:#f8fafd; color:var(--gray-600); border-bottom:1px solid var(--gray-200); font-size:.72rem; }
tbody td { padding:.75rem; }
tbody tr:hover { background:#f8fafd; }
.activity-dot { background:var(--primary); box-shadow:0 0 0 4px var(--primary-light); }

.form-input,.form-select,textarea {
  min-height:46px; padding:.7rem .85rem; border-color:var(--gray-300); border-radius:10px;
  background:#fff; font-size:.92rem;
}
.form-input:hover,.form-select:hover,textarea:hover { border-color:#aeb7c3; }
.form-input:focus,.form-select:focus,textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,115,232,.12); }
.form-group label { margin-bottom:.45rem; color:var(--gray-700); }
.btn { min-height:40px; padding:.58rem 1.05rem; border-radius:20px; font-weight:600; }
.btn-primary { box-shadow:0 1px 2px rgba(26,115,232,.15); }
.btn-outline { background:#fff; }

.account-heading { display:flex; align-items:center; gap:1rem; }
.account-heading-icon,.account-avatar {
  display:grid; place-items:center; flex:0 0 auto; background:var(--primary-light); color:#185abc;
}
.account-heading-icon { width:48px; height:48px; border-radius:15px; font-size:1.3rem; }
.account-card { max-width:920px; }
.account-card .card-body { padding:1.75rem; }
.account-profile-summary { display:flex; align-items:center; justify-content:flex-start; gap:1rem; text-align:left; padding-bottom:1.4rem; border-bottom:1px solid var(--gray-200); }
.account-avatar { width:64px; height:64px; border-radius:50%; font-size:1.8rem; }

.login-alert,.login-notice { border-radius:12px; }
.mock-data-notice,.data-source-tag,.mock-label { display:none!important; }

.page-actions-heading { gap:1rem; flex-wrap:wrap; }
.client-filters { display:grid; grid-template-columns:minmax(240px,2fr) minmax(180px,1fr) auto; gap:1rem; align-items:end; }
.client-filters .form-group { margin:0; }
.process-filters { grid-template-columns:minmax(210px,1.4fr) minmax(180px,1fr) minmax(150px,.7fr) auto; }
.form-filters { display:grid; grid-template-columns:minmax(210px,1.4fr) repeat(3,minmax(150px,1fr)) auto; gap:1rem; align-items:end; }
.form-filters .form-group { margin:0; }
.form-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--gray-200); border-radius:14px; background:var(--gray-200); }
.detail-item { min-width:0; padding:1rem; background:#fff; }
.detail-item span { display:block; margin-bottom:.3rem; color:var(--gray-500); font-size:.78rem; }
.detail-item strong,.detail-item code { overflow-wrap:anywhere; }
.option-editor textarea { min-height:130px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.form-preview { max-width:100%; }
.row-actions,.modal-form-actions,.section-actions { display:flex; gap:.55rem; align-items:center; }
.modal-form-actions { justify-content:flex-end; margin-top:1rem; }
.section-actions { justify-content:space-between; margin-bottom:1.25rem; }
.client-header-card .card-header { align-items:center; }
.client-tabs { overflow-x:auto; }
.client-tabs .tab-btn { white-space:nowrap; }
.client-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-bottom:1.5rem; border:1px solid var(--gray-200); border-radius:14px; overflow:hidden; background:var(--gray-200); }
.summary-item { min-width:0; padding:1rem; background:#fff; }
.summary-item span { display:block; margin-bottom:.3rem; color:var(--gray-500); font-size:.78rem; }
.summary-item strong { overflow-wrap:anywhere; }
.client-stats { grid-template-columns:repeat(3,minmax(140px,1fr)); margin-bottom:0; }
.client-stats .stat-card { min-height:118px; }
.domain-flags { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-bottom:1.25rem; }
.flag-option { display:flex; align-items:center; gap:.55rem; padding:.75rem; border:1px solid var(--gray-200); border-radius:10px; cursor:pointer; }
.flag-option input { width:18px; height:18px; accent-color:var(--primary); }
.process-description { margin-top:1.5rem; padding:1rem 1.1rem; border:1px solid var(--gray-200); border-radius:12px; background:var(--gray-50); }
.process-description h3 { margin-bottom:.35rem; }
.process-description p { margin:0; color:var(--gray-600); line-height:1.6; }
.state-color { display:inline-block; width:.75rem; height:.75rem; margin-right:.5rem; border-radius:50%; vertical-align:middle; border:1px solid rgba(15,23,42,.15); }
.color-input { min-height:42px; padding:.3rem; }
.advisor-choice-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.embed-preview { margin-top:1rem; padding:1rem; border:1px solid var(--gray-200); border-radius:12px; background:var(--gray-50); }
.embed-preview strong { display:block; margin-bottom:.5rem; }
.embed-preview code { display:block; overflow-x:auto; padding:.7rem; border-radius:8px; background:#172033; color:#e8eef6; font-size:.78rem; white-space:nowrap; }

@media (max-width:1100px) {
  .stats-grid { grid-template-columns:repeat(2,minmax(180px,1fr)); }
  .form-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .sidebar { padding:.65rem .6rem; box-shadow:8px 0 30px rgba(60,64,67,.14); }
  .topbar { padding:0 1rem; }
  .topbar-menu-btn { width:40px; height:40px; border-radius:50%; color:var(--gray-700); }
  .topbar-menu-btn:hover { background:var(--gray-100); }
  .page-content { padding:1.25rem 1rem 2.5rem; }
  .account-card { max-width:none; }
  .account-card .card-body { padding:1.2rem; }
  .client-filters,.form-filters,.form-detail-grid { grid-template-columns:1fr; }
  .client-filters .btn { justify-content:center; }
  .client-summary-grid,.domain-flags,.advisor-choice-list { grid-template-columns:1fr; }
  .client-stats { grid-template-columns:1fr; }
  .section-actions { align-items:flex-start; flex-direction:column; }
  .field-item { align-items:flex-start; }
  .field-item .field-actions { flex-wrap:wrap; justify-content:flex-end; }
}
@media (max-width:520px) {
  .login-screen { align-items:flex-start; padding:1rem; }
  .login-container { margin-top:5vh; padding:2rem 1.35rem; border-radius:20px; }
  .card-body { min-width:0; overflow-x:auto; }
  .stats-grid { grid-template-columns:1fr; }
  .stat-card { min-height:136px; }
  .topbar-user-btn #topbarUserName { display:none; }
  .account-heading { align-items:flex-start; }
  .account-profile-summary { align-items:flex-start; }
}

/* Registros reales */
.record-page-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:1rem; }
.record-filter-card { padding:1rem; margin-bottom:1rem; border:1px solid var(--gray-200); border-radius:14px; background:#fff; }
.record-filters { display:grid; grid-template-columns:minmax(250px,2fr) repeat(4,minmax(145px,1fr)); gap:.8rem; align-items:end; }
.record-filters label,.record-side-form label { display:block; margin-bottom:.35rem; color:var(--gray-600); font-size:.75rem; font-weight:650; }
.record-search { grid-column:span 2; }
.record-filter-actions { display:flex; gap:.5rem; align-items:center; }
.record-inbox { overflow:hidden; border:1px solid var(--gray-200); border-radius:14px; background:#fff; box-shadow:var(--shadow-sm); }
.record-row { display:grid; grid-template-columns:minmax(260px,2fr) minmax(180px,1fr) minmax(130px,.7fr) minmax(150px,.7fr) auto; gap:1rem; align-items:center; padding:.85rem 1rem; border-bottom:1px solid var(--gray-200); cursor:pointer; transition:background var(--transition); }
.record-row:last-child { border-bottom:0; }
.record-row:hover,.record-row:focus { background:#f6f9fe; outline:0; }
.record-row-main,.record-contact { display:flex; min-width:0; flex-direction:column; gap:.2rem; }
.record-row-main strong,.record-row-main small,.record-contact span,.record-contact small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.record-row-main small,.record-contact small,.record-row time { color:var(--gray-500); font-size:.76rem; }
.record-origin { align-self:flex-start; padding:.15rem .5rem; border-radius:999px; background:#edf3fc; color:#185abc; font-size:.69rem; font-weight:700; }
.record-origin.is-whatsapp { background:#e8f7ee; color:#137333; }
.record-status { display:inline-flex; align-items:center; gap:.4rem; color:var(--gray-700); font-size:.78rem; font-weight:700; }
.record-status::before { width:.6rem; height:.6rem; border-radius:50%; background:var(--status-color); content:""; }
.record-empty { padding:3rem 1.25rem; color:var(--gray-500); text-align:center; }
.record-pagination { display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:1rem; color:var(--gray-600); font-size:.82rem; }
.record-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr); gap:1rem; }
.record-dashboard-list { padding:0; }
.record-dashboard-row { display:grid; width:100%; grid-template-columns:minmax(0,1fr) auto auto; gap:1rem; align-items:center; padding:.9rem 1.1rem; border:0; border-bottom:1px solid var(--gray-200); background:#fff; color:inherit; text-align:left; cursor:pointer; }
.record-dashboard-row:hover { background:var(--gray-50); }
.record-dashboard-row span:first-child { display:flex; min-width:0; flex-direction:column; gap:.15rem; }
.record-dashboard-row small,.record-dashboard-row time { color:var(--gray-500); font-size:.74rem; }
.record-activity-list { display:flex; flex-direction:column; gap:1rem; margin:0; padding:0; list-style:none; }
.record-activity-list li { display:flex; gap:.75rem; align-items:flex-start; }
.record-activity-list small { display:block; margin-top:.2rem; color:var(--gray-500); font-size:.73rem; }
.record-detail-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.25rem; margin-bottom:1rem; }
.record-detail-header > div:last-child { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.record-detail-header time,.record-public-id { color:var(--gray-500); font-size:.76rem; }
.record-public-id { overflow-wrap:anywhere; }
.record-detail-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(280px,.8fr); gap:1rem; align-items:start; }
.record-detail-grid main,.record-detail-grid aside { display:flex; min-width:0; flex-direction:column; gap:1rem; }
.record-section { overflow:hidden; }
.record-summary,.record-answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--gray-200); }
.record-summary > div,.record-answers > div { min-width:0; padding:1rem; background:#fff; }
.record-summary span,.record-answers span { display:block; margin-bottom:.3rem; color:var(--gray-500); font-size:.75rem; }
.record-summary strong,.record-answers strong { display:block; overflow-wrap:anywhere; white-space:pre-wrap; }
.whatsapp-attention { border-color:#cce9d6; }
.record-actions { display:flex; flex-wrap:wrap; gap:.5rem; padding:1rem; }
.record-side-form { display:flex; flex-direction:column; gap:.65rem; padding:1rem; }
.record-side-form small { color:var(--gray-500); }
.record-history { margin:0; padding:1rem 1.25rem 1.25rem; list-style:none; }
.record-history li { position:relative; display:flex; gap:.8rem; padding:0 0 1.25rem; }
.record-history li:last-child { padding-bottom:0; }
.record-history li::after { position:absolute; top:.75rem; bottom:0; left:.3rem; width:1px; background:var(--gray-200); content:""; }
.record-history li:last-child::after { display:none; }
.history-dot { z-index:1; width:.65rem; height:.65rem; margin-top:.25rem; flex:0 0 auto; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px var(--primary-light); }
.record-history p { margin:.2rem 0; color:var(--gray-600); font-size:.82rem; }
.record-history small,.record-notes small { color:var(--gray-500); font-size:.72rem; }
.record-notes { display:flex; flex-direction:column; gap:.7rem; padding:0 1rem 1rem; }
.record-notes article { padding:.8rem; border:1px solid var(--gray-200); border-radius:10px; background:var(--gray-50); }
.record-notes p { margin:.35rem 0; white-space:pre-wrap; overflow-wrap:anywhere; }

@media (max-width:1180px) {
  .record-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .record-search { grid-column:span 2; }
  .record-row { grid-template-columns:minmax(220px,1.5fr) minmax(170px,1fr) minmax(120px,.6fr) auto; }
  .record-row time { display:none; }
}
@media (max-width:820px) {
  .record-filters,.record-summary,.record-answers { grid-template-columns:1fr 1fr; }
  .record-search { grid-column:1/-1; }
  .record-dashboard-grid,.record-detail-grid { grid-template-columns:1fr; }
  .record-row { grid-template-columns:1fr auto; gap:.7rem; margin:.65rem; border:1px solid var(--gray-200); border-radius:12px; }
  .record-row:not(:last-child) { border-bottom:1px solid var(--gray-200); }
  .record-contact { grid-column:1; }
  .record-row-status { grid-column:2; grid-row:1; }
  .record-open { grid-column:2; grid-row:2; }
  .record-inbox { background:var(--gray-50); }
}
@media (max-width:520px) {
  .record-filters,.record-summary,.record-answers { grid-template-columns:1fr; }
  .record-filter-actions { flex-direction:column; align-items:stretch; }
  .record-filter-actions .btn { justify-content:center; }
  .record-pagination { gap:.55rem; flex-wrap:wrap; }
  .record-pagination span { width:100%; text-align:center; order:-1; }
  .record-detail-header { align-items:flex-start; flex-direction:column; }
  .record-detail-header > div:last-child { align-items:flex-start; }
  .record-dashboard-row { grid-template-columns:minmax(0,1fr) auto; }
  .record-dashboard-row time { grid-column:1/-1; }
}