/**
 * PanaROI Admin — Hoja de estilos compartida
 * Cubre: variables de marca, sidebar, nav items, layout base.
 * Incluida por TODAS las páginas del panel y por panaroi-config.html.
 */

/* ── GOOGLE FONTS ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:FILL@0..1&display=swap');

/* ── CSS VARIABLES ──────────────────────────────────────────── */
:root {
  /* Marca PanaROI */
  --brand-primary:   #FFD600;
  --brand-secondary: #3D286C;
  --brand-accent:    #8B1EB3;
  --brand-warm:      #FFA300;
  --brand-ink:       #000000;
  --brand-ink-2:     #3D286C;
  --brand-surface:   #F7F7F8;
  --brand-border:    #E2E4F0;

  /* Base panel — Light */
  --bg:    #F7F7F8;
  --card:  #FFFFFF;
  --border:#E2E4F0;
  --text:  #1F1F24;
  --muted: #6B7280;
  --heading: #0F0F14;
  --input-bg: #FFFFFF;
  --badge-bg: #F3F4F6;
  --badge-text: #555555;
  --empty-text: #AAAAAA;
  --radius: 14px;
  --admin-content-max-width: 1360px;
  --admin-main-pad-top: 32px;
  --admin-main-pad-x: 40px;
  --admin-main-pad-bottom: 60px;

  /* Compatibilidad con variables existentes */
  --acc:  #3D286C;
  --acc2: #3D286C;

  /* Sidebar */
  --sidebar-w:      260px;
  --sidebar-bg:     #FFD600;
  --sidebar-border: rgba(0, 0, 0, 0.12);
  --sidebar-text:   rgba(0, 0, 0, 0.68);
  --sidebar-text-strong: rgba(0, 0, 0, 0.92);
  --sidebar-text-muted:  rgba(0, 0, 0, 0.52);
  --sidebar-hover-bg: rgba(0, 0, 0, 0.06);
  --sidebar-active-bg: rgba(61, 40, 108, 0.16);
  --sidebar-active-text: #3D286C;
}


/* ── RESET BASE ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; min-height: 100vh; display: flex; }

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  overflow-y: auto;
}

/* Brand / Logo — soporta tanto .sidebar-brand como .sidebar__logo */
.sidebar-brand,
.sidebar__logo {
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.sidebar-brand h1,
.sidebar__logo-text {
  font-family: 'Sora', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--sidebar-text-strong);
  line-height: 1.2;
}
.sidebar-brand p,
.sidebar__logo-sub {
  font-size: .72rem;
  color: var(--sidebar-text-muted);
  margin-top: 4px;
}

/* Badge de usuario (solo páginas PHP autenticadas) */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.sidebar-user .avatar {
  width: 32px; height: 32px;
  flex-shrink: 0;
  background: #0F0F14;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #FFDB24;
}
.sidebar-user .info { overflow: hidden; }
.sidebar-user .info strong {
  font-size: .82rem; font-weight: 600;
  display: block; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  color: var(--sidebar-text-strong);
}
.sidebar-user .info span {
  font-size: .7rem;
  color: var(--sidebar-text-muted);
}

/* Área de navegación — soporta .nav-items y .sidebar__nav */
.nav-items,
.sidebar__nav {
  flex: 1;
  padding: 0 8px;
  overflow-y: auto;
}

/* Etiquetas de sección — soporta .nav-section y .sidebar__section-label */
.nav-section,
.sidebar__section-label {
  padding: 14px 12px 4px;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.40);
  display: block;
}

/* Items de navegación */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--sidebar-text);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  margin-bottom: 2px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-item:hover  { background: var(--sidebar-hover-bg); color: var(--sidebar-text-strong); }
.nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); }

/* Ícono dentro del nav-item — soporta .ni y .nav-item__icon */
.nav-item .ni,
.nav-item .nav-item__icon {
  font-size: 1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.nav-item .ni.material-symbols-rounded,
.nav-item .nav-item__icon.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.nav-item.is-locked {
  color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.03);
}

.nav-item.is-locked:hover {
  color: rgba(0, 0, 0, 0.60);
  background: rgba(0, 0, 0, 0.05);
}

.nav-lock-badge {
  margin-left: auto;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.20);
  color: rgba(0, 0, 0, 0.62);
  background: rgba(255, 255, 255, 0.46);
}

/* Item de peligro (logout) */
.nav-item.danger       { color: rgba(0, 0, 0, 0.55); }
.nav-item.danger:hover { background: rgba(0, 0, 0, 0.07); color: rgba(0, 0, 0, 0.75); }


/* Separador */
.nav-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 8px 8px;
}

