/* ═══════════════════════════════════════════════════════════════════════
   CRM — aspecto sobrio tipo hoja de cálculo (5 nov 2026)
   Solo ASPECTO: nada de datos ni de lógica de edición.
   Se carga al final del <head> de dashboard.html, después de los <style>
   en línea; aun así muchos de esos llevan !important y comodines
   (".side-panel-content *", "th svg"), así que aquí se gana con
   especificidad (html body.light-ui ...) + !important.
   Tema claro (el de por defecto). El oscuro no se toca.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --crmx-head-bg: #f5f5f6;      /* fondo de cabecera, gris muy claro */
    --crmx-head-ink: #55555c;     /* texto de cabecera */
    --crmx-head-ico: #9a9aa1;     /* iconos de cabecera en reposo */
    --crmx-head-ico-on: #55555c;  /* icono al cursor / filtro activo */
    --crmx-line: #e6e6e9;         /* rejilla: líneas finas de fila y columna */
}

/* ── 1. Cabeceras: gris suave, sin degradado ni colores vivos ─────────── */
html body.light-ui .leads-expanded-table thead,
html body.light-ui .side-panel-content .leads-expanded-table thead {
    background: var(--crmx-head-bg) !important;
    backdrop-filter: none !important;
}
/* Cubre también el color propio de columna (style="background:..." en línea)
   y el morado de la cabecera fija de Name. */
html body.light-ui .leads-expanded-table thead th,
html body.light-ui .leads-expanded-table thead th.crm-header-cell,
html body.light-ui .leads-expanded-table thead th.crm-header--name {
    background: var(--crmx-head-bg) !important;
    border-bottom: 1px solid var(--crmx-line) !important;
    border-right: 1px solid var(--crmx-line) !important;
    font-weight: 600 !important;
    font-size: calc(12.5px * var(--crm-zoom, 1)) !important;
    letter-spacing: 0 !important;
    padding: calc(6px * var(--crm-zoom, 1)) calc(8px * var(--crm-zoom, 1)) !important;
}
/* Name es sticky: en border-collapse su borde no viaja con ella, así que la
   raya va como sombra interior. Además, al hacer scroll horizontal el
   dashboard le pinta un degradado morado EN LÍNEA con !important (al que
   ninguna hoja gana): se tapa con un telón ::before gris opaco por debajo
   del contenido. */
html body.light-ui .leads-expanded-table thead th.crm-header--name::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--crmx-head-bg);
    box-shadow: inset -1px 0 0 var(--crmx-line), inset 0 -1px 0 var(--crmx-line);
    pointer-events: none;
    z-index: 0;
}
html body.light-ui .leads-expanded-table thead th.crm-header--name > .crm-header-inner {
    position: relative;
    z-index: 1;
}
html body.light-ui .side-panel-content .leads-expanded-table th,
html body.light-ui .side-panel-content .leads-expanded-table th *,
html body.light-ui .side-panel-content .leads-expanded-table .crm-header-cell,
html body.light-ui .side-panel-content .leads-expanded-table .crm-header-label,
html body.light-ui .leads-expanded-table th,
html body.light-ui .leads-expanded-table th .crm-header-label {
    color: var(--crmx-head-ink) !important;
}
/* Iconos sueltos (lápiz de Edit Options, etc.): gris medio. */
html body.light-ui .leads-expanded-table th svg {
    fill: var(--crmx-head-ico) !important;
    stroke: var(--crmx-head-ico) !important;
}
/* Botones fantasma de orden/filtro: contorno e icono en gris medio. */
html body.light-ui .leads-expanded-table th .crm-header-embudo {
    color: var(--crmx-head-ico) !important;
    border-color: #d4d4d8 !important;
}
html body.light-ui .leads-expanded-table th .crm-header-embudo svg,
html body.light-ui .leads-expanded-table th .crm-header-embudo svg * {
    fill: currentColor !important;
    stroke: none !important;
    color: inherit !important;
}
html body.light-ui .leads-expanded-table th .crm-header-embudo:hover {
    color: var(--crmx-head-ico-on) !important;
    border-color: #a8a8ae !important;
    background: #fff !important;
}
html body.light-ui .leads-expanded-table th .crm-header-embudo--on,
html body.light-ui .leads-expanded-table th .crm-header-embudo--on:hover {
    color: var(--crmx-head-ico-on) !important;
    border-color: var(--crmx-head-ico-on) !important;
    background: #fff !important;
}
/* Interruptor +00 de Phones: gris en vez de naranja con halo. */
html body.light-ui .leads-expanded-table th [data-action="phone-toggle"] > div {
    background: rgba(0, 0, 0, 0.16) !important;
    box-shadow: none !important;
}
html body.light-ui .leads-expanded-table th [data-action="phone-toggle"][title="International prefix on"] > div {
    background: #8a8a91 !important;
}
html body.light-ui .leads-expanded-table th [data-action="phone-toggle"] > div > div {
    background: #fff !important;
}
/* Casilla "seleccionar página": gris de la marca, no blanca sobre morado. */
html body.light-ui .leads-expanded-table th .crm-check-all {
    accent-color: #55555c;
}
/* Asa de redimensionar: rayita gris (la blanca no se ve sobre gris claro). */
html body.light-ui .leads-expanded-table thead th:hover .crm-resize-handle::after {
    background: rgba(0, 0, 0, 0.14);
}
html body.light-ui .crm-resize-handle:hover::after {
    background: rgba(0, 0, 0, 0.35);
}

