/* =============================================================
   CRM EFISUR — componentes propios
   Se carga después de style.css (que es el del template rbcsur,
   con la paleta ya cambiada a la corporativa de EFISUR).
   Todo lo de aquí es específico de este CRM: manteniéndolo
   aparte, actualizar el template no se lleva por delante estos
   estilos.
   ============================================================= */

:root {
  --border: rgba(0,0,0,0.08);
  --efisur-verde: #009B27;
  --efisur-verde-osc: #00801f;
  --efisur-gris: #AEAEAE;
  --sem-verde: #16a34a;
  --sem-ambar: #f59e0b;
  --sem-rojo: #dc2626;
}

/* ── Buscador global de la barra superior ───────────────────── */

.buscador-global {
  position: relative;
  display: flex;
  align-items: stretch;
}
.buscador-global input {
  width: 260px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-right: none;
  border-radius: 22px 0 0 22px;
  color: #1a1d2e;
  font-size: .84rem;
  padding: .42rem .8rem .42rem 2.4rem;
  outline: none;
  transition: border-color .2s, width .25s;
}
.buscador-global input:focus { border-color: var(--accent); width: 320px; }
.buscador-global input::placeholder { color: #9ca3af; }
.buscador-global button {
  background: var(--accent);
  border: none;
  border-radius: 0 22px 22px 0;
  padding: 0 .95rem;
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.buscador-global button:hover { background: var(--accent-hover); }
.buscador-icono {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: #9ca3af; font-size: .85rem; pointer-events: none; z-index: 1;
}

.buscador-sugerencias {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 420px;
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.14);
  z-index: 1080;
}
.buscador-sugerencias.abierto { display: block; }
.sug-item {
  display: block;
  padding: .55rem .85rem;
  text-decoration: none;
  color: var(--text-main);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.sug-item:last-child { border-bottom: none; }
.sug-item:hover, .sug-item.marcado { background: var(--accent-soft); }
.sug-titulo { font-size: .85rem; font-weight: 600; }
.sug-meta   { font-size: .74rem; color: var(--text-muted); }
.sug-vacio  { padding: .9rem; font-size: .82rem; color: var(--text-muted); text-align: center; }

@media (max-width: 991.98px) {
  .buscador-global { display: none; }
}

/* ── Avisos (campana) ───────────────────────────────────────── */

.notif-btn { color: #6b7280; }
.notif-btn:hover { color: var(--accent); }

.aviso-item {
  display: block;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-main);
}
.aviso-item:last-of-type { border-bottom: none; }
.aviso-item:hover { background: var(--accent-soft); }
.aviso-item.no-leido { background: #f0fdf4; }
.aviso-titulo { font-size: .83rem; font-weight: 600; line-height: 1.25; }
.aviso-meta   { font-size: .73rem; color: var(--text-muted); margin-top: .15rem; }

/* ── Estados y semáforos ────────────────────────────────────── */

.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  padding: .32rem .6rem;
  border-radius: 20px;
  white-space: nowrap;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 30%, #fff);
}
/* Reserva para navegadores sin color-mix */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .badge-estado { background: #f3f4f6; border-color: #e5e7eb; }
}

.semaforo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.semaforo i { font-size: .5rem; }
.sem-verde { color: var(--sem-verde); }
.sem-ambar { color: var(--sem-ambar); }
.sem-rojo  { color: var(--sem-rojo); }
.sem-gris  { color: #94a3b8; font-weight: 500; }

/* ── Campos copiables (DNI, CUPS, teléfono, IBAN) ───────────── */

.copiable {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
}
.copiable-txt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copiar-btn {
  background: none;
  border: none;
  padding: 0 2px;
  color: #c0c4d2;
  font-size: .78rem;
  cursor: pointer;
  line-height: 1;
  transition: color .15s;
}
.copiar-btn:hover  { color: var(--accent); }
.copiar-btn.hecho  { color: var(--sem-verde); }

/* ── Tabla densa tipo Excel ─────────────────────────────────── */

.tabla-excel-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
}
table.tabla-excel {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .8rem;
  margin: 0;
}
table.tabla-excel thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: .55rem .6rem;
  white-space: nowrap;
}
table.tabla-excel thead th a { color: inherit; text-decoration: none; }
table.tabla-excel thead th a:hover { color: var(--accent); }
table.tabla-excel tbody td {
  padding: .45rem .6rem;
  border-bottom: 1px solid rgba(0,0,0,.045);
  vertical-align: middle;
  white-space: nowrap;
}
table.tabla-excel tbody tr:hover td { background: #f6fbf7; }
table.tabla-excel tbody tr.seleccionada td { background: var(--accent-soft); }
table.tabla-excel td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla-excel .celda-larga {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
table.tabla-excel tbody a { color: var(--text-main); text-decoration: none; font-weight: 600; }
table.tabla-excel tbody a:hover { color: var(--accent); text-decoration: underline; }

/* Selector de columnas visibles */
.col-toggle { max-height: 320px; overflow-y: auto; min-width: 230px; }
.col-toggle label {
  display: flex; align-items: center; gap: 8px;
  padding: .3rem .75rem; font-size: .82rem; cursor: pointer;
}
.col-toggle label:hover { background: var(--accent-soft); }

/* ── Barra de filtros ───────────────────────────────────────── */

.filtros-barra {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .85rem 1rem;
  margin-bottom: 1rem;
}
.filtros-barra label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: .2rem;
  display: block;
}
.filtros-barra .form-control,
.filtros-barra .form-select {
  font-size: .84rem;
  border-radius: 9px;
  border-color: #dfe3ec;
}
.filtros-barra .form-control:focus,
.filtros-barra .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .18rem var(--accent-soft);
}

.chip-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 20px; padding: .18rem .6rem;
  font-size: .74rem; font-weight: 600;
}
.chip-filtro a { color: inherit; text-decoration: none; opacity: .7; }
.chip-filtro a:hover { opacity: 1; }