/* Pie del sidebar */
.sidebar__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--sidebar-border);
  font-size: .72rem;
  color: var(--sidebar-text-muted);
  flex-shrink: 0;
}

/* ── ÁREA DE CONTENIDO PRINCIPAL ───────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: var(--admin-main-pad-top) var(--admin-main-pad-x) var(--admin-main-pad-bottom);
}

/* ── ESTANDAR GLOBAL DE CONTENIDO/HEADER ───────────────────── */
.admin-shell {
  width: 100%;
  max-width: var(--admin-content-max-width);
  margin: 0 auto;
}

.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.admin-page-title {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.admin-page-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* ── CABECERA TOP ESTÁNDAR (compartida por todas las páginas) ── */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.top h2 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}
.top p {
  font-size: .85rem;
  color: var(--muted);
  margin: 2px 0 0;
}

/* ── CABECERA ESTÁNDAR DE PÁGINA ───────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.page-title {
  margin: 0 0 4px;
  font-family: 'Sora', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.page-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* ── BADGE (rol/estado no interactivo) ──────────────────────── */
.badge {
  display: inline-block;
  background: #F3F4F6;
  color: #555555;
  font-size: .75rem;
  border-radius: 20px;
  padding: 4px 10px;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
  border: none;
  line-height: 1.5;
}

/* ── CARD GLOBAL OVERRIDES ──────────────────────────────────── */
.card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ── CARD HEADINGS ──────────────────────────────────────────── */
.card h2, .card h3, .card h4, .card .card-title {
  border-left: 3px solid #FFDB24;
  padding-left: 10px;
  padding-bottom: 14px;
  color: #0F0F14;
  font-weight: 700;
}

/* ── CARD BUTTONS (full width) ──────────────────────────────── */
.card .btn {
  width: 100%;
  justify-content: center;
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 0;
  color: #AAAAAA;
  font-size: .85rem;
}

