/* ==========================================================
   RosaCRM · Brand CSS v1.0
   Un producto de OutsourcingHYH
   Uso: cargar DESPUÉS de Bootstrap (si lo usas) y de tu CSS actual.
   ========================================================== */

/* 1) TOKENS ------------------------------------------------ */
:root {
  /* Marca */
  --rc-rosa:        #C9215F;  /* acción principal */
  --rc-rosa-hover:  #A8184D;
  --rc-rosa-brillo: #E8457F;  /* acentos, aro del logo */
  --rc-rosa-suave:  #FFE4E8;  /* fondos de etiqueta */
  --rc-noche:       #0B1220;  /* menú, texto */
  --rc-carbon:      #1C1F26;
  --rc-rojo-hyh:    #E60000;  /* solo vínculo con la matriz */

  /* Estados */
  --rc-violeta:     #7C5CFA;  /* IA / Mia */
  --rc-verde:       #10B981;  /* en línea, ganado */
  --rc-ambar:       #F59E0B;  /* negociando */
  --rc-cian:        #22C7D9;  /* requiere humano */

  /* Neutros */
  --rc-niebla:      #F5F6FA;  /* fondo de app */
  --rc-bruma:       #E3E6EE;  /* bordes */
  --rc-grafito:     #4B5468;  /* texto secundario */
  --rc-blanco:      #FFFFFF;

  /* Tipografía */
  --rc-font-titulo: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --rc-font-ui:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rc-font-mono:   'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Forma */
  --rc-radio:       12px;
  --rc-radio-lg:    16px;
  --rc-sombra:      0 1px 2px rgba(11,18,32,.06), 0 4px 16px rgba(11,18,32,.05);

  /* Puente con Bootstrap 5 */
  --bs-primary:        var(--rc-rosa);
  --bs-primary-rgb:    201, 33, 95;
  --bs-link-color:     var(--rc-rosa);
  --bs-link-hover-color: var(--rc-rosa-hover);
  --bs-body-font-family: var(--rc-font-ui);
  --bs-body-bg:        var(--rc-niebla);
  --bs-body-color:     var(--rc-noche);
  --bs-border-color:   var(--rc-bruma);
  --bs-border-radius:  var(--rc-radio);
}

