/* crm/specs/0012-rediseno-visual. Reemplaza el estilo de 0003-diseno-visual
   (fondo negro, todo en lima). Reglas:
   - Los colores viven SOLO en tokens.css (Req 1). El cambio de marca
     (rebranding/) = editar --accent* y --link ahí.
   - Tema claro por default, oscuro si el sistema lo pide o si Fabian lo elige
     (<html data-theme>, lo pone el script de base.html) (Req 2, 3).
   - Contraste AA verificado con script para cada par de tokens (Req 4).
   - Los nombres de clase se conservan: plantillas y crm.js dependen de ellos. */

/* Tokens de color y tipografía: tokens.css (se carga antes que este archivo). */


/* ---------- 3. Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
  margin-top: 1.75rem;
}

p {
  margin: 0 0 0.75rem;
}

small {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* Req 7: sin subrayado salvo hover/foco; color de enlace del tema, no acento. */
a {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Botones (Req 8): principal, secundario y de texto ---------- */
.crm-form button,
.crm-boton,
.tablero__selector-entrega button:first-of-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-weight: 600;
  min-height: 44px; /* area de toque */
  cursor: pointer;
  text-decoration: none;
}

.crm-form button:hover,
.crm-boton:hover,
.tablero__selector-entrega button:first-of-type:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
  text-decoration: none;
}

.boton-secundario,
.crm-form button.btn-quitar-fila,
.btn-quitar-fila,
.tablero__tarjeta-no-interesado,
.tablero__selector-entrega button:last-of-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.8rem;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  min-height: 36px;
  cursor: pointer;
}

.boton-secundario:hover,
.btn-quitar-fila:hover,
.tablero__selector-entrega button:last-of-type:hover {
  background: var(--surface-2);
}

.boton-texto {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  font: inherit;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}

.boton-texto:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
}

/* ---------- Pastillas (Req 10): etapa, conteos y estados ---------- */
.pastilla,
.hoy__etapa,
.hoy__conteo,
.marca-estancado,
.tag-congelado,
.tablero__conteo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-muted);
  margin: 0;
}

.marca-estancado,
.tag-congelado,
.pastilla--peligro,
.hoy__grupo--vencidos .hoy__conteo {
  background: var(--danger-bg);
  color: var(--danger);
}

.pastilla--aviso,
.hoy__grupo--hoy .hoy__conteo {
  background: var(--warning-bg);
  color: var(--warning);
}

/* ---------- Mensajes ---------- */
.crm-messages {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.msg {
  padding: 0.65rem 0.9rem;
  margin: 0.75rem 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: var(--fs-body);
}

.msg-success {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success);
}

.msg-error {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger);
}

/* ---------- Formularios ---------- */
.crm-form {
  margin-bottom: 1.5rem;
}

.crm-form fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
  /* Un fieldset por default no se encoge más que su contenido (min-content):
     las tablas de cotizar lo sacaban del ancho a 390 px (Req 14). */
  min-width: 0;
}

.crm-form legend {
  color: var(--text);
  font-weight: 700;
  padding: 0 0.4rem;
}

.crm-form label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
}

.crm-form p {
  margin: 0 0 0.9rem;
}

.crm-form input[type="text"],
.crm-form input[type="password"],
.crm-form input[type="date"],
.crm-form input[type="number"],
.crm-form input[type="email"],
.crm-form input[type="url"],
.crm-form input[type="search"],
.crm-form input:not([type]),
.crm-form select,
.crm-form textarea {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 1rem; /* >=16px: evita el zoom automatico de iOS */
}

.crm-form textarea {
  max-width: 100%;
}

.crm-form input::placeholder,
.crm-form textarea::placeholder {
  color: var(--text-muted);
}

.errorlist {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  color: var(--danger);
  font-size: var(--fs-small);
  font-weight: 500;
}

/* ---------- Tablas ---------- */
.crm-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.crm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.crm-table th,
.crm-table td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.crm-table tr:last-child td {
  border-bottom: none;
}

.crm-table thead th,
.crm-table tbody th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-small);
}

.crm-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.crm-table tbody tr:hover td {
  background: var(--surface-2);
}

/* ---------- 4. Header y menú (Req 9) ---------- */
.crm-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.6rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.crm-header__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}

.crm-header__brand:hover {
  text-decoration: none;
}

.crm-header__logo {
  height: 32px;
  width: 32px;
}

.crm-header__wordmark {
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.15rem;
  color: var(--text);
}

.crm-header__dot {
  display: inline-block;
  width: 0.35em;
  height: 0.35em;
  margin-left: 0.08em;
  border-radius: 50%;
  background: var(--accent);
  color: transparent;
  overflow: hidden;
  vertical-align: baseline;
}

.crm-header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.25rem;
}

.crm-header__nav > a {
  color: var(--text-muted);
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
}

.crm-header__nav > a:hover {
  color: var(--text);
  background: var(--surface-2);
  text-decoration: none;
}

.crm-header__nav > a[aria-current="page"] {
  color: var(--accent-ink);
  background: var(--accent);
  font-weight: 600;
}

.crm-header__user {
  color: var(--text-muted);
  font-size: var(--fs-small);
  padding: 0 0.5rem;
}

.crm-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem;
}

.crm-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
}

/* ---------- Hoy (0011; 0014 Req 4-7) ---------- */
.hoy__grupo {
  margin: 0 0 1.75rem;
}

.hoy__grupo h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
}

.hoy__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hoy__lead {
  border-bottom: 1px solid var(--border);
}

.hoy__lead:last-child {
  border-bottom: none;
}

.hoy__fila {
  border-left: 3px solid transparent;
}

.hoy__resumen {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "quien cuando"
    "sigue tel";
  gap: 0.25rem 0.75rem;
  align-items: center;
  padding: 0.65rem 1rem;
}

.hoy__resumen::-webkit-details-marker {
  display: none;
}

.hoy__resumen:hover,
.hoy__fila[open] > .hoy__resumen {
  background: var(--surface-2);
}

