/* Portal interno de Cap Cana Charters */
:root {
  /* Arena clara de fondo, blanco para el contenido y turquesa suave para lo que se pulsa. */
  --marino: #0e6070;
  --marino-claro: #158698;
  --turquesa: #2aa5a8;
  --turquesa-suave: #e4f3f3;
  --arena: #f6f1e7;
  --arena-honda: #efe7d9;
  --fondo: #faf7f1;
  --panel: #ffffff;
  --borde: #e7e0d2;
  --borde-suave: #f0ebe0;
  --texto: #2a2a26;
  --texto-suave: #7a7568;
  --rojo: #b8432f;
  --rojo-suave: #fbeeea;
  --ambar: #a9761b;
  --ambar-suave: #fbf2e0;
  --verde: #2b7d5c;
  --verde-suave: #e6f3ec;
  --azul-suave: var(--turquesa-suave);
  --radio: 14px;
  --sombra: 0 1px 2px rgba(42, 42, 38, .04), 0 8px 24px rgba(42, 42, 38, .05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0 0 .4rem; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; }
p { margin: 0 0 .6rem; }
a { color: var(--marino-claro); }

/* ---------- Estructura ---------- */
.oculto { display: none !important; }

.barra-demo {
  background: var(--ambar-suave);
  color: var(--ambar);
  border-bottom: 1px solid #f0e0bd;
  padding: .35rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
}
/* En modo trabajo la barra deja de ser un aviso de pruebas: solo informa. */
.barra-demo.trabajo {
  background: #eef4f7;
  color: #35586a;
  border-bottom-color: #d6e3ea;
}

.cabecera {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .9rem;
  background: var(--marino);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
}
.cabecera .marca { font-weight: 700; letter-spacing: .01em; font-size: .98rem; }
.cabecera .marca span { display: block; font-weight: 400; font-size: .74rem; opacity: .8; }
.cabecera .espacio { flex: 1; }
.chip-usuario {
  display: flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.14);
  border-radius: 999px; padding: .25rem .6rem .25rem .3rem;
  font-size: .82rem;
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--turquesa); color: #fff;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}

.disposicion { display: flex; min-height: calc(100vh - 46px); }

.lateral {
  width: 208px;
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--borde);
  padding: .8rem .55rem;
}
.lateral a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem; border-radius: 8px;
  color: var(--texto); text-decoration: none; font-weight: 550; font-size: .92rem;
  margin-bottom: .15rem;
}
.lateral a:hover { background: var(--azul-suave); }
.lateral a.activo { background: var(--marino); color: #fff; }
.lateral a .icono { width: 18px; text-align: center; font-size: 1rem; }
.lateral a .contador {
  margin-left: auto; background: var(--rojo); color: #fff;
  border-radius: 999px; font-size: .68rem; padding: 0 .38rem; min-width: 18px; text-align: center;
}
.lateral a.activo .contador { background: rgba(255,255,255,.28); }

.contenido { flex: 1; padding: 1.1rem; max-width: 1200px; min-width: 0; }

.pestanas-movil { display: none; }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
  overflow: hidden;
}
.tarjeta > header {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--borde);
  background: #fbfcfd;
}
.tarjeta > header h2 { margin: 0; font-size: .95rem; }
.tarjeta > header .cuenta {
  background: var(--azul-suave); color: var(--marino);
  border-radius: 999px; font-size: .74rem; font-weight: 700; padding: .05rem .45rem;
}
.tarjeta .cuerpo { padding: .8rem .9rem; }
.tarjeta .cuerpo.sin-relleno { padding: 0; }