/* ── DARK MODE (prefers-color-scheme: dark) ────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Base */
    --bg:    #0F0F14;
    --card:  #1E1E2C;
    --border:#2A2A3C;
    --text:  #F0F0F0;
    --muted: #888899;
    --heading: #F0F0F0;
    --input-bg: #15151E;
    --badge-bg: #2A2A3C;
    --badge-text: #888899;
    --empty-text: #888899;

    /* Sidebar */
    --sidebar-bg:     #1A1A22;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --sidebar-text:   #C8C8D8;
    --sidebar-text-strong: #F0F0F0;
    --sidebar-text-muted:  #555566;
    --sidebar-hover-bg: rgba(255, 219, 36, 0.10);
    --sidebar-active-bg: #FFDB24;
    --sidebar-active-text: #0F0F14;
  }

  body { color-scheme: dark; }

  /* ── Sidebar ── */
  .sidebar-brand h1, .sidebar__logo-text { color: #FFDB24; }
  .sidebar-brand p, .sidebar__logo-sub   { color: #888899; }
  .nav-section, .sidebar__section-label  { color: #555566; }

  .sidebar-user .avatar { background: #FFDB24; color: #0F0F14; }

  .nav-item.active {
    background: #FFDB24;
    color: #0F0F14;
    font-weight: 600;
  }
  .nav-item.is-locked {
    color: rgba(255, 255, 255, 0.52);
    background: rgba(255, 255, 255, 0.04);
  }
  .nav-item.is-locked:hover {
    color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.06);
  }
  .nav-lock-badge {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
  }
  .nav-item.danger       { color: #888899; }
  .nav-item.danger:hover { background: rgba(255, 219, 36, 0.10); color: #F0F0F0; }

  /* ── Cards ── */
  .card { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.36); }
  body .card h2,
  body .card h3,
  body .card h4,
  body .card .card-title {
    color: #F0F0F0;
    font-weight: 600;
    border-left: 3px solid #FFDB24;
    padding-left: 10px;
  }

  /* ── Tabs ── */
  body .tab-btn { color: #888899; }
  body .tab-btn.active {
    color: #FFDB24;
    border-bottom-color: #FFDB24;
    background: rgba(255, 219, 36, 0.08);
  }
  body .tab-btn:hover:not(.active) { color: #F0F0F0; background: transparent; }

  /* ── Inputs ── */
  body .input,
  body .select,
  body .textarea,
  body input:not([type="checkbox"]):not([type="radio"]),
  body select,
  body textarea {
    background: #15151E;
    border-color: #2A2A3C;
    color: #F0F0F0;
  }
  body ::placeholder { color: #555566; }
  body .input:focus,
  body .select:focus,
  body .textarea:focus,
  body input:not([type="checkbox"]):not([type="radio"]):focus,
  body select:focus,
  body textarea:focus {
    border-color: #FFDB24;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 219, 36, 0.15);
  }

  /* ── Buttons ── */
  body .btn:not(.primary) {
    border-color: #FFDB24;
    color: #FFDB24;
    background: transparent;
  }
  body .btn:not(.primary):hover {
    background: #FFDB24;
    color: #0F0F14;
    border-color: #FFDB24;
  }
  body .btn.primary {
    background: #FFDB24;
    color: #0F0F14;
    border: none;
  }
  body .btn.primary:hover { filter: brightness(0.94); }

  /* "+" icon circle button */
  .icon-circle-btn { background: #FFDB24; color: #0F0F14; }

  /* ── Danger / Destructive buttons ── */
  body .btn-danger,
  body button[data-action="delete"],
  body button[data-action="eliminar"],
  body .btn.btn-danger {
    background: transparent;
    border: 1.5px solid #E53E3E;
    color: #E53E3E;
    border-radius: 6px;
  }
  body .btn-danger:hover,
  body button[data-action="delete"]:hover,
  body button[data-action="eliminar"]:hover,
  body .btn.btn-danger:hover {
    background: #E53E3E;
    color: #FFFFFF;
    border-color: #E53E3E;
  }
  /* Account delete button (discreet circle) */
  body .account-del-btn {
    background: rgba(229, 62, 62, 0.08);
    border-color: rgba(229, 62, 62, 0.22);
    color: #E53E3E;
  }
  body .account-del-btn:hover {
    background: rgba(229, 62, 62, 0.18);
    border-color: #E53E3E;
    color: #FC8181;
  }

  /* ── Badges ── */
  .badge { background: #2A2A3C; color: #888899; }
  body .badge-plan    { background: #2A2A3C; color: #888899; }
  body .badge-central { background: #FFDB24; color: #0F0F14; }
  body .badge-ok      { background: rgba(49, 196, 141, 0.15); color: #6EE7B7; }
  body .badge-pend    { background: rgba(251, 191, 36, 0.15);  color: #FCD34D; }

  /* ── Tables ── */
  body th,
  body .audit-table th,
  body .plans-table th { background: #15151E; color: #F0F0F0; font-weight: 600; }
  body td,
  body .audit-table td,
  body .plans-table td,
  body table td { color: #C8C8D8; }
  body .row.clickable:hover,
  body .row:hover,
  body .plans-table tbody tr.clickable:hover td,
  body .audit-table tr:hover td { background: #15151E; }
  body .row.active,
  body .plans-table tbody tr.active td { background: rgba(255, 219, 36, 0.12); }

  /* ── Metrics & Stats ── */
  body .metric .v { color: #F0F0F0; }
  body .stat       { background: #15151E; }
  body .stat .v    { color: #F0F0F0; }

  /* ── Chat messages ── */
  body .msg.inbound,
  body .msg.cmo    { background: #1E1E2C; color: #F0F0F0; }
  body .msg.user,
  body .msg.outbound { background: rgba(255, 219, 36, 0.18); color: #F0F0F0; }
  body .chat-scroll  { background: #0F0F14; }

  /* ── Helper items ── */
  body .helper-item { background: #15151E; }

  /* ── Modales ── */
  body .modal-backdrop { background: rgba(0, 0, 0, 0.65); }
  body .modal h3       { color: #F0F0F0; }
  body .modal-close:hover { color: #F0F0F0; }

  /* ── Empty states ── */
  body .empty,
  body .empty-state { color: #888899; }

  /* ── CRM Kanban ── */
  body .deal { background: #15151E; }
  body .col.drop-hover { border-color: #FFDB24; box-shadow: 0 0 0 2px rgba(255,219,36,.2) inset; }

  /* ── Calendario ── */
  body .day { background: #15151E; }

  /* ── Login ── */
  body .login-logo h1 { color: #FFDB24; }
  body .login-card h2 { color: #F0F0F0; }
  body .btn-login { background: #FFDB24; color: #0F0F14; box-shadow: 0 6px 24px rgba(255,219,36,.25); }

  /* ── Webhook URL box ── */
  body .webhook-url {
    background: #15151E;
    border: 1px solid #2A2A3C;
    color: #FFDB24;
    font-family: monospace;
    border-radius: 6px;
  }

  /* ── Page titles ── */
  body .top h2, body h1, body h2 { color: #F0F0F0; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .3s; }
  .sidebar.open { transform: translateX(0); }
  :root {
    --admin-main-pad-top: 20px;
    --admin-main-pad-x: 16px;
    --admin-main-pad-bottom: 32px;
  }
  .main { margin-left: 0; }
  .page-title { font-size: 1.35rem; }
  .admin-page-title { font-size: 1.35rem; }
}