.hoy__quien {
  grid-area: quien;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hoy__negocio {
  color: var(--text);
  font-weight: 600;
}

.hoy__contacto {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.hoy__sigue {
  grid-area: sigue;
  color: var(--text);
}

.hoy__cuando {
  grid-area: cuando;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

.hoy__fecha {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.hoy__tel {
  grid-area: tel;
  justify-self: end;
}

.hoy__detalle {
  padding: 0.25rem 1rem 1rem 1rem;
  background: var(--surface-2);
  display: grid;
  gap: 0.75rem;
}

.hoy__ultimos {
  margin: 0;
  display: grid;
  gap: 0.15rem 1rem;
}

.hoy__ultimos dt {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: 0.4rem;
}

.hoy__ultimos dd {
  margin: 0;
}

.hoy__avance {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
}

.hoy__avance p {
  margin: 0 0 0.6rem;
}

.hoy__avance-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 1rem;
}

.hoy__avance-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.hoy__vacio {
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0;
}

/* ---------- Urgencia (0014 Req 4): rojo vencido/estancado, ámbar hoy ---------- */
.urgencia--vencido,
.urgencia--estancado {
  border-left-color: var(--danger) !important;
}

.urgencia--hoy {
  border-left-color: var(--warning) !important;
}

.urgencia--vencido .hoy__fecha,
.urgencia--vencido .tablero__tarjeta-contacto,
.urgencia--vencido .ficha__cuando {
  color: var(--danger);
}

.urgencia--hoy .hoy__fecha,
.urgencia--hoy .tablero__tarjeta-contacto,
.urgencia--hoy .ficha__cuando {
  color: var(--warning);
}

/* ---------- Texto cortado (0014 Req 3) ---------- */
.cortar {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cortar-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ---------- Ficha (0011; Req 12) ---------- */
.ficha__encabezado {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.ficha__encabezado h1 {
  margin-bottom: 0.15rem;
}

.ficha__contacto {
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.ficha__estado,
.ficha__enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.ficha__sigue {
  margin: 0.75rem 0;
  padding: 0.6rem 0.8rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.ficha__enlaces {
  margin: 0;
}

.ficha__seccion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.ficha__seccion h2 {
  margin-top: 0;
}

.ficha__avance {
  margin: 0;
}

.ficha__avance .ficha__avance-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 0 1rem;
}

.ficha__datos {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1rem;
  font-size: var(--fs-body);
}

.ficha__datos dt {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.ficha__datos dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.historial {
  list-style: none;
  margin: 0;
  padding: 0;
}

.historial__item {
  border-left: 3px solid var(--border);
  padding: 0.35rem 0 0.35rem 0.85rem;
  margin: 0 0 0.85rem;
}

.historial__nota--fabian {
  border-left-color: var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding-right: 0.75rem;
}

.historial__meta {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: 0;
}

.historial__texto {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
}

.ficha__plegable {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0 0 0.75rem;
}

.ficha__plegable > summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  list-style: none;
}

.ficha__plegable > summary::-webkit-details-marker {
  display: none;
}

.ficha__plegable > summary::before {
  content: "▸";
  color: var(--text-muted);
  margin-right: 0.5rem;
  transition: transform 0.15s;
}

.ficha__plegable[open] > summary::before {
  transform: rotate(90deg);
}

.ficha__plegable > :not(summary) {
  margin: 0 1rem 1rem;
}

.ficha__plegable .crm-table-wrap {
  margin: 0 1rem 1rem;
}

.ficha__lista-cotizaciones {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.ficha__lista-cotizaciones li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}

.ficha__lista-cotizaciones li:last-child {
  border-bottom: none;
}

/* ---------- Tablero (0004; Req 13) ---------- */
.tablero__filtros {
  margin-bottom: 1rem;
}

.tablero__filtros summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--text);
}

.tablero__filtros-panel {
  margin-top: 0.75rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
}

.tablero__filtro-opcion {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
  font-size: var(--fs-body);
  margin: 0;
  cursor: pointer;
}

.tablero__filtros-acciones {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.tablero {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.tablero__columna {
  flex: 1 1 0;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 0.5rem;
  /* 0004 Req 12: el titulo queda fuera del area con scroll (sin sticky). */
  max-height: calc(100vh - var(--crm-header-h) - 2rem);
}

.tablero__columna-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
}

.tablero__columna-header h2 {
  margin: 0;
  font-size: var(--fs-body);
}

.tablero__conteo {
  background: var(--surface);
}

.tablero__tarjetas {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0 0.25rem;
}

.tablero__tarjeta {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 0.7rem 0.75rem;
  cursor: grab;
}

.tablero__tarjeta-nombre {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.tablero__tarjeta-contacto-nombre,
.tablero__tarjeta-categoria,
.tablero__tarjeta-contacto {
  display: block;
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.tablero__tarjeta .marca-estancado {
  margin-top: 0.35rem;
}

.tablero__tarjeta-contacto-input {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.4rem;
  font-family: inherit;
  font-size: var(--fs-small);
}

/* 0004 Req 8: vencido (rojo) u hoy (ámbar). */
.tablero__tarjeta--vencido {
  border-left: 3px solid var(--danger);
}

.tablero__tarjeta--vencido .tablero__tarjeta-contacto {
  color: var(--danger);
  font-weight: 600;
}

.tablero__tarjeta--vencido .tablero__tarjeta-contacto-input {
  border-color: var(--danger);
  color: var(--danger);
}

.tablero__tarjeta--hoy {
  border-left: 3px solid var(--warning);
}

.tablero__tarjeta--hoy .tablero__tarjeta-contacto {
  color: var(--warning);
  font-weight: 600;
}

.tablero__tarjeta--hoy .tablero__tarjeta-contacto-input {
  border-color: var(--warning);
  color: var(--warning);
}

.tablero__tarjeta-no-interesado {
  margin-top: 0.5rem;
  min-height: 32px;
}

.tablero__tarjeta-no-interesado:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}

.tablero__selector-entrega {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tablero__selector-entrega select {
  flex: 1 1 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.5rem;
  font-family: inherit;
  font-size: var(--fs-small);
}

.tablero__selector-entrega button {
  min-height: 36px;
  font-size: var(--fs-small);
}

.tablero__divisor {
  border: none;
  border-top: 1px dashed var(--border-strong);
  margin: 0.25rem 0;
}

.tablero__vacio {
  color: var(--text-muted);
  font-size: var(--fs-small);
  padding: 0.25rem 0.5rem;
}

/* ---------- Listado y congelados (0008) ---------- */
/* crm/specs/0013 (Req 17): busqueda y orden en una fila. */
.listado__busqueda-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}

.listado__campo {
  flex: 1 1 200px;
  min-width: 0;
}

.listado__campo--busqueda {
  flex: 3 1 280px;
}

.listado__campo label {
  margin-bottom: 0.3rem;
}

.crm-form .listado__campo input,
.crm-form .listado__campo select {
  max-width: none;
}

.listado__busqueda {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.listado__busqueda .tablero__filtros {
  margin: 0.75rem 0 0;
}

.listado__busqueda .listado__acciones:empty {
  display: none;
}

.listado__filtros-panel {
  align-items: flex-start;
}

.listado__grupo {
  min-width: 160px;
}

.listado__grupo .tablero__filtro-opcion {
  margin-bottom: 0.35rem;
}

.listado__acciones {
  margin: 0.75rem 0 0;
}

.listado__tabla {
  font-size: var(--fs-small);
}

.listado__tabla th,
.listado__tabla td {
  padding: 0.55rem 0.7rem;
}

.listado__tabla td:first-child {
  white-space: normal;
  min-width: 180px;
}

.listado__total {
  color: var(--text-muted);
}

.listado__paginacion {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0;
}

/* ---------- crm/specs/0013: menú, perfil, copiar número, tablero ---------- */
.crm-header__nav > a.crm-header__nuevo {
  color: var(--accent-ink);
  background: var(--accent);
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  min-height: 36px;
  margin-left: 0.5rem;
}

.crm-header__nav > a.crm-header__nuevo:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}

.perfil {
  position: relative;
  margin-left: 0.25rem;
}

.perfil__boton {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: 999px;
  color: var(--text);
  font-weight: 500;
  min-height: 36px;
}

.perfil__boton::-webkit-details-marker {
  display: none;
}

.perfil__boton:hover,
.perfil[open] .perfil__boton {
  background: var(--surface-2);
}

.perfil__inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  font-size: var(--fs-small);
  font-weight: 700;
}

.perfil__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.35rem;
}

.perfil__logout {
  margin: 0;
}

.perfil__opcion {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  min-height: 40px;
}

.perfil__opcion:hover {
  background: var(--surface-2);
}


.tablero__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.tablero__encabezado h1 {
  margin: 0;
}

.tablero__encabezado .tablero__filtros {
  margin: 0;
  position: relative;
}

.tablero__encabezado .tablero__filtros-panel {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 280px;
  box-shadow: var(--shadow);
}

.tablero__zona-baja {
  position: sticky;
  top: calc(var(--crm-header-h) + 0.5rem);
  z-index: 15;
  margin: 0 0 0.75rem;
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  color: var(--danger);
  background: var(--danger-bg);
  border: 2px dashed var(--danger);
  border-radius: var(--radius);
}

.tablero__zona-baja[hidden] {
  display: none;
}

.tablero__zona-baja--activa {
  border-style: solid;
}

/* ---------- crm/specs/0014: chip del número, ficha, tablero, filtros, alta, login ---------- */

/* Chip dividido (Req 1, 2): izquierda abre WhatsApp, derecha copia el número. */
.chip-tel {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  overflow: visible;
  white-space: nowrap;
  vertical-align: middle;
}

.chip-tel__wa {
  display: inline-flex;
  align-items: center;
  padding: 0 0.45rem 0 0.55rem;
  color: var(--link);
  border-right: 1px solid var(--border);
  border-radius: 999px 0 0 999px;
}

.chip-tel__wa:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.chip-tel__num {
  background: none;
  border: none;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  padding: 0.2rem 0.65rem 0.2rem 0.45rem;
  cursor: copy;
  border-radius: 0 999px 999px 0;
  min-height: 30px;
}

.chip-tel__num:hover {
  background: var(--surface-2);
}

.copiar__aviso {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 50;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid var(--success);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  pointer-events: none;
}

.copiar__manual {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  font: inherit;
  font-size: var(--fs-small);
  width: 9.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 0.2rem 0.4rem;
}

.pastilla--acento {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Ficha: encabezado a 2 lados y chip de etapa (Req 8-12). */
.ficha__encabezado {
  border-left: 3px solid var(--border);
}

.ficha__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.ficha__titulo {
  min-width: 0;
  flex: 1 1 auto;
}

.ficha__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.ficha__sigue {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
}

.ficha__cuando {
  white-space: nowrap;
  font-weight: 600;
}

.etapa-menu {
  position: relative;
}

.etapa-menu__chip {
  list-style: none;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.etapa-menu__chip::-webkit-details-marker {
  display: none;
}

.etapa-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.5rem;
  display: grid;
  gap: 0.5rem;
}

.etapa-menu__opcion {
  margin: 0;
  display: grid;
  gap: 0.3rem;
}

.etapa-menu__opcion label {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.etapa-menu__opcion select,
.etapa-menu__opcion textarea {
  font: inherit;
  font-size: var(--fs-small);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  width: 100%;
}

.etapa-menu__boton {
  width: 100%;
  text-align: left;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.etapa-menu__boton:hover {
  background: var(--accent-hover);
}

.etapa-menu__boton--secundario {
  background: var(--surface-2);
  color: var(--text);
}

.etapa-menu__boton--secundario:hover {
  background: var(--border);
}

.etapa-menu__boton--peligro {
  background: var(--danger-bg);
  color: var(--danger);
}

.etapa-menu__boton--peligro:hover {
  background: var(--danger-bg);
  text-decoration: underline;
}

/* 0014 Req 28: historial plegable. */
.ficha__historial-titulo {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ficha__historial-titulo::-webkit-details-marker {
  display: none;
}

.ficha__historial-titulo::before {
  content: "▸";
  color: var(--text-muted);
  transition: transform 0.15s;
}

.ficha__historial[open] > .ficha__historial-titulo::before {
  transform: rotate(90deg);
}

.ficha__historial-titulo h2 {
  margin: 0;
}

.ficha__historial[open] > .ficha__historial-titulo {
  margin-bottom: 0.75rem;
}

.ficha__edicion fieldset {
  margin: 0 0 0.75rem;
}

.ficha__edicion-acciones {
  margin-top: 0.25rem;
}

/* Tablero: tarjeta compacta y desplegable (Req 15, 16, 26). Sin selección de
   texto para que mantener presionado arrastre desde cualquier parte. */
.tablero__tarjeta {
  border-left: 3px solid var(--border);
  user-select: none;
  -webkit-user-select: none;
}

/* 0014 Req 30: cuerpo (despliega) + asa a la derecha (arrastra). */
.tablero__tarjeta {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  padding-right: 0;
  cursor: pointer;
}

.tablero__tarjeta-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}

.tablero__tarjeta-asa {
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -0.7rem 0;
  border-left: 1px solid var(--border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
  cursor: grab;
  touch-action: none;
}

.tablero__tarjeta-asa svg {
  fill: currentColor;
  pointer-events: none;
}

.tablero__tarjeta-asa:hover {
  background: var(--surface-2);
  color: var(--text);
}

.tablero__tarjeta-asa:active {
  cursor: grabbing;
}

.tablero__tarjeta .tablero__tarjeta-nombre {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin: 0 0 0.1rem;
}

.tablero__tarjeta .tablero__tarjeta-nombre:hover {
  color: var(--link);
}

.tablero__tarjeta-cambiar-fecha {
  display: block;
  width: 100%;
  font-size: var(--fs-small);
  color: var(--text-muted);
  user-select: auto;
}

.tablero__tarjeta-abrir {
  font-size: var(--fs-small);
  font-weight: 600;
}

.tablero__tarjeta-nombre {
  margin-bottom: 0.1rem;
}

.tablero__tarjeta-detalle {
  display: none;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}

.tablero__tarjeta--abierta .tablero__tarjeta-detalle {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
}

.tablero__tarjeta-dato {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text);
}

.tablero__tarjeta .marca-estancado {
  margin-top: 0.35rem;
}

/* Filtros flotantes del listado (Req 18). */
.filtros-flotantes {
  position: relative;
  align-self: flex-end;
}

.filtros-flotantes__boton {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.filtros-flotantes__boton::-webkit-details-marker {
  display: none;
}

.filtros-flotantes__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  width: min(640px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.filtros-flotantes__limpiar {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-weight: 600;
}

.filtros-flotantes__panel .listado__grupo {
  border: none;
  padding: 0;
  margin: 0;
  background: none;
}

/* Alta (Req 21). */
.alta {
  max-width: 1000px;
}

.alta__tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
}

.alta__columnas {
  display: grid;
  gap: 0 2rem;
}

.alta__subtitulo {
  font-size: var(--fs-body);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
}

.alta__fila,
.alta__mas-grid {
  display: grid;
  gap: 0 1rem;
}

.alta .crm-form p,
.alta__tarjeta p {
  margin: 0 0 0.75rem;
}

.alta__mas {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}

.alta__mas > summary {
  cursor: pointer;
  color: var(--link);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.alta__acciones {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

/* Login (Req 23). */
body.pagina-login .crm-main {
  max-width: none;
  padding: 0;
}

.login {
  min-height: 100vh;
  display: grid;
}

.login__marca {
  display: none;
}

.login__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--bg);
}

.login__tarjeta {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 2rem 1.75rem;
}

.login__tarjeta h1 {
  margin: 0.75rem 0 0.15rem;
}

.login__sub {
  color: var(--text-muted);
  margin: 0 0 1.25rem;
}

.login__logo-chico {
  width: 44px;
  height: 44px;
}

.login__tarjeta .crm-form input {
  max-width: none;
}

.login__entrar {
  width: 100%;
}

/* Placa oscura: el logo verde no se ve sobre el lima (mismo recurso que la
   portada de los diagnósticos). */
.login__logo {
  width: 120px;
  height: 120px;
  padding: 18px;
  background: var(--accent-ink);
  border-radius: 28px;
}

.login__wordmark {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--accent-ink);
  margin: 1rem 0 0.5rem;
}

.login__punto {
  color: var(--surface);
}

.login__lema {
  font-size: 1.1rem;
  color: var(--accent-ink);
  max-width: 22rem;
  margin: 0;
}

/* ---------- 5. Responsive ---------- */

/* Escritorio: Hoy en una línea por lead, ficha en 2 columnas, tablero con
   scroll por columna (0014 Req 5, 13, 17), alta y login en 2 columnas. */
@media (min-width: 1024px) {
  .hoy__resumen {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 8.5rem auto;
    grid-template-areas: "quien sigue cuando tel";
    gap: 0 1.25rem;
  }

  .hoy__avance-fila {
    grid-template-columns: minmax(0, 1fr) 200px;
  }

  .hoy__detalle {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
  }

  .ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
  }

  .ficha__edicion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    align-items: start;
  }

  .ficha__edicion-acciones {
    grid-column: 1 / -1;
  }

  /* 0014 Req 17: el tablero ocupa el alto de la ventana y cada columna hace
     su propio scroll, con los títulos siempre arriba y barras delgadas. */
  .tablero {
    overflow: hidden;
    height: calc(100vh - var(--crm-header-h) - 7.5rem);
    min-height: 420px;
    align-items: stretch;
  }

  .tablero__columna {
    min-width: 0;
    max-height: none;
    height: 100%;
  }

  /* La barra solo aparece al pasar el mouse por la columna. */
  .tablero__tarjetas {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    padding-right: 0.15rem;
  }

  .tablero__columna:hover .tablero__tarjetas {
    scrollbar-color: var(--border-strong) transparent;
  }

  .tablero__tarjetas::-webkit-scrollbar {
    width: 6px;
  }

  .tablero__tarjetas::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
  }

  .alta__columnas {
    grid-template-columns: 1fr 1fr;
  }

  .alta__fila {
    grid-template-columns: 1fr 1.4fr;
  }

  .alta__mas-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .login {
    grid-template-columns: 1.1fr 1fr;
  }

  .login__marca {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 4rem;
    background: var(--accent);
  }

  .login__logo-chico {
    display: none;
  }
}

/* Celular (Req 14): el body nunca hace scroll horizontal. */
@media (max-width: 480px) {
  :root {
    --crm-header-h: 105px;
  }

  .crm-main {
    padding: 1rem;
  }

  .crm-messages {
    padding: 0 1rem;
  }

  .crm-header {
    padding: 0.5rem 1rem;
  }

  .crm-header__nav > a {
    padding: 0.5rem 0.6rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .crm-header__user {
    display: none;
  }

  .perfil__nombre {
    display: none;
  }

  .crm-form input:not([type=hidden]),
  .crm-form select,
  .crm-form textarea {
    max-width: 100%;
  }

  .crm-form button {
    width: 100%;
  }

  .ficha__avance .ficha__avance-fila {
    grid-template-columns: 1fr;
  }

  .chip-tel__num,
  .perfil__boton {
    min-height: 40px;
  }
}

/* crm/specs/0013 (Req 19-21): Mi perfil. */
.perfil-pagina {
  display: grid;
  gap: 1.25rem;
  max-width: 1000px;
}

@media (min-width: 1024px) {
  .perfil-pagina {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.perfil-pagina__reglas {
  color: var(--text-muted);
  font-size: var(--fs-small);
  margin: -0.4rem 0 0.9rem;
}

.perfil-pagina__reglas ul {
  margin: 0;
  padding-left: 1.1rem;
}

a.perfil__opcion {
  display: block;
  color: var(--text);
  font-weight: 400;
}

a.perfil__opcion:hover {
  text-decoration: none;
}

/* ---------- crm/specs/0014 (Req 31-35): arrastre con puntero y regreso ---------- */

/* La tarjeta envuelve: cuerpo + asa en la primera fila, y los paneles
   (Cliente, regreso) a todo lo ancho debajo. */
.tablero__tarjeta {
  flex-wrap: wrap;
  cursor: grab;
}

.tablero__tarjeta a,
.tablero__tarjeta svg {
  -webkit-user-drag: none;
}

.tablero__selector-entrega,
.tablero__regreso {
  flex: 1 1 100%;
  margin-right: 0.75rem;
  cursor: auto;
}

.tablero__regreso {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tablero__regreso p {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
}

.tablero__regreso textarea {
  flex: 1 1 100%;
  font: inherit;
  font-size: var(--fs-small);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.5rem;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
}

.tablero__regreso button {
  min-height: 36px;
  font: inherit;
  font-size: var(--fs-small);
  border-radius: var(--radius-sm);
  padding: 0 0.75rem;
  cursor: pointer;
}

.tablero__regreso button:first-of-type {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  font-weight: 600;
}

.tablero__regreso button:first-of-type:hover {
  background: var(--accent-hover);
}

.tablero__regreso button:last-of-type {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.tablero__regreso button:last-of-type:hover {
  background: var(--surface-2);
}

/* Mientras se arrastra: la original queda tenue en su lugar y una copia
   sigue al puntero. */
body.arrastrando,
body.arrastrando * {
  cursor: grabbing !important;
  user-select: none;
  -webkit-user-select: none;
}

.tablero__tarjeta--arrastrando {
  opacity: 0.4;
}

.tablero__fantasma {
  position: fixed;
  z-index: 100;
  margin: 0;
  pointer-events: none;
  transform: rotate(2deg);
  box-shadow: 0 8px 24px var(--border-strong);
  opacity: 0.95;
}

.tablero__columna--sobre {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* El menú de etapa también usa un enlace ("genera la cotización"). */
a.etapa-menu__boton {
  display: block;
  text-decoration: none;
}

a.etapa-menu__boton:hover {
  text-decoration: none;
}

/* Asa fija a la derecha aunque la tarjeta tenga un panel abierto debajo. */
.tablero__tarjeta-cuerpo {
  flex-basis: 0;
}

/* Mientras el servidor confirma un movimiento. */
.tablero__tarjeta--guardando {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- crm/specs/0014 (Req 36): avisos que se cierran ---------- */
.crm-messages .msg {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  transition: opacity 0.25s ease;
}

.msg__cerrar {
  margin-left: auto;
  flex: 0 0 auto;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
  opacity: 0.7;
}

.msg__cerrar:hover {
  opacity: 1;
}

.msg--saliendo {
  opacity: 0;
}

/* ---------- crm/specs/0015 (Req 26, 30): botón que procesa ---------- */
.boton--cargando {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: progress;
  opacity: 0.85;
  pointer-events: none;
}

.spinner {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.6;
  }
}

/* ---------- crm/specs/0015: cotización ágil (Req 10-25) ---------- */
/* Botón solo icono, con área de toque de 36 px (44 a 390 px). */
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}

.boton-icono:hover {
  background: var(--surface-2);
  color: var(--text);
}

.cot__encabezado {
  margin-bottom: 1rem;
}

.cot__encabezado h1 {
  margin: 0.25rem 0 0;
}

.cot__volver {
  font-size: var(--fs-small);
}

.cot__origen {
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-small);
}

.cot__origen--otro {
  background: var(--warning-bg);
  border-color: var(--warning);
}

.cot__origen a {
  margin-left: 0.5rem;
}

/* Barra fija a la derecha (escritorio): pasos, totales y "Generar". */
.cot__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.cot__barra {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cot__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cot__pasos li {
  position: relative;
}

.cot__paso {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.6rem;
  align-items: center;
  padding: 0.35rem 0;
  color: var(--text);
  text-decoration: none;
}

.cot__paso:hover {
  text-decoration: none;
}

.cot__paso:hover .cot__paso-nombre {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Línea entre pasos (gradiente de objetivo): verde cuando el paso está completo. */
.cot__pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: calc(0.35rem + 30px);
  bottom: calc(-0.35rem + 2px);
  width: 2px;
  background: var(--border);
}

.cot__pasos li.cot__paso--completo:not(:last-child)::after {
  background: var(--success);
}

.cot__paso-marca {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  font-weight: 700;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
}

.cot__paso--completo .cot__paso-marca {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}

.cot__paso--activo .cot__paso-marca {
  border-color: var(--text);
  color: var(--text);
}

.cot__paso-nombre {
  font-weight: 600;
  font-size: var(--fs-small);
}

.cot__paso-estado {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cot__paso--completo .cot__paso-estado {
  color: var(--success);
}

.cot__paso--falta .cot__paso-estado {
  color: var(--warning);
}

.cot__totales {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
}

.cot__totales div {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.15rem 0;
}

.cot__totales dt {
  color: var(--text-muted);
}

.cot__totales dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.cot__totales div.cot__total {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-body);
  font-weight: 700;
}

.cot__total dt {
  color: var(--text);
}

.cot__generar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cot__generar:hover {
  background: var(--accent-hover);
}

.cot__aviso-envio {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--warning);
  background: var(--warning-bg);
  color: var(--text);
  font-size: var(--fs-small);
}

.cot__aviso-envio p {
  margin: 0 0 0.5rem;
}

.cot__aviso-envio div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Inicio: partir de una anterior (Req 5). */
.cot__anterior {
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

.cot__anterior > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--link);
  min-height: 28px;
}

.cot__buscar {
  margin: 0.75rem 0 0.5rem;
}

.cot__resultados {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}

.cot__resultados a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.cot__resultados a:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.cot__resultado-numero {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cot__resultado-meta {
  grid-column: 2;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.cot__sin-resultados {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* Pasos (Req 10, 11). */
.cot__seccion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  scroll-margin-top: calc(var(--crm-header-h) + 1rem);
}

.cot__seccion-titulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
}

.cot__seccion-titulo::-webkit-details-marker {
  display: none;
}

.cot__seccion-titulo h2 {
  margin: 0;
  font-size: var(--fs-h2);
}

.cot__seccion-numero {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 700;
}

.cot__resumen {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.cot__seccion[open] .cot__resumen {
  display: none;
}

.cot__seccion-cuerpo {
  padding: 0 1rem 1rem;
}

.cot__subtitulo {
  margin: 1rem 0 0.5rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text);
}

.cot__seccion-cuerpo > .cot__subtitulo:first-of-type {
  margin-top: 0;
}

.cot__subtitulo small {
  font-weight: 500;
  color: var(--text-muted);
}

.cot__error,
.cot__error-js {
  margin: 0 0 0.75rem;
}

.cot__error-js {
  color: var(--danger);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Campos de la pantalla (mismo aspecto que .crm-form, sin heredar sus botones). */
.cot input[type="text"],
.cot input[type="number"],
.cot input[type="search"],
.cot textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  font-family: inherit;
  font-size: 1rem;
}

.cot input::placeholder,
.cot textarea::placeholder {
  color: var(--text-muted);
}

.cot__campo {
  margin: 0 0 0.9rem;
}

.cot__campo label,
.chips__titulo {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
}

.cot__fila-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}

.cot__fila-campos .cot__campo {
  width: 140px;
}

.cot__check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-bottom: 0.9rem;
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}

.cot__check input,
.cot__servicio input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--text);
}

.cot__mas {
  margin-top: 0.5rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.75rem;
}

.cot__mas > summary {
  cursor: pointer;
  color: var(--link);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.cot__formato {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* Servicios del catálogo: casilla + nombre + monto en la misma fila (Req 16). */
.cot__catalogo {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.cot__servicio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.25rem 0.75rem;
}

.cot__servicio + .cot__servicio {
  border-top: 1px solid var(--border);
}

.cot__servicio:has(input[type="checkbox"]:checked) {
  background: var(--surface-2);
}

.cot__servicio-nombre {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  cursor: pointer;
}

.cot__usos {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cot__monto {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
}

.cot .cot__monto input {
  width: 120px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* El monto solo aparece al marcar el servicio. */
.cot__servicio:not(:has(input[type="checkbox"]:checked)) .cot__monto {
  visibility: hidden;
}

/* Filas a la medida y externas (Req 17). */
.cot__filas:empty {
  display: none;
}

.cot__linea {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cot__fila--invalida {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.cot__marca-origen,
.chip--origen {
  outline: 2px solid var(--warning);
  outline-offset: 1px;
}

.cot__agregar {
  margin: 0.25rem 0 0.75rem;
}

/* crm/specs/0022-cotizacion-v4 (Req 1): descuento junto a las líneas que descuenta. */
.cot__descuento {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Req 3, 5: formas de pago. Pagos, descuento, recomendada y quitar en una fila; lo que
   incluye y la cuenta debajo (proximidad: la cuenta junto a la forma que calcula). */
.cot__forma {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.cot__forma-pagos {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.cot .cot__forma-pagos input {
  width: 3.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cot__forma .cot__monto {
  white-space: nowrap;
}

.cot .cot__forma .cot__monto input {
  width: 100px;
}

.cot__forma-recomendada {
  margin: 0;
}

.cot__forma-incluye {
  grid-column: 1 / -1;
}

.cot__forma-calculo {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.cot__forma-calculo:empty {
  display: none;
}

.cot__formas-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 1rem;
}

/* Req 8-10: vista previa en un <dialog> (Escape = Corregir). */
.previa {
  width: min(960px, calc(100vw - 2rem));
  height: min(92vh, 1200px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.previa[open] {
  display: flex;
  flex-direction: column;
}

.previa::backdrop {
  background: var(--overlay);
}

.previa__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.previa__titulo {
  margin: 0;
  font-size: var(--fs-body);
}

.previa__titulo small {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 0.35rem;
}

.previa__acciones {
  display: flex;
  gap: 0.5rem;
}

.previa__generar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.previa__generar:hover {
  background: var(--accent-hover);
}

.previa__marco {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: var(--surface-2);
}

/* Chips (Req 20-23): Incluye y No incluye lado a lado en escritorio. */
.cot__pares {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.chips {
  min-width: 0;
  margin-bottom: 0.75rem;
}

.chips__icono {
  display: inline-block;
  width: 1.1em;
  font-weight: 700;
}

.chips--incluye .chips__icono {
  color: var(--success);
}

.chips--no_incluye .chips__icono {
  color: var(--danger);
}

.chips__lista {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.chip {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.3rem 0.3rem 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.chip__texto {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.35rem 0;
  cursor: text;
  overflow-wrap: anywhere;
}

.cot .chip__editar {
  flex: 1 1 auto;
  font-size: var(--fs-small);
  padding: 0.3rem 0.45rem;
}

.cot .chips__nuevo {
  font-size: var(--fs-small);
}

/* Con JS el textarea queda oculto detrás de los chips (sin JS es el campo de siempre). */
.chips--js .chips__respaldo,
.chips--js .chips__ayuda-sin-js {
  display: none;
}

.chips__ayuda-sin-js {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

@media (min-width: 960px) {
  .cot__layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .cot__barra {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--crm-header-h) + 1rem);
    max-height: calc(100vh - var(--crm-header-h) - 2rem);
    overflow-y: auto;
  }

  .cot__contenido {
    grid-column: 1;
    grid-row: 1;
  }

  .cot__pares {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Menos de 960 px: franja fija arriba con los pasos y el total; "Generar" fijo abajo (Fitts). */
@media (max-width: 959px) {
  .cot__barra {
    position: sticky;
    top: var(--crm-header-h);
    z-index: 20;
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
  }

  .cot__pasos {
    flex-direction: row;
  }

  .cot__pasos li {
    flex: 1 1 0;
  }

  .cot__paso {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    min-height: 44px;
    padding: 0;
  }

  .cot__paso-marca {
    grid-row: auto;
  }

  .cot__pasos li:not(:last-child)::after {
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    width: auto;
    top: 13px;
    bottom: auto;
    height: 2px;
  }

  .cot__paso-nombre {
    font-size: 0.6875rem;
  }

  .cot__paso-estado {
    display: none;
  }

  .cot__totales {
    padding-top: 0.35rem;
  }

  .cot__totales div:not(.cot__total) {
    display: none;
  }

  .cot__totales div.cot__total {
    margin: 0;
    padding-top: 0;
    border: none;
  }

  .cot__generar {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    z-index: 30;
    box-shadow: 0 4px 16px var(--border-strong);
  }

  .cot__aviso-envio {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 4.5rem;
    z-index: 30;
  }

  .cot {
    padding-bottom: 5rem;
  }

  .cot__linea {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .cot__linea-descripcion {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .cot__forma {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .cot__forma-recomendada {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .previa {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .previa__acciones {
    width: 100%;
  }

  .previa__acciones > * {
    flex: 1 1 0;
  }

  .boton-icono {
    width: 44px;
    height: 44px;
  }

  .cot__servicio {
    flex-wrap: wrap;
  }
}

/* ---------- crm/specs/0015 (Req 1-4): tarjetas de cotización y botón en la ficha ---------- */
.ficha__crear-cotizacion {
  min-height: 36px;
  padding: 0.35rem 0.85rem;
  font-size: var(--fs-small);
}

.cot-tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cot-tarjeta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.4rem 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.cot-tarjeta--nueva {
  border-color: var(--success);
  box-shadow: 0 0 0 2px var(--success-bg);
}

.cot-tarjeta__info {
  flex: 1 1 auto;
  min-width: 0;
}

.cot-tarjeta__info p {
  margin: 0;
}

.cot-tarjeta__cabeza {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.cot-tarjeta__cabeza strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cot-tarjeta__titulo {
  color: var(--text);
  font-weight: 600;
}

.cot-tarjeta__total {
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cot-tarjeta__acciones {
  flex: 0 0 auto;
  display: flex;
  gap: 0.15rem;
}

.cot-tarjetas__todas {
  margin: 0.75rem 0 0;
  font-size: var(--fs-small);
}

.cot-historial__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.cot-tarjetas--rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.cot-historial__vacio {
  color: var(--text-muted);
}

/* 0015: [hidden] gana a los display de la pantalla; sin viñetas en las listas de chips. */
.cot [hidden] {
  display: none !important;
}

@media (max-width: 959px) {
  /* Al saltar a un paso, su título queda debajo de la franja de pasos (~7 rem). */
  .cot__seccion {
    scroll-margin-top: calc(var(--crm-header-h) + 8rem);
  }
}

/* 0015: el número de cotización nunca se parte; si no cabe, la fecha baja de renglón. */
.cot-tarjeta__cabeza {
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0;
  justify-content: flex-start;
}

.cot-tarjeta__cabeza > * {
  white-space: nowrap;
}

/* ---------- crm/specs/0016 (Req 3-9): historial con filtros y tipo de avance ---------- */
.historial__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
}

.historial__filtro {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}

.historial__filtro:hover {
  background: var(--surface-2);
  color: var(--text);
}

.historial__filtro[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--surface-2);
  color: var(--text);
}

.historial__conteo {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.historial__icono {
  flex: 0 0 auto;
  vertical-align: -3px;
  margin-right: 0.3rem;
}

.historial__filtro .historial__icono {
  margin-right: 0;
}

/* Notas de Fabian y llamadas resaltadas como antes (0011); el resto por tipo. */
.historial__item--fabian,
.historial__item--llamada {
  border-left-color: var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding-right: 0.75rem;
}

.historial__item--lead {
  border-left-color: var(--link);
}

.historial__item--diagnostico {
  border-left-color: var(--warning);
}

.historial__item--lead .historial__icono {
  color: var(--link);
}

.historial__item--llamada .historial__icono {
  color: var(--success);
}

.historial__item--diagnostico .historial__icono {
  color: var(--warning);
}

.historial__tipo {
  font-weight: 600;
  color: var(--text);
}

.historial__dijo {
  margin: 0.15rem 0 0;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 500;
}

.historial__bot {
  margin: 0.35rem 0 0;
  padding-left: 0.6rem;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.historial__quien {
  font-weight: 700;
  color: var(--text-muted);
}

.historial__detalle {
  margin-top: 0.35rem;
  font-size: var(--fs-small);
}

.historial__detalle > summary {
  cursor: pointer;
  color: var(--link);
  font-weight: 600;
}

.historial__detalle p {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
}

.historial__vacio {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.historial__mostrar-ocultos {
  font-size: var(--fs-small);
}

.historial [hidden],
.historial__vacio[hidden],
.historial__mostrar-ocultos[hidden] {
  display: none !important;
}

/* Tipo de avance (Req 8): una sola elección, como pastillas. */
.crm-form fieldset.tipo-avance,
.tipo-avance {
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 0.9rem;
  min-width: 0;
}

.crm-form .tipo-avance legend,
.tipo-avance legend {
  padding: 0;
  margin-bottom: 0.3rem;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
}

.tipo-avance__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.crm-form label.tipo-avance__opcion,
.tipo-avance__opcion {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}

.tipo-avance__opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tipo-avance__opcion span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 500;
}

.tipo-avance__opcion input:checked + span {
  border-color: var(--text);
  background: var(--surface-2);
  font-weight: 700;
}

.tipo-avance__opcion input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 959px) {
  .tipo-avance__opcion span,
  .historial__filtro {
    min-height: 44px;
  }
}

/* ---------- crm/specs/0016 (Req 10-13): tarjeta "Diagnóstico" ---------- */
.diag h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.diag__estado--enviado,
.diag__estado--importado {
  background: var(--success-bg);
  color: var(--success);
}

.diag__estado--listo,
.diag__estado--generando {
  background: var(--warning-bg);
  color: var(--warning);
}

.diag__estado--fallo,
.diag__estado--rechazado,
.diag__estado--detenido,
.diag__estado--vencido {
  background: var(--danger-bg);
  color: var(--danger);
}

.diag__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.diag__fecha {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.diag__acciones {
  display: inline-flex;
  gap: 0.15rem;
}

.diag__bloque {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
}

.diag__bloque > summary {
  cursor: pointer;
  color: var(--link);
  font-weight: 600;
}

.diag__bloque p,
.diag__notion {
  margin: 0.35rem 0 0;
  color: var(--text);
  font-size: var(--fs-small);
}

.diag__cargando,
.diag__vacio,
.diag__motivo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.diag__error {
  color: var(--danger);
  font-size: var(--fs-small);
  font-weight: 600;
}

.diag__error small {
  font-weight: 400;
  color: var(--text-muted);
}

/* ---------- crm/specs/0016 (Req 19, 20): fecha de lo que pasó y botón junto a "Cuándo sigue" ---------- */
.avance__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0 1rem;
}

.crm-form .avance__fecha {
  margin: 0 0 0.9rem;
}

.crm-form .avance__fecha input {
  width: 170px;
}

.avance__enviar {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0.9rem;
}

@media (min-width: 960px) {
  .ficha__avance .ficha__avance-fila {
    grid-template-columns: minmax(0, 1fr) 180px auto;
    align-items: end;
  }
}

@media (max-width: 959px) {
  .avance__enviar button {
    width: 100%;
  }
}

/* ---------- crm/specs/0017 (Req 1-5): etapa junto al nombre y menú "+ Crear" ---------- */
.ficha__nombre-etapa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  min-width: 0;
}

.ficha__nombre-etapa h1 {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  margin: 0;
}

.etapa-menu--izquierda .etapa-menu__panel {
  left: 0;
  right: auto;
}

.crear-menu {
  position: relative;
}

.crear-menu > summary {
  list-style: none;
  min-height: 40px;
  padding: 0.4rem 0.95rem;
  font-size: var(--fs-small);
}

.crear-menu > summary::-webkit-details-marker {
  display: none;
}

.crear-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: 300px;
  max-width: calc(100vw - 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.35rem;
  display: grid;
  gap: 0.15rem;
}

.crear-menu__opcion {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.crear-menu__opcion::-webkit-details-marker {
  display: none;
}

.crear-menu__opcion:hover,
.crear-menu__opcion:focus-visible,
.crear-menu__diagnostico[open] > .crear-menu__opcion {
  background: var(--surface-2);
  text-decoration: none;
}

.crear-menu__titulo {
  font-weight: 700;
}

.crear-menu__opcion small {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.crear-menu__opcion--deshabilitada {
  cursor: not-allowed;
  opacity: 0.6;
}

.crear-menu__opcion--deshabilitada:hover {
  background: none;
}

.crear-menu__confirmar {
  margin: 0.35rem 0.35rem 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--warning);
  background: var(--warning-bg);
  color: var(--text);
  font-size: var(--fs-small);
}

.crear-menu__confirmar p {
  margin: 0 0 0.6rem;
}

.crear-menu__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.crear-menu__acciones .crm-boton {
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  font-size: var(--fs-small);
}

@media (max-width: 959px) {
  .crear-menu > summary,
  .crear-menu__opcion {
    min-height: 44px;
  }
}

/* ---------- crm/specs/0017 (Req 6-9): tarjeta del diagnóstico manual ---------- */
.diag__acciones-manual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.diag__acciones-manual form {
  margin: 0;
}

.diag__acciones-manual .crm-boton {
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  font-size: var(--fs-small);
}

.diag__mensaje-texto {
  width: 100%;
  margin-top: 0.5rem;
  font: inherit;
  font-size: var(--fs-small);
  min-height: 6rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.5rem;
}

.diag__mensaje-texto[hidden] {
  display: none;
}

.diag__reintento {
  margin-top: 0.6rem;
}

.diag__reintento > summary {
  list-style: none;
  display: inline-flex;
}

.diag__reintento > summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 959px) {
  .diag__acciones-manual .boton-secundario,
  .diag__acciones-manual .crm-boton {
    min-height: 44px;
  }
}

/* ---------- crm/specs/0017 (Req 11-13): editar y borrar notas ---------- */
.historial__item--editable {
  position: relative;
  padding-right: 5rem;
}

.historial__acciones {
  position: absolute;
  top: 0.15rem;
  right: 0.25rem;
  display: flex;
  gap: 0.1rem;
}

.historial__item--editando > .historial__texto,
.historial__item--editando > .historial__acciones {
  display: none;
}

.historial__editar,
.historial__borrar {
  margin-top: 0.5rem;
}

.historial__editar[hidden],
.historial__borrar[hidden] {
  display: none;
}

.historial__borrar {
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger);
  background: var(--danger-bg);
  color: var(--text);
  font-size: var(--fs-small);
}

.historial__borrar p {
  margin: 0 0 0.5rem;
}

.historial__aviso {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.historial__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.boton-peligro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger);
  background: var(--danger);
  color: var(--surface);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
}

.boton-peligro:hover {
  filter: brightness(0.92);
}

@media (max-width: 959px) {
  .historial__item--editable {
    padding-right: 6.25rem;
  }

  .boton-peligro {
    min-height: 44px;
  }
}

/* 0017: un botón secundario dentro de .crm-form no toma el acento de los botones del formulario. */
.crm-form button.boton-secundario {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-small);
  font-weight: 500;
  min-height: 36px;
  padding: 0.4rem 0.8rem;
}

.crm-form button.boton-secundario:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* 0017: en celular el nombre usa todo el ancho; "+ Crear" baja a su propio renglón. */
@media (max-width: 599px) {
  .ficha__cabeza {
    flex-wrap: wrap;
  }

  .ficha__titulo {
    flex-basis: 100%;
  }

  .ficha__chips {
    justify-content: flex-start;
  }

  .crear-menu__panel {
    left: 0;
    right: auto;
  }
}

/* ---------- crm/specs/0020-embudo-sdr (tarea 4): página Embudo ---------- */
.embudo__encabezado {
  margin-bottom: 0.75rem;
}

.embudo__encabezado h1 {
  margin-bottom: 0.25rem;
}

.embudo__cohorte {
  color: var(--text-muted);
  margin: 0;
}

/* Chips de rango (Jakob: filtros de Gmail). El acento solo marca el activo (Von Restorff). */
.embudo__rangos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
}

.embudo__chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.embudo__chip::-webkit-details-marker {
  display: none;
}

a.embudo__chip:hover,
summary.embudo__chip:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.embudo__chip[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

span.embudo__chip[aria-current="true"] {
  cursor: default;
}

summary.embudo__chip[aria-current="true"]:hover {
  background: var(--accent-hover);
}

.embudo__otro {
  position: relative;
}

.embudo__otro-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 20;
  display: grid;
  gap: 0.25rem;
  width: 16rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.embudo__otro-panel p {
  margin: 0 0 0.5rem;
}

.embudo__otro-panel button[disabled] {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Zona de cifras: se atenúa mientras el servidor responde (Doherty). */
.embudo__zona {
  position: relative;
  display: grid;
  gap: 1rem;
  transition: opacity 0.15s ease;
}

.embudo__zona--cargando > :not(.embudo__cargando) {
  opacity: 0.45;
}

.embudo__cargando {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--text-muted);
  font-weight: 600;
}

.embudo__estado {
  margin: 0;
  padding: 2rem 1.25rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  text-align: center;
}

.embudo__estado--error {
  border-style: solid;
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}

.embudo__tarjeta {
  min-width: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.embudo__tarjeta h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

/* Embudo: una fila por paso con nombre, barra, conteo y % (Proximidad). */
.embudo__pasos {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.embudo__paso {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 4.5rem 15rem;
  align-items: center;
  gap: 0.75rem;
}

.embudo__paso-nombre {
  font-weight: 600;
}

.embudo__barra {
  display: block;
  width: 100%;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--surface-2);
}

.embudo__barra-relleno {
  fill: var(--border-strong);
}

.embudo__paso-conteo {
  font-size: var(--fs-h2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.embudo__paso-pct,
.embudo__pct,
.embudo__nota {
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.embudo__nota {
  margin: 0.5rem 0 0;
}

.embudo__salidas,
.embudo__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.embudo__cifras {
  margin: 0;
  padding: 0;
  border: none;
}

.embudo__salidas dt,
.embudo__cifras dt {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.embudo__salidas dd,
.embudo__cifras dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.embudo__cifras dd {
  font-size: var(--fs-h2);
}

.embudo__cifras--chicas {
  margin-top: 0.75rem;
}

.embudo__cifras--chicas dd {
  font-size: var(--fs-body);
}

.embudo__total {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Tarea 5 (Req 6): la fila de un paso con gente se abre con un clic (Fitts: toda la fila). */
.embudo__paso--abrible {
  cursor: pointer;
  margin: 0 -0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
}

.embudo__paso--abrible:hover {
  background: var(--surface-2);
}

.embudo__paso-enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
}

.embudo__paso-enlace::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.6;
}

.embudo__paso-enlace[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.embudo__paso--cargando .embudo__paso-enlace::after {
  display: none;
}

.embudo__lista {
  grid-column: 1 / -1;
  margin: 0.4rem 0 0.6rem;
  cursor: auto;
}

.embudo__lista .crm-table-wrap {
  margin-bottom: 0.4rem;
}

.embudo__lista-todos {
  font-size: var(--fs-small);
}

.embudo-paso__volver {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: 0.25rem;
  font-size: var(--fs-small);
}

.embudo-paso .embudo__cohorte {
  margin-bottom: 1rem;
}

/* Columnas fijas para que el nombre largo se corte con "…" en vez de ensanchar la tabla. */
.embudo-paso__tabla {
  table-layout: fixed;
}

.embudo-paso__tabla th:nth-child(2),
.embudo-paso__tabla td:nth-child(2) {
  width: 9rem;
}

.embudo-paso__tabla th:nth-child(3),
.embudo-paso__tabla td:nth-child(3) {
  width: 7rem;
}

.embudo__dos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.embudo__tabla-wrap {
  margin-bottom: 0;
}

.embudo__tabla td {
  font-variant-numeric: tabular-nums;
}

.embudo__tabla th:not(:first-child),
.embudo__tabla td:not(:first-child) {
  text-align: right;
}

@media (max-width: 959px) {
  /* 0020: con "Embudo" en el menú, el nombre del perfil haría un renglón más; queda la inicial. */
  .perfil__nombre {
    display: none;
  }

  .embudo__paso {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.75rem;
  }

  .embudo__barra {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .embudo__paso-pct {
    grid-column: 1 / -1;
  }

  .embudo__dos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .embudo__chip {
    min-height: 44px;
  }

  .embudo__tarjeta {
    padding: 0.9rem 1rem;
  }

  .embudo__paso-enlace,
  .embudo-paso__volver {
    min-height: 44px;
  }

  /* Tarea 5: el negocio en su renglón completo y debajo etapa y M1 (el nombre no se corta
     a 10 letras). */
  .embudo-paso__tabla,
  .embudo-paso__tabla tbody {
    display: block;
  }

  .embudo-paso__tabla thead {
    display: none;
  }

  .embudo-paso__tabla tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    padding: 0 0.75rem 0.6rem;
    border-bottom: 1px solid var(--border);
  }

  .embudo-paso__tabla tr:last-child {
    border-bottom: none;
  }

  .embudo-paso__tabla tbody tr:hover td {
    background: none;
  }

  .embudo-paso__tabla td,
  .embudo-paso__tabla td:nth-child(2),
  .embudo-paso__tabla td:nth-child(3) {
    width: auto;
    padding: 0;
    border: none;
  }

  .embudo-paso__tabla td:first-child {
    flex-basis: 100%;
    min-width: 0;
  }

  /* .cortar sigue siendo bloque (el "…" no funciona en flex); el padding da los 44 px. */
  .embudo-paso__tabla td:first-child a {
    padding: 0.8rem 0 0.6rem;
  }

  .embudo-paso__tabla td:not(:first-child) {
    color: var(--text-muted);
    font-size: var(--fs-small);
  }

  /* Sin encabezados, la fecha dice de qué es. */
  .embudo-paso__tabla td:nth-child(3)::before {
    content: "M1 ";
  }

  /* Req 12: cada plantilla es un bloque (nombre arriba, 4 cifras en 2 x 2); ninguna
     columna queda escondida detrás de un scroll. */
  .embudo__tabla,
  .embudo__tabla tbody {
    display: block;
  }

  .embudo__tabla thead {
    display: none;
  }

  .embudo__tabla tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 1rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .embudo__tabla tr:last-child {
    border-bottom: none;
  }

  .embudo__tabla tbody tr:hover td {
    background: none;
  }

  .embudo__tabla td,
  .embudo__tabla td:not(:first-child) {
    padding: 0;
    border: none;
    text-align: left;
  }

  .embudo__tabla td:first-child {
    grid-column: 1 / -1;
    font-weight: 600;
  }

  .embudo__tabla td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-small);
  }

  .embudo__otro-panel {
    position: fixed;
    top: auto;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
  }

  .embudo__otro-panel button {
    width: 100%;
  }
}

/* crm/specs/0020: aviso de rango no válido (messages.warning). */
.msg-warning {
  color: var(--warning);
  background: var(--warning-bg);
  border-color: var(--warning);
}
/* ---------- crm/specs/0020-embudo-sdr tarea 7 (Req 14, 18): estado de la cotización ---------- */
.cot-tarjeta__cabeza {
  align-items: center;
}

.cot-estado {
  display: inline-block;
}

.cot-estado__chip {
  min-height: 28px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

/* Alertas con color de estado, nunca de acento (Von Restorff). */
.cot-estado__chip--aceptada {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}

.cot-estado__chip--rechazada {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}

.cot-estado__chip--reemplazada {
  border-style: dashed;
  background: transparent;
  color: var(--text-muted);
}

.cot-estado__panel {
  width: 240px;
}

.cot-estado__panel small {
  color: var(--text-muted);
  font-weight: 500;
}

/* Reemplazada: fuera de los montos, se ve atenuada y con el monto tachado. */
.cot-tarjeta--reemplazada {
  background: var(--surface-2);
  border-style: dashed;
}

.cot-tarjeta--reemplazada .cot-tarjeta__titulo {
  color: var(--text-muted);
}

.cot-tarjeta--reemplazada .cot-tarjeta__total {
  text-decoration: line-through;
}

@media (max-width: 480px) {
  summary.cot-estado__chip {
    min-height: 44px;
  }
}
/* ---------- crm/specs/0020-embudo-sdr tarea 9 (Req 16): cotización aceptada en el panel de Cliente ---------- */
.cot-aceptada {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0.25rem 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
}

.cot-aceptada legend {
  padding: 0 0.25rem;
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 600;
}

.cot-aceptada__opcion {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0.3rem 0.25rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-small);
  cursor: pointer;
}

.cot-aceptada__opcion:hover {
  background: var(--surface-2);
}

.cot-aceptada__opcion input {
  margin-top: 0.2rem;
  accent-color: var(--text);
}

.cot-aceptada__opcion > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.cot-aceptada__titulo {
  color: var(--text-muted);
}

.etapa-menu__error {
  flex: 1 1 100%;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--fs-small);
  font-weight: 500;
}

.etapa-menu__error[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .cot-aceptada__opcion {
    min-height: 44px;
  }
}