/* 2) BASE -------------------------------------------------- */
body {
  font-family: var(--rc-font-ui);
  background: var(--rc-niebla);
  color: var(--rc-noche);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .rc-titulo {
  font-family: var(--rc-font-titulo);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}
a { color: var(--rc-rosa); }
a:hover { color: var(--rc-rosa-hover); }
code, .rc-mono, .telefono {
  font-family: var(--rc-font-mono);
  font-weight: 500;
}
:focus-visible {
  outline: 3px solid rgba(232, 69, 127, .45);
  outline-offset: 2px;
}

/* 3) BOTONES (clases propias + Bootstrap) ------------------- */
.rc-btn, .btn-primary, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  background: var(--rc-rosa); border: 1px solid var(--rc-rosa); color: #fff;
  font: 600 15px var(--rc-font-ui);
  border-radius: var(--rc-radio); cursor: pointer;
  transition: background .15s, transform .05s;
}
.rc-btn:hover, .btn-primary:hover, .btn-danger:hover {
  background: var(--rc-rosa-hover); border-color: var(--rc-rosa-hover); color: #fff;
}
.rc-btn:active, .btn-primary:active { transform: translateY(1px); }
.rc-btn--sec, .btn-light, .btn-outline-secondary {
  background: #fff; color: var(--rc-noche); border: 1px solid var(--rc-bruma);
}
.rc-btn--sec:hover, .btn-light:hover, .btn-outline-secondary:hover {
  background: var(--rc-niebla); color: var(--rc-noche); border-color: var(--rc-bruma);
}
.rc-btn--exito, .btn-success { background: var(--rc-verde); border-color: var(--rc-verde); color: #fff; }

/* 4) FORMULARIOS ------------------------------------------- */
.rc-input, .form-control, .form-select, select, textarea {
  border: 1px solid var(--rc-bruma);
  border-radius: var(--rc-radio);
  background: #fff;
  font-family: var(--rc-font-ui);
  min-height: 44px; padding: 10px 14px;
}
.rc-input:focus, .form-control:focus, .form-select:focus, select:focus, textarea:focus {
  border-color: var(--rc-rosa-brillo);
  box-shadow: 0 0 0 3px rgba(232, 69, 127, .18);
  outline: none;
}
label, .form-label { font-weight: 600; font-size: 14px; }

/* 5) TARJETAS Y KPIs --------------------------------------- */
.rc-card, .card {
  background: #fff; border: 1px solid var(--rc-bruma);
  border-radius: var(--rc-radio-lg); box-shadow: var(--rc-sombra);
}
.rc-kpi { padding: 22px 24px; }
.rc-kpi__etiqueta {
  font: 600 12px var(--rc-font-ui); letter-spacing: .1em;
  text-transform: uppercase; color: var(--rc-grafito);
}
.rc-kpi__valor { font: 800 40px var(--rc-font-titulo); letter-spacing: -.02em; }
.rc-kpi__barra { height: 6px; border-radius: 99px; background: var(--rc-bruma); overflow: hidden; }
.rc-kpi__barra > i { display: block; height: 100%; background: var(--rc-rosa); }

/* 6) ETIQUETAS DE ESTADO ----------------------------------- */
.rc-pill, .badge {
  display: inline-block; padding: 4px 12px; border-radius: 99px;
  font: 600 12px var(--rc-font-ui);
}
.rc-pill--nuevo       { background: var(--rc-rosa-suave); color: #BE123C; }
.rc-pill--negociando  { background: #FEF3C7; color: #92400E; }
.rc-pill--humano      { background: #CFFAFE; color: #0E6B78; }
.rc-pill--ganado,
.rc-pill--online      { background: #D1FAE5; color: #065F46; }
.rc-pill--ia          { background: #EDE9FE; color: #5B3FD1; }

/* 7) MENÚ LATERAL ------------------------------------------ */
.rc-sidebar, .sidebar {
  background: var(--rc-noche); color: #C8CEDC;
}
.rc-sidebar a, .sidebar a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin: 2px 10px;
  border-radius: 10px; color: #C8CEDC; text-decoration: none; font-weight: 500;
}
.rc-sidebar a:hover, .sidebar a:hover { background: rgba(255,255,255,.06); color: #fff; }
.rc-sidebar a.active, .sidebar a.active {
  background: rgba(124, 92, 250, .20);
  box-shadow: inset 3px 0 0 var(--rc-violeta);
  color: #fff; font-weight: 600;
}
.rc-sidebar .rc-seccion, .sidebar .menu-title {
  font: 600 11px var(--rc-font-ui); letter-spacing: .12em;
  text-transform: uppercase; color: #8A93A8; padding: 18px 24px 6px;
}

/* 8) KANBAN ------------------------------------------------ */
.rc-col { background: rgba(255,255,255,.6); border-radius: var(--rc-radio-lg); border-top: 5px solid var(--rc-bruma); }
.rc-col--nuevos      { border-top-color: var(--rc-rosa); }
.rc-col--negociando  { border-top-color: var(--rc-ambar); }
.rc-col--humano      { border-top-color: var(--rc-cian); }
.rc-col--cierre      { border-top-color: var(--rc-verde); }
.rc-lead {
  background: #fff; border-radius: var(--rc-radio); padding: 14px 16px;
  border: 1px solid var(--rc-bruma); border-left: 4px solid var(--rc-bruma);
}
.rc-col--nuevos     .rc-lead { border-left-color: var(--rc-rosa); }
.rc-col--negociando .rc-lead { border-left-color: var(--rc-ambar); }
.rc-col--humano     .rc-lead { border-left-color: var(--rc-cian); }
.rc-col--cierre     .rc-lead { border-left-color: var(--rc-verde); }

/* 9) CHAT -------------------------------------------------- */
.rc-chat { background: #EFE9E4; }
.rc-msg {
  max-width: 70%; padding: 10px 14px; background: #fff;
  border-radius: 14px 14px 14px 4px; box-shadow: var(--rc-sombra);
}
.rc-msg--salida { background: #FDE2EA; border-radius: 14px 14px 4px 14px; margin-left: auto; }
.rc-msg--ia     { background: #EDE9FE; }
.rc-msg__hora   { font-size: 11px; color: var(--rc-grafito); text-align: right; }

/* 10) MIA (asistente flotante) ----------------------------- */
.rc-mia { position: fixed; right: 20px; bottom: 20px; z-index: 50; }
.rc-mia__avatar {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--rc-rosa); background: #EDE9FE; object-fit: cover;
}
.rc-mia__burbuja {
  background: #fff; border-radius: 16px 16px 4px 16px;
  padding: 14px 16px; box-shadow: var(--rc-sombra); max-width: 240px;
}

/* 11) LOGIN ------------------------------------------------ */
.rc-login { min-height: 100vh; display: grid; place-items: center; background: var(--rc-noche); }
.rc-login__caja {
  width: min(420px, 92vw); padding: 36px; border-radius: 24px;
  background: var(--rc-carbon); border: 1px solid rgba(255,255,255,.08); color: #fff;
}
.rc-login__caja .rc-input { background: #111318; border-color: rgba(255,255,255,.12); color: #fff; }
.rc-login__aval { text-align: center; font: 500 12px var(--rc-font-mono); color: #8A93A8; margin-top: 24px; }

/* 12) LOGO ------------------------------------------------- */
.rc-logo { height: 40px; width: auto; }
.rc-logo--simbolo { height: 32px; }

/* 13) RESPONSIVE ------------------------------------------- */
@media (max-width: 768px) {
  .rc-kpi__valor { font-size: 32px; }
  .rc-msg { max-width: 88%; }
}