/* ── KPIs del escritorio ────────────────────────────────────── */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.kpi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  transition: box-shadow .18s, transform .18s;
  text-decoration: none;
  color: inherit;
}
.kpi-card:hover { box-shadow: 0 8px 26px rgba(0,0,0,.07); transform: translateY(-1px); color: inherit; }
.kpi-icono {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  background: var(--accent-soft); color: var(--accent);
}
.kpi-icono.ambar { background: rgba(245,158,11,.13); color: #b45309; }
.kpi-icono.rojo  { background: rgba(220,38,38,.11);  color: #b91c1c; }
.kpi-icono.azul  { background: rgba(59,130,246,.12); color: #1d4ed8; }
.kpi-icono.gris  { background: rgba(107,114,128,.12);color: #4b5563; }
.kpi-valor { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; line-height: 1.05; }
.kpi-label { font-size: .76rem; color: var(--text-muted); font-weight: 500; }

/* ── Funnel / pipeline ──────────────────────────────────────── */

.funnel-board {
  display: flex;
  gap: .85rem;
  overflow-x: auto;
  padding-bottom: .75rem;
  align-items: flex-start;
}
.funnel-col {
  flex: 0 0 268px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .7rem;
  min-height: 150px;
}
.funnel-col.sobre { border-color: var(--accent); background: var(--accent-soft); }
.funnel-col-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: .6rem; padding: 0 .15rem;
}
.funnel-col-titulo {
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; display: flex; align-items: center; gap: 6px;
}
.funnel-col-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.funnel-col-cuenta {
  font-size: .7rem; font-weight: 700; color: var(--text-muted);
  background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: .1rem .45rem;
}
.funnel-card {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--c, var(--accent));
  border-radius: 10px;
  padding: .6rem .7rem;
  margin-bottom: .55rem;
  cursor: grab;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .15s, transform .15s;
}
.funnel-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); color: inherit; }
.funnel-card.arrastrando { opacity: .45; }
.funnel-card-titulo { font-size: .83rem; font-weight: 600; line-height: 1.25; }
.funnel-card-meta   { font-size: .72rem; color: var(--text-muted); margin-top: .25rem; line-height: 1.4; }
.funnel-card-pie {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .45rem; gap: 6px;
}
.funnel-vacio { font-size: .78rem; color: var(--text-muted); text-align: center; padding: 1.2rem .5rem; }

