/* ============================================================
   Confirma — tema del panel.
   Línea visual heredada de Rocket (plantilla Minia): Work Sans,
   primario #3b76e1, acento de marca #f28b37, fondo #f1f3f7,
   sidebar clara con indicador naranja, sombras 0 0 4px rgba(15,34,58,.12).
   ============================================================ */

:root {
  --cf-primary: #3b76e1;
  --cf-accent: #f28b37;
  --cf-success: #63ad6f;
  --cf-info: #57c9eb;
  --cf-warning: #f9c256;
  --cf-danger: #f56e6e;
  --cf-dark: #2b4363;
  --cf-body-bg: #f1f3f7;
  --cf-muted: #8c9fb9;
  --cf-sidebar-link: #7b8190;
  --cf-sidebar-hover-bg: #f2f3fe;
  --cf-shadow: 0 0 4px rgba(15, 34, 58, .12);
  --cf-topbar-h: 70px;
  --cf-sidebar-w: 255px;
}

body {
  font-family: "Work Sans", sans-serif;
  background-color: var(--cf-body-bg);
  font-size: .875rem;
  color: #545965;
}

/* --- Bootstrap re-mapeado a la paleta Rocket --- */
.btn-primary { --bs-btn-bg: var(--cf-primary); --bs-btn-border-color: var(--cf-primary); --bs-btn-hover-bg: #326ad0; --bs-btn-hover-border-color: #326ad0; --bs-btn-active-bg: #2f64c4; --bs-btn-active-border-color: #2f64c4; }
.btn-success { --bs-btn-bg: var(--cf-success); --bs-btn-border-color: var(--cf-success); --bs-btn-hover-bg: #579c62; --bs-btn-hover-border-color: #579c62; }
.btn-danger  { --bs-btn-bg: var(--cf-danger); --bs-btn-border-color: var(--cf-danger); --bs-btn-hover-bg: #e35d5d; --bs-btn-hover-border-color: #e35d5d; }
.text-primary { color: var(--cf-primary) !important; }
.text-muted { color: var(--cf-muted) !important; }
.bg-primary { background-color: var(--cf-primary) !important; }
a { color: var(--cf-primary); text-decoration: none; }
a:hover { color: #2f64c4; }

/* Botones y badges "soft" (sello de la UI de Rocket) */
.btn-soft-primary { color: var(--cf-primary); background-color: rgba(59, 118, 225, .1); border: none; }
.btn-soft-primary:hover { color: #fff; background-color: var(--cf-primary); }
.btn-soft-success { color: var(--cf-success); background-color: rgba(99, 173, 111, .1); border: none; }
.btn-soft-success:hover { color: #fff; background-color: var(--cf-success); }
.btn-soft-danger { color: var(--cf-danger); background-color: rgba(245, 110, 110, .1); border: none; }
.btn-soft-danger:hover { color: #fff; background-color: var(--cf-danger); }
.btn-soft-info { color: var(--cf-info); background-color: rgba(87, 201, 235, .12); border: none; }
.btn-soft-info:hover { color: #fff; background-color: var(--cf-info); }

.badge-soft-primary { color: var(--cf-primary); background-color: rgba(59, 118, 225, .12); }
.badge-soft-success { color: var(--cf-success); background-color: rgba(99, 173, 111, .14); }
.badge-soft-warning { color: #c98f1c; background-color: rgba(249, 194, 86, .18); }
.badge-soft-danger  { color: var(--cf-danger); background-color: rgba(245, 110, 110, .14); }
.badge-soft-info    { color: #2ea8cf; background-color: rgba(87, 201, 235, .15); }
.badge-soft-secondary { color: #74788d; background-color: rgba(116, 120, 141, .12); }
[class*="badge-soft-"] { padding: .35em .6em; border-radius: .25rem; font-weight: 500; font-size: .74rem; }

/* --- Cards --- */
.card { border: 0; box-shadow: var(--cf-shadow); border-radius: .25rem; margin-bottom: 1.5rem; }
.card-header { background: #fff; border-bottom: 1px solid #eff0f2; font-weight: 600; }
.card-title { font-size: .95rem; margin: 0; color: #2c3242; }

/* KPI (patrón Minia: icono cuadrado soft + cifra) */
.kpi-icon { width: 48px; height: 48px; border-radius: .3rem; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.kpi-icon.primary { background: rgba(59, 118, 225, .12); color: var(--cf-primary); }
.kpi-icon.success { background: rgba(99, 173, 111, .14); color: var(--cf-success); }
.kpi-icon.warning { background: rgba(249, 194, 86, .2); color: #c98f1c; }
.kpi-icon.danger  { background: rgba(245, 110, 110, .14); color: var(--cf-danger); }
.kpi-icon.info    { background: rgba(87, 201, 235, .15); color: #2ea8cf; }
.kpi-value { font-size: 1.45rem; font-weight: 600; color: #2c3242; }
.kpi-label { color: var(--cf-muted); font-size: .8rem; margin-bottom: .15rem; }

/* --- Topbar --- */
#page-topbar {
  position: fixed; top: 0; right: 0; left: var(--cf-sidebar-w);
  z-index: 1005; height: var(--cf-topbar-h);
  background: #fff; box-shadow: var(--cf-shadow);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
}

/* --- Sidebar --- */
.vertical-menu {
  position: fixed; top: 0; bottom: 0; left: 0; width: var(--cf-sidebar-w);
  background: #fff; box-shadow: var(--cf-shadow); z-index: 1010;
  overflow-y: auto;
}
.sidebar-logo {
  height: var(--cf-topbar-h); display: flex; align-items: center;
  padding: 0 1.5rem; font-size: 1.25rem; font-weight: 700; color: var(--cf-dark);
}
.sidebar-logo .logo-mark { color: var(--cf-accent); margin-right: .45rem; font-size: 1.5rem; }
.sidebar-menu { list-style: none; padding: .75rem 0; margin: 0; }
.sidebar-menu .menu-title {
  padding: .8rem 1.5rem .4rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cf-muted); font-weight: 600;
}
.sidebar-menu li a {
  position: relative; display: flex; align-items: center; gap: .65rem;
  padding: .65rem 1.5rem; color: var(--cf-sidebar-link); font-size: .875rem;
  transition: all .15s;
}
.sidebar-menu li a i { font-size: 1.15rem; }
.sidebar-menu li a:hover { color: var(--cf-primary); background: var(--cf-sidebar-hover-bg); }
.sidebar-menu li a.active { color: var(--cf-primary); background: var(--cf-sidebar-hover-bg); font-weight: 500; }
/* El sello de Rocket: barra naranja en el ítem activo */
.sidebar-menu li a.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 24px; width: 5px; background: var(--cf-accent); border-radius: 0 3px 3px 0;
}

/* --- Contenido --- */
.main-content { margin-left: var(--cf-sidebar-w); padding: calc(var(--cf-topbar-h) + 1.5rem) 1.5rem 1.5rem; min-height: 100vh; }
.page-title { font-size: 1.05rem; font-weight: 600; color: #2c3242; text-transform: uppercase; letter-spacing: .01em; }

/* --- Tablas --- */
.table { --bs-table-hover-bg: #f8f9fb; font-size: .84rem; }
.table thead th { color: #2c3242; font-weight: 600; border-bottom-width: 1px; white-space: nowrap; }
.table td { vertical-align: middle; }

/* --- Chat (detalle de conversación) --- */
.chat-box { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; background: #f8f9fb; border-radius: .3rem; max-height: 560px; overflow-y: auto; }
.chat-bubble { max-width: 72%; padding: .6rem .85rem; border-radius: .65rem; font-size: .85rem; box-shadow: 0 1px 2px rgba(15,34,58,.08); }
.chat-bubble .meta { font-size: .68rem; color: var(--cf-muted); margin-top: .3rem; }
.chat-bubble.out { align-self: flex-end; background: var(--cf-primary); color: #fff; border-bottom-right-radius: .15rem; }
.chat-bubble.out .meta { color: rgba(255,255,255,.75); }
.chat-bubble.in { align-self: flex-start; background: #fff; border-bottom-left-radius: .15rem; }
.chat-bubble .btns { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.chat-bubble .btns span { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.45); padding: .15rem .6rem; border-radius: 1rem; font-size: .74rem; }
.chat-bubble.in .btns span { background: rgba(59,118,225,.08); border-color: rgba(59,118,225,.3); color: var(--cf-primary); }

/* --- Login --- */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--cf-body-bg); }
.auth-card { width: 420px; max-width: 94vw; }
.auth-brand { font-size: 1.6rem; font-weight: 700; color: var(--cf-dark); }
.auth-brand .logo-mark { color: var(--cf-accent); }

/* --- Funnel --- */
.funnel-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.funnel-label { width: 130px; font-size: .8rem; color: var(--cf-muted); }
.funnel-bar { flex: 1; height: 22px; background: #eef1f6; border-radius: .25rem; overflow: hidden; }
.funnel-bar > div { height: 100%; border-radius: .25rem; transition: width .4s; }
.funnel-value { width: 90px; text-align: right; font-weight: 600; color: #2c3242; font-size: .85rem; }

/* Responsive mínimo */
@media (max-width: 992px) {
  .vertical-menu { display: none; }
  #page-topbar { left: 0; }
  .main-content { margin-left: 0; }
}

/* Nota interna en el hilo (no viaja al cliente) */
.chat-note {
  align-self: center; max-width: 85%; background: #fff8e6; border: 1px dashed #f9c256;
  color: #8a6d1a; padding: .4rem .8rem; border-radius: .5rem; font-size: .78rem;
}
.chat-note .meta { color: #b0955a; }