/* ── 4. Rejilla: líneas finas de fila Y de columna, rellenos menores ──── */
html body.light-ui .leads-expanded-table tbody td {
    border-bottom: 1px solid var(--crmx-line) !important;
    border-right: 1px solid var(--crmx-line) !important;
    padding-top: calc(4px * var(--crm-zoom, 1)) !important;
    padding-bottom: calc(4px * var(--crm-zoom, 1)) !important;
    padding-left: calc(8px * var(--crm-zoom, 1)) !important;
    padding-right: calc(8px * var(--crm-zoom, 1)) !important;
}
/* Name (sticky): la raya derecha va en el telón ::before, que viaja con la
   celda al hacer scroll horizontal. */
html body.light-ui .leads-expanded-table tbody td.crm-cell--name {
    border-right: 0 !important;
}
html body.light-ui .leads-expanded-table tbody td.crm-cell--name::before {
    box-shadow: inset -1px 0 0 var(--crmx-line);
}

/* ── 2. Phones: texto limpio, sin pastilla ─────────────────────────────── */
/* ── 3. Web: dominio como enlace sencillo, sin pastilla ────────────────── */
.crm-plainrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    vertical-align: middle;
}
/* El comodín ".leads-expanded-table td div/span" no debe romper el flex. */
.leads-expanded-table td .crm-plainrow { display: inline-flex !important; }
.crm-plain {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
    font-size: calc(13px * var(--crm-zoom, 1));
    font-weight: 400;
    background: none;
    border: 0;
    padding: 0;
}
.crm-plainrow .crm-cell-badge { flex-shrink: 0; }
a.crm-plain--web {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
/* Gana a "body.light-ui a:not(.btn)" (azul de todos los enlaces en claro). */
html body.light-ui .leads-expanded-table td a.crm-plain--web:not(.btn) {
    color: rgba(0, 0, 0, 0.72) !important;
    text-decoration: none !important;
}
html body.light-ui .leads-expanded-table td a.crm-plain--web:not(.btn):hover {
    color: #16161c !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
html body.light-ui .leads-expanded-table td .crm-plain--phone,
html body.light-ui .leads-expanded-table td .crm-plain--phone .crm-pill-text {
    color: rgba(0, 0, 0, 0.78) !important;
}
/* Copiar: más apagado en reposo, como el resto del texto. */
.leads-expanded-table td .crm-plain .crm-copy-btn { opacity: 0.3; }
.leads-expanded-table tbody tr:hover td .crm-plain .crm-copy-btn { opacity: 0.45; }
.leads-expanded-table tbody tr:hover td .crm-plain .crm-copy-btn:hover,
.leads-expanded-table td .crm-plain .crm-copy-btn--ok { opacity: 1; }

/* ── Ronda 2 (5 nov 2026) ─────────────────────────────────────────────── */

/* Emails: texto limpio como Phones (el JS ya no pinta .crm-pill--email). */
html body.light-ui .leads-expanded-table td .crm-plain--email,
html body.light-ui .leads-expanded-table td .crm-plain--email .crm-pill-text,
html body.light-ui .leads-expanded-table td span.crm-plain--web,
html body.light-ui .leads-expanded-table td span.crm-plain--web .crm-pill-text {
    color: rgba(0, 0, 0, 0.78) !important;
}
.crm-plain .crm-pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Web: ningún fondo ni borde, ni siquiera de una pill heredada. */
.leads-expanded-table td .crm-plain,
html body.light-ui .leads-expanded-table td .crm-plain {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

/* Candado de los leads bloqueados en Name: no se pinta (la fila sigue
   bloqueada y el servidor sigue enmascarando; solo se quita el icono). */
.leads-expanded-table td .crm-lock-chip,
html body.light-ui .leads-expanded-table td .crm-lock-chip {
    display: none !important;
}

/* Micro de dictado: sin filo degradado, negro sólido sobrio. */
html body .vr-mic-btn,
html body.light-ui .vr-mic-btn,
html body .pp-note-wrap .vr-mic-btn {
    background: #1d1d21 !important;
    background-size: auto !important;
    border: 1.5px solid #1d1d21 !important;
    box-shadow: none !important;
}
html body .vr-mic-btn:hover,
html body.light-ui .vr-mic-btn:hover,
html body .pp-note-wrap .vr-mic-btn:hover {
    filter: none !important;
    background: #3a3a40 !important;
    border-color: #3a3a40 !important;
}

/* Export: negro sólido, sin filo cónico animado ni halo de color. */
html body #crm-export-btn.crm-export-btn {
    background: #111114 !important;
    border-color: #111114 !important;
    box-shadow: none !important;
    animation: none !important;
}
html body #crm-export-btn.crm-export-btn:hover {
    background: #2a2a2f !important;
    border-color: #2a2a2f !important;
    box-shadow: none !important;
}

/* (5 nov 2026, Luis) La fila de cabeceras (Name, Phones, Emails, Web...) con nuestro degradado de marca con grano.
   background-attachment:fixed hace que todas las celdas (y la de Name, que va fija) enseñen trozos de la misma imagen,
   asi el degradado se ve continuo de punta a punta aunque cada th pinte su fondo. */
html body.light-ui .leads-expanded-table thead th,
html body.light-ui .leads-expanded-table thead th.crm-header-cell,
html body.light-ui .leads-expanded-table thead th.crm-header--name,
html body.light-ui .leads-expanded-table thead th.crm-header--name::before {
    background: url(/static/img/landing-v2/marca_malla_claro.jpg?v=2) center top / 100vw auto fixed !important;
    border-bottom-color: rgba(17,17,20,.08) !important;
    border-right-color: rgba(255,255,255,.35) !important;
}
html body.light-ui .leads-expanded-table thead th.crm-header--name::before { box-shadow: inset -1px 0 0 rgba(255,255,255,.35) !important; }
html body.light-ui .leads-expanded-table thead th,
html body.light-ui .leads-expanded-table thead th *,
html body.light-ui .leads-expanded-table thead .crm-header-label { color: #1d1d21 !important; }
html body.light-ui .leads-expanded-table thead th svg { color: #3a3a40 !important; }
html body.light-ui .leads-expanded-table thead .crm-header-embudo { background: rgba(255,255,255,.55) !important; border-color: rgba(255,255,255,.7) !important; }

/* (5 nov 2026, Luis) cabecera: el degradado de marca mas intenso, liso (sin grano) y el texto en blanco */
html body.light-ui .leads-expanded-table thead th,
html body.light-ui .leads-expanded-table thead th.crm-header-cell,
html body.light-ui .leads-expanded-table thead th.crm-header--name,
html body.light-ui .leads-expanded-table thead th.crm-header--name::before {
    background: linear-gradient(90deg, #7b6fd0 0%, #5f8fcf 50%, #4fa892 100%) left top / 100vw 100% fixed !important;
    border-bottom-color: rgba(17,17,20,.12) !important;
    border-right-color: rgba(255,255,255,.22) !important;
}
html body.light-ui .leads-expanded-table thead th.crm-header--name::before { box-shadow: inset -1px 0 0 rgba(255,255,255,.22) !important; }
html body.light-ui .leads-expanded-table thead th,
html body.light-ui .leads-expanded-table thead th *,
html body.light-ui .leads-expanded-table thead .crm-header-label { color: #fff !important; }
/* los iconos de ordenar y filtrar son formas rellenas: blancas por relleno, sin trazo (con trazo engordaban) */
html body.light-ui .leads-expanded-table thead .crm-header-embudo svg,
html body.light-ui .leads-expanded-table thead .crm-header-embudo svg * { color: #fff !important; fill: #fff !important; stroke: none !important; }
html body.light-ui .leads-expanded-table thead input.crm-check-all { accent-color: #fff; opacity: .9; }
html body.light-ui .leads-expanded-table thead .crm-header-embudo { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.3) !important; }
html body.light-ui .leads-expanded-table thead .crm-header-embudo:hover,
html body.light-ui .leads-expanded-table thead .crm-header-embudo--on { background: rgba(255,255,255,.3) !important; }
html body.light-ui .leads-expanded-table thead .crm-check-all { border-color: rgba(255,255,255,.8) !important; background: transparent !important; }
html body.light-ui .leads-expanded-table thead [data-action="phone-toggle"] > div { background: rgba(255,255,255,.3) !important; }
html body.light-ui .leads-expanded-table thead th,html body.light-ui .leads-expanded-table thead th *{opacity:1 !important;-webkit-text-fill-color:#fff}
html body.light-ui .leads-expanded-table thead .crm-header-label{font-weight:600 !important}

/* (5 nov 2026, Luis) la pildora de canales del avion: cristal blanco translucido (Liquid Glass) en vez de negro con borde
   de color; los iconos en su color de marca, que ahora se ven sobre el blanco */
html body #crm-plane-pill{border:0 !important;background:rgba(255,255,255,.72) !important;-webkit-backdrop-filter:blur(18px) saturate(1.8) !important;backdrop-filter:blur(18px) saturate(1.8) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(17,17,20,.08),0 10px 28px -10px rgba(17,17,20,.35) !important;padding:4px 6px !important}
html body #crm-plane-pill button{color:#1d1d1f !important}
html body #crm-plane-pill button:hover{background:rgba(17,17,20,.07) !important}
html body #crm-plane-pill .crm-plane-pill-nada{color:#55555c !important}
.crm-rev-chip{font-weight:500}