.rejilla-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem; margin-bottom: 1rem;
}
.metrica {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .7rem .8rem;
}
.metrica .valor { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.metrica .titulo { font-size: .76rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.metrica.alerta .valor { color: var(--rojo); }

/* ---------- Listas ---------- */
.fila {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .65rem .9rem; border-bottom: 1px solid var(--borde);
  cursor: pointer; background: none; width: 100%; text-align: left;
  font: inherit; color: inherit; border-left: none; border-right: none; border-top: none;
}
.fila:last-child { border-bottom: none; }
.fila:hover { background: #f8fbfd; }
.fila .principal { flex: 1; min-width: 0; }
.fila .titulo-fila { font-weight: 600; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.fila .detalle { color: var(--texto-suave); font-size: .84rem; margin-top: .12rem; }
.fila .derecha { text-align: right; flex: none; font-size: .82rem; color: var(--texto-suave); }

.vacio { padding: 1rem .9rem; color: var(--texto-suave); font-size: .88rem; }

/* ---------- Etiquetas ---------- */
.etiqueta {
  display: inline-block; border-radius: 999px; padding: .08rem .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  background: var(--azul-suave); color: var(--marino); white-space: nowrap;
}
.etiqueta.roja { background: var(--rojo-suave); color: var(--rojo); }
.etiqueta.ambar { background: var(--ambar-suave); color: var(--ambar); }
.etiqueta.verde { background: var(--verde-suave); color: var(--verde); }
.etiqueta.gris { background: #eef1f4; color: var(--texto-suave); }
.etiqueta.responsable { background: #efeafc; color: #5b3fa8; }

/* ---------- Formularios ---------- */
label { display: block; font-size: .8rem; font-weight: 600; color: var(--texto-suave); margin-bottom: .2rem; }
input, select, textarea {
  width: 100%; padding: .48rem .6rem; font: inherit; color: var(--texto);
  background: #fff; border: 1px solid var(--borde); border-radius: 8px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--turquesa); outline-offset: -1px; border-color: var(--turquesa); }
textarea { min-height: 72px; resize: vertical; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; }
.campo-ancho { grid-column: 1 / -1; }

.boton {
  display: inline-flex; align-items: center; gap: .35rem; justify-content: center;
  padding: .48rem .85rem; border-radius: 8px; border: 1px solid var(--marino);
  background: var(--marino); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.boton:hover { background: var(--marino-claro); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton.secundario { background: #fff; color: var(--marino); }
.boton.secundario:hover { background: var(--azul-suave); }
.boton.peligro { background: var(--rojo); border-color: var(--rojo); }
.boton.pequeno { padding: .3rem .6rem; font-size: .82rem; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.filtros {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: .9rem; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .7rem .8rem;
}
.filtros > div { flex: 1 1 150px; min-width: 130px; }
.filtros > div.crecer { flex: 2 1 240px; }

/* ---------- Panel lateral de ficha ---------- */
.telon {
  position: fixed; inset: 0; background: rgba(12, 28, 40, .42);
  z-index: 60; display: flex; justify-content: flex-end;
}
.ficha {
  background: var(--fondo); width: min(760px, 100%); height: 100%;
  overflow-y: auto; box-shadow: -8px 0 28px rgba(0,0,0,.14);
}
.ficha > header {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel); border-bottom: 1px solid var(--borde);
  padding: .75rem .95rem; display: flex; align-items: center; gap: .6rem;
}
.ficha > header h2 { margin: 0; }
.ficha .relleno { padding: .95rem; }
.cerrar {
  border: none; background: #eef1f4; color: var(--texto); width: 30px; height: 30px;
  border-radius: 8px; font-size: 1.05rem; cursor: pointer; line-height: 1;
}

.bloque { margin-bottom: 1rem; }
.bloque > h3 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-suave); margin-bottom: .45rem;
}

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .55rem .9rem; }
.dato .k { font-size: .74rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.dato .v { font-weight: 600; }

.aviso {
  border-radius: 8px; padding: .55rem .7rem; font-size: .86rem; margin-bottom: .7rem;
  border: 1px solid transparent;
}
.aviso.roja { background: var(--rojo-suave); border-color: #f3c9c4; color: #8c2b20; }
.aviso.ambar { background: var(--ambar-suave); border-color: #f0e0bd; color: #8a5a10; }
.aviso.verde { background: var(--verde-suave); border-color: #c4e5d3; color: #146143; }
.aviso.azul { background: var(--azul-suave); border-color: #cbe0eb; color: #0d4a63; }
.aviso ul { margin: .3rem 0 0; padding-left: 1.1rem; }

.linea-tiempo { border-left: 2px solid var(--borde); margin-left: .4rem; padding-left: .8rem; }
.linea-tiempo .item { margin-bottom: .7rem; position: relative; }
.linea-tiempo .item::before {
  content: ''; position: absolute; left: -1.06rem; top: .4rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--borde);
}
.linea-tiempo .item.entrante::before { background: var(--marino-claro); }
.linea-tiempo .item.saliente::before { background: var(--turquesa); }
.linea-tiempo .meta { font-size: .74rem; color: var(--texto-suave); }
.linea-tiempo .texto { white-space: pre-wrap; }

.checklist .item {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem 0; border-bottom: 1px dashed var(--borde);
}
.checklist .item:last-child { border-bottom: none; }
.checklist input[type="checkbox"] { width: 17px; height: 17px; margin-top: .18rem; flex: none; }
.checklist .item.hecha .titulo-item { text-decoration: line-through; color: var(--texto-suave); }

table.tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.tabla th, table.tabla td { text-align: left; padding: .4rem .45rem; border-bottom: 1px solid var(--borde); }
table.tabla th { font-size: .74rem; text-transform: uppercase; color: var(--texto-suave); letter-spacing: .03em; }
table.tabla td.num, table.tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }

.avisos { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: grid; gap: .5rem; }
.tostada {
  background: #16232e; color: #fff; padding: .6rem .8rem; border-radius: 8px;
  font-size: .87rem; box-shadow: var(--sombra); max-width: 340px;
}
.tostada.error { background: var(--rojo); }
.tostada.ok { background: var(--verde); }

/* ---------- Acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--marino); }
.acceso .caja { background: #fff; border-radius: 14px; padding: 1.6rem; width: min(400px, 100%); box-shadow: 0 18px 40px rgba(0,0,0,.24); }
.acceso h1 { margin-bottom: .1rem; }
.acceso .sub { color: var(--texto-suave); font-size: .86rem; margin-bottom: 1.1rem; }
.acceso label { margin-top: .7rem; }
.acceso .boton { width: 100%; margin-top: 1.1rem; }
.acceso .demo { margin-top: 1.1rem; font-size: .8rem; color: var(--texto-suave); border-top: 1px solid var(--borde); padding-top: .8rem; }
.acceso .demo code { background: var(--fondo); padding: .05rem .3rem; border-radius: 4px; }

/* ---------- Móvil ---------- */
@media (max-width: 820px) {
  .lateral { display: none; }
  .contenido { padding: .8rem .7rem 4.6rem; }
  .pestanas-movil {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--panel); border-top: 1px solid var(--borde);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .pestanas-movil a {
    flex: 1; text-align: center; padding: .5rem .2rem .55rem; text-decoration: none;
    color: var(--texto-suave); font-size: .7rem; font-weight: 600; position: relative;
  }
  .pestanas-movil a .icono { display: block; font-size: 1.15rem; }
  .pestanas-movil a.activo { color: var(--marino); }
  .pestanas-movil a .contador {
    position: absolute; top: .2rem; right: 50%; margin-right: -1.3rem;
    background: var(--rojo); color: #fff; border-radius: 999px;
    font-size: .62rem; padding: 0 .3rem; min-width: 15px;
  }
  .ficha { width: 100%; }
  .cabecera .marca span { display: none; }
  .campos { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101820; --panel: #17212b; --borde: #26333f;
    --texto: #e7eef4; --texto-suave: #9bacba; --arena: #1b242d;
    --azul-suave: #17303d; --rojo-suave: #3a1f1c; --ambar-suave: #332a17;
    --verde-suave: #16302a;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  }
  input, select, textarea { background: #101820; color: var(--texto); }
  .tarjeta > header { background: #1b2733; }
  .fila:hover { background: #1b2733; }
  .boton.secundario { background: var(--panel); }
  .acceso .caja { background: var(--panel); }
  .cerrar { background: #24313d; color: var(--texto); }
  .etiqueta.gris { background: #24313d; }
  .etiqueta.responsable { background: #2b2545; color: #c3b4f0; }
}

/* ================================================================== */
/* v2: navegación en cinco áreas, pestañas, conversaciones             */
/* ================================================================== */

.lateral .zona-secundaria {
  margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--borde);
}
.lateral .zona-secundaria a { font-weight: 500; font-size: .85rem; color: var(--texto-suave); }
.lateral .zona-secundaria a.activo { color: #fff; }

.boton-mas {
  display: none; border: none; background: rgba(255,255,255,.14); color: #fff;
  border-radius: 8px; width: 34px; height: 32px; font-size: 1.1rem; cursor: pointer;
}
.menu-mas {
  position: absolute; right: .7rem; top: 48px; z-index: 70;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: var(--sombra); min-width: 190px; padding: .3rem;
}
.menu-mas a, .menu-mas button {
  display: block; width: 100%; text-align: left; padding: .55rem .7rem; border-radius: 6px;
  color: var(--texto); text-decoration: none; font: inherit; background: none; border: none; cursor: pointer;
}
.menu-mas a:hover, .menu-mas button:hover { background: var(--azul-suave); }

.titulo-seccion { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; flex-wrap: wrap; }
.titulo-seccion h1 { margin: 0; flex: 1; }

.pestanas {
  display: flex; gap: .25rem; margin-bottom: .9rem; border-bottom: 1px solid var(--borde);
  overflow-x: auto; scrollbar-width: none;
}
.pestanas a {
  padding: .5rem .8rem; text-decoration: none; color: var(--texto-suave); font-weight: 600; font-size: .9rem;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.pestanas a.activo { color: var(--marino); border-bottom-color: var(--marino); }
.pestanas .contador { background: var(--rojo); color: #fff; border-radius: 999px; font-size: .68rem; padding: 0 .35rem; margin-left: .3rem; }

.interruptor { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; background: var(--panel); }
.interruptor button {
  border: none; background: none; padding: .38rem .75rem; font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--texto-suave); cursor: pointer;
}
.interruptor button.activo { background: var(--marino); color: #fff; }

.contenido.ancho-completo { max-width: none; }

/* ---------- Conversaciones: 3 paneles en escritorio, vistas sucesivas en móvil ---------- */
.conv {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 0;
  height: calc(100vh - 128px); min-height: 480px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
}
.conv > section { overflow-y: auto; min-width: 0; display: flex; flex-direction: column; }
.conv-lista { border-right: 1px solid var(--borde); }
.conv-panel { border-left: 1px solid var(--borde); background: #fbfcfd; }
.conv-cabecera {
  position: sticky; top: 0; z-index: 2; background: var(--panel); border-bottom: 1px solid var(--borde);
  padding: .6rem .75rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.conv-panel .conv-cabecera { background: #fbfcfd; }
.conv-cabecera h2 { margin: 0; font-size: .98rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.volver { display: none; border: none; background: #eef1f4; border-radius: 8px; padding: .3rem .6rem; font: inherit; cursor: pointer; color: var(--texto); }

.conv-item {
  display: block; width: 100%; text-align: left; border: none; background: none; font: inherit; color: inherit;
  padding: .65rem .75rem; border-bottom: 1px solid var(--borde); cursor: pointer;
}
.conv-item:hover { background: #f5f9fb; }
.conv-item.activo { background: var(--azul-suave); }
.conv-item .fila1 { display: flex; gap: .4rem; align-items: center; }
.conv-item .nombre { font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .hora { font-size: .74rem; color: var(--texto-suave); }
.conv-item .ultimo { font-size: .84rem; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .15rem; }
.conv-item .marcas { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .3rem; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); flex: none; }

.hilo { flex: 1; padding: .9rem; display: flex; flex-direction: column; gap: .55rem; background: var(--fondo); }
.burbuja {
  max-width: 78%; padding: .55rem .7rem; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--borde); white-space: pre-wrap; word-wrap: break-word; font-size: .92rem;
}
.burbuja.entrante { align-self: flex-start; border-top-left-radius: 4px; }
.burbuja.saliente { align-self: flex-end; background: #e3f4f1; border-color: #c4e6e0; border-top-right-radius: 4px; }
.burbuja.interna { align-self: center; background: #fff8e6; border-color: #f0e0bd; font-size: .84rem; max-width: 90%; }
.burbuja.borrador { border: 2px dashed var(--turquesa); background: var(--panel); }
.burbuja .meta { font-size: .72rem; color: var(--texto-suave); margin-bottom: .2rem; white-space: normal; }
.burbuja .acciones { margin-top: .5rem; }
.sugerencia {
  align-self: flex-start; max-width: 88%; font-size: .8rem; color: #0d4a63; background: var(--azul-suave);
  border: 1px solid #cbe0eb; border-radius: 8px; padding: .4rem .55rem; margin-top: -.2rem;
}
.sugerencia.sin-ia { color: #6b5510; background: var(--ambar-suave); border-color: #f0e0bd; }
.sugerencia .acciones { margin-top: .35rem; }

.redactor { border-top: 1px solid var(--borde); padding: .65rem .75rem; background: var(--panel); position: sticky; bottom: 0; }
.redactor textarea { min-height: 46px; }
.nota-pequena { font-size: .76rem; color: var(--texto-suave); margin: .35rem 0 0; }
.nota-pequena.ambar { color: var(--ambar); }
/* Los números de la vista previa de importación: pocos, legibles y sin tabla. */
.cifras { display: flex; flex-wrap: wrap; gap: .45rem .9rem; margin: .5rem 0 .7rem; }
.cifras > div { background: var(--arena-suave, #f7f5f0); border-radius: .5rem; padding: .35rem .7rem; font-size: .84rem; }
.cifras strong { font-size: 1.05rem; margin-right: .25rem; }
.aviso-ambar { background: var(--ambar-suave); color: var(--ambar); border-radius: .5rem; padding: .55rem .8rem; margin: .4rem 0; font-size: .88rem; }

.panel-bloque { padding: .75rem; border-bottom: 1px solid var(--borde); }
.panel-bloque h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin-bottom: .45rem; }

.solicitud { border: 1px solid var(--borde); border-radius: 10px; padding: .65rem .7rem; background: var(--panel); margin-bottom: .6rem; }
.solicitud .cab { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .35rem; }
.solicitud .cita { font-style: italic; color: var(--texto-suave); font-size: .86rem; margin-bottom: .3rem; }
.solicitud .precio { font-size: 1.15rem; font-weight: 700; }
.solicitud ul { margin: .25rem 0 .4rem; padding-left: 1.1rem; font-size: .82rem; color: var(--texto-suave); }
.opciones-radio label { display: flex; gap: .4rem; align-items: center; font-weight: 500; color: var(--texto); font-size: .86rem; margin: .2rem 0; }
.opciones-radio input { width: auto; }

.lista-compacta .elemento { padding: .45rem 0; border-bottom: 1px dashed var(--borde); font-size: .88rem; }
.lista-compacta .elemento:last-child { border-bottom: none; }

.linea-hist { display: flex; gap: .6rem; padding: .45rem 0; border-bottom: 1px dashed var(--borde); font-size: .86rem; }
.linea-hist:last-child { border-bottom: none; }
.linea-hist .cuando { color: var(--texto-suave); font-size: .76rem; min-width: 96px; }

.salida { border: 1px solid var(--borde); border-radius: 10px; padding: .7rem .8rem; margin-bottom: .6rem; background: var(--panel); }
.salida .cab { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.estados-op { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .5rem; }

@media (max-width: 1100px) {
  .conv { display: block; height: auto; min-height: 0; border: none; background: none; border-radius: 0; }
  .conv > section { display: none; overflow: visible; border: none; background: var(--panel); border-radius: var(--radio); }
  .conv.paso-lista .conv-lista, .conv.paso-hilo .conv-hilo, .conv.paso-panel .conv-panel { display: flex; border: 1px solid var(--borde); }
  .volver { display: inline-block; }
  .hilo { min-height: 45vh; }
  .redactor { position: static; }
}

@media (max-width: 820px) {
  .boton-mas { display: inline-block; }
  .chip-usuario span:not(.avatar) { display: none; }
  #boton-salir { display: none; }
  .pestanas-movil a { font-size: .64rem; padding-left: .1rem; padding-right: .1rem; }
  .burbuja { max-width: 90%; }
}

@media (prefers-color-scheme: dark) {
  .conv-panel, .conv-panel .conv-cabecera { background: #1b2733; }
  .conv-item:hover { background: #1b2733; }
  .burbuja.saliente { background: #16352f; border-color: #22514a; }
  .burbuja.interna { background: #332a17; border-color: #4a3d1f; }
  .sugerencia { background: #17303d; border-color: #24495c; color: #bfe0ef; }
  .sugerencia.sin-ia { background: #332a17; border-color: #4a3d1f; color: #f0d9a4; }
  .menu-mas { background: var(--panel); }
}
/* El estado actual de la reserva se ve sólido, no como desactivado */
.estados-op .boton:not(.secundario):disabled { opacity: 1; cursor: default; }

/* v0.3: extras y tareas en las tarjetas de salida */
.salida-extras { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .5rem; font-size: .84rem; }
.salida-tareas { margin-top: .5rem; font-size: .84rem; }
.salida-tareas ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.salida-tareas li { margin-bottom: .2rem; }

/* ================================================================== */
/* v0.4: cinco secciones, campana, agenda, preparación, calendario      */
/* ================================================================== */

.solo-movil { display: none; }
.subtitulo { color: var(--texto-suave); margin: .15rem 0 0; font-size: .9rem; }
.enlace { background: none; border: none; padding: 0; font: inherit; color: var(--marino-claro); text-decoration: underline; cursor: pointer; }
.casilla { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; color: var(--texto); font-size: .86rem; margin: 0; cursor: pointer; }
.casilla input { width: auto; margin: 0; }
h3.mini { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin: .8rem 0 .4rem; }
.ico { line-height: 1; }
.suave td { color: var(--texto-suave); }

/* Cabecera: campana y ajustes */
.boton-campana, .boton-ajustes {
  position: relative; border: none; background: rgba(255,255,255,.14); color: #fff; text-decoration: none;
  border-radius: 8px; height: 32px; min-width: 34px; padding: 0 .55rem; font: inherit; font-size: .95rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .2rem;
}
.boton-campana:hover, .boton-ajustes:hover { background: rgba(255,255,255,.24); }
.boton-campana .contador {
  position: absolute; top: -4px; right: -4px; background: #6b7c8b; color: #fff; border-radius: 999px;
  font-size: .64rem; font-weight: 700; padding: 0 .32rem; min-width: 16px; text-align: center; line-height: 16px;
}
.boton-campana .contador.nuevo { background: var(--rojo); }
.panel-avisos {
  position: absolute; right: .7rem; top: 50px; z-index: 75; width: min(420px, calc(100vw - 1.4rem));
  max-height: 70vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(16, 32, 44, .2);
}
.panel-avisos-cab { display: flex; align-items: center; gap: .5rem; padding: .65rem .8rem; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--panel); }
.aviso-item { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .8rem; border-bottom: 1px solid var(--borde); font-size: .88rem; }
.aviso-item:last-child { border-bottom: none; }
.aviso-item.nuevo { background: var(--azul-suave); }
.aviso-icono { font-size: 1rem; line-height: 1.3; }
.aviso-texto { flex: 1; min-width: 0; }

/* Desplegables */
.desplegable { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel); margin-bottom: .7rem; }
.desplegable > summary {
  cursor: pointer; padding: .6rem .8rem; font-weight: 650; font-size: .92rem; list-style: none;
  display: flex; align-items: center; gap: .5rem;
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::before { content: '▸'; color: var(--texto-suave); transition: transform .15s; }
.desplegable[open] > summary::before { transform: rotate(90deg); }
.desplegable > summary .cuenta {
  margin-left: auto; background: var(--azul-suave); color: var(--marino); border-radius: 999px;
  font-size: .72rem; font-weight: 700; padding: .05rem .45rem;
}
.desplegable-cuerpo { padding: 0 .8rem .8rem; }
.desplegable.mini { border: none; background: none; margin: .3rem 0 0; }
.desplegable.mini > summary { padding: .2rem 0; font-size: .82rem; font-weight: 600; color: var(--marino-claro); }
.desplegable.mini .desplegable-cuerpo, .desplegable.mini > form, .desplegable.mini > div { padding: .3rem 0 0; }

/* Barra de progreso */
.progreso { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--texto-suave); }
.progreso-barra { width: 70px; height: 6px; border-radius: 999px; background: #e6ebf0; overflow: hidden; }
.progreso-barra span { display: block; height: 100%; background: var(--turquesa); border-radius: 999px; }
.progreso-texto { display: inline-flex; gap: .3rem; align-items: center; font-weight: 600; }

/* Chips de filtro */
.chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .8rem; }
.chip {
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto-suave); border-radius: 999px;
  padding: .28rem .7rem; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.chip:hover { border-color: var(--marino-claro); color: var(--marino); }
.chip.activo { background: var(--marino); border-color: var(--marino); color: #fff; }
.interruptor a { padding: .38rem .75rem; font-size: .85rem; font-weight: 600; color: var(--texto-suave); text-decoration: none; }
.interruptor a.activo { background: var(--marino); color: #fff; }
.filtros.compactos { padding: .5rem .6rem; gap: .45rem; align-items: center; }
.filtros.compactos > select, .filtros.compactos > input { flex: 1 1 160px; width: auto; min-width: 140px; }
.filtros.compactos > input[type="search"] { flex: 2 1 220px; }
.filtros.compactos > .nota-pequena { margin: 0; }

/* Inicio */
.inicio-cab { align-items: flex-start; }
.inicio-rejilla { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.inicio-rejilla.operaciones { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.inicio-principal, .inicio-lateral { min-width: 0; }
.agenda { display: grid; gap: .9rem; }
.agenda-dia > h3 { display: flex; gap: .4rem; align-items: center; font-size: .86rem; color: var(--marino); margin-bottom: .45rem; }
.paseo {
  display: flex; gap: .75rem; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--turquesa);
  border-radius: 10px; padding: .6rem .7rem; margin-bottom: .5rem;
}
.paseo:hover { border-color: var(--marino-claro); border-left-color: var(--marino); }
.paseo-hora { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--marino); min-width: 3.1rem; display: flex; flex-direction: column; font-size: .95rem; }
.paseo-hora span { font-weight: 500; color: var(--texto-suave); font-size: .78rem; }
.paseo-cuerpo { flex: 1; min-width: 0; }
.paseo-titulo { font-weight: 650; }
.paseo-detalle { color: var(--texto-suave); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; }
.paseo-pie { display: flex; gap: .4rem .6rem; align-items: center; flex-wrap: wrap; margin-top: .35rem; }
.metrica-boton { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.metrica-boton:hover { border-color: var(--marino-claro); background: #f8fbfd; }
.metrica .valor-extra { font-size: 1rem; font-weight: 650; }
.metrica .definicion { font-size: .72rem; color: var(--texto-suave); margin-top: .35rem; line-height: 1.35; }
.rejilla-resumen.compacta { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .5rem; margin-bottom: .4rem; }
.rejilla-resumen.compacta .metrica { padding: .5rem .6rem; }
.rejilla-resumen.compacta .valor { font-size: 1.15rem; }
.numero {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--marino); color: #fff;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}
.fila.nuevo { background: var(--azul-suave); }
.fila-enlace { text-decoration: none; color: inherit; }
.marca-fila { width: 4px; align-self: stretch; border-radius: 4px; background: var(--borde); }
.marca-fila.rojo { background: var(--rojo); } .marca-fila.ambar { background: var(--ambar); } .marca-fila.verde { background: var(--verde); }
.origenes { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }

/* Mensajes */
.estado-canales { display: flex; gap: .3rem; flex-wrap: wrap; padding: .45rem .75rem; border-bottom: 1px solid var(--borde); }
.conv-lista .chips { margin: .45rem 0 0; }
.burbuja.fallido { border-color: #f3c9c4; background: var(--rojo-suave); }
.texto-burbuja { white-space: pre-wrap; }
.aviso.gris-suave { background: #f1f4f7; border-color: var(--borde); color: var(--texto-suave); }
.aviso.compacto { padding: .4rem .6rem; margin-bottom: .5rem; }
.control-humano { margin: 0; }

/* Dos controles de la IA por conversación: responder / leer y anotar */
.controles-ia { display: grid; gap: .45rem; }
/* Botón IA ON / IA OFF de cada conversación */
.boton-ia { display: grid; gap: .25rem; margin-top: .6rem; }
.boton-ia .boton { width: 100%; }
.control-ia { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: start; cursor: pointer; }
.control-ia input { margin-top: .2rem; }
.control-ia .titulo { display: block; font-weight: 600; font-size: .86rem; }

/* Claves de las conexiones: se escriben aquí, nunca se muestran después */
.credenciales { display: grid; gap: .6rem; margin-top: .6rem; }
.campo-credencial label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.linea-credencial { display: flex; gap: .4rem; align-items: center; }
.linea-credencial input { flex: 1; min-width: 0; }

/* Editor de los mensajes al cliente */
.editor-mensaje { display: grid; gap: .8rem; }
.bloque-idioma { display: grid; gap: .35rem; }
.bloque-idioma textarea { width: 100%; font: inherit; line-height: 1.45; padding: .5rem .6rem; }

/* Ayuda para responder, encima del editor de la bandeja */
.ayuda-responder { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; padding: .4rem .6rem 0; }

/* Ficha de reserva simple: salida · contratado · pagos · checklist */
.bloque-ficha > header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.bloque-ficha > header h3 { margin: 0; }
.datos-ficha.compacto { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .4rem .9rem; }
.lista-contratado { display: grid; gap: .3rem; }
.lista-contratado .linea { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; padding: .25rem 0; border-bottom: 1px solid var(--linea-suave, rgba(0,0,0,.06)); }
.lista-contratado .linea:last-child { border-bottom: 0; }
.lista-contratado .que { font-weight: 600; min-width: 7rem; }
.lista-contratado .detalle { color: var(--texto-secundario, #5a6b76); font-size: .9rem; }
.linea-pagos { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: baseline; }
.linea-pagos .k { color: var(--texto-secundario, #5a6b76); font-size: .82rem; }
.checklist { display: grid; gap: .1rem; }
.item-check { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; border-bottom: 1px solid var(--linea-suave, rgba(0,0,0,.06)); }
.item-check:last-child { border-bottom: 0; }
.item-check .texto { flex: 1; min-width: 0; }
.item-check .tick { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .15rem; border-radius: .3rem;
  border: 2px solid var(--acento, #17607d); background: transparent; cursor: pointer; padding: 0; }
.item-check .tick:hover { background: var(--acento, #17607d); }
.item-check .tick.vacio { border-style: dashed; border-color: var(--linea, #c7d3da); cursor: default; }
.ver-mas { display: grid; gap: .3rem; }
.panel-bloque.destacado { background: var(--ambar-suave); }
.mini-reserva { border: 1px solid var(--borde); border-radius: 10px; padding: .55rem .65rem; background: var(--panel); margin-bottom: .5rem; font-size: .88rem; }
.panel-bloque.desplegable { border: none; border-bottom: 1px solid var(--borde); border-radius: 0; margin: 0; background: none; }
.panel-bloque.desplegable > summary { padding: 0; font-size: .86rem; }
.panel-bloque.desplegable[open] > summary { margin-bottom: .45rem; }
.conv-lista .conv-cabecera { flex-wrap: wrap; }

/* Falta información */
.faltan { border: 1px solid #cbe0eb; background: var(--azul-suave); border-radius: 10px; padding: .6rem .7rem; margin-bottom: .8rem; font-size: .88rem; }
.faltan.sin-faltas { background: var(--verde-suave); border-color: #c4e5d3; }
.faltan-titulo { font-weight: 650; margin-bottom: .35rem; }
.faltan-lista { display: grid; gap: .45rem; }
.faltan-item { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: .45rem .55rem; }
.faltan-item .acciones { margin-top: .3rem; }
.faltan-item.contradiccion { border-color: #f0e0bd; background: var(--ambar-suave); margin-top: .45rem; }
.detectado { margin-top: .3rem; }
.faltan-despues { margin-top: .5rem; }
.faltan-despues > summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--marino-claro); }

/* Ficha de reserva */
.cabecera-ficha { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: .65rem .75rem; margin-bottom: .8rem; }
.cabecera-ficha .etiquetas { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .45rem; }
.pendiente-principal { margin-bottom: .5rem; font-size: .9rem; }
.pendiente-principal .k { color: var(--texto-suave); }
.cabecera-ficha .aviso { margin: .5rem 0 0; }
.selector-compacto { padding: .2rem .4rem; font-size: .88rem; }
.fila-progreso { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.item-prep { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: .55rem .65rem; margin-bottom: .45rem; }
.item-prep.revisar { border-color: #e9c77f; box-shadow: inset 3px 0 0 var(--ambar); }
.item-prep.retirado { opacity: .6; }
.item-prep-cab { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.tipo-prep { font-size: .95rem; }
.item-prep .aviso { margin: .4rem 0; }
.pasos { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .45rem; }
.paso {
  border: 1px solid var(--borde); background: #fff; color: var(--texto-suave); border-radius: 999px;
  padding: .22rem .65rem; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.paso:hover:not(:disabled) { border-color: var(--turquesa); color: var(--marino); }
.paso.hecho { background: #e3f4f1; border-color: #bfe3dc; color: var(--verde); }
.paso.actual { background: var(--marino); border-color: var(--marino); color: #fff; }
.paso.actual.listo { background: var(--verde); border-color: var(--verde); }
.paso:disabled { cursor: default; }
.paso:disabled:not(.actual):not(.hecho) { opacity: .5; }

/* Tablas que se convierten en tarjetas en el móvil */
.tabla-contenedor { overflow-x: auto; }
.tabla-tarjetas tr.fila-clic { cursor: pointer; }
.tabla-tarjetas tr.fila-clic:hover td { background: #f8fbfd; }
.tabla-tarjetas td { vertical-align: top; }
.columnas { display: inline-block; }

/* Contactos */
.par-duplicado { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.elemento.oportunidad { border-bottom: 1px dashed var(--borde); padding: .5rem 0; }
.elemento.oportunidad .faltan { margin: .45rem 0 0; }
.campos.una-columna { grid-template-columns: 1fr; }
.campos.dos { grid-template-columns: 1fr 1fr; }
.destinatario > summary { cursor: pointer; list-style: none; flex: 1; }
.destinatario { display: block; }
.cuerpo-email { white-space: pre-wrap; font: inherit; font-size: .84rem; background: var(--fondo); padding: .5rem; border-radius: 8px; margin: .4rem 0 0; }

/* (El calendario antiguo de la 0.4 se retiró: ahora vive en «Calendario del mes».) */

.definiciones { display: grid; grid-template-columns: 110px 1fr; gap: .25rem .7rem; margin: 0; font-size: .86rem; }
.definiciones dt { color: var(--texto-suave); font-weight: 600; }
.definiciones dd { margin: 0; }

@media (max-width: 1100px) {
  .inicio-rejilla, .inicio-rejilla.operaciones { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .solo-escritorio { display: none !important; }
  .solo-movil { display: inline; }
  .boton-ajustes { display: none; }
  .tarjeta > header { flex-wrap: wrap; }
  .tarjeta > header > .acciones { width: 100%; }
  .inicio-cab .subtitulo { font-size: .82rem; }
  .par-duplicado, .campos.dos { grid-template-columns: 1fr; }
  .titulo-seccion .boton { font-size: .84rem; padding: .4rem .65rem; }
  .filtros.compactos > select, .filtros.compactos > input { flex-basis: 100%; }
  /* Tabla → tarjetas */
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas td { display: block; width: 100%; }
  .tabla-tarjetas tr { border-bottom: 1px solid var(--borde); padding: .5rem .2rem; }
  .tabla-tarjetas td { border: none; padding: .12rem .3rem; }
  .tabla-tarjetas td[data-etiqueta]:not([data-etiqueta=""])::before { content: attr(data-etiqueta) ': '; color: var(--texto-suave); font-size: .76rem; }
  .definiciones { grid-template-columns: 1fr; }
  .definiciones dt { margin-top: .3rem; }
}

@media (prefers-color-scheme: dark) {
  .panel-avisos-cab { background: var(--panel); }
  .progreso-barra { background: #26333f; }
  .paso { background: var(--panel); }
  .paso.hecho { background: #16352f; border-color: #22514a; }
  .aviso.gris-suave { background: #1b2733; }
  .metrica-boton:hover, .tabla-tarjetas tr.fila-clic:hover td { background: #1b2733; }
}

/* ================= v0.5 ================= */
:root { --serie-1: #2a78d6; --serie-2: #eb6834; --rejilla: #e8ecf0; }
@media (prefers-color-scheme: dark) { :root { --serie-1: #3987e5; --serie-2: #d95926; --rejilla: #22303c; } }

/* Mi negocio */
.filtros-negocio { display: grid; gap: .45rem; margin-bottom: .8rem; }
.filtros-negocio .chips { margin: 0; }
.filtros-negocio .filtros { margin: 0; }
.kpis { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: .15rem; }
.kpi-valor { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.kpi-sub { font-size: .86rem; color: var(--texto-suave); font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-detalle { font-size: .76rem; color: var(--texto); line-height: 1.35; }
.kpi-cmp { font-size: .76rem; color: var(--texto-suave); }
.kpi-delta { font-weight: 650; color: var(--texto); }
.kpi .definicion { margin-top: auto; padding-top: .3rem; }
.rejilla-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: .8rem; align-items: start; }
.rejilla-graficos > .tarjeta { margin-bottom: .8rem; }
.tarjeta-grafico > header { align-items: flex-start; gap: .6rem; }
.tg-sub { font-size: .78rem; color: var(--texto-suave); font-weight: 400; margin-top: .1rem; }
.tg-sub select { margin-left: .3rem; padding: .1rem .3rem; font-size: .78rem; }
.notas-grafico { margin-top: .5rem; }
.notas-grafico p { margin: .25rem 0; }
.enlace-cifra { background: none; border: none; padding: 0; font: inherit; color: var(--marino-claro); text-decoration: underline; cursor: pointer; font-weight: 600; }
.tabla-datos td button.enlace-cifra { font-variant-numeric: tabular-nums; }

/* Barras horizontales */
.barras-h { display: grid; gap: .1rem; }
.leyenda-grafico { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .8rem; color: var(--texto); margin-bottom: .4rem; }
.leyenda-item { display: inline-flex; align-items: center; gap: .35rem; }
.muestra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--serie-1); flex: none; }
.muestra.s2 { background: var(--serie-2); }
.bh-fila { display: grid; grid-template-columns: minmax(7rem, 10.5rem) 1fr; gap: .2rem .6rem; align-items: center; padding: .15rem 0; }
.bh-etq { font-size: .84rem; color: var(--texto); line-height: 1.25; }
.bh-det { display: block; font-size: .72rem; color: var(--texto-suave); }
.bh-series { display: grid; gap: 2px; }
.bh-serie { display: grid; grid-template-columns: 1fr minmax(4.5rem, auto); gap: .5rem; align-items: center; background: none; border: none; padding: .2rem 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 4px; }
.bh-serie:hover .bh-pista, .bh-serie:focus-visible .bh-pista { background: var(--rejilla); }
.bh-serie:focus-visible { outline: 2px solid var(--marino-claro); outline-offset: 1px; }
.bh-pista { position: relative; height: 14px; border-left: 1px solid var(--borde); border-radius: 0 4px 4px 0; }
.multiserie .bh-pista { height: 10px; }
.bh-barra { position: absolute; left: 0; top: 0; bottom: 0; min-width: 3px; background: var(--serie-1); border-radius: 0 4px 4px 0; }
.bh-barra.s2 { background: var(--serie-2); }
.bh-valor { font-size: .8rem; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Columnas */
.grafico-col-lienzo { position: relative; width: 100%; min-height: 220px; }
.grafico-col svg { display: block; overflow: visible; }
.grafico-col .rejilla { stroke: var(--rejilla); stroke-width: 1; }
.grafico-col .eje-base { stroke: var(--borde); stroke-width: 1; }
.grafico-col .eje-texto { fill: var(--texto-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico-col .col.s1 { fill: var(--serie-1); }
.grafico-col .col.s2 { fill: var(--serie-2); }
.grafico-col .zona { fill: transparent; cursor: pointer; }
.grafico-col .zona:hover { fill: rgba(127, 140, 153, .08); }
.grafico-vacio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--texto-suave); font-size: .86rem; pointer-events: none; }
.globo-grafico { position: fixed; z-index: 90; display: none; pointer-events: none; background: var(--panel); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 8px; box-shadow: var(--sombra); padding: .4rem .55rem; font-size: .8rem; line-height: 1.4; max-width: 260px; }
.globo-grafico .globo-titulo { font-weight: 650; }
.globo-grafico .muestra { margin-right: .35rem; vertical-align: -1px; }

@media (max-width: 820px) {
  .bh-fila { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .rejilla-graficos { grid-template-columns: 1fr; }
}
.filtros-negocio .filtros.compactos { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.filtros-negocio .filtros.compactos > select { flex: 0 1 230px; width: auto; }
.tg-sub select { width: auto; display: inline-block; }

/* Clientes y formularios */
.etiquetas-actividad { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .25rem; align-items: center; }
.etiquetas-actividad .etiqueta { font-size: .7rem; }
.dia-semana { font-size: .76rem; color: var(--texto-suave); margin-top: .2rem; min-height: 1.1em; }
.telefono-prefijo { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: .35rem; }
.telefono-prefijo select { min-width: 0; }
@media (max-width: 820px) { .telefono-prefijo { grid-template-columns: 1fr; } }

/* Actividad comercial */
.lista-actividad { list-style: none; margin: .2rem 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.paso-actividad { display: grid; grid-template-columns: 22px 1fr; gap: .45rem; align-items: start; font-size: .88rem; }
.marca-paso { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  border: 1px solid var(--borde); color: var(--texto-suave); background: var(--panel); }
.paso-actividad.hecho .marca-paso { background: var(--verde-suave); border-color: #c4e5d3; color: var(--verde); }
.paso-actividad.pendiente strong { font-weight: 600; color: var(--texto-suave); }
.proxima-accion { font-size: .88rem; margin-bottom: .55rem; }
.proxima-accion .k { color: var(--texto-suave); }
.zona-accion:not(:empty) { margin-top: .6rem; border-top: 1px dashed var(--borde); padding-top: .6rem; }
@media (prefers-color-scheme: dark) { .paso-actividad.hecho .marca-paso { border-color: #22514a; } }
.campos > .campo-telefono { grid-column: span 2; }
@media (max-width: 820px) { .campos > .campo-telefono { grid-column: auto; } }

/* Reserva: cabecera, falta por hacer, bloques y línea de tiempo */
.cabecera-reserva .cr-fecha { font-size: 1.12rem; font-weight: 700; line-height: 1.25; display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.cabecera-reserva .cr-faltan { font-size: .82rem; font-weight: 600; color: var(--marino-claro); }
.cabecera-reserva .cr-linea { font-size: .9rem; color: var(--texto); margin-top: .1rem; }
.cabecera-reserva .etiquetas { margin: .5rem 0; }
.cr-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem .9rem; margin: .3rem 0 .5rem; font-size: .88rem; }
.cr-rejilla .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); margin-bottom: .15rem; }
.cr-proxima { grid-column: span 1; }
.bloque-cab { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .45rem; }
.bloque-cab h3 { margin: 0; }
.bloque-cab .cuenta { background: var(--azul-suave); color: var(--marino); border-radius: 999px; padding: 0 .5rem; font-size: .76rem; font-weight: 700; }
.lista-falta { display: grid; gap: .4rem; margin-bottom: .5rem; }
.pendiente { border: 1px solid var(--borde); border-radius: 10px; padding: .5rem .6rem; background: var(--panel); }
.pendiente.vencido { border-color: #f3c9c4; box-shadow: inset 3px 0 0 var(--rojo); }
.pendiente.bloqueo { box-shadow: inset 3px 0 0 var(--ambar); }
.pendiente-cab { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; font-size: .9rem; }
.pendiente-cab .etiqueta { font-size: .7rem; }
.pendiente-meta { display: flex; gap: .3rem .9rem; flex-wrap: wrap; align-items: center; font-size: .82rem; margin-top: .3rem; }
.pendiente-meta .k { color: var(--texto-suave); }
.pendiente .desplegable.mini { margin-top: .35rem; }
.lista-hecho { display: grid; gap: .3rem; }
.hecho-fila { display: grid; grid-template-columns: 22px 1fr auto; gap: .45rem; align-items: center; font-size: .85rem; }
.hecho-fila .marca-paso, .lt-item .marca-paso, .requisitos .marca-paso { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; border: 1px solid var(--borde); }
.hecho-fila .marca-paso, .lt-grupo.hecho .marca-paso, .requisitos li.ok .marca-paso { background: var(--verde-suave); color: var(--verde); }
.vista-prep { margin: .2rem 0 .6rem; }
.bloques-prep { display: grid; gap: .1rem; }
.bloque-prep { border-top: 1px solid var(--borde); padding-top: .7rem; }
.bloque-prep .definiciones { margin-bottom: .5rem; }
.desplegable.editor { margin: .3rem 0 .5rem; }
.requisitos { list-style: none; padding: 0; margin: 0 0 .4rem; display: grid; gap: .3rem; font-size: .88rem; }
.requisitos li { display: grid; grid-template-columns: 22px 1fr; gap: .45rem; align-items: center; }
.requisitos li.falta .marca-paso { background: var(--ambar-suave); color: var(--ambar); }
.linea-tiempo-prep .lt-grupo { border-left: 2px solid var(--borde); margin-left: .6rem; padding: 0 0 .6rem .9rem; position: relative; }
.linea-tiempo-prep .lt-grupo.vencido { border-left-color: var(--rojo); }
.lt-titulo { font-weight: 700; font-size: .84rem; margin-bottom: .3rem; }
.lt-grupo.vencido .lt-titulo { color: var(--rojo); }
.lt-item { display: grid; grid-template-columns: 22px 1fr; gap: .45rem; align-items: start; font-size: .86rem; margin-bottom: .3rem; }
.lt-salida { margin: .2rem 0 .7rem; padding: .45rem .6rem; border-radius: 8px; background: var(--azul-suave); font-weight: 650; font-size: .88rem; }
.lista-extras { display: grid; gap: .35rem; margin-bottom: .4rem; }
.extra-opcion { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.extra-opcion select { width: auto; flex: 0 1 260px; }
@media (max-width: 820px) {
  .hecho-fila { grid-template-columns: 22px 1fr; }
  .hecho-fila > .nota-pequena { grid-column: 2; }
}
.paseo-pendiente { font-size: .8rem; margin-top: .3rem; color: var(--texto); }
.paseo-pendiente .k { color: var(--texto-suave); }
.checklist .item > .marca-paso { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; border: 1px solid var(--borde); flex: none; }
.mini-lista { margin: .2rem 0 0; padding-left: 1.05rem; font-size: .82rem; }
.mini-lista li { margin: .1rem 0; }

/* ================= v0.6 ================= */
.aviso-version { background: #fdeceb; color: #8c2b20; border-bottom: 1px solid #f3c9c4; padding: .5rem .9rem; font-size: .86rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 60; }
.estado-pantalla { display: grid; justify-items: start; gap: .45rem; padding: 1.1rem 1rem; border: 1px dashed var(--borde); border-radius: var(--radio); background: var(--panel); color: var(--texto-suave); font-size: .9rem; }
.estado-pantalla.cargando { display: flex; align-items: center; gap: .55rem; }
.estado-pantalla.error { border-style: solid; border-color: #f3c9c4; background: var(--rojo-suave); color: var(--texto); }
.estado-titulo { font-weight: 700; }
.estado-detalle { font-size: .84rem; color: var(--texto-suave); word-break: break-word; }
.giro { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borde); border-top-color: var(--marino-claro); animation: giro 0.8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .giro { animation: none; } }
@media (prefers-color-scheme: dark) { .aviso-version { background: #3a1f1c; color: #f5c7c1; border-color: #5a2d28; } }

/* ================================================================== */
/* v0.6: tableros Kanban, fichas centradas en la próxima acción        */
/* ================================================================== */

.pestanas-fila { display: flex; align-items: flex-end; gap: .6rem 1.2rem; flex-wrap: wrap; margin-bottom: .6rem; }
.pestanas-fila .pestanas { margin-bottom: 0; flex: 1 1 auto; }
.enlaces-secundarios { display: flex; gap: .3rem .8rem; flex-wrap: wrap; font-size: .82rem; padding-bottom: .35rem; }
.enlaces-secundarios a { color: var(--texto-suave); text-decoration: none; padding: .15rem .1rem; border-bottom: 2px solid transparent; }
.enlaces-secundarios a:hover { color: var(--marino); }
.enlaces-secundarios a.activo { color: var(--marino); border-bottom-color: var(--marino); font-weight: 600; }
.enlaces-secundarios .contador { background: var(--ambar-suave); color: var(--ambar); border-radius: 999px; font-size: .68rem; padding: 0 .35rem; margin-left: .25rem; font-weight: 700; }
.chip-num { display: inline-block; min-width: 1.3em; margin-left: .35rem; padding: 0 .3rem; border-radius: 999px; background: rgba(11, 79, 108, .1); font-size: .72rem; font-weight: 700; text-align: center; }
.chip.activo .chip-num { background: rgba(255, 255, 255, .22); }

/* A quién le toca (icono + texto; el color solo acompaña) */
.quien { display: inline-flex; align-items: center; border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; font-weight: 650; border: 1px solid transparent; }
.quien.yo { background: var(--marino); color: #fff; }
.quien.equipo { background: #efeafc; color: #5b3fa8; }
.quien.joan { background: var(--ambar-suave); color: #8a5a10; border-color: #f0e0bd; }
.quien.cliente { background: #eef1f4; color: var(--texto-suave); }
.quien.nadie { background: var(--verde-suave); color: var(--verde); }

/* Ficha de oportunidad: pasos de la venta y próxima acción */
.pasos-etapa { list-style: none; display: flex; gap: .25rem; padding: 0; margin: 0 0 .3rem; overflow-x: auto; }
.pasos-etapa li { flex: 1 0 auto; display: flex; gap: .3rem; align-items: center; padding: .3rem .5rem; border-radius: 7px; background: #eef1f4; color: var(--texto-suave); font-size: .76rem; white-space: nowrap; }
.pasos-etapa li.hecho { background: var(--verde-suave); color: var(--verde); }
.pasos-etapa li.actual { background: var(--marino); color: #fff; font-weight: 700; }
.proxima-grande { border: 1px solid #cbe0eb; background: var(--azul-suave); border-radius: var(--radio); padding: .7rem .8rem; display: grid; gap: .5rem; }
.proxima-grande .k-proxima { font-size: 1rem; }
.proxima-grande .acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.proxima-grande .mover-etapa { width: auto; max-width: 15rem; }
.seguimiento-linea { display: grid; gap: .15rem; border-top: 1px solid #cbe0eb; padding-top: .45rem; }
.seguimiento-linea .k-seg { font-size: .82rem; }
.seguimiento-linea .enlace { justify-self: start; }
.mini-hilo { display: grid; gap: .35rem; margin: .3rem 0 .5rem; }
.mini-msg { border-radius: 9px; padding: .35rem .55rem; max-width: 92%; font-size: .85rem; background: #eef1f4; }
.mini-msg.saliente { justify-self: end; background: var(--azul-suave); }
.mini-msg .nota-pequena { margin: 0 0 .1rem; font-size: .7rem; }
.lista-simple { margin: 0; padding-left: 1.1rem; font-size: .86rem; }
.resumen-corto { display: grid; gap: .4rem; }

/* Inicio: lo que me toca */
.me-toca { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin-bottom: .9rem; }
.me-toca-chip { display: flex; gap: .55rem; align-items: center; text-align: left; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: .55rem .7rem; font: inherit; font-size: .84rem; color: var(--texto); cursor: pointer; box-shadow: var(--sombra); }
.me-toca-chip:hover { border-color: var(--marino-claro); }
.me-toca-num { font-size: 1.45rem; font-weight: 750; color: var(--marino); min-width: 1.4ch; }
.me-toca-chip.cero { box-shadow: none; opacity: .75; }
.me-toca-chip.cero .me-toca-num { color: var(--texto-suave); }

/* Mi negocio: pocas cifras grandes */
.kpis-principales { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-bottom: .9rem; }
.kpis-principales .kpi .valor { font-size: 1.75rem; overflow-wrap: anywhere; }
.kpis-principales .kpi .definicion { display: none; }
.rejilla-graficos.tres { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Mensajes: respuestas recomendadas junto al editor (tira compacta encima del editor) */
.redactor-con-ayuda.con-ayuda { display: grid; gap: .45rem; }
.recomendaciones { order: -1; display: flex; gap: .45rem; overflow-x: auto; padding: .1rem 0 .3rem; font-size: .8rem; scrollbar-width: thin; }
.rec-cab { flex: 0 0 auto; display: grid; gap: .2rem; align-content: start; padding: .3rem .1rem; max-width: 7.5rem; }
.rec { flex: 0 0 min(15rem, 80%); border: 1px solid var(--borde); border-radius: 9px; background: var(--panel); padding: .4rem .5rem; display: grid; gap: .2rem; align-content: start; }
.rec-titulo { font-weight: 650; }
.rec-texto { color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec .boton { justify-self: start; }
.recomendaciones > .nota-pequena { flex: 0 0 8rem; align-self: center; }

/* Ajustes: calendario de seguimientos */
.fila-calendario { border-top: 1px solid var(--borde); padding: .6rem 0; display: grid; gap: .35rem; }
.fila-calendario:first-child { border-top: none; padding-top: 0; }

@media (max-width: 820px) {
  .pestanas-fila { flex-direction: column; align-items: stretch; }
  .kpis-principales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis-principales .kpi .valor { font-size: 1.45rem; }
  .pasos-etapa li .texto-paso { display: none; }
  .pasos-etapa li.actual .texto-paso { display: inline; }
}
@media (prefers-color-scheme: dark) {
  .quien.equipo { background: #2b2545; color: #c3b4f0; }
  .quien.joan { color: #f0cf8c; border-color: #4a3b1d; }
  .quien.cliente, .pasos-etapa li, .mini-msg { background: #24313d; }
  .proxima-grande { border-color: #24465a; }
  .seguimiento-linea { border-top-color: #24465a; }
  .chip-num { background: rgba(255, 255, 255, .12); }
  .enlaces-secundarios .contador { color: #f0cf8c; }
}


/* ================================================================== */
/* v0.7: listas compactas, panel lateral y edición en el sitio         */
/* ================================================================== */

:root { --azul: #1668a8; --azul-oscuro: #0b4f6c; --linea-suave: #eef1f5; }

.icono-svg { flex: 0 0 auto; vertical-align: -3px; }

/* Cabecera de pantalla: título, acción principal y filtros en una línea */
.pantalla-cab { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.pantalla-cab h1 { font-size: 1.2rem; margin: 0; flex: 1 1 auto; }
.pantalla-sub { color: var(--texto-suave); font-size: .82rem; margin: -.4rem 0 .7rem; }
.barra-vistas { display: flex; gap: .25rem; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: .2rem; overflow-x: auto; }
.barra-vistas button { flex: 0 0 auto; border: none; background: none; font: inherit; font-size: .86rem; color: var(--texto-suave); padding: .35rem .7rem; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.barra-vistas button:hover { color: var(--texto); }
.barra-vistas button.activa { background: var(--azul); color: #fff; font-weight: 600; }
.barra-vistas .num { margin-left: .35rem; font-variant-numeric: tabular-nums; opacity: .85; }
.barra-busqueda { display: flex; align-items: center; gap: .4rem; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: .25rem .55rem; min-width: 180px; flex: 1 1 200px; max-width: 320px; color: var(--texto-suave); }
.barra-busqueda input { border: none; background: none; padding: .25rem 0; width: 100%; font: inherit; }
.barra-busqueda input:focus { outline: none; }

/* Tabla compacta */
.tabla-compacta { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.tabla-compacta th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); font-weight: 600; padding: .5rem .7rem; border-bottom: 1px solid var(--borde); background: #f8fafc; white-space: nowrap; }
.tabla-compacta td { padding: .55rem .7rem; border-bottom: 1px solid var(--linea-suave); font-size: .88rem; vertical-align: middle; }
.tabla-compacta tbody tr:last-child td { border-bottom: none; }
.tabla-compacta tbody tr.fila-clic { cursor: pointer; }
.tabla-compacta tbody tr.fila-clic:hover { background: #f5f9fc; }
.tabla-compacta tbody tr.activa { background: var(--azul-suave); }
.tabla-compacta tbody tr:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.tabla-compacta .num, .tabla-compacta td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-compacta .principal { font-weight: 600; }
.tabla-compacta .secundario { color: var(--texto-suave); font-size: .8rem; }
.tabla-compacta .estrecha { width: 1%; white-space: nowrap; }

/* Estados: color + texto */
.estado-etiqueta { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; white-space: nowrap; }
.estado-etiqueta .punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.estado-etiqueta.verde { color: var(--verde); }
.estado-etiqueta.ambar { color: var(--ambar); }
.estado-etiqueta.roja, .estado-etiqueta.rojo { color: var(--rojo); }
.estado-etiqueta.gris { color: var(--texto-suave); }
.estado-etiqueta.azul { color: var(--azul); }

/* Dato editable en el sitio */
.datos-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .1rem .9rem; }
.dato-editable { padding: .35rem 0; border-bottom: 1px solid var(--linea-suave); min-width: 0; }
.dato-editable .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); }
.dato-editable .v { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .35rem; min-height: 1.7rem; }
.dato-editable .v.editable { background: none; border: none; padding: .1rem .2rem .1rem 0; margin: 0; font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer; border-radius: 6px; width: 100%; }
.dato-editable .v.editable .icono-svg { opacity: 0; color: var(--azul); }
.dato-editable .v.editable:hover { background: #f2f7fb; }
.dato-editable .v.editable:hover .icono-svg, .dato-editable .v.editable:focus-visible .icono-svg { opacity: 1; }
.dato-editable .v.editando { display: flex; gap: .3rem; flex-wrap: wrap; }
.dato-editable .v.editando input, .dato-editable .v.editando select, .dato-editable .v.editando textarea { flex: 1 1 130px; min-width: 0; }
.dato-editable .v.guardado { animation: guardado 1.2s ease; }
@keyframes guardado { 0% { background: #dff3e6; } 100% { background: transparent; } }
.dato-editable .ayuda-campo, .aviso-campo { font-size: .74rem; color: var(--texto-suave); }
.aviso-campo.error { color: var(--rojo); }

/* Menú de tres puntos */
.menu-acciones { position: relative; }
.boton-icono { border: 1px solid var(--borde); background: var(--panel); color: var(--texto-suave); border-radius: 8px; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; }
.boton-icono:hover { color: var(--texto); border-color: var(--azul); }
.menu-acciones-lista { position: absolute; right: 0; top: 36px; z-index: 30; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra); min-width: 200px; overflow: hidden; }
.menu-accion { display: block; width: 100%; text-align: left; border: none; background: none; font: inherit; font-size: .86rem; padding: .5rem .7rem; cursor: pointer; }
.menu-accion:hover { background: var(--azul-suave); }

/* Ficha: bloques y acción principal */
.ficha-cab { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ficha-cab .titulo { font-size: 1.05rem; font-weight: 650; }
.bloque-ficha { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: .7rem .8rem; margin-bottom: .6rem; }
.bloque-ficha > h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin: 0 0 .45rem; display: flex; align-items: center; gap: .35rem; }
.accion-principal { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: var(--azul-suave); border: 1px solid #cbe0eb; border-radius: 10px; padding: .55rem .7rem; margin-bottom: .6rem; }
.accion-principal .texto { flex: 1 1 auto; font-weight: 600; }
.lista-pendientes { display: grid; gap: .1rem; }
.lista-pendientes .item { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--linea-suave); font-size: .88rem; }
.lista-pendientes .item:last-child { border-bottom: none; }
.lista-pendientes .texto { flex: 1 1 auto; min-width: 0; }
.lista-pendientes .meta { color: var(--texto-suave); font-size: .76rem; }

/* Inicio */
.inicio-columnas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: .8rem; align-items: start; }
.lista-atencion { display: grid; }
.lista-atencion .fila-atencion { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--linea-suave); background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; font: inherit; color: var(--texto); cursor: pointer; }
.lista-atencion .fila-atencion:last-child { border-bottom: none; }
.lista-atencion .fila-atencion:hover { background: #f5f9fc; }
.lista-atencion .marca { width: 6px; height: 34px; border-radius: 3px; background: var(--texto-suave); flex: 0 0 auto; }
.lista-atencion .rojo .marca { background: var(--rojo); }
.lista-atencion .ambar .marca { background: var(--ambar); }
.lista-atencion .azul .marca { background: var(--azul); }
.lista-atencion .cuerpo { flex: 1 1 auto; min-width: 0; }
.lista-atencion .titulo { display: block; font-weight: 600; font-size: .9rem; }
.lista-atencion .detalle { display: block; color: var(--texto-suave); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 980px) {
  .inicio-columnas { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .tabla-compacta thead { display: none; }
  .tabla-compacta, .tabla-compacta tbody, .tabla-compacta tr, .tabla-compacta td { display: block; width: 100%; }
  .tabla-compacta tr { border-bottom: 1px solid var(--borde); padding: .35rem .1rem; }
  .tabla-compacta td { border: none; padding: .15rem .7rem; display: flex; gap: .5rem; }
  .tabla-compacta td::before { content: attr(data-etiqueta); color: var(--texto-suave); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; min-width: 5.5rem; }
  .tabla-compacta td.principal-movil::before { display: none; }
  .datos-ficha { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
  :root { --linea-suave: #202b36; --azul: #4ea2e0; }
  .tabla-compacta th { background: #1b2733; }
  .tabla-compacta tbody tr.fila-clic:hover, .lista-atencion .fila-atencion:hover { background: #1b2733; }
  .dato-editable .v.editable:hover { background: #1b2733; }
  .boton-icono, .menu-acciones-lista { background: var(--panel); }
  .accion-principal { border-color: #24465a; }
}

/* ------------------------------------------------------------------ */
/* v0.8: servicios de la reserva, pagos en dos filas y tablero          */
/* ------------------------------------------------------------------ */

.barra-vistas.secundaria button { font-size: .82rem; padding: .25rem .6rem; }

/* Resumen de datos ya completados, bajo la lista de pendientes */
.resumen-salida { margin-top: .5rem; border-top: 1px solid var(--linea-suave); padding-top: .3rem; }
.datos-ficha.compacto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 .7rem; }
.datos-ficha.compacto .dato-editable { border-bottom: none; padding: .1rem 0; }

/* Catering, open bar y DJ */
.lista-pendientes .item.servicio { align-items: flex-start; }
.lista-pendientes .titulo-fila, .tarjeta-charter .titulo-fila { font-weight: 600; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.acciones-servicio { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: flex-end; flex: 0 0 auto; max-width: 62%; }
.acciones-servicio select, .acciones-servicio input { max-width: 9rem; }

/* Vista previa de un mensaje antes de adelantarlo */
.vista-previa { white-space: pre-wrap; background: var(--arena); border: 1px solid var(--borde); border-radius: 8px;
  padding: .7rem .8rem; font-size: .9rem; line-height: 1.45; margin: .5rem 0; }

/* Tablero de seguimiento del charter */
.tablero-reservas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: .7rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; }
.col-tablero { background: var(--arena); border: 1px solid var(--borde); border-radius: 10px; min-width: 0; }
.col-tablero > header { display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--arena); border-radius: 10px 10px 0 0; }
.col-tablero > header h3 { font-size: .82rem; margin: 0; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); }
.col-tablero > header .cuenta { margin-left: auto; font-size: .78rem; color: var(--texto-suave); background: var(--panel); border-radius: 999px; padding: 0 .45rem; }
.col-tablero.destino { outline: 2px dashed var(--azul); outline-offset: -2px; }
.col-tarjetas { display: grid; gap: .45rem; padding: .5rem; min-height: 3.5rem; }
.tarjeta-charter { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: .5rem .6rem; cursor: pointer; display: grid; gap: .2rem; }
.tarjeta-charter:hover { border-color: var(--azul); }
.tarjeta-charter:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.tarjeta-charter.arrastrando { opacity: .5; }
.tarjeta-charter .meta.ambar { color: var(--ambar-texto, #8a5a00); }
.acciones-tarjeta { display: flex; gap: .3rem; align-items: center; margin-top: .25rem; }

@media (max-width: 820px) {
  .tablero-reservas { grid-auto-flow: row; grid-auto-columns: auto; }
  .acciones-servicio { max-width: 100%; justify-content: flex-start; }
  .lista-pendientes .item.servicio { flex-direction: column; align-items: stretch; }
}
@media (prefers-color-scheme: dark) {
  .col-tablero, .col-tablero > header { background: #16202a; }
  .col-tablero > header .cuenta { background: var(--panel); }
  .vista-previa { background: #16202a; }
  .tarjeta-charter .meta.ambar { color: #e3b341; }
}

/* Dentro de «Pendiente por hacer»: separa las gestiones de los datos que faltan. */
.sub-pendientes {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: .7rem 0 .15rem;
}

/* ---------- Calendario del mes ---------- */
.cal-cab { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .7rem; }
.cal-cab h2 { margin: 0; font-size: 1.05rem; }
.cal-cab h2::first-letter { text-transform: uppercase; }
.cal-flecha {
  border: none; background: var(--arena); color: var(--marino); border-radius: 999px;
  width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.cal-flecha:hover { background: var(--turquesa-suave); }
.enlace { border: none; background: none; color: var(--marino-claro); cursor: pointer; font: inherit; padding: 0 .3rem; }

.cal-semana {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem;
  font-size: .72rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em;
  padding: 0 .1rem .3rem;
}
.cal-semana span { text-align: center; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.cal-dia {
  border-radius: var(--radio); min-height: 92px;
  padding: .3rem .32rem .4rem; display: flex; flex-direction: column; gap: .22rem;
}
/* Solo los días con salida llevan tarjeta: el mes vacío se ve tranquilo. */
.cal-dia.con-salidas { background: var(--panel); box-shadow: var(--sombra); }
.cal-dia.fuera { background: none; }
.cal-numero { font-size: .78rem; color: var(--texto-suave); padding-left: .12rem; }
.cal-dia.hoy { background: var(--turquesa-suave); }
.cal-dia.hoy .cal-numero { color: var(--marino); font-weight: 700; }
.cal-salida {
  display: block; width: 100%; text-align: left; border: none; cursor: pointer;
  background: var(--arena); border-left: 3px solid var(--ambar); border-radius: 7px;
  padding: .25rem .35rem; font: inherit; font-size: .76rem; line-height: 1.25; color: var(--texto);
}
.cal-salida.confirmada { border-left-color: var(--verde); }
.cal-salida:hover { background: var(--arena-honda); }
.cal-salida .hora { font-weight: 650; margin-right: .25rem; }
.cal-salida .quien, .cal-salida .barco { display: block; }
.cal-salida .quien { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-salida .barco { color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
  .cal-semana { display: none; }
  .cal-rejilla { grid-template-columns: 1fr; gap: .25rem; }
  .cal-dia { min-height: 0; flex-direction: row; align-items: flex-start; gap: .5rem; flex-wrap: wrap; background: none; padding: .1rem 0; }
  .cal-dia:not(.con-salidas) { display: none; }
  .cal-numero { min-width: 1.6rem; font-weight: 650; padding-top: .3rem; }
  .cal-salida { flex: 1 1 12rem; font-size: .84rem; }
}

/* Qué falta por confirmar: un resumen que se lee, sin cuadros ni botones. */
.lista-falta { margin: .1rem 0 0; padding-left: 1.05rem; display: grid; gap: .18rem; }
.lista-falta li { color: var(--texto); }
.lista-falta li.vencido { color: var(--rojo); }
.bloque-ficha.destacado { background: var(--ambar-suave); }
.bloque-ficha.destacado p { margin: 0 0 .25rem; }
.bloque-ficha.destacado p:last-child { margin-bottom: 0; }
.nota-larga { white-space: pre-wrap; margin: 0; }

/* ===========================================================   Versión 1.2 · Aspecto más ligero: arena, blanco y turquesa suave.
   Menos cuadros, menos bordes, menos negritas. El color siempre
   acompañado de texto (verde confirmado · ámbar pendiente ·
   rojo error · gris inactivo).
   ================================================================== */

body { background: var(--fondo); }

/* Tarjetas y bloques: se separan por aire, no por líneas. */
.tarjeta { border: none; box-shadow: var(--sombra); }
.tarjeta > header { background: transparent; border-bottom: 1px solid var(--borde-suave); }
.tarjeta > header .cuenta { background: var(--turquesa-suave); color: var(--marino); }
.filtros { border: none; box-shadow: var(--sombra); }

.bloque-ficha { border: none; box-shadow: var(--sombra); padding: .85rem .95rem; margin-bottom: .7rem; }
.bloque-ficha > h3, .bloque-ficha > header h3 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); font-weight: 650;
}
.bloque-ficha > header { margin-bottom: .45rem; }

.panel-bloque { border: none; box-shadow: var(--sombra); }

/* Botones: el principal turquesa, el secundario apenas un contorno. */
.boton { border-radius: 999px; border-color: var(--marino); }
.boton.secundario { border-color: var(--borde); color: var(--marino); }
.boton.secundario:hover { background: var(--turquesa-suave); border-color: var(--turquesa); }

/* Navegación lateral: la activa en turquesa suave, no en bloque oscuro. */
.lateral a.activo { background: var(--turquesa-suave); color: var(--marino); font-weight: 650; }
.lateral a.activo .contador { background: var(--marino); color: #fff; }
.lateral a:hover { background: var(--arena); }

/* La cabecera deja de ser una franja oscura y pesada. */
.cabecera { background: var(--marino); }

/* Etiquetas de estado: color suave y siempre con su palabra. */
.etiqueta { border-radius: 999px; font-weight: 600; }

/* Ficha lateral sobre arena, no sobre gris. */
.ficha { background: var(--fondo); }
.ficha > header { border-bottom: 1px solid var(--borde-suave); }

/* ---------- Mensajes: editar y enviar en un solo sitio ---------- */
.redactor { display: grid; gap: .5rem; padding: .7rem .8rem; background: var(--panel); border-top: 1px solid var(--borde-suave); }
.redactor textarea { width: 100%; }
.redactor-pie { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.redactor-pie .boton { min-width: 7.5rem; }
.sin-conectar { margin: 0; color: var(--ambar); font-weight: 600; }
.sin-conectar .nota-pequena { font-weight: 400; color: var(--texto-suave); margin: 0; }

.ayuda-ia textarea { width: 100%; margin: .45rem 0 .35rem; }
.ayuda-cambios { margin: .4rem 0 0; padding-left: 1.05rem; font-size: .84rem; color: var(--texto-suave); }
.ayuda-salida:empty { display: none; }

/* Burbujas: lo recibido en arena, lo enviado en turquesa suave, el borrador punteado. */
.burbuja.entrante { background: var(--arena); }
.burbuja.saliente { background: var(--turquesa-suave); }
.burbuja.borrador { background: var(--panel); border: 1px dashed var(--borde); }
.burbuja.interna { background: var(--ambar-suave); }

/* ---------- Reservas · lista agrupada por día ---------- */
.lista-dias { display: grid; gap: 1.15rem; }
.dia-titulo {
  display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .4rem;
  font-size: .95rem; font-weight: 650; color: var(--marino);
}
.dia-titulo .cuantas { font-size: .76rem; font-weight: 400; color: var(--texto-suave); }
.dia-grupo.es-hoy .dia-titulo { color: var(--turquesa); }
.dia-salidas { display: grid; gap: .3rem; }
.fila-salida {
  display: grid; grid-template-columns: 3.8rem 13rem minmax(8rem, 1fr) 4.5rem 8rem;
  align-items: center; gap: .9rem; width: 100%; max-width: 62rem; text-align: left;
  background: var(--panel); border: none; border-radius: var(--radio);
  padding: .6rem .8rem; font: inherit; color: var(--texto); cursor: pointer;
  box-shadow: var(--sombra);
}
.dia-grupo.es-hoy .fila-salida { background: var(--turquesa-suave); }
.fila-salida:hover { background: var(--arena); }
.fila-salida.activa { outline: 2px solid var(--turquesa); }
.fila-salida .hora { font-weight: 650; }
.fila-salida .quien { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-salida .barco, .fila-salida .personas { color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-salida .estado { justify-self: end; }

@media (max-width: 760px) {
  .fila-salida { grid-template-columns: 3.6rem 1fr auto; row-gap: .15rem; }
  .fila-salida .barco { grid-column: 2 / 4; }
  .fila-salida .personas { grid-column: 2 / 3; }
  .fila-salida .estado { grid-column: 3 / 4; grid-row: 3; }
}

/* ---------- Ficha · contratado, rechazado y pendiente ---------- */
.lista-decisiones { display: grid; gap: .1rem; }
.fila-decision {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .3rem .25rem; border-radius: 8px;
}
.fila-decision .marca { width: 1rem; text-align: center; font-weight: 700; }
.fila-decision.contratado .marca { color: var(--verde); }
.fila-decision.pendiente .marca { color: var(--ambar); }
.fila-decision.no_quiere .marca { color: var(--texto-suave); }
.fila-decision .que { font-weight: 600; }
.fila-decision .detalle { color: var(--texto-suave); font-size: .9rem; }
.fila-decision.no_quiere { opacity: .72; }
.fila-decision.no_quiere .que { font-weight: 400; }
.fila-decision.editable { cursor: pointer; }
.fila-decision.editable:hover { background: var(--arena); }
.fila-decision .controles { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; flex: 1; }
.fila-decision .controles select, .fila-decision .controles input { min-width: 6rem; }
.lista-decisiones.rechazos { margin-top: .4rem; padding-top: .35rem; border-top: 1px solid var(--borde-suave); }

/* ---------- Inicio · pendientes agrupados por fecha ---------- */
.grupo-pendientes + .grupo-pendientes { margin-top: .5rem; }
.grupo-titulo {
  display: flex; align-items: baseline; gap: .4rem;
  padding: .45rem .8rem .2rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave);
}
.grupo-titulo span { font-weight: 400; letter-spacing: 0; }

.item-atencion { display: flex; align-items: center; gap: .4rem; padding-right: .5rem; }
.item-atencion .fila-atencion { flex: 1; }
.item-atencion .tick { flex: none; margin-left: .55rem; }
.item-atencion .enlace { flex: none; font-size: .8rem; }

.ayuda-instruccion { display: flex; gap: .35rem; margin: .5rem 0 .3rem; }
.ayuda-instruccion input { flex: 1; min-width: 0; }
.aviso-ayuda { margin: .3rem 0 0; font-size: .85rem; color: var(--ambar); }

/* ---------- Consultas · pipeline comercial ---------- */
.crm {
  display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .6rem;
  scroll-snap-type: x proximity;
}
/* Las columnas se reparten el ancho disponible. Con sitio de sobra, caben todas sin barra; si la
   ventana es estrecha, ninguna baja de 7.75rem y entonces sí aparece el desplazamiento. Al quitar
   zoom en el navegador hay más sitio, así que el tablero entero queda a la vista. */
.crm-col {
  flex: 1 1 7.75rem; min-width: 7.75rem; max-width: 19rem; display: flex; flex-direction: column; gap: .4rem;
  background: var(--arena); border-radius: var(--radio); padding: .55rem .5rem .7rem;
  scroll-snap-align: start; min-height: 12rem;
}
.crm-col > header { display: flex; align-items: baseline; gap: .4rem; padding: 0 .25rem .1rem; }
.crm-col > header h3 { margin: 0; font-size: .8rem; font-weight: 650; color: var(--marino); min-width: 0; overflow-wrap: anywhere; }
.crm-col .crm-nombre { min-width: 0; overflow-wrap: anywhere; }
.crm-col > header .cuenta {
  margin-left: auto; background: var(--panel); color: var(--texto-suave);
  border-radius: 999px; font-size: .72rem; font-weight: 700; padding: .05rem .45rem;
}
.crm-col.color-turquesa { background: var(--turquesa-suave); }
.crm-col.color-azul { background: #e9f1f5; }
.crm-col.color-ambar { background: var(--ambar-suave); }
.crm-col.color-verde { background: var(--verde-suave); }
.crm-col.color-gris { background: #f0efec; }
.crm-col.destino { outline: 2px dashed var(--turquesa); }
.crm-tarjetas { display: grid; gap: .4rem; flex: 1; align-content: start; }
.crm-vacia { color: var(--texto-suave); text-align: center; margin: .4rem 0; }
.crm-tarjeta {
  background: var(--panel); border-radius: 10px; padding: .5rem .55rem;
  box-shadow: var(--sombra); cursor: pointer; display: grid; gap: .15rem;
}
.crm-tarjeta:hover { outline: 1px solid var(--turquesa); }
.crm-tarjeta.arrastrando { opacity: .5; }
.crm-nombre { display: flex; align-items: center; gap: .35rem; font-weight: 650; font-size: .88rem; }
.crm-ia { margin-left: auto; font-size: .62rem; font-weight: 700; border-radius: 999px; padding: .05rem .35rem; }
.crm-ia.on { background: var(--verde-suave); color: var(--verde); }
.crm-ia.off { background: #eeece8; color: var(--texto-suave); }
.crm-meta { font-size: .78rem; color: var(--texto-suave); }
.crm-estado { margin-top: .15rem; font-size: .78rem; }

/* Tarjeta simple del tablero: manda el NOMBRE. Todo lo demás se mira abriendo la ficha. */
.crm-tarjeta.simple { gap: .3rem; padding: .55rem .6rem; }
.crm-tarjeta.simple .crm-nombre { font-size: .92rem; font-weight: 650; }
.crm-marcas { display: flex; align-items: center; gap: .35rem; }
.crm-marcas .crm-ia { margin-left: 0; }
/* Un punto ámbar, sin texto: «requiere atención». No compite con el nombre. */
.crm-punto { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ambar); display: inline-block; }

/* Control general de la IA, arriba de Consultas y no escondido en Ajustes. */
.barra-ia {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .7rem; border-radius: 10px; margin: .2rem 0 .7rem;
  background: var(--panel); box-shadow: var(--sombra);
}
.barra-ia .texto { color: var(--texto-suave); font-size: .86rem; flex: 1; min-width: 12rem; }
.barra-ia.pausada { border-left: 3px solid var(--rojo); }
.barra-ia.activa { border-left: 3px solid var(--verde); }
.barra-ia.sin_usar { border-left: 3px solid var(--borde); }

/* IA ON / OFF en la cabecera de la ficha: es un botón, no solo una etiqueta. */
.crm-ia.interruptor { border: none; cursor: pointer; font-family: inherit; padding: .2rem .5rem; }
.crm-ia.interruptor:hover { outline: 1px solid var(--turquesa); }
.crm-ia.interruptor:disabled { opacity: .6; cursor: progress; }
.ia-con-aviso { display: inline-flex; align-items: center; gap: .35rem; }
.ia-con-aviso .secundario { font-size: .74rem; }

@media (max-width: 760px) {
  .crm-col { flex: 0 0 85vw; max-width: none; }
}

/* Vista previa de importación: cuántos entran, cuántos ya estaban y qué conviene mirar. */
.resumen-previa { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 .8rem; }
.dato-previa {
  flex: 1 1 8rem; background: var(--arena-suave, #f7f3ec); border-radius: .6rem;
  padding: .55rem .7rem; display: flex; flex-direction: column; gap: .1rem;
}
.dato-previa strong { font-size: 1.25rem; font-weight: 600; line-height: 1.1; }
.dato-previa span { font-size: .78rem; color: var(--tinta-suave, #6b6459); }
.dato-previa.ojo { background: #fdf3e0; }

/* «Para empezar»: la marca dice si el paso está hecho; el color nunca va solo. */
.marca-paso { display: inline-block; width: 1.1rem; font-weight: 600; }
.marca-paso.si { color: var(--verde, #2f7d5b); }
.marca-paso.no { color: var(--tinta-suave, #9a9186); }

/* Acceso directo a la conversación desde cualquier ficha. */
.boton.conversacion { display: inline-flex; align-items: center; gap: .35rem; }
.boton.conversacion .punto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--rojo, #b4462f); }
/* Mientras una decisión se está editando, la fila deja de comportarse como botón. */
.fila-decision.editando { cursor: default; background: var(--arena-suave, #f7f3ec); }
.fila-decision.editando .controles { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* Interruptor de respuesta automática, a la vista dentro de la conversación. */
.interruptor-ia {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin: .6rem .9rem 0; padding: .6rem .8rem;
  background: var(--arena-suave, #f7f3ec); border-radius: .7rem;
}
.interruptor-ia.encendido { background: #e8f4ef; }
.interruptor-ia .texto { flex: 1 1 14rem; }
.interruptor-ia .detalle { font-size: .82rem; color: var(--tinta-suave, #6b6459); }
.palanca {
  flex: 0 0 auto; width: 2.7rem; height: 1.5rem; border-radius: 1rem; border: none;
  background: #c8c2b8; position: relative; cursor: pointer; padding: 0; transition: background .15s;
}
.palanca.on { background: var(--verde, #2f7d5b); }
.palanca .bola {
  position: absolute; top: .15rem; left: .15rem; width: 1.2rem; height: 1.2rem;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.palanca.on .bola { transform: translateX(1.2rem); }
.palanca:focus-visible { outline: 2px solid var(--marino, #12505f); outline-offset: 2px; }

/* Sugerencia esperando en el cuadro de redacción. */
.sugerencia-lista {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .4rem 0 .5rem; border-bottom: 1px dashed #d9d2c6; margin-bottom: .5rem;
}
.redactor.con-sugerencia textarea { background: #fbfaf6; }

/* El canal de cada mensaje, siempre visible. */
.canal-msg {
  display: inline-block; font-size: .72rem; padding: .05rem .4rem; border-radius: .4rem;
  background: #ece7dd; color: var(--tinta-suave, #6b6459); margin-right: .25rem;
}
.canal-msg.email { background: #e4ecf3; }
.canal-msg.whatsapp { background: #e6f2ea; }

/* Control general de la IA, arriba de Mensajes. */
.control-ia-general {
  padding: .6rem .9rem .8rem; border-bottom: 1px solid #e6e0d4; background: var(--arena-suave, #f7f3ec);
}
.control-ia-general .linea-estado { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .5rem; }
.control-ia-general .linea-estado .detalle { font-size: .82rem; color: var(--tinta-suave, #6b6459); flex-basis: 100%; }
.control-ia-general .acciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.boton.peligro { background: #a8412c; color: #fff; }
.boton.peligro:hover { background: #8e3524; }

.sync-vivo { font-size:.78rem; font-weight:700; color:var(--verde, #1f7a62); white-space:nowrap; padding:.25rem .45rem; border-radius:999px; background:rgba(31,122,98,.08); }
.acciones.vertical { display:flex; flex-direction:column; align-items:stretch; gap:.45rem; }

/* V6 · claridad de Contactos y editor visual de scripts */
.resumen-contactos-crm {
  display:flex; flex-wrap:wrap; gap:.55rem; align-items:center;
  margin:.55rem 0 .75rem; padding:.55rem .75rem;
  border:1px solid var(--borde, #dedbd2); border-radius:.8rem;
  background:rgba(255,255,255,.65); color:var(--texto-suave, #6d6a62); font-size:.82rem;
}
.resumen-contactos-crm span { padding:.22rem .48rem; border-radius:999px; background:rgba(13,103,116,.06); }
.resumen-contactos-crm strong { color:var(--texto, #292824); }
.chips-variables { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin:.15rem 0 .25rem; }
.chip-variable {
  appearance:none; border:1px solid rgba(13,103,116,.22); background:rgba(13,103,116,.06);
  color:var(--primario, #0d6774); border-radius:999px; padding:.24rem .48rem; font:inherit;
  font-size:.74rem; font-weight:700; cursor:pointer;
}
.chip-variable:hover { background:rgba(13,103,116,.12); }
.editor-mensaje > details, .editor-mensaje { scroll-margin-top:1rem; }
.bloque-idioma { padding:.7rem; border:1px solid var(--borde, #dedbd2); border-radius:.7rem; background:rgba(255,255,255,.55); }

/* Base maestra de contactos: no es una pipeline. */
.contactos-resumen{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.2rem 0 .7rem}
.contactos-resumen>span{background:var(--blanco,#fff);border:1px solid var(--borde,#e4e1d8);border-radius:999px;padding:.38rem .65rem;font-size:.82rem}
.contactos-resumen .secundario{background:transparent;border-color:transparent}
.filtros-contactos{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.55rem}
.ayuda-contactos{margin:.2rem 0 .7rem}
@media (max-width: 760px){
  .contactos-resumen{gap:.35rem}
  .contactos-resumen>span{font-size:.75rem}
  .filtros-contactos{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.2rem}
  .filtros-contactos .boton{white-space:nowrap}
}

/* V7.4 · Contactos como fichas, no como tabla. */
.contactos-fichas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.75rem;
  align-items:start;
}
.contacto-ficha-resumen{
  background:var(--superficie, #fff);
  border:1px solid var(--borde, #e7e2d9);
  border-radius:14px;
  padding:.9rem 1rem;
  min-height:112px;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.contacto-ficha-resumen:hover,.contacto-ficha-resumen:focus{
  outline:none;
  border-color:var(--principal, #0c6b73);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
.contacto-ficha-cab{display:flex;gap:.65rem;align-items:flex-start;justify-content:space-between}
.contacto-ficha-nombre{font-weight:750;font-size:1rem;line-height:1.2;overflow-wrap:anywhere}
.contacto-ficha-meta{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.55rem;font-size:.78rem;color:var(--texto-suave,#777)}
.contacto-ficha-ultima{margin-top:.55rem;font-size:.74rem;color:var(--texto-suave,#777)}
@media (max-width:720px){.contactos-fichas{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.contactos-fichas{grid-template-columns:1fr}}

/* El destino de cierre queda a mano mientras se arrastra, aunque el tablero sea ancho. */
.crm:has(.crm-tarjeta.arrastrando) .crm-col[data-col="cerrado"] {
  position: sticky;
  right: 0;
  z-index: 3;
  box-shadow: -5px 0 14px #153b4020;
}

.titulo-etapa-editable { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.titulo-etapa-editable:hover { text-decoration: underline; }
.crm-ocultas { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .2rem 0 .6rem; }
.titulo-etapa-editable:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 4px; }


/* ================================================================== */
/* Conversación de UN cliente a pantalla completa (7 oct 2026)         */
/* Al abrir un lead se ve solo su conversación: sin la lista de los    */
/* demás y sin la ficha lateral (se abre con su botón). Cada mensaje   */
/* dice por dónde llegó o salió, con la palabra y con su color.        */
/* ================================================================== */
:root {
  --canal-whatsapp: #1c6f47; --canal-whatsapp-fondo: #e2f3e9;
  --canal-email: #1d5a92; --canal-email-fondo: #e2ecf7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canal-whatsapp: #7fd8a8; --canal-whatsapp-fondo: #173528;
    --canal-email: #93c2ee; --canal-email-fondo: #17293d;
  }
}

.conv.solo-cliente { grid-template-columns: minmax(0, 1fr); }
.conv.solo-cliente .conv-panel { display: none; }
.conv.solo-cliente.con-ficha { grid-template-columns: minmax(0, 1fr) 380px; }
.conv.solo-cliente.con-ficha .conv-panel { display: flex; }

.cab-cliente { gap: .7rem; padding: .6rem .9rem; flex-wrap: nowrap; }
.cab-cliente .cab-quien { flex: 1; min-width: 0; }
.cab-cliente h2 { font-size: 1.08rem; }
.cab-cliente .datos { font-size: .8rem; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-cliente .boton { flex: none; }

/* Qué canales ha usado esta conversación, y mirar uno solo. */
.canales-conv {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .5rem .9rem; border-bottom: 1px solid var(--borde-suave); background: var(--panel);
}
.canales-conv .rotulo, .elegir-canal .rotulo {
  font-size: .72rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; margin-right: .2rem;
}

/* La conversación ocupa la pantalla, pero el texto se lee en una columna cómoda, centrada. */
.conv.solo-cliente .hilo { padding: 1rem max(1rem, calc((100% - 64rem) / 2)); gap: .7rem; }
.conv.solo-cliente .burbuja { max-width: 80%; font-size: .95rem; padding: .65rem .8rem; }
.conv.solo-cliente .interruptor-ia { margin-left: max(.9rem, calc((100% - 64rem) / 2)); margin-right: max(.9rem, calc((100% - 64rem) / 2)); }

/* El canal de cada mensaje: lo primero de la burbuja, con su nombre, y una franja del mismo color. */
.burbuja .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-bottom: .35rem; }
.canal-msg {
  font-size: .72rem; font-weight: 650; padding: .12rem .55rem; border-radius: 999px; margin-right: 0;
  background: var(--arena-honda); color: var(--texto);
}
.canal-msg.whatsapp { background: var(--canal-whatsapp-fondo); color: var(--canal-whatsapp); }
.canal-msg.email { background: var(--canal-email-fondo); color: var(--canal-email); }
.burbuja.via-whatsapp { border-left: 4px solid var(--canal-whatsapp); }
.burbuja.via-email { border-left: 4px solid var(--canal-email); }
.asunto-msg { font-size: .84rem; font-weight: 600; margin: 0 0 .35rem; white-space: normal; }
/* Lo que el cliente rellenó en el formulario de la web: dos columnas, etiqueta y valor, como en el
   correo que avisa de cada solicitud. Su mensaje ocupa el ancho entero. */
.canal-msg.formulario { background: var(--turquesa-suave); color: var(--marino); }
.form-msg { margin: .15rem 0 0; display: grid; grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr); gap: .28rem .9rem; white-space: normal; }
.form-msg dt { color: var(--texto-suave); font-size: .82em; padding-top: .14em; }
.form-msg dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.form-msg dt.largo { grid-column: 1 / -1; margin-top: .3rem; padding-top: .45rem; border-top: 1px solid var(--borde-suave); }
.form-msg dd.largo { grid-column: 1 / -1; font-weight: 400; white-space: pre-wrap; }
@media (max-width: 520px) {
  .form-msg { grid-template-columns: minmax(5.5rem, 40%) minmax(0, 1fr); gap: .3rem .6rem; }
}
.asunto-msg span { font-weight: 400; color: var(--texto-suave); }

/* En un correo, la copia del correo anterior queda plegada: se lee lo que se ha escrito ahora. */
.cita-correo { margin-top: .55rem; border-top: 1px dashed var(--borde); padding-top: .35rem; white-space: normal; }
.cita-correo summary { cursor: pointer; font-size: .78rem; color: var(--marino-claro); }
.cita-correo > div { margin-top: .35rem; color: var(--texto-suave); font-size: .86rem; white-space: pre-wrap; }

/* Responder: por dónde sale y a quién, antes de escribir. */
.conv.solo-cliente .redactor { padding: .7rem max(.9rem, calc((100% - 64rem) / 2)) .8rem; }
.conv.solo-cliente .redactor textarea { min-height: 72px; }
.responder-por { display: grid; gap: .4rem; }
.responder-por:empty { display: none; }
.responder-por .aviso { margin: 0; }
.elegir-canal { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.opcion-canal {
  display: inline-flex; align-items: baseline; gap: .45rem; border: 1px solid var(--borde); background: var(--panel);
  border-radius: 10px; padding: .32rem .7rem; font: inherit; font-size: .86rem; color: var(--texto); cursor: pointer;
}
.opcion-canal span { color: var(--texto-suave); font-size: .78rem; }
.opcion-canal.fija { cursor: default; }
.opcion-canal.activo.whatsapp, .opcion-canal.fija.whatsapp { border-color: var(--canal-whatsapp); background: var(--canal-whatsapp-fondo); }
.opcion-canal.activo.email, .opcion-canal.fija.email { border-color: var(--canal-email); background: var(--canal-email-fondo); }
.opcion-canal.activo strong::before { content: "✓ "; }
.opcion-canal:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; }

@media (max-width: 1100px) {
  .conv.solo-cliente .conv-hilo { display: flex; border: 1px solid var(--borde); }
  .conv.solo-cliente.con-ficha .conv-panel { display: flex; border: 1px solid var(--borde); margin-top: .6rem; }
  .conv.solo-cliente .burbuja { max-width: 92%; }
  .cab-cliente { flex-wrap: wrap; }
}

/* La franja de arriba: canales a la izquierda, interruptor de la IA a la derecha, en una línea. */
.barra-conv {
  display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap;
  padding: .45rem max(.9rem, calc((100% - 64rem) / 2)); border-bottom: 1px solid var(--borde-suave); background: var(--panel);
}
.barra-conv .canales-conv { flex: 1 1 auto; padding: 0; border: none; background: none; }
.barra-conv .interruptor-ia { flex: 0 1 auto; margin: 0 !important; padding: .3rem .6rem; gap: .5rem; }
.barra-conv .interruptor-ia .texto { flex: 0 1 auto; }
.barra-conv .interruptor-ia .detalle { display: none; }
.barra-conv .interruptor-ia strong { font-size: .84rem; font-weight: 600; }
.conv.solo-cliente .redactor textarea { min-height: 60px; }

/* En oscuro, lo que enviamos nosotros también se lee: el fondo claro de la burbuja no cambiaba. */
@media (prefers-color-scheme: dark) {
  .burbuja.saliente { background: #16352f; border-color: #22514a; }
  .burbuja.interna { background: #332a17; border-color: #4a3d1f; }
  .burbuja.borrador { background: var(--panel); }
  .interruptor-ia { background: #1b242d; }
  .interruptor-ia.encendido { background: #16302a; }
  .redactor.con-sugerencia textarea { background: #101820; }
}


/* ---------- El cuadro de respuesta no se come la conversación (7 oct 2026) ---------- */
/* En la conversación de un cliente va recogido en una línea; se abre al pulsarlo. */
.redactor.plegable.plegado { padding-top: .5rem; padding-bottom: .5rem; }
.redactor.plegable.plegado > :not(.barra-plegada) { display: none; }
.redactor.plegable:not(.plegado) > .barra-plegada { display: none; }
.barra-plegada {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: none; padding: 0; cursor: text;
}
.barra-plegada .falso-campo {
  flex: 1 1 12rem; min-width: 0; padding: .55rem .8rem; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--panel); color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-plegada .falso-campo.con-texto { color: var(--texto); border-style: dashed; }
.barra-plegada:hover .falso-campo, .barra-plegada:focus-visible .falso-campo { border-color: var(--turquesa); }
.barra-plegada:focus-visible { outline: none; }
.barra-plegada .resumen-canal { display: flex; align-items: center; gap: .4rem; flex: 0 1 auto; min-width: 0; }
.barra-plegada .opcion-canal { padding: .25rem .6rem; }
/* Abierto, tampoco pasa de algo menos de media pantalla: si no cabe, se desplaza por dentro. */
.conv.solo-cliente .redactor.plegable:not(.plegado) { max-height: 46vh; overflow-y: auto; gap: .4rem; }
.conv.solo-cliente .redactor.plegable textarea { min-height: 56px; }
.redactor-pie .recoger { margin-left: auto; }
.nota-pruebas { margin: 0; font-size: .8rem; color: #8a5a10; }
.nota-pruebas a { color: inherit; }
@media (prefers-color-scheme: dark) { .nota-pruebas { color: #e0b96a; } }
@media (max-width: 720px) {
  .barra-plegada .resumen-canal .opcion-canal span, .barra-plegada .resumen-canal .nota-pequena { display: none; }
}

/* Secuencia de seguimientos por correo en la tarjeta de Email Leads: una línea discreta. */
.crm-secuencia { font-size: .66rem; color: var(--texto-suave); margin-top: .2rem; line-height: 1.25; }
.crm-secuencia.tono-ambar { color: #8a6a1f; }
.crm-secuencia.tono-azul { color: #2c5d8a; }
.crm-secuencia.tono-rojo { color: #b23b3b; }
.crm-turno { font-size: .64rem; font-weight: 700; letter-spacing: .02em; margin-top: .25rem; }
.crm-turno.tono-rojo { color: #b23b3b; }
.crm-turno.tono-ambar { color: #8a6a1f; }
.crm-seguimientos { margin-top: .15rem; }

/* Inicio de Joan (1.12): lo que requiere atención */
.inicio-bloque { margin-bottom: 1rem; }
.rejilla-incompletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
.reserva-incompleta { border: 1px solid var(--linea-suave); border-left: 4px solid var(--ambar); border-radius: 10px; padding: .7rem .8rem; display: grid; gap: .45rem; align-content: start; }
.reserva-incompleta.urgente { border-left-color: var(--rojo); }
.reserva-incompleta .ri-cab { display: grid; gap: .1rem; }
.reserva-incompleta .detalle { color: var(--texto-suave); font-size: .82rem; }
.reserva-incompleta .ri-falta { font-size: .85rem; }
.reserva-incompleta ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.reserva-incompleta li.clave { font-weight: 600; }
.reserva-incompleta .boton { justify-self: start; }
.item-atencion.con-acciones { flex-wrap: wrap; border-bottom: 1px solid var(--linea-suave); }
.item-atencion.con-acciones .fila-atencion { border-bottom: none; flex: 1 1 16rem; min-width: 0; cursor: default; }
.item-atencion.con-acciones button.fila-atencion { cursor: pointer; }
.acciones-fila { display: flex; gap: .35rem; flex: none; padding: .3rem 0; }
.lista-atencion .detalle-largo { white-space: normal; }
.inicio-ok { color: var(--texto-suave); font-size: .85rem; margin: .2rem 0 1rem; }
.inicio-pie { margin: .5rem 0 1rem; }
@media (max-width: 640px) {
  .acciones-fila { width: 100%; padding: 0 .7rem .5rem; }
}

/* Clientes nuevos (1.13): pocas líneas en la tarjeta y en la ficha */
.crm-postventa { display: grid; gap: .1rem; margin-top: .25rem; }
.crm-postventa .crm-linea { font-size: .78rem; color: var(--texto); }
.crm-postventa .crm-linea.aviso { color: var(--ambar-texto, #8a5a00); font-weight: 600; }
.crm-postventa .crm-siguiente { font-size: .76rem; color: var(--texto-suave); margin-top: .1rem; }
.crm-postventa .boton { justify-self: start; margin-top: .3rem; }
.lineas-pv { display: grid; gap: .15rem; margin: .2rem 0 .5rem; font-size: .9rem; }
.lineas-pv .aviso-linea { font-weight: 600; }
.linea-ingresos { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .6rem .2rem 0; font-size: .88rem; border-top: 1px solid var(--linea-suave); margin-top: .5rem; }
.precio-up { width: 7.5rem; }
.bloque-ficha .acciones-fila select { max-width: 9rem; }

/* Upgrades / Solicitudes: de dónde sale el estado (Manual · IA · Reserva · Mensaje). */
.etiqueta-fuente { display: inline-block; margin-left: .4rem; padding: 0 .4rem; border-radius: 999px; font-size: .72rem; font-weight: 500; line-height: 1.4rem; background: #eef1f3; color: #55606a; vertical-align: middle; }
.etiqueta-fuente.nivel-azul { background: #e6f0fb; color: #1f5a96; }
.etiqueta-fuente.nivel-ambar { background: #fdf3e1; color: #8a5a00; }
@media (prefers-color-scheme: dark) { .etiqueta-fuente { background: #2a3036; color: #c3ccd4; } }
/* Email Leads: espacio mínimo para los dos estados de respuesta, sin tocar los otros tableros. */
.crm-email .crm-col { min-width: 10.75rem; }
.crm-email .crm-col > header h3 { overflow-wrap: normal; }
.crm-email-estado { min-width: 0; }

/* 1.17 · En cada mensaje: CLIENTE o CAP CANA CHARTERS, y si es un correo manual */
.burbuja .lado-msg { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .05rem .4rem; border-radius: 999px; }
.burbuja .lado-msg.cliente { background: var(--turquesa-suave, #e3f5f3); color: var(--texto, #1c2b33); }
.burbuja .lado-msg.empresa { background: var(--marino, #1d3557); color: #fff; }
.burbuja .tipo-msg { font-size: .7rem; color: var(--texto-suave, #5b6770); border: 1px solid currentColor; border-radius: 999px; padding: 0 .4rem; }

/* ---------- 1.22 · IA general, modo de prueba y seguimientos FU1–FU4 ---------- */
.crm-ia.prueba { background: #e8e4fb; color: #4b3a9c; }
.crm-ia.pausa { background: var(--ambar-suave); color: var(--ambar); }
.barra-ia.general { display: grid; gap: .4rem; }
.barra-ia.general .ia-fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.barra-ia.general .ia-cifras { font-size: .8rem; color: var(--texto-suave); gap: .35rem .9rem; }
.ia-cifra { display: inline-flex; align-items: baseline; gap: .2rem; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.ia-cifra strong { color: var(--texto); font-size: .9rem; }
.ia-cifra.pulsable { cursor: pointer; text-decoration: underline dotted; }
.ia-cifra.aviso { color: var(--rojo); }
.ia-canal .estado-etiqueta { font-size: .8rem; }
.ia-prueba-chip { font-size: .76rem; font-weight: 700; color: #4b3a9c; background: #e8e4fb; border-radius: 999px; padding: .15rem .55rem; }
.ia-prueba-chip.detenida { color: var(--rojo); background: var(--rojo-suave); }
.confirmacion { display: flex; gap: .5rem; align-items: flex-start; justify-content: flex-start; margin: .7rem 0; font-weight: 600; cursor: pointer; }
.confirmacion.oculto { display: none; }
.alcance-ia { border: 1px solid var(--borde); border-radius: 10px; padding: .5rem .7rem; margin: .8rem 0 .4rem; display: grid; gap: .5rem; }
.alcance-ia legend { font-weight: 650; padding: 0 .3rem; }
.opcion-radio { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; }
.opcion-radio input { width: auto; flex: none; margin-top: .25rem; }
.opcion-radio small { color: var(--texto-suave); }
.fu-texto { width: 100%; min-height: 7rem; font: inherit; }
.lista-atencion { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.aviso.rojo { background: var(--rojo-suave); border-color: #f0cdc4; color: var(--rojo); }
/* Más columnas en los tableros: los seguimientos son más estrechos y el tablero se desplaza con botones. */
.crm-col[data-col^="fu"] { flex-basis: 7.25rem; min-width: 7.25rem; }
.crm-email .crm-col[data-col^="fu"] { min-width: 8.5rem; }
.crm-col[data-col^="fu"] > header h3 { font-size: .74rem; }
.crm-desplazar { display: flex; justify-content: flex-end; gap: .3rem; margin: -.3rem 0 .3rem; }
.crm-desplazar button { border: 1px solid var(--borde); background: var(--panel); border-radius: 999px; width: 2rem; height: 1.7rem; cursor: pointer; color: var(--marino); }
.crm-desplazar button:hover { border-color: var(--turquesa); }
.crm-canal-col { display: block; font-size: .68rem; font-weight: 600; color: var(--texto-suave); letter-spacing: .02em; }
/* Con 10–12 columnas, los títulos no se parten letra a letra: cada columna tiene su ancho y el tablero se desplaza. */
.crm-col { min-width: 8.5rem; }
.crm-col > header h3 { overflow-wrap: normal; word-break: normal; }
.crm-col[data-col^="fu"] { min-width: 7.5rem; }
.crm-col[data-col^="fu"] > header h3 { white-space: nowrap; }
@media (max-width: 760px) { .crm-col, .crm-col[data-col^="fu"] { min-width: 0; } }

/* 1.24 · DRY RUN de los seguimientos */
.dry-run { border-bottom: 1px solid var(--borde, #e6e2d8); padding: .35rem 0; }
.dry-run summary { cursor: pointer; font-size: .8rem; }
.dry-run-texto { white-space: pre-wrap; font: inherit; font-size: .78rem; background: var(--fondo-suave, #f7f5f0); padding: .5rem; border-radius: 8px; }