/* ── Timeline de actividad ──────────────────────────────────── */

.timeline { position: relative; padding-left: 1.4rem; }
.timeline::before {
  content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px;
  width: 2px; background: var(--border);
}
.timeline-item { position: relative; padding-bottom: 1.05rem; }
.timeline-item::before {
  content: ''; position: absolute; left: -1.4rem; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
}
.timeline-item.sistema::before { border-color: var(--efisur-gris); }
.timeline-texto { font-size: .85rem; line-height: 1.45; }
.timeline-meta  { font-size: .72rem; color: var(--text-muted); margin-top: .12rem; }

/* ── Documentos ─────────────────────────────────────────────── */

.dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: .85rem;
  transition: border-color .18s, background .18s;
  cursor: pointer;
}
.dropzone:hover, .dropzone.sobre { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.doc-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  margin-bottom: .5rem;
  background: #fff;
}
.doc-icono {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #64748b; font-size: 1.05rem;
}
.doc-nombre { font-size: .85rem; font-weight: 600; word-break: break-all; }
.doc-meta   { font-size: .72rem; color: var(--text-muted); }

/* ── Etiquetas de cliente ───────────────────────────────────── */

.chip-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 600;
  padding: .18rem .55rem; border-radius: 20px;
  color: #fff;
}

/* ── Calendario ─────────────────────────────────────────────── */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.cal-cabecera {
  background: #f8fafc; text-align: center;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); padding: .5rem .25rem;
}
.cal-dia {
  background: #fff; min-height: 106px; padding: .35rem .4rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.cal-dia.fuera { background: #fafafa; }
.cal-dia.hoy   { background: #f0fdf4; box-shadow: inset 0 0 0 2px var(--accent); }
.cal-num { font-size: .74rem; font-weight: 700; color: var(--text-muted); }
.cal-dia.hoy .cal-num { color: var(--accent); }
.cal-evento {
  font-size: .69rem; line-height: 1.25;
  padding: .16rem .32rem; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent);
  text-decoration: none; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-evento.renovacion { background: rgba(245,158,11,.16); color: #b45309; }
.cal-evento.cita       { background: rgba(59,130,246,.14); color: #1d4ed8; }
.cal-evento.hecha      { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }

@media (max-width: 767.98px) {
  .cal-dia { min-height: 74px; }
  .cal-evento { font-size: .62rem; }
}

/* ── Pestañas de la ficha ───────────────────────────────────── */

.tabs-crm { border-bottom: 1px solid var(--border); gap: .15rem; }
.tabs-crm .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 600;
  padding: .55rem .95rem;
}
.tabs-crm .nav-link:hover { color: var(--accent); }
.tabs-crm .nav-link.active {
  color: var(--accent);
  background: none;
  border-bottom-color: var(--accent);
}
.tabs-crm .nav-link .badge-cuenta {
  font-size: .65rem; background: var(--accent-soft); color: var(--accent);
  border-radius: 20px; padding: .05rem .38rem; margin-left: 4px;
}

/* ── Utilidades ─────────────────────────────────────────────── */

.btn-efisur {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-efisur:hover, .btn-efisur:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.toast-copia {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1a1d2e; color: #fff; font-size: .82rem;
  padding: .5rem 1rem; border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  z-index: 2000;
}
.toast-copia.visible { opacity: 1; transform: translateX(-50%) translateY(-4px); }

.vacio-estado { text-align: center; padding: 2.4rem 1rem; color: var(--text-muted); }
.vacio-estado i { font-size: 2.1rem; display: block; margin-bottom: .5rem; opacity: .5; }
.vacio-estado p { font-size: .87rem; margin: 0; }

.text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }

.dash-card { background: #fff; }

/* ── Impresión (ficha y contrato) ───────────────────────────── */

@media print {
  #topbar, #sidebar, .no-imprimir, .filtros-barra { display: none !important; }
  #main-content { margin: 0 !important; padding: 0 !important; }
  .dash-card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  body { background: #fff; }
}