/* Estilo del CRM Haky. Sin frameworks, un solo archivo.

   TEMA SNEAT (2026-09-21). El dueno pidio que el CRM se viera identico a la
   plantilla Sneat (themeselection.com, "vertical menu template"): menu
   lateral blanco con secciones, barra de arriba despegada, todo dentro de
   tarjetas blancas con sombra suave. Medidas, grises y sombras son los de
   Sneat, copiados de su core.css. El mismo dia pidio cambios sobre eso: la
   letra es NUNITO de 14px en toda la web, el color principal es el gris
   carbon #1F2937 (tambien el fondo del menu lateral) y el NARANJA DEL LOGO
   (#ff6600) queda solo de acento, en pocos lugares: la opcion activa del
   menu, los contadores de sin leer, lo de IA, el dia de hoy y el logo. Una
   primera prueba con todo en naranja resulto "demasiado naranja". Si hay que
   cambiar un color, se cambia aqui y no regla por regla.

   Lo que NO cambio: ninguna opcion, boton ni pantalla. Solo la pinta. */

:root {
  /* Tema 2026-10-03 (capturas de referencia del dueno): azul marino
     profundo para menu y botones principales, fondo gris-azulado muy claro,
     tarjetas blancas con borde fino y esquinas redondeadas. */
  --primario: #111c2e;
  --primario-hover: #0a1322;
  --primario-rgb: 17, 28, 46;
  --primario-suave: #e8edf5;
  --primario-borde: #cfd8e6;

  /* El naranja del logo, solo de acento (insignias, opcion activa, iconos). */
  --acento: #ff6600;
  --acento-hover: #e65c00;
  --acento-claro: #ff8a3d;
  --acento-rgb: 255, 102, 0;
  --acento-suave: #fff0e6;

  /* El menu lateral oscuro. */
  --menu-fondo: #111c2e;
  --menu-texto: #c4cdda;
  --menu-seccion: #7b879b;
  --secundario: #64748b;
  --secundario-suave: #eef2f7;
  --exito: #22c55e;
  --exito-suave: #dcfce7;
  --exito-texto: #15803d;
  --info: #3b82f6;
  --info-suave: #e0ecff;
  --info-texto: #1d4ed8;
  --aviso: #f59e0b;
  --aviso-suave: #fff4d6;
  --aviso-borde: #fde68a;
  --aviso-texto: #b45309;
  --peligro: #ef4444;
  --peligro-suave: #fee2e2;
  --peligro-borde: #fecaca;
  --oscuro: #0f172a;

  --fondo: #f4f6fa;
  --papel: #fff;
  --fondo-chat: #f5f7fb;
  --titulo: #1e2636;
  --texto: #5b6578;
  --texto-suave: #9aa3b2;
  --borde: #e7ebf2;
  --borde-input: #d3dae5;
  --hover: #f1f4f9;

  --radio: .625rem;
  --radio-sm: .375rem;
  --radio-lg: .75rem;
  --sombra: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
  --sombra-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --sombra-lg: 0 8px 24px rgba(15, 23, 42, .12);
  --sombra-xs: 0 1px 1px rgba(15, 23, 42, .04);
  --sombra-foco: 0 0 0 3px rgba(17, 28, 46, .18);

  --ancho-menu: 13.75rem;
  --ancho-menu-plegado: 5.25rem;
  --alto-barra: 3.5rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.375;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primario); text-decoration: none; }
a:hover { color: var(--primario-hover); text-decoration: none; }
a:not([class]):hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { color: var(--titulo); font-weight: 600; line-height: 1.37; }
h1 { margin-top: 0; font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
hr { border: 0; border-top: 1px solid var(--borde); }
/* Azul claro y letra oscura, opaco. Antes era el gris carbon al 20%: sobre la
   burbuja propia (que ES gris carbon) el resaltado quedaba del mismo color que
   el fondo y no se veia nada, y sobre la blanca salia un gris muy tenue --
   parecia que el texto no se dejaba seleccionar (2026-09-23). Al fijar tambien
   el color de la letra, se lee igual sobre fondo claro que sobre oscuro. */
::selection { background: #b9d7fb; color: var(--oscuro); }

/* ---------------------------------------------------------------------------
   El marco: menu lateral + barra de arriba + contenido.

   El menu pasa de la franja angosta oscura de icono-sobre-etiqueta (la de
   Kommo, 2026-08-15) al menu blanco de Sneat: icono y etiqueta en la misma
   linea, titulos de seccion en gris y el activo en violeta claro con una
   rayita a la derecha. Queda FIJO (no `sticky` como antes) porque ahora se
   puede plegar a solo iconos y, plegado, se despliega encima del contenido al
   pasar el mouse -- igual que en Sneat. El empuje del contenido sale de la
   misma variable que el ancho del menu, asi que no hay dos numeros que
   mantener iguales a mano (que era el motivo para no usar `fixed`).
   --------------------------------------------------------------------------- */
.app-shell { min-height: 100vh; }

.layout-pagina {
  min-height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: padding-left .3s;
}
.con-menu .layout-pagina { padding-left: var(--ancho-menu); }
.menu-plegado .con-menu .layout-pagina { padding-left: var(--ancho-menu-plegado); }

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1080;
  width: var(--ancho-menu);
  background: var(--menu-fondo);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  transition: width .3s, transform .3s;
}

.sidebar-cabecera {
  position: relative;
  flex: none;
  height: 64px;
  margin-top: 12px;
  padding: 0 2rem;
  display: flex;
  align-items: center;
}
.sidebar-marca {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--titulo);
  white-space: nowrap;
}
.sidebar-marca:hover { color: #fff; }
/* El logo de Haky: entero (circulo + "haky") con el menu abierto y solo el
   circulo con el menu plegado. */
.sidebar-logo-completo { display: block; height: 36px; width: auto; }
.sidebar-logo-circulo { display: none; width: 34px; height: 34px; }
/* El boton redondo naranja que asoma del borde del menu. El borde grueso del
   color del fondo es el truco de Sneat para que parezca "mordido". */
.sidebar-plegar {
  position: absolute;
  left: 15.2rem;
  transition: left .3s;
  z-index: 3;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 7px solid var(--fondo);
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 1.375rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sidebar-plegar i { font-size: 1.1rem; transition: transform .3s; }
.menu-plegado .sidebar-plegar i { transform: rotate(180deg); }

.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .25rem 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.sidebar-seccion {
  position: relative;
  margin: 1rem 0 .5rem;
  padding: .625rem 2rem;
  font-size: .8125rem;
  line-height: 1.375;
  color: var(--menu-seccion);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.sidebar-seccion::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1rem;
  height: 1px;
  background: rgba(255, 255, 255, .14);
  transition: width .3s;
}
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.625rem;
  margin: .125rem 1rem;
  padding: .3125rem .875rem;
  border-radius: var(--radio);
  color: var(--menu-texto);
  font-size: 13px;
  white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.sidebar-link i { flex: none; width: 1.375rem; font-size: 1.375rem; margin-right: .5rem; text-align: center; }
.sidebar-link span { overflow: hidden; text-overflow: ellipsis; }
.sidebar-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* La opcion activa, SIN naranja (pedido del dueno): fondo gris claro, como
   el del mouse encima pero un poco mas marcado, letra e icono blancos y la
   rayita del borde en gris claro. */
.sidebar-link-activo, .sidebar-link-activo:hover { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; }
/* La rayita pegada al borde derecho del menu, junto al activo. */
.sidebar-link-activo::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1rem;
  bottom: 0;
  width: .25rem;
  border-radius: var(--radio) 0 0 var(--radio);
  background: var(--menu-texto);
}

/* Plegado: solo iconos, y se QUEDA angosto (pedido del dueno: antes se abria
   entero al pasar el mouse, como Sneat). El nombre de cada opcion sale en el
   globo oscuro de .menu-globo al pasar el mouse por su icono, y el boton
   redondo sigue a la vista, en el borde, para volver a abrirlo. */
.menu-plegado .sidebar { width: var(--ancho-menu-plegado); }
.menu-plegado .sidebar-link span,
.menu-plegado .sidebar-seccion span,
.menu-plegado .sidebar-logo-completo { display: none; }
.menu-plegado .sidebar-logo-circulo { display: block; }
.menu-plegado .sidebar-cabecera { padding: 0 0 0 1.5625rem; }
.menu-plegado .sidebar-plegar { left: calc(var(--ancho-menu-plegado) - 1.05rem); }
.menu-plegado .sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; }
.menu-plegado .sidebar-link i { margin-right: 0; }
.menu-plegado .sidebar-seccion { height: 2.625rem; }
.menu-plegado .sidebar-seccion::before { width: 1.5rem; left: 1.875rem; }

/* El globo con el nombre de la opcion (menu plegado), como el de DonWeb:
   oscuro, a la derecha del icono, con su piquito. Lo crea el script de
   base.html y lo pone en <body>. */
.menu-globo {
  position: fixed;
  z-index: 1200;
  transform: translateY(-50%);
  padding: .4rem .75rem;
  border-radius: var(--radio);
  background: var(--oscuro);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.menu-globo::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left: 0;
  border-right-color: var(--oscuro);
}
.menu-globo.visible { opacity: 1; visibility: visible; }

/* La barra de arriba, despegada de los bordes como la de Sneat. */
.barra-superior {
  position: sticky;
  top: 1rem;
  z-index: 20;
  flex: none;
  width: calc(100% - 3.25rem);
  /* Sin tope de ancho desde el 2026-10-06 (pedido del dueño: "aprovecha todo
     el espacio"). Con el tope de 1440px, en un monitor de 1920 quedaban unos
     130px vacíos a cada lado. Mismo cambio en .contenido. */
  height: var(--alto-barra);
  margin: 1rem auto 0;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(200%) blur(6px);
  box-shadow: var(--sombra-sm);
}
.barra-menu {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--titulo);
  font-size: 1.625rem;
  line-height: 1;
  cursor: pointer;
}
.barra-buscar {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .875rem;
}
.barra-buscar i { flex: none; font-size: 1.375rem; color: var(--titulo); }
form.barra-buscar input {
  flex: 1;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: .5rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--titulo);
  font-size: 13px;
  outline: none;
}
form.barra-buscar input:focus { border: 0; box-shadow: none; }
.barra-buscar input::placeholder { color: var(--texto-suave); }
.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: none; }

/* Esconder la barra de arriba (2026-09-23). Queda una tira transparente con
   el solo boton para devolverla: el buscador se va sin que desaparezca la
   forma de traerlo de vuelta. El alto de esa tira se escribe en la MISMA
   variable que usa la barra entera, porque hay pantallas que miden contra
   ella (la bandeja: `calc(100vh - 1rem - var(--alto-barra))`) y con dos
   numeros sueltos quedaria un hueco abajo. Va despues de `:root` a proposito:
   misma especificidad, gana el ultimo. */
.barra-ocultar {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: var(--texto-suave);
  font-size: 1.375rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.barra-ocultar:hover { background: var(--hover); color: var(--titulo); box-shadow: none; }

.barra-oculta { --alto-barra: 1.75rem; }
.barra-oculta .barra-superior {
  background: none;
  backdrop-filter: none;
  box-shadow: none;
}
.barra-oculta .barra-buscar,
.barra-oculta .medidor,
.barra-oculta .sidebar-salir-form { display: none; }
.barra-oculta .barra-ocultar { width: 1.75rem; height: 1.75rem; font-size: 1.25rem; }
.barra-oculta .barra-ocultar i { transform: rotate(180deg); }

/* Medidor de consumo (P77): megas de archivos y tokens de IA, cada uno con
   su barrita. Vive en la barra de arriba desde el tema Sneat; el detalle
   sigue en /uso, a un clic. */
.medidor {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .375rem .75rem;
  border-radius: var(--radio);
  color: var(--texto);
}
.medidor:hover { background: var(--hover); color: var(--titulo); }
.medidor-bloque { display: flex; flex-direction: column; gap: 4px; min-width: 70px; }
.medidor-fila {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8125rem;
  line-height: 1;
}
.medidor-fila i { font-size: 1rem; color: var(--titulo); opacity: .8; }
.medidor-fila .fa-solid { font-size: .8rem; }
/* Cifras de ancho fijo: sin esto el numero se mueve solo al pasar de "9 mil"
   a "10 mil" y el medidor parece que parpadea. */
.medidor-valor { font-variant-numeric: tabular-nums; }
.medidor-barra {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--primario-suave);
  overflow: hidden;
}
.medidor-relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primario);
}
.medidor-alto { background: var(--aviso); }
.medidor-lleno { background: var(--peligro); }
.medidor-sin-tope { font-size: .6875rem; color: var(--texto-suave); line-height: 1; }

/* Aqui vivian .sidebar-admin (el acceso al panel del sistema) y
   .sidebar-usuario (la inicial de quien tiene la sesion abierta). Se quitaron
   de la barra el 2026-08-30; ver el comentario en base.html. */
.sidebar-salir-form { margin: 0; }
button.sidebar-salir {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: var(--titulo);
  font-size: 1.375rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
button.sidebar-salir:hover { background: var(--hover); color: var(--peligro); box-shadow: none; }

.menu-fondo { display: none; }

/* Pantalla angosta: el menu se esconde y se abre encima con el boton de la
   barra de arriba, con el fondo oscurecido detras. */
@media (max-width: 991.98px) {
  .con-menu .layout-pagina,
  .menu-plegado .con-menu .layout-pagina { padding-left: 0; }
  .sidebar,
  .menu-plegado .sidebar { width: var(--ancho-menu); transform: translateX(-100%); }
  .menu-abierto .sidebar,
  .menu-abierto.menu-plegado .sidebar { transform: none; box-shadow: var(--sombra-lg); }
  /* En el celular el menu se abre siempre entero, este plegado o no. */
  .menu-plegado .sidebar-link span,
  .menu-plegado .sidebar-seccion span { display: revert; }
  .menu-plegado .sidebar-logo-completo { display: block; }
  .menu-plegado .sidebar-logo-circulo { display: none; }
  .menu-plegado .sidebar-cabecera { padding: 0 2rem; }
  .menu-plegado .sidebar-link { justify-content: flex-start; padding-left: .875rem; padding-right: .875rem; }
  .menu-plegado .sidebar-link i { margin-right: .5rem; }
  .menu-plegado .sidebar-seccion { height: auto; }
  .menu-plegado .sidebar-seccion::before { width: 1rem; left: 0; }
  .menu-globo { display: none; }
  .menu-abierto .menu-fondo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(34, 48, 62, .5);
  }
  .sidebar-plegar,
  .menu-plegado .sidebar-plegar { left: auto; right: 1rem; border-color: var(--menu-fondo); }
  .sidebar-plegar i { transform: none !important; }
  .barra-menu { display: block; }
  .barra-superior { width: calc(100% - 2rem); padding: 0 1rem; }
  .medidor { display: none; }
  .contenido { padding: 1.25rem 1rem; }
}

.contenido {
  flex: 1;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 1.5rem 1.625rem;
}

.cabecera-seccion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cabecera-seccion h1 { margin-bottom: 0; }
/* Los botones de la cabecera miden lo que dice su texto (el gris de segunda
   trae `flex: 1` para las filas de botones parejos). */
.cabecera-seccion > .boton-secundario, .cabecera-seccion > form .boton-secundario { flex: none; }

/* La cara del agente, arriba a la derecha de su ficha (2026-10-01). La clase
   `cabecera-agente` existe porque esa cabecera pasa a tener TRES cosas (titulo,
   boton y foto) y `space-between` dejaria el boton en el medio: con
   `margin-right: auto` en el titulo, el boton y la foto se agrupan a la
   derecha. Va en una clase propia y no en `.cabecera-seccion` para no mover
   ninguna de las demas pantallas -- con dos hijos el resultado es el mismo,
   pero no hace falta comprobarlo una por una.

   El tamano es fijo (y repetido en el `width`/`height` del <img>) para que la
   cabecera no pegue un salto mientras carga la imagen. */
.cabecera-agente h1 { margin-right: auto; }
.agente-foto {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--secundario-suave);
}
/* La cara y, debajo, si el agente esta encendido (Online) o apagado (Offline).
   Va en un bloque propio para que la etiqueta quede centrada bajo la foto. */
.agente-foto-bloque {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.agente-estado {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 1px 10px;
  border-radius: 999px;
}
.agente-estado-on { background: var(--exito-suave); color: var(--exito-texto); }
.agente-estado-off { background: var(--secundario-suave); color: var(--secundario); }
/* En el celular la cabecera ya va justa (titulo + boton): con la cara a 72 px
   se sale del borde. A 48 entra, y sigue reconociendose. */
@media (max-width: 720px) {
  .agente-foto { width: 48px; height: 48px; }
}

/* El campo para cambiarla, en la ficha del agente: la cara de ahora al lado
   del selector de archivo, para que al elegir uno se vea el cambio sin
   guardar. */
.agente-foto-campo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.agente-foto-campo input[type="file"] { flex: 1; min-width: 0; }
/* En el campo la cara no se encoge en el celular: ahi es el contenido, no un
   adorno de la cabecera. */
@media (max-width: 720px) {
  .agente-foto-campo .agente-foto { width: 72px; height: 72px; }
  .agente-foto-campo { flex-wrap: wrap; }
}
.bloque-form-suelto { margin: -.5rem 0 1.5rem; }

/* Pestanas de la ficha del cliente (P65). Con el tema Sneat son "pildoras"
   (nav-pills, como las de su ficha de usuario): la activa, violeta llena con
   sombra; las otras, texto suelto. Separan CONTENIDO de la misma pantalla. */
.tabs-ficha {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
}
.tab-ficha {
  background: none;
  border: none;
  border-radius: var(--radio);
  padding: .4812rem 1.25rem;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--titulo);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.tab-ficha:hover { color: var(--primario); background: none; }
.tab-ficha-activo, .tab-ficha-activo:hover {
  color: #fff;
  background: var(--primario);
  box-shadow: var(--sombra-foco);
}
/* Cuantos hay, sin tener que entrar a mirar. */
.tab-cuenta {
  display: inline-block;
  min-width: 18px;
  padding: .15em .55em;
  margin-left: 4px;
  border-radius: 50rem;
  background: var(--primario-suave);
  color: var(--primario);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}
.tab-ficha-activo .tab-cuenta { background: #fff; color: var(--primario); }
.panel-ficha[hidden] { display: none; }

/* El selector de embudos de /ventas (2026-09-23) reusa las pildoras de
   arriba; "Embudos" (crear/renombrar/ordenar) no es un embudo mas, asi que
   va aparte con borde punteado. */
.tabs-embudo { margin-bottom: 1rem; }
.tab-embudo-config { border: 1px dashed var(--borde-input); color: var(--texto-secundario, var(--texto)); }
.tab-embudo-config:hover { border-color: var(--primario); color: var(--primario); }

/* Pagos registrados en la ficha del cliente (P64). */
.total-pagado { font-size: 13px; color: var(--texto); }
.total-pagado strong { color: var(--exito-texto); }
/* Etiqueta de estado con la forma del "badge" de Sneat: esquinas de 4px,
   fondo tenue del color y letra del color entero. Casi todas las etiquetas
   del CRM toman esta forma (ver el bloque "Etiquetas" al final). */
.etiqueta-estado {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  padding: .4235em .77em;
  border-radius: var(--radio-sm);
  background: var(--secundario-suave);
  color: var(--secundario);
  white-space: nowrap;
}
.vacio-celda { color: var(--texto-suave); font-size: 13px; }

/* El boton principal de Sneat (btn-primary). El `:where()` deja la parte de
   `button[type="submit"]` con peso cero: sin eso, esa regla le ganaba a
   cualquier clase suelta (.boton-secundario, .enlace-peligro, .boton-mini) y
   los pintaba a todos de azul lleno aunque su clase dijera otra cosa. */
.boton, :where(button[type="submit"]) {
  display: inline-block;
  background: var(--primario);
  color: #fff;
  border: 1px solid var(--primario);
  border-radius: var(--radio);
  padding: .4812rem 1.25rem;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.375;
  text-align: center;
  transition: all .2s ease-in-out;
}
.boton:hover, :where(button[type="submit"]):hover {
  background: var(--primario-hover);
  border-color: var(--primario-hover);
  color: #fff;
  box-shadow: var(--sombra-foco);
  text-decoration: none;
}
:where(button[type="submit"]):disabled, .boton[aria-disabled="true"] { opacity: .45; cursor: default; box-shadow: none; }

/* Avisos con la forma del "alert" de Sneat: fondo tenue del color, letra del
   color entero, esquinas de 6px y sin raya al costado. */
/* Un aviso informativo dentro de una pantalla (P219: "este cobro se esta
   pagando en partes"). Usa los tokens de :root, como toda regla nueva. */
/* El precio final del formulario de servicio (P225): lo que el cliente paga,
   calculado a la vista segun la casilla del IGV. Se destaca porque es el
   numero que de verdad importa, pero sin gritar: el que se escribe arriba
   sigue siendo el precio. */
.precio-final {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  background: var(--info-suave);
  border-radius: 6px;
  padding: 9px 12px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--info-texto);
}
.precio-final-rotulo { font-weight: 600; }
.precio-final strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.precio-final-detalle { font-size: 12.5px; opacity: .85; }

.aviso-info {
  background: var(--info-suave);
  color: var(--info-texto);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 13px;
}

.aviso-error {
  background: var(--peligro-suave);
  color: var(--peligro);
  padding: .75rem 1rem;
  border-radius: var(--radio);
}
.aviso-duplicado {
  background: var(--aviso-suave);
  color: var(--aviso-texto);
  padding: .75rem 1rem;
  border-radius: var(--radio);
  margin-bottom: 16px;
}
/* La entrega del comprobante esta guardada para una fecha futura. No es un
   error ni un peligro: es un "esto esta esperando a proposito", y por eso va
   en el color principal y no en rojo ni ambar. */
.aviso-espera {
  background: var(--primario-suave);
  color: var(--primario);
  padding: .75rem 1rem;
  border-radius: var(--radio);
}

/* Estado de cobranza en la lista de servicios. Reemplaza la palabra
   "pendiente", que era el estado del periodo QUE VIENE y se leia como "este
   cliente no ha pagado" -- justo lo contrario de lo que significaba. */
.etiqueta-al-dia, .etiqueta-vencido, .etiqueta-pagado, .etiqueta-por-cobrar {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  padding: .4235em .77em;
  border-radius: var(--radio-sm);
  white-space: nowrap;
}
.etiqueta-al-dia { background: var(--exito-suave); color: var(--exito-texto); }
.etiqueta-pagado { background: var(--exito-suave); color: var(--exito-texto); }
.etiqueta-vencido { background: var(--peligro-suave); color: var(--peligro); }
/* Ambar, no rojo: hay que cobrarlo, pero todavia no se les paso la fecha. */
.etiqueta-por-cobrar { background: var(--aviso-suave); color: var(--aviso-texto); }

/* El interruptor de "informacion de pagos" de cada persona (P193). Es un
   boton, no una casilla: se ve el estado de VERDAD (incluida la red de
   seguridad) y un clic lo cambia, sin un "Guardar" aparte que se olvide. */
.formulario-pagos { display: inline; }
.pastilla-pagos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  padding: .4235em .77em;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  cursor: pointer;
  white-space: nowrap;
}
.pastilla-pagos-si { background: var(--exito-suave); color: var(--exito-texto); }
.pastilla-pagos-no { background: var(--secundario-suave); color: var(--secundario); }
.pastilla-pagos:hover { border-color: currentColor; }
/* "(por defecto)" = le llega porque no hay nadie marcado, no porque alguien lo
   haya elegido. Se dice en gris para que se note que es otra cosa. */
.pastilla-pagos-motivo { opacity: .7; font-weight: 400; }

/* Historial de periodos, plegado dentro de la fila del servicio. */
.fila-historial > td { background: var(--fondo); padding: 0 12px 12px; }
.fila-historial summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--primario);
  padding: 8px 0;
}
.fila-historial summary:hover { text-decoration: underline; }
.tabla-anidada { margin: 4px 0 8px; background: #fff; }
.tabla-anidada th, .tabla-anidada td { font-size: 13px; }

/* "Ya esta, puedes cerrar". Cierra la pantalla del comprobante: sin esto el
   dueno se queda mirando "pendiente" sin saber si esperar, recargar o cerrar. */
.aviso-listo {
  background: var(--exito-suave);
  color: var(--exito-texto);
  padding: .75rem 1rem;
  border-radius: var(--radio);
  margin-top: 16px;
}

/* Elegir cuando le llega el comprobante al cliente: en la pantalla de
   confirmacion (antes de emitir) y en la del comprobante ya emitido. */
.programar {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.programar legend { font-size: 13px; color: var(--texto); padding: 0 4px; }
.programar label { display: flex; align-items: center; gap: 8px; }
.programar input[type="datetime-local"] { padding: 6px 8px; }
.programar .ayuda { margin: 0; }

.aviso-duplicado p { margin: 0 0 8px; }
.aviso-duplicado p:last-child { margin-bottom: 0; }
.aviso-duplicado ul { margin: 0 0 8px; padding-left: 20px; }
.aviso-duplicado a { color: var(--aviso-texto); font-weight: 600; }

/* Mas fuerte que .aviso-error: no es "algo salio mal", es "lo que estas por
   hacer no vale y no te vas a enterar". Hoy solo lo usa el aviso de que el
   Facturador esta apuntando al ambiente de pruebas de SUNAT (P55). Es el
   unico aviso que conserva un borde: tiene que gritar mas que los demas. */
.aviso-peligro {
  background: var(--peligro-suave);
  color: #e0341a;
  border: 2px solid var(--peligro);
  border-radius: var(--radio);
  padding: .75rem 1rem;
  margin-bottom: 16px;
  line-height: 1.6;
}

.aviso-ok {
  background: var(--exito-suave);
  color: var(--exito-texto);
  padding: .75rem 1rem;
  border-radius: var(--radio);
}

/* La pantalla de ingreso, como la de Sneat: una tarjeta blanca centrada con
   la marca arriba. */
.caja-login {
  max-width: 400px;
  margin: 12vh auto 40px;
  background: var(--papel);
  padding: 2.5rem 2.5rem 2rem;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.caja-login h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.5px;
}
/* El circulo del logo de Haky delante del titulo. */
.caja-login h1::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  background: url("logo-haky-circulo.png") center / contain no-repeat;
}
.caja-login button[type="submit"] { width: 100%; margin-top: .5rem; }

/* Etiqueta y campo con la forma de Sneat (form-label + form-control): la
   etiqueta chica en el color de los titulos, el campo con borde gris claro
   que se vuelve violeta con sombra al escribir. */
form label {
  display: block;
  margin-bottom: 1rem;
  font-size: 13px;
  color: var(--titulo);
}
form input, form select, form textarea {
  width: 100%;
  padding: .543rem .875rem;
  margin-top: .25rem;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  background-color: var(--papel);
  color: var(--titulo);
  font: inherit;
  font-size: 13px;
  line-height: 1.375;
}

/* La ayuda en letra chica dentro de una etiqueta: con la etiqueta de Sneat
   (13px), el <small> del navegador la dejaba en 10px -- ilegible. */
label small { font-size: .78rem; color: var(--texto); }

/* Una tarjeta de Sneat: blanca, sin borde, esquinas de 6px y sombra suave. */
.formulario { max-width: 500px; background: var(--papel); padding: 1.5rem; border-radius: var(--radio); box-shadow: var(--sombra); }

/* Lo comun a TODOS los campos, esten o no dentro de un <form>. Va con
   `:where()` (peso cero) a proposito: cada pantalla que ya ajusta su campo
   (el buscador de la barra, la caja del chat) sigue mandando sobre esto. */
::placeholder { color: var(--texto-suave); opacity: 1; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea):focus {
  outline: 0;
  border-color: var(--primario);
  box-shadow: var(--sombra-foco);
}
:where(input, select, textarea):disabled, :where(input, textarea)[readonly] { background-color: var(--fondo); color: var(--texto); }
/* La flechita del desplegable de Sneat en vez de la del navegador. Los
   `!important` son solo para la flecha: varias pantallas pintan su <select>
   con `background: #fff` (que borraria la imagen) o con un relleno propio (que
   la dejaria encima del texto). */
select:not([multiple]):not([size]):not(.color-columna) {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22' fill='none'%3e%3cpath d='M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z' fill='%2322303e' fill-opacity='0.9'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right .6rem center !important;
  background-size: 18px 20px !important;
  padding-right: 2.1rem !important;
}
/* Casillas y opciones: del tamano de la letra y en violeta. Le gana a
   `form input { width: 100% }` (misma fuerza, viene despues), que las
   estiraba a todo el ancho; cualquier regla con clase le sigue ganando. */
form input:where([type="checkbox"], [type="radio"]),
input:where([type="checkbox"], [type="radio"]) {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0;
  padding: 0;
  vertical-align: -.2em;
  accent-color: var(--primario);
  cursor: pointer;
}
input[type="file"] { font-size: 13px; color: var(--texto); }
input[type="file"]::file-selector-button {
  margin-right: .75rem;
  padding: .375rem .875rem;
  border: 0;
  border-radius: var(--radio);
  background: var(--secundario-suave);
  color: var(--secundario);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--secundario); color: #fff; }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); }
legend { color: var(--titulo); }

/* "Recien contrata" vs "Ya venia usando el servicio" (servicio_form.html).
   Las dos opciones van en un recuadro propio para que se lean como UNA
   pregunta con dos respuestas y no como dos casillas sueltas mas del
   formulario -- de esa eleccion depende si al cliente se le cobra hoy. */
.grupo-arranque {
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 12px 14px 4px;
  margin: 0 0 16px;
}
.grupo-arranque legend { font-size: 13px; color: var(--texto); padding: 0 4px; }
.grupo-arranque .opcion-radio { margin-bottom: 8px; }

/* Mensajes automaticos (/configuracion/mensajes). Cada categoria de envio es
   un <details> colapsable y adentro sus dos canales van en pestanas -- hasta
   el 2026-08-28 estaban los doce formularios abiertos y apilados, y la
   pantalla era un rollo de textos largos donde no se encontraba nada.
   Mismo aire que .tipo-fila (colapsable) y que las pestanas del panel de
   cobro, pero con reglas propias porque aquellas tienen ids fijos y aqui
   cada categoria arma las suyas. */
.lista-mensajes { display: flex; flex-direction: column; gap: 8px; }
.msg-grupo { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); }
.msg-grupo summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.5rem;
  font-weight: 500;
  color: var(--titulo);
  display: flex;
  align-items: center;
  gap: 8px;
}
.msg-grupo summary::-webkit-details-marker { display: none; }
.msg-grupo summary::before {
  content: "\25b8";
  color: var(--texto);
  font-weight: 400;
  transition: transform .15s;
}
.msg-grupo[open] summary::before { transform: rotate(90deg); }
.msg-grupo summary:hover { background: var(--hover); border-radius: var(--radio); }
.msg-grupo[open] summary { border-bottom: 1px solid var(--borde); border-radius: var(--radio) var(--radio) 0 0; }
.msg-grupo-titulo { flex: 1; }
.msg-grupo-contenido { padding: 1rem 1.5rem 1.5rem; }
.msg-grupo-contenido > .ayuda:first-child { margin-top: 0; }

/* Pestanas de canal, sin JavaScript: el radio escondido decide con :checked
   cual boton se ve activo y cual formulario se muestra. Van por clase de
   canal y no por posicion, para que un proposito con un solo canal (el
   correo de seguridad) no dependa del orden. */
.msg-tab-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.msg-tab-cabecera { display: flex; gap: 6px; margin: 12px 0; max-width: 780px; }
.msg-tab-boton {
  flex: 1;
  text-align: center;
  padding: .4812rem 1.25rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--titulo);
  background: var(--fondo);
  border: 0;
  border-radius: var(--radio);
  cursor: pointer;
  margin: 0;
  transition: all .15s;
}
.msg-tab-boton:hover { color: var(--primario); }
.msg-tab-radio-correo:checked ~ .msg-tab-cabecera .msg-tab-boton-correo,
.msg-tab-radio-whatsapp:checked ~ .msg-tab-cabecera .msg-tab-boton-whatsapp {
  background: var(--primario);
  color: #fff;
  box-shadow: var(--sombra-foco);
}
.msg-tab-panel { display: none; }
.msg-tab-radio-correo:checked ~ .msg-tab-panel-correo,
.msg-tab-radio-whatsapp:checked ~ .msg-tab-panel-whatsapp { display: block; }

.mensaje-form { margin-bottom: 0; }
.mensaje-canal { margin: 0 0 12px; font-size: 16px; color: var(--texto); }
.mensaje-canal i { color: var(--texto); }
.mensaje-editado {
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  padding: .4235em .77em;
  margin-left: 6px;
  border-radius: var(--radio-sm);
  background: var(--primario-suave);
  color: var(--primario);
}
/* Las variables se pueden clicar para insertarlas en el texto, asi que se ven
   como algo que se aprieta y no como texto de ayuda. */
.variable-chip {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: .4235em .77em;
  border: 0;
  border-radius: var(--radio-sm);
  background: var(--secundario-suave);
  color: var(--secundario);
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
}
.variable-chip:hover { background: var(--primario-suave); color: var(--primario); }

/* Lista de cuentas de correo (configuracion_correo.html) -- cada cuenta es
   su propio .formulario apilado, con acciones de pausar/eliminar aparte. */
.cuenta-correo { margin-bottom: 16px; }
.cuenta-correo-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cuenta-correo-cabecera h2 { margin: 0; }
.cuenta-correo-estado {
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  padding: .4235em .77em;
  border-radius: var(--radio-sm);
  background: var(--exito-suave);
  color: var(--exito-texto);
}
.cuenta-correo-estado.cuenta-correo-pausada { background: var(--fondo); color: var(--texto); }
.cuenta-correo-acciones-extra { display: flex; gap: 8px; max-width: 500px; margin: -8px 0 24px; }
.cuenta-correo-checks { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.cuenta-correo-check {
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  padding: .4235em .77em;
  border-radius: var(--radio-sm);
  background: var(--secundario-suave);
  color: var(--secundario);
}
.cuenta-correo-check.ok { background: var(--exito-suave); color: var(--exito-texto); }
.cuenta-correo-check.error { background: var(--peligro-suave); color: var(--peligro); }
.cuenta-correo-error { font-size: 13px; margin: -8px 0 16px; }
/* Galeria de vouchers en la pantalla de registrar pago. Reemplaza a un <select>
   donde todas las opciones decian "imagen.jpg" y solo cambiaba la fecha: no
   habia forma de saber cual era el voucher correcto sin abrirlos uno por uno. */
.etiqueta-suelta { font-size: 13px; color: var(--texto); margin: 0 0 8px; }
.galeria-vouchers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.voucher-opcion {
  display: block;
  margin: 0;
  padding: 6px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  background: #fff;
}
.voucher-opcion:hover { border-color: var(--borde-input); background: var(--fondo); }
/* El radio sigue ahi para el teclado y los lectores de pantalla, pero la
   tarjeta entera es lo que se ve y lo que se hace clic. `form input` de arriba
   pone width:100%, asi que hay que sacarlo del flujo a mano. */
.voucher-opcion input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.voucher-opcion.elegido,
.voucher-opcion:has(input[type="radio"]:checked) {
  border-color: var(--primario);
  background: var(--primario-suave);
}
.voucher-opcion:focus-within { outline: 2px solid var(--primario); outline-offset: 2px; }
.voucher-vista {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--fondo);
  margin: 0;
}
.voucher-ninguno, .voucher-sin-imagen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  font-size: 13.5px;
  color: var(--texto);
  word-break: break-word;
}
.voucher-pie {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--texto);
  line-height: 1.5;
}
.voucher-pie a { display: block; }

.fila-form { display: flex; gap: 16px; }
.fila-form label { flex: 1; }
.acciones-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* El "Guardar de todos modos" del aviso de duplicado: se puede apretar, pero no
   compite en peso visual con el boton que actualiza la ficha que ya existe. */
button.boton-gris {
  background: var(--secundario-suave);
  border: 1px solid var(--secundario-suave);
  color: var(--secundario);
}
button.boton-gris:hover { background: var(--secundario); border-color: var(--secundario); color: #fff; box-shadow: 0 .125rem .25rem 0 rgba(133, 146, 163, .4); }
/* Los dos botones de la pantalla de pago no entran en una linea de 500px. */
/* La pantalla de registrar pago no entra comoda en los 500px del formulario
   normal: con las miniaturas de vouchers quedaba angosta (2026-08-28). */
.formulario-ancho { max-width: 780px; }
/* Precio / moneda / forma de cobro sugeridos de un tipo de servicio. */
/* Panel de cobro del chat: un par de botones por servicio pendiente. */
/* Pestanas del panel de cobro, sin JavaScript: dos radios escondidos y
   `:checked` decide cual panel se ve. */
.perfil-tabs .tab-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tab-cabecera { display: flex; gap: 6px; margin-bottom: 12px; }
.tab-boton {
  flex: 1;
  text-align: center;
  padding: .317rem .5rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--titulo);
  background: var(--fondo);
  border: 0;
  border-radius: var(--radio);
  cursor: pointer;
  margin: 0;
  transition: all .15s;
}
.tab-boton:hover { color: var(--primario); }
#tab-por-cobrar:checked ~ .tab-cabecera .tab-boton-cobrar,
#tab-proximos:checked ~ .tab-cabecera .tab-boton:not(.tab-boton-cobrar) {
  background: var(--primario);
  color: #fff;
  box-shadow: var(--sombra-foco);
}
.tab-panel { display: none; }
#tab-por-cobrar:checked ~ .tab-panel-cobrar,
#tab-proximos:checked ~ .tab-panel-proximos { display: block; }

.perfil-cobro-acciones { display: flex; gap: 6px; margin: 6px 0 0; }
.perfil-cobro-acciones .boton-secundario { flex: 1; text-align: center; text-decoration: none; }
.perfil-cobro-todos { width: 100%; margin-top: 4px; }
/* Un renglon por servicio, con su fecha y su enlace separados: amontonado en
   un parrafo corrido no se distinguia donde terminaba uno y empezaba el otro. */
.perfil-proximo { margin-bottom: 10px; }
.perfil-proximo:last-child { margin-bottom: 0; }

.tipo-campos { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.tipo-campos label { flex: 1 1 150px; margin-bottom: 0; }
.tipo-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; }
.tipo-check input { width: auto; margin-top: 0; }
.tipo-fila-precio { font-size: 13.5px; color: var(--texto); margin-left: 8px; }
.voucher-extra { display: none; }
.dialogo-vouchers {
  width: min(900px, 92vw);
  max-height: 85vh;
  border: none;
  border-radius: var(--radio-lg);
  padding: 1.5rem;
  overflow: auto;
  box-shadow: var(--sombra-lg);
  color: var(--texto);
}
.dialogo-vouchers::backdrop { background: rgba(34, 48, 62, .5); }
.dialogo-cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dialogo-cabecera strong { flex: 1; }
.filtro-mes { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.filtro-mes select { width: auto; margin-top: 0; }
.galeria-vouchers-todos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.acciones-pago { align-items: stretch; }
.acciones-pago button { flex: 1 1 100%; }

/* Pantalla de fusion de dos fichas duplicadas. Dos columnas para poder
   compararlas de un vistazo antes de borrar una. */
.fusion-columnas { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.fusion-columna {
  flex: 1 1 320px;
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
}
.fusion-elegir { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fusion-nombre { font-size: 1.125rem; font-weight: 500; color: var(--titulo); margin: 0 0 12px; }
.fusion-datos { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.fusion-titulo-historial {
  margin: 12px 0 6px;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto);
}
.fusion-vacio, .fusion-notas { font-size: 13px; color: var(--texto); margin: 0 0 12px; }
.fusion-notas { white-space: pre-wrap; }
.fusion-explicacion { font-size: 13px; color: var(--texto); margin: 16px 0; }

.buscador { display: flex; gap: 8px; margin: 16px 0; }
.buscador input { flex: 1; margin-top: 0; padding: .543rem .875rem; border: 1px solid var(--borde-input); border-radius: var(--radio); background: var(--papel); }
.buscador select {
  width: auto; margin-top: 0; padding: .543rem .875rem;
  border: 1px solid var(--borde-input); border-radius: var(--radio); background: var(--papel);
}
.buscador button { flex: none; }
.buscador .boton-secundario { align-self: center; white-space: nowrap; }

/* Paginado de listas largas (P73). Solo se dibuja cuando hay mas de una
   pagina, asi que no ocupa sitio en las pantallas con pocos datos. */
.paginado {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 16px 0;
}
.paginado-posicion { font-size: 13px; color: var(--texto); }

/* La tabla de Sneat, dentro de su propia tarjeta: encabezados en mayuscula
   chica del color de los titulos, filas separadas por una linea gris clara. */
.tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.tabla th, .tabla td { text-align: left; padding: .782rem 1.25rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th {
  background: transparent;
  padding-top: 1.161rem;
  padding-bottom: 1.161rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--titulo);
  text-transform: uppercase;
  letter-spacing: .2px;
  white-space: nowrap;
}
.tabla > tbody > tr:last-child > td, .tabla > tr:last-child > td { border-bottom: 0; }

/* Encabezado que ordena la tabla al hacer clic (dominios_lista.html). Se ve
   igual que un encabezado normal; solo el icono dice que se puede ordenar. */
.orden-columna {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.orden-columna i { font-size: 1rem; color: var(--texto-suave); }
.orden-columna[data-sentido] i { color: var(--acento); }
.orden-columna:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: var(--radio-sm); }

/* Icono (i) junto a un encabezado y su globo explicativo. El globo lo crea el
   script de la pantalla y va en <body>, porque la tabla recorta lo que sobra. */
.ayuda-icono { cursor: help; color: var(--texto-suave); vertical-align: middle; }
.ayuda-icono i { font-size: 1rem; }
.ayuda-icono:hover, .ayuda-icono:focus { color: var(--titulo); outline: 0; }
.ayuda-globo {
  position: fixed;
  z-index: 1200;
  max-width: 320px;
  padding: .5rem .75rem;
  border-radius: var(--radio);
  background: var(--oscuro);
  color: #fff;
  font-size: .8125rem;
  line-height: 1.45;
  text-transform: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.ayuda-globo.visible { opacity: 1; visibility: visible; }
.tabla td strong, .tabla td a strong { font-weight: 500; color: var(--titulo); }

/* Un <form> es de por si un bloque -- esto lo mete en la misma linea que los
   demas enlaces de acciones de la fila ("Editar · Marcar pagado · Eliminar"),
   sin que se baje de renglon. */
.formulario-en-linea { display: inline; margin: 0; }
.enlace-peligro {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: var(--peligro); text-decoration: none; cursor: pointer;
}
.enlace-peligro:hover { text-decoration: underline; }

.usuario-acciones { display: flex; align-items: center; gap: 8px; }
.usuario-acciones form { margin: 0; }
.usuario-acciones .form-reenviar { position: absolute; z-index: 5; margin-top: 4px; width: 260px; }
.usuario-acciones details { position: relative; }
/* "Cambiar clave" reusa el desplegable de reenviar del chat, cuyo boton es
   un circulo de 28px para un icono: con texto adentro, la palabra se salia y
   se montaba sobre "(tu usuario)". Aqui es un boton chico de Sneat. */
.usuario-acciones .burbuja-reenviar summary {
  width: auto;
  height: auto;
  padding: .25rem .7rem;
  border-radius: var(--radio);
  background: var(--secundario-suave);
  color: var(--secundario);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.usuario-acciones .burbuja-reenviar summary:hover,
.usuario-acciones .burbuja-reenviar[open] summary { background: var(--secundario); color: #fff; }

.vacio { color: var(--texto); }

/* Contador de caracteres de los campos con tope (ej. el detalle que sale
   impreso en el comprobante). Discreto mientras sobra espacio, en rojo al
   llegar al tope, que es cuando el navegador deja de aceptar letras. */
.contador { display: block; margin-top: 4px; font-size: .8125rem; color: var(--texto-suave); }
.contador-al-tope { color: var(--peligro); font-weight: 600; }

.ficha-datos { background: var(--papel); padding: 1.5rem; border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 1.5rem; }
/* Un formulario dentro de la ficha ya esta dentro de una tarjeta: en Sneat
   no se anidan tarjetas, asi que el de adentro pierde la suya. */
.ficha-datos .formulario { box-shadow: none; padding: 0; }
.formulario-inline { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 24px; }
/* font: inherit porque el navegador le pone monoespaciada por defecto al
   textarea y quedaria distinto del input de al lado. resize: vertical deja
   estirarlo si la descripcion es larga, pero no romper el ancho de la fila. */
.formulario-inline textarea {
  flex: 1;
  padding: .543rem .875rem;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  font: inherit;
  resize: vertical;
}

/* La linea de tiempo de Sneat: una linea gris con un punto de color por
   evento, todo dentro de una tarjeta. El color del punto es el que antes
   llevaba el borde izquierdo (ambar las notas, rojo los fallos). */
.timeline {
  list-style: none;
  margin: 0;
  padding: 1.5rem 1.5rem .5rem 2rem;
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.timeline-item {
  position: relative;
  background: transparent;
  border-left: 1px solid var(--borde);
  padding: 0 0 1.25rem 1.5rem;
  margin: 0;
  border-radius: 0;
  --punto: var(--primario);
  --punto-suave: var(--primario-suave);
}
.timeline-item:last-child { border-left-color: transparent; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -.4063rem;
  top: .2rem;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--punto);
  box-shadow: 0 0 0 .1875rem var(--punto-suave);
}
.timeline-fecha { font-size: .8125rem; color: var(--texto-suave); margin-right: 8px; }
.timeline-tipo { font-size: .8125rem; font-weight: 500; color: var(--titulo); }
.timeline-resumen { margin: 4px 0 0; }
.timeline-item.timeline-nota { --punto: var(--aviso); --punto-suave: var(--aviso-suave); }
.timeline-item.timeline-aviso_fallido, .timeline-item.timeline-whatsapp_fallido, .timeline-item.timeline-correo_fallido {
  --punto: var(--peligro);
  --punto-suave: var(--peligro-suave);
}

.etiqueta-canal {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  padding: .4235em .77em;
  border-radius: var(--radio-sm);
  background: var(--secundario-suave);
  color: var(--secundario);
  vertical-align: middle;
  margin-left: 8px;
}
/* Verde "renovado"/"arriba" y rojo "vencido"/"caido" de Dominios y Sitios
   (antes iban escritos a mano en cada plantilla). */
/* Como los badges de Sneat ("Active"): solo la primera letra en mayuscula. */
.etiqueta-canal::first-letter, .tipo-fila-estado::first-letter, .perfil-estado::first-letter { text-transform: uppercase; }
.etiqueta-canal-ok { background: var(--exito-suave); color: var(--exito-texto); }
.etiqueta-canal-mal { background: var(--peligro-suave); color: var(--peligro); }
.ayuda { color: var(--texto); font-size: 13px; }

/* Tipos de servicio: una fila por tipo, cada una con su propio formulario.
   No es una tabla porque un <form> dentro de un <tr> es HTML invalido -- el
   navegador lo saca de la tabla y el boton Guardar deja de mandar los datos.
   Cada fila es un <details> colapsable: la descripcion (a veces varias
   lineas con *negrita* y saltos) se veia amontonada cuando todas las filas
   estaban abiertas a la vez -- ahora solo se ve el nombre hasta que se
   hace click, igual que .burbuja-reenviar en la bandeja. */
.lista-tipos { display: flex; flex-direction: column; gap: 8px; }
.tipo-fila { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); }
.tipo-fila summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.5rem;
  font-weight: 500;
  color: var(--titulo);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tipo-fila summary::-webkit-details-marker { display: none; }
.tipo-fila summary::before {
  content: "\25b8";
  color: var(--texto);
  font-weight: 400;
  transition: transform .15s;
}
.tipo-fila[open] summary::before { transform: rotate(90deg); }
.tipo-fila summary:hover { background: var(--hover); border-radius: var(--radio); }
.tipo-fila-estado {
  font-size: .8125rem;
  text-transform: none;
  line-height: 1;
  padding: .4235em .77em;
  border-radius: var(--radio-sm);
  background: var(--secundario-suave);
  color: var(--secundario);
  font-weight: 500;
}
.tipo-fila-contenido { padding: 0 1.5rem 1.25rem; }

/* La tarjeta de "agregar un tipo nuevo": mismo cuerpo que una fila de la
   lista, pero con "+" / "-" en vez de la flechita, para que se lea como una
   accion y no como un servicio mas. Va despues de las reglas de arriba a
   proposito: tienen la misma especificidad, asi que gana la que viene
   ultima. */
.tipo-fila-nuevo { margin-bottom: 24px; }
.tipo-fila-nuevo summary::before { content: "+"; font-weight: 600; }
.tipo-fila-nuevo[open] summary::before { content: "\2212"; transform: none; }
.tipo-fila .formulario-inline { margin-bottom: 0; align-items: flex-start; }
.tipo-fila .formulario-inline span.ayuda { align-self: center; }

/* Formulario de un tipo de servicio -- el de "agregar" y el de cada fila son
   el mismo. Hasta el 2026-08-28 compartian .formulario-inline, que es UNA
   SOLA FILA flex: con seis campos adentro (nombre, descripcion, precio,
   moneda, cobro, IGV y el boton) el nombre se aplastaba a un hilo, la
   descripcion quedaba de un dedo de ancho y 300 px de alto, y las etiquetas
   se montaban unas sobre otras. Aca va APILADO: cada campo en su renglon, y
   solo precio/moneda/cobro comparten linea porque son cortos. */
.formulario-tipo { display: flex; flex-direction: column; gap: 14px; margin-bottom: 0; }
/* Los `margin-bottom: 12px` de `form label` sobran: el espaciado ya lo pone
   el `gap` del contenedor, y sumados dejaban huecos del doble entre campos. */
.formulario-tipo > label { margin-bottom: 0; }
.formulario-tipo .tipo-campos { margin-top: 0; }
.formulario-tipo .tipo-check { margin: 0; }
/* El boton no se estira de lado a lado: ocupa lo que dice su texto. */
.acciones-tipo { display: flex; }
.tipo-fila-contenido > .ayuda, .tipo-fila-contenido > form + form { margin-top: 12px; }
.tipo-fila .boton-secundario { flex: none; }

/* Envoltorio de un textarea + su barrita de negrita/cursiva -- necesario
   porque en un formulario de fila (.formulario-inline, display:flex) la
   barra y el textarea tienen que apilarse verticalmente COMO UN SOLO
   elemento de la fila, no competir cada uno por su propio espacio. */
.campo-con-formato { display: flex; flex-direction: column; }
/* La etiqueta del textarea va suelta y no en un <label>, porque la barra de
   negrita/cursiva vive dentro de este mismo bloque y unos botones adentro de
   un <label> se disparan solos al hacer click en el texto de la etiqueta. */
.campo-con-formato .etiqueta-campo { font-size: 13px; color: var(--texto); }
/* Los 300 px de alto de antes eran una muleta de cuando la caja era angosta
   (media fila): a lo ancho de la tarjeta, tres renglones alcanzan y el que
   escriba una descripcion larga la estira con la esquinita. `flex: none`
   sigue haciendo falta: .campo-con-formato es un flex en COLUMNA, asi que
   sin eso el eje principal es el vertical y un `flex` heredado le pisaria el
   alto (2026-08-16: eso costo tres intentos de "no funciono"). */
.campo-con-formato textarea { width: 100%; flex: none; resize: vertical; }

/* Bandeja: layout de dos paneles (lista de conversaciones + chat), estilo
   WhatsApp/Kommo. La pagina de solo-lista y la del hilo comparten el mismo
   panel izquierdo via herencia de plantillas. */
/* Tema Sneat: la bandeja es UNA tarjeta dentro del area de contenido, como
   la del chat de Sneat, y mide justo lo que queda debajo de la barra de
   arriba (1rem de margen + 4rem de barra) para que la pagina no se desplace:
   lo que se desplaza es cada columna por dentro. */
.contenido-bandeja {
  flex: none;
  height: calc(100vh - 1rem - var(--alto-barra));
  display: flex;
}

.bandeja {
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.bandeja-lista {
  /* 320 -> 280 el 2026-08-28: los 40px se le pasaron al panel del perfil, que
     los necesita mas (ahi van los montos, las fechas y los botones de cobro).
     La lista solo muestra nombre y ultima linea del mensaje. */
  width: 280px;
  min-width: 280px;
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bandeja-lista-cabecera {
  flex: none;
  min-height: 4.75rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bandeja-lista-cabecera h1 { font-size: 1.125rem; margin: 0; }
/* El titulo de la lista ("WhatsApp"), en violeta como el "Chats" de Sneat. */
.bandeja-lista-titulo {
  flex: none;
  margin: 0;
  padding: 1.1rem 1.5rem .35rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--primario);
}

.bandeja-buscador { position: relative; flex: none; padding: 0; }
.bandeja-lista-cabecera .bandeja-buscador { flex: 1; }
.bandeja-buscador > i {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--titulo);
  pointer-events: none;
}
.bandeja-buscador input {
  width: 100%;
  padding: .45rem .875rem .45rem 2.35rem;
  border: 1px solid var(--borde-input);
  background: var(--papel);
  border-radius: 50rem;
  color: var(--titulo);
  font: inherit;
  font-size: 13px;
}
.bandeja-buscador input:focus { outline: none; border-color: var(--primario); box-shadow: var(--sombra-foco); }

/* Las tres pestanas de la bandeja de correo (P72). Son enlaces normales, no
   botones con JavaScript: asi el navegador guarda cada pestana en el
   historial y "volver atras" funciona sin escribir nada. */
/* Con el tema Sneat son las carpetas de su bandeja de correo: una por
   renglon, con icono, y la elegida en violeta con la rayita a la izquierda. */
.bandeja-pestanas {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .75rem 0;
  border-bottom: 1px solid var(--borde);
}
.bandeja-pestanas a {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .45rem 1.5rem;
  font-size: 13px;
  color: var(--titulo);
  text-decoration: none;
  border-left: 2px solid transparent;
  white-space: nowrap;
}
.bandeja-pestanas a i { font-size: 1.25rem; }
.bandeja-pestanas a:hover { color: var(--primario); }
.bandeja-pestanas a.activa { color: var(--primario); border-left-color: var(--primario); }

/* El scroll de la lista de chats vive en ESTE envoltorio, no en el <ul>.
   El div lo agrego el refresco en vivo (SSE le reemplaza el innerHTML de
   golpe cuando llega un mensaje), y al meterlo en medio el `overflow-y: auto`
   del <ul> dejo de servir: un hijo con `flex: 1` dentro de un div que NO es
   flex no recibe altura, asi que el <ul> crecia con todo su contenido y
   .bandeja-lista (overflow: hidden) cortaba lo que sobraba -- los chats de
   abajo quedaban invisibles y sin forma de bajar (2026-08-17).
   `min-height: 0` no es opcional: por defecto un item de flex no se encoge
   por debajo de su contenido y volveria a desbordar igual. */
#lista-conversaciones-wrap { flex: 1; min-height: 0; overflow-y: auto; }
.lista-conversaciones { list-style: none; padding: 0 0 .5rem; margin: 0; }
.bandeja-vacio { padding: 0 1.5rem; }

/* "Sin cliente asociado": otro titulo violeta, como el "Contacts" de Sneat. */
.lista-separador {
  padding: 1.1rem 1.5rem .35rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--primario);
}

/* Cada chat de la lista, con la forma del de Sneat: renglon redondeado con
   margen a los lados; el abierto, violeta lleno con letra blanca. */
.conversacion {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin: .25rem .75rem;
  padding: .528rem .75rem;
  border-radius: var(--radio);
  color: inherit;
  cursor: default;
}
a.conversacion { cursor: pointer; }
a.conversacion:hover { background: var(--hover); text-decoration: none; color: inherit; }
.conversacion.activa, a.conversacion.activa:hover {
  background: var(--primario);
  box-shadow: var(--sombra-foco);
  color: #fff;
}
.conversacion.activa .conversacion-nombre,
.conversacion.activa .conversacion-previa,
.conversacion.activa .conversacion-fecha,
.conversacion.activa .conversacion-empresa,
.conversacion.activa .conversacion-contacto,
.conversacion.activa .numero-crudo { color: #fff; }
/* Chats con mensajes sin ver: el verde palido de antes (var(--exito-suave)) era casi
   igual al blanco de fondo y no se notaba de un vistazo -- ahora es un
   amarillo bien saturado, el mismo lenguaje de "necesita atencion" que se
   usa en clientes de correo, y no se confunde con el verde/azul que ya usa
   el resto de la bandeja (enviado, seleccionado). */
.conversacion.sin-ver { background: #ffeabf; }
.conversacion.sin-ver .conversacion-nombre,
.conversacion.sin-ver .conversacion-previa { font-weight: 700; color: var(--titulo); }
a.conversacion.sin-ver:hover { background: #ffe0a3; }
/* Si esta ademas seleccionada (poco comun: se marca "visto" apenas se abre),
   que gane el color de seleccionada para no mezclar los dos estados. */
.conversacion.activa.sin-ver { background: var(--primario); }
.conversacion.activa.sin-ver .conversacion-nombre,
.conversacion.activa.sin-ver .conversacion-previa { color: #fff; }
.conversacion-huerfana { opacity: .85; }

/* Avatar de Sneat: circulo de 38px con las iniciales en el color entero
   sobre el mismo color tenue (bg-label-*). Seis tonos que se reparten por
   el numero de cliente. */
.avatar {
  flex: none;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-0 { background: var(--primario-suave); color: var(--primario); }
.avatar-1 { background: var(--exito-suave); color: var(--exito-texto); }
.avatar-2 { background: var(--aviso-suave); color: var(--aviso-texto); }
.avatar-3 { background: var(--peligro-suave); color: var(--peligro); }
.avatar-4 { background: var(--info-suave); color: var(--info-texto); }
.avatar-5 { background: var(--secundario-suave); color: var(--secundario); }
.avatar-gris { background: var(--secundario-suave); color: var(--secundario); }

.conversacion-info { flex: 1; min-width: 0; }
.conversacion-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conversacion-nombre {
  font-size: 13px;
  line-height: 1.5;
  color: var(--titulo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversacion-empresa {
  color: var(--texto-suave);
  font-weight: 400;
  font-size: .8125rem;
  margin-left: 4px;
}
/* Quien de la empresa es esta fila (P112 revisado): mismo color de acento
   que la etiqueta de la burbuja, para que se lea como "esta persona",
   distinto del gris neutro de la razon social. */
.conversacion-contacto {
  color: var(--acento);
  font-weight: 600;
  font-size: .8125rem;
  margin-left: 4px;
}
/* Un numero que escribe desde una empresa pero no esta cargado como persona
   en su ficha (P193). Se avisa para que se pueda cargar: si no, su chat es el
   unico de la empresa sin nombre de nadie. */
.conversacion-suelto {
  color: var(--aviso-texto);
  background: var(--aviso-suave);
  font-size: .6875rem;
  font-weight: 500;
  border-radius: var(--radio-sm);
  padding: .15em .5em;
  margin-left: 4px;
}
.conversacion.activa .conversacion-suelto { background: rgba(255, 255, 255, .22); color: #fff; }
.conversacion-previa {
  color: var(--texto);
  font-size: .8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversacion-fecha { font-size: .8125rem; color: var(--texto-suave); flex: none; }
/* Cuantos mensajes sin ver: la pildora de Sneat. */
.insignia {
  background: var(--acento);
  color: #fff;
  border-radius: 50rem;
  min-width: 20px;
  text-align: center;
  padding: .2em .55em;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.2;
  flex: none;
}
.conversacion.activa .insignia { background: var(--acento); color: #fff; }

.bandeja-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--fondo-chat);
  /* `relative` es solo para anclar `.perfil-toggle` (2026-09-08): ese boton
     vive AFUERA de `.bandeja-perfil` a proposito -- si viviera adentro,
     desaparecia con el resto del panel al ocultarlo y no habria como volver
     a abrirlo. */
  position: relative;
}
/* Sin chat abierto: el circulo violeta tenue con el icono, como en Sneat. */
.bandeja-panel-vacio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--titulo);
  font-size: 13px;
}
.bandeja-panel-vacio p { margin: 0; }
.bandeja-panel-vacio-icono {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: var(--primario-suave);
  color: var(--primario);
  font-size: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bandeja-panel-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 12px;
  min-height: 4.75rem;
  padding: .75rem 1.5rem;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}
/* Nombre arriba y empresa debajo, en chico, como el encabezado del chat de
   Sneat. El titulo se come el espacio libre y se corta con puntos
   suspensivos: asi los botones y el buscador nunca se salen de la columna. */
.bandeja-panel-titulo { flex: 1 1 150px; min-width: 120px; }
.bandeja-panel-titulo h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}
.bandeja-panel-titulo h2, .bandeja-panel-empresa { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeja-panel-titulo a { font-size: .8125rem; }
.bandeja-panel-empresa { display: block; font-size: .8125rem; font-weight: 400; color: var(--texto); }
/* La columna del chat se mide a si misma: cuando queda angosta (con el panel
   de datos abierto en una pantalla de laptop), los botones de la cabecera se
   quedan solo con su icono -- el nombre sale al pasar el mouse. */
.bandeja-panel { container-type: inline-size; container-name: chat; }
@container chat (max-width: 760px) {
  .chat-accion-texto { display: none; }
  .chat-acciones .boton-secundario { padding-left: .6rem; padding-right: .6rem; }
}

.programar-contador {
  background: var(--primario-suave);
  color: var(--primario);
  border-radius: 50rem;
  padding: .2em .6em;
  font-size: .75rem;
  font-weight: 500;
}

/* Lista de mensajes ya programados, en el panel de ficha a la derecha. */
.programar-lista { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.programar-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fondo);
  border-radius: var(--radio);
  padding: 6px 10px;
  font-size: 13px;
}
.programar-fecha { color: var(--primario); font-weight: 600; flex: none; }
.programar-texto { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--titulo); }
.programar-cancelar button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto);
  font-size: 13px;
  flex: none;
}
.programar-cancelar button:hover { color: var(--peligro); }

/* Misma lista de arriba, pero angosta para caber en el panel de ficha
   (300px) -- fecha/texto apilados en vez de en fila, con la cancelacion
   como una equis flotando en la esquina. */
.programar-lista-perfil li {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  position: relative;
  padding-right: 22px;
}
.programar-lista-perfil .programar-texto { white-space: normal; font-size: 13.5px; }
.programar-lista-perfil .programar-cancelar { position: absolute; top: 4px; right: 6px; }

/* El renglon entero es un boton que abre el popup con el mensaje completo
   (P146). Va sin pinta de boton a proposito: el panel tiene que verse igual
   que antes, lo unico que cambia es que ahora se puede hacer clic. */
.programar-abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.programar-abrir:hover .programar-texto,
.programar-abrir:focus-visible .programar-texto { color: var(--primario); }

/* ------------------------------------------------------------------
   El chat, con la misma pinta que WhatsApp Web (pedido del dueno el
   2026-08-28: "que se vea semejante el chat -- el fondo, como se ven las
   imagenes, los documentos adjuntos").

   El fondo es el papel tapiz de WhatsApp (`fondo-chat.svg`, el archivo que
   paso el dueno). Ese SVG dibuja todo con `currentColor`, asi que el tono
   de los garabatos se fija con un atributo `color` en la raiz del propio
   archivo -- no desde aqui, porque una imagen de fondo no hereda el color
   del CSS de la pagina.
   ------------------------------------------------------------------ */
/* Tema Sneat (2026-09-21): el hilo va sobre el gris liso del chat de Sneat
   en vez del papel tapiz de WhatsApp (`fondo-chat.svg` se queda en la
   carpeta por si se quiere volver). */
.hilo-scroll {
  flex: 1;
  overflow-y: auto;
  /* 4rem a los costados: a la derecha vive el boton redondo que muestra u
     oculta los datos del cliente, y no debe caer encima de una burbuja. */
  padding: 1.5rem 4rem;
  background-color: var(--fondo-chat);
}
.hilo { list-style: none; padding: 0; margin: 0; }

/* Nota interna dentro del hilo. Centrada, en ambar y con candado: tiene que
   ser imposible confundirla con un mensaje que si salio. Es la unica forma de
   que alguien escriba aqui con confianza. */
.hilo-nota { display: flex; justify-content: center; margin: 8px 0; }
.hilo-nota-caja {
  max-width: 75%;
  background: var(--aviso-suave);
  border: 1px solid var(--aviso-borde);
  border-radius: var(--radio);
  padding: .5rem .875rem;
}
.hilo-nota-etiqueta {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--aviso-texto);
  margin-bottom: 4px;
}
.hilo-nota-texto { margin: 0; font-size: 13px; color: var(--titulo); white-space: pre-wrap; }
.hilo-nota-pie { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.hilo-nota-borrar { margin: 0; }
.hilo-nota-borrar button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--aviso-texto); font-size: 12px;
}
.hilo-nota-borrar button:hover { color: var(--peligro); }

/* Aviso de que el chat sigue mas atras (P115). Va arriba del todo del hilo,
   que es justo donde uno llega al desplazarse hacia arriba buscando lo viejo. */
.hilo-anteriores {
  text-align: center;
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--texto);
}
.hilo-anteriores a { margin-left: 6px; }

/* Pastilla de dia ("Hoy", "Ayer", "19/08/2026") entre tramos del hilo. */
.hilo-dia { text-align: center; margin: 14px 0; }
.hilo-dia span {
  display: inline-block;
  background: var(--papel);
  color: var(--texto);
  font-size: .8125rem;
  padding: .3rem .8rem;
  border-radius: var(--radio);
  box-shadow: var(--sombra-xs);
}

/* La burbuja de Sneat: la del cliente blanca con sombra finita, la propia
   violeta con letra blanca; esquinas de 6px salvo la de arriba del lado de
   quien habla, que va en punta (en vez de la colita de WhatsApp). */
.burbuja {
  position: relative;
  width: fit-content;
  max-width: 65%;
  background: var(--papel);
  border-radius: var(--radio);
  padding: .543rem 1rem;
  margin-bottom: .75rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--titulo);
  box-shadow: var(--sombra-xs);
}
.burbuja-saliente { margin-left: auto; background: var(--primario); color: #fff; border-top-right-radius: 0; }
.burbuja-entrante { margin-right: auto; border-top-left-radius: 0; }
.burbuja-saliente a { color: #fff; text-decoration: underline; }

/* Mensaje que ya salio del cuadro de escritura pero que el servidor todavia
   no confirmo. Sale con el relojito: en cuanto Evolution/SMTP contestan, el
   refresco la reemplaza por la real con su check. */
.burbuja-pendiente { background: var(--primario); opacity: .7; }

.burbuja-texto::after { content: ""; display: block; clear: both; }
.burbuja-cuerpo { white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja-asunto { font-weight: 600; margin: 0 0 4px; font-size: 13px; }
.burbuja-cuerpo-html { max-width: 100%; overflow-x: auto; font-size: 13px; }
.burbuja-error { color: var(--peligro); font-size: 11.5px; margin: 4px 0 0; }
.burbuja-saliente .burbuja-error { color: #fff; background: rgba(255, 62, 29, .85); border-radius: var(--radio-sm); padding: 2px 6px; }

/* Hora y checks abajo a la derecha, DENTRO de la burbuja. Flota a la
   derecha para que en un mensaje corto quede en la misma linea del texto y
   en uno largo caiga al final, que es como se comporta WhatsApp. */
.burbuja-meta {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 -5px 10px;
  padding-top: 5px;
  font-size: 11px;
  line-height: 15px;
  color: var(--texto-suave);
  white-space: nowrap;
}
.burbuja-check-leido { color: var(--exito); }
.burbuja-check-error { color: var(--peligro); }
/* Sobre el naranja, la hora en blanco apagado y el "leido" en celeste claro
   (el azul del "leido" de WhatsApp, aclarado para que se lea). */
.burbuja-saliente .burbuja-meta { color: rgba(255, 255, 255, .75); }
.burbuja-saliente .burbuja-check-leido { color: #c9f4ff; }
.burbuja-saliente .burbuja-check-error { color: #fff; }
/* Imagen sola, sin texto: la hora va encima de la imagen, con sombra para
   que se lea igual sobre una foto clara. */
.burbuja-solo-medio { padding: 3px; max-width: 336px; }
.burbuja-meta-sobre { position: absolute; right: 12px; bottom: 10px; }
.burbuja-meta-sobre .burbuja-meta {
  float: none;
  margin: 0;
  padding: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.burbuja-meta-sobre .burbuja-check-leido { color: #d6f5ff; }

.burbuja-adjuntos { margin-bottom: 4px; display: flex; flex-direction: column; gap: 6px; }
.adjunto-imagen { display: block; cursor: zoom-in; }
.adjunto-imagen img {
  max-width: 100%;
  max-height: 340px;
  border-radius: 6px;
  display: block;
}
.adjunto-video { max-width: 100%; max-height: 340px; border-radius: 6px; display: block; }
.adjunto-audio { max-width: 100%; }

/* Nota de voz: el reproductor y, al costado, el boton para pasarla a texto
   (2026-08-28). Envuelve en pantallas angostas para que el boton no aplaste
   al reproductor. */
.adjunto-audio-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.adjunto-transcribir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 5px 10px;
  border: 1px solid var(--borde-input);
  border-radius: 50rem;
  background: var(--papel);
  color: var(--titulo);
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
}
.adjunto-transcribir i { font-size: 10px; opacity: .55; }
.adjunto-transcribir:hover { background: var(--hover); border-color: var(--texto-suave); }
/* Mientras trabaja: sin cursor de mano y sin invitar a un segundo clic, que
   seria un segundo pedido a la IA por el mismo audio. */
.adjunto-transcribir[disabled] { opacity: .6; cursor: default; }
.adjunto-transcribir[disabled]:hover { background: #fff; border-color: var(--borde-input); }

/* El texto del audio. En cursiva y con la comilla delante para que se lea como
   "esto es lo que dijo el audio" y no se confunda con un mensaje escrito. */
.adjunto-transcripcion {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: 13.5px;
  line-height: 1.45;
  font-style: italic;
  color: var(--texto);
  white-space: pre-wrap;
  word-break: break-word;
}
.adjunto-transcripcion[hidden] { display: none; }
.adjunto-transcripcion i { flex: none; margin-top: 3px; font-size: 11px; opacity: .45; }
/* Un fallo ("se agoto el cupo de este mes") no es lo que dijo el cliente: va
   en gris y sin cursiva, para que no se lea como parte de la conversacion. */
.adjunto-transcripcion-aviso { color: var(--texto-suave); font-style: normal; font-size: 12.5px; }
.adjunto-transcripcion-aviso i { display: none; }

/* Documento adjunto: tarjeta con icono, nombre y peso, como la de WhatsApp
   Web. Antes era un enlace suelto con un clip de emoji, que en un hilo con
   varias facturas no dejaba distinguir una de otra de un vistazo. */
.adjunto-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.04);
  text-decoration: none;
  color: inherit;
}
.adjunto-doc:hover { background: rgba(0,0,0,.07); }
/* Dentro de la burbuja violeta los documentos y la transcripcion van en
   blanco sobre un velo claro, para que no queden texto gris sobre violeta. */
.burbuja-saliente .adjunto-doc { background: rgba(255, 255, 255, .14); }
.burbuja-saliente .adjunto-doc:hover { background: rgba(255, 255, 255, .22); }
.burbuja-saliente .adjunto-doc-nombre,
.burbuja-saliente .adjunto-doc-meta,
.burbuja-saliente .adjunto-doc-icono,
.burbuja-saliente .adjunto-doc-bajar,
.burbuja-saliente .adjunto-transcripcion { color: #fff; }
.burbuja-saliente .adjunto-transcripcion { border-top-color: rgba(255, 255, 255, .25); }
.adjunto-doc-icono { font-size: 26px; flex: none; line-height: 1; }
.adjunto-doc-icono.doc-pdf { color: #d93025; }
.adjunto-doc-icono.doc-word { color: #2b579a; }
.adjunto-doc-icono.doc-excel { color: #1e7145; }
.adjunto-doc-icono.doc-ppt { color: #d24726; }
.adjunto-doc-icono.doc-zip { color: #a16207; }
.adjunto-doc-icono.doc-codigo { color: var(--texto); }
.adjunto-doc-icono.doc-generico { color: #5f6b73; }
.adjunto-doc-datos { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.adjunto-doc-nombre {
  font-size: 13.5px;
  color: var(--titulo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adjunto-doc-meta { font-size: 11.5px; color: var(--texto); margin-top: 2px; }
.adjunto-doc-bajar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  color: var(--texto);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adjunto-doc:hover .adjunto-doc-bajar { background: rgba(0,0,0,.12); }
/* Queda por compatibilidad: adjuntos viejos sin tipo reconocido. */
.adjunto-archivo { display: inline-block; }

/* Visor de imagenes del chat (2026-08-17): al hacer clic, la imagen se ve
   grande sobre el fondo oscurecido en vez de bajarse sola al disco.
   El <dialog> ocupa casi toda la pantalla y es transparente: el oscurecido
   real lo pinta ::backdrop, que es lo unico que se ve detras. */
.visor-imagen {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 92vw;
  max-height: 92vh;
  overflow: visible;
}
.visor-imagen::backdrop { background: rgba(0, 0, 0, .8); }
.visor-imagen img {
  display: block;
  max-width: 92vw;
  /* 92vh de alto total menos la barra de arriba, para que la imagen nunca
     empuje los botones fuera de la pantalla con fotos muy verticales. */
  max-height: calc(92vh - 48px);
  border-radius: 6px;
  margin: 0 auto;
  background: #fff;
}
.visor-imagen-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px 8px;
  color: #fff;
}
.visor-imagen-nombre {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visor-imagen-descargar {
  color: #fff;
  background: rgba(255, 255, 255, .15);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  flex: none;
}
.visor-imagen-descargar:hover { background: rgba(255, 255, 255, .3); text-decoration: none; }
.visor-imagen-cerrar {
  flex: none;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: none;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 13px;
  cursor: pointer;
}
.visor-imagen-cerrar:hover { background: rgba(255, 255, 255, .3); }

.formulario-responder {
  background: var(--papel);
  border-top: 1px solid var(--borde);
  padding: 12px 20px;
}
/* La caja de escribir del chat de Sneat: una tarjeta blanca que flota sobre
   el gris del hilo, con margen alrededor y sombra finita. */
.formulario-responder-chat {
  flex: none;
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra-xs);
  margin: 0 1.5rem 1.5rem;
  padding: .625rem .75rem;
}
.formulario-responder-chat input[type="text"] {
  width: 100%;
  padding: .543rem .875rem;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  margin-bottom: 8px;
  font: inherit;
}
/* Selector de "responder desde..." cuando el cliente tiene mas de una
   casilla de correo conectada -- solo aparece con 2 cuentas activas. */
.formulario-responder-chat select.formulario-responder-cuenta {
  width: auto;
  padding: 6px 10px;
  border: 1px solid var(--borde-input);
  border-radius: 6px;
  margin-bottom: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--texto);
}
.formulario-responder-fila { position: relative; display: flex; gap: 10px; align-items: flex-end; }
/* Caja de escritura del chat. Historia corta, porque paso por tres formas:
   una sola linea fija (hasta 2026-08-15), 150px fijos (2026-08-15/28) y hoy
   auto-alto -- vacia ocupa una linea y crece sola al escribir. */
.formulario-responder-fila textarea {
  flex: 1;
  padding: .7rem .875rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--titulo);
  font: inherit;
  line-height: 1.5;
  /* Crece sola mientras se escribe, hasta max-height; de ahi en adelante se
     queda quieta y hace scroll adentro. Chrome/Edge lo hacen solos con
     field-sizing; en los navegadores que aun no lo entienden lo hace el JS
     "auto-alto" de bandeja_lista.html, con el mismo resultado -- van los dos
     a proposito, para que la caja crezca igual aunque el JS falle.
     resize: none tambien a proposito: si crece sola, arrastrarla a mano
     sobra, y el tirador peleaba con el alto que calcula el JS. */
  field-sizing: content;
  min-height: 46px;
  max-height: 340px;
  overflow-y: auto;
  resize: none;
}
/* "Programar envio" arriba, "Enviar" abajo -- pedido del dueno el
   2026-08-15, para que el orden de lectura sea el mismo que el de uso: se
   decide primero si esto sale ya o mas tarde. */
.formulario-responder-botones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
  align-items: stretch;
}
.formulario-responder-botones button[type="submit"] {
  padding: .6rem 1.5rem;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radio);
}
/* Antes se perdia: era del mismo gris apagado que los botones secundarios
   del panel de ficha y nadie lo veia (el dueno lo pidio destacado el
   2026-08-28). Ahora va delineado en azul y en negrita -- visible, pero sin
   competirle a "Enviar", que sigue siendo el boton lleno. */
/* btn-outline-primary de Sneat: se ve, pero no le compite a "Enviar". */
.boton-programar-envio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--primario);
  color: var(--primario);
  border-radius: var(--radio);
  padding: .5rem 1rem;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.boton-programar-envio:hover { background: var(--primario); color: #fff; box-shadow: var(--sombra-foco); }
.boton-programar-envio:hover .programar-badge { background: var(--acento); color: #fff; }
.boton-programar-envio:disabled { cursor: not-allowed; opacity: .6; }
.ayuda-chat { padding: 0 1.5rem 1rem; margin: -.75rem 0 0; background: transparent; border-top: 0; font-size: .8125rem; }

/* Tercer panel: ficha del cliente al lado del chat (empresa, telefono,
   correo, contactos, servicios). Solo aparece cuando hay una conversacion
   abierta -- en la lista sin seleccion, el bloque queda vacio y no ocupa
   espacio. */
.bandeja-perfil {
  /* 300 -> 340 el 2026-08-28, a cambio de los 40px que dejo la lista de chats:
     con las pestanas de cobro, los montos y los botones, 300px apretaba. */
  width: 340px;
  min-width: 340px;
  border-left: 1px solid var(--borde);
  background: var(--papel);
  padding: 1.5rem;
  overflow-y: auto;
  transition: width .22s ease, min-width .22s ease, padding .22s ease, opacity .18s ease;
}
/* Ocultar el panel hacia la derecha (pedido del dueno el 2026-09-08): se
   achica a 0 en vez de mandarse fuera de pantalla con `transform`, para que
   el chat de al lado (`.bandeja-panel`, `flex: 1`) gane ese espacio solo,
   sin dejar un hueco vacio. `.perfil-toggle` (fuera de este bloque, ver mas
   abajo) es lo unico que sigue visible para poder volver a abrirlo. */
.bandeja-perfil.perfil-colapsado {
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-left: none;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Pestana redonda para mostrar/ocultar el panel de datos. Vive dentro de
   `.bandeja-panel` -- que no se oculta nunca -- para seguir accesible
   aunque el panel de datos este cerrado.

   Dos correcciones del 2026-09-08, pedidas por el dueno con capturas:
   1) Vertical y centrada (`top: 50%`), no pegada arriba: ahi arriba
      chocaba con el buscador de la conversacion.
   2) Ya NO queda a caballo del borde (`right: 0` + mitad afuera, como
      estaba antes). `.hilo-scroll` ocupa TODO el ancho de `.bandeja-panel`
      -- este panel y el de la conversacion son columnas separadas -- asi
      que su barra de scroll nativa cae justo en ese borde en los dos
      estados (panel abierto o cerrado) y se comia medio boton. `right: 22px`
      lo deja adentro del todo, libre de la barra. */
/* El boton redondo violeta del menu de Sneat, reusado para mostrar/ocultar
   el panel de datos. */
.perfil-toggle {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 4px solid var(--fondo-chat);
  background: var(--primario);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  z-index: 4;
  box-shadow: none;
}
.perfil-toggle:hover { background: var(--primario-hover); color: #fff; }

.avatar-grande { width: 5.25rem; height: 5.25rem; font-size: 1.75rem; margin: 0 auto; }

.perfil-cabecera { text-align: center; margin-bottom: 1.5rem; }
.perfil-nombre { font-size: 1.125rem; font-weight: 500; margin: 1rem 0 .375rem; }
.perfil-estado {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  padding: .4235em .77em;
  border-radius: var(--radio-sm);
  background: var(--exito-suave);
  color: var(--exito-texto);
}
.perfil-estado-inactivo { background: var(--secundario-suave); color: var(--secundario); }
.perfil-estado-sin-cliente { background: var(--secundario-suave); color: var(--secundario); }

/* Enlace "Ver perfil" bajo el nombre del cliente. Antes era un boton azul al
   final del panel derecho; se subio a la cabecera (2026-08-29). Discreto a
   proposito: compite con el nombre y con el boton de enviar del chat. */
.perfil-boton-ficha {
  display: inline-block;
  margin-top: 10px;
  padding: .317rem .75rem;
  border: 0;
  border-radius: var(--radio-sm);
  background: var(--primario-suave);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--primario);
}
.perfil-boton-ficha:hover { background: var(--primario); color: #fff; box-shadow: var(--sombra-foco); text-decoration: none; }
/* Desde P188 la cabecera del panel lleva dos: "Ver perfil" y "Ver correos". */
.perfil-boton-ficha + .perfil-boton-ficha { margin-left: 6px; }

/* Boton al pie del panel de un remitente sin cliente (bandeja_huerfano):
   ahi si es la accion principal de la pantalla, por eso sigue siendo azul y
   a todo el ancho. */
.perfil-boton-registrar { display: block; text-align: center; margin-top: 16px; }

.perfil-seccion { padding: 16px 0; border-top: 1px solid var(--borde); }
.perfil-seccion:first-of-type { border-top: none; }
.perfil-seccion-titulo { font-size: 13px; margin: 0 0 8px; color: var(--titulo); }
/* Cada bloque del panel derecho se pliega con su titulo (2026-08-28). Es un
   <details> nativo: no hace falta JavaScript para abrir y cerrar, solo para
   recordar como lo dejo el dueno.

   Los titulos se ven como BOTONES, no como texto (pedido del dueno): nacen
   casi todos cerrados, y un titulo suelto no invita a hacerle clic -- con
   forma de boton se entiende solo que ahi hay algo que abrir. Se quita el
   triangulo del navegador y se pone una flecha propia a la derecha, que gira
   al abrirse. */
details.perfil-seccion {
  padding: 0;
  border-top: none;
  margin-bottom: 8px;
}
details.perfil-seccion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
  margin: 0;
  padding: .7rem 1rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--titulo);
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}
details.perfil-seccion > summary::-webkit-details-marker { display: none; }
details.perfil-seccion > summary::after {
  /* Flecha dibujada con dos bordes, no con un caracter: el triangulo "punta a
     la derecha" ya habia salido como un cuadrito con codigo adentro. Con
     bordes no depende de que la fuente traiga el simbolo. */
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: rotate(-45deg);
  transition: transform .15s;
}
details.perfil-seccion[open] > summary::after {
  border-color: var(--primario);
  transform: rotate(45deg);
  margin-right: 5px;
}
details.perfil-seccion > summary:hover { color: var(--primario); }
/* Abierto, como el acordeon de Sneat: la cabecera en violeta claro y el
   contenido dentro de la misma tarjeta con sombra -- con varios bloques
   abiertos, sin el cuadro no se ve donde termina uno y empieza el siguiente. */
details.perfil-seccion[open] {
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding-bottom: 12px;
}
details.perfil-seccion[open] > summary {
  background: var(--primario-suave);
  color: var(--primario);
  box-shadow: none;
  border-radius: var(--radio) var(--radio) 0 0;
  margin: 0 0 12px;
}
details.perfil-seccion[open] > *:not(summary) { margin-left: 12px; margin-right: 12px; }
.perfil-campo-etiqueta {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--texto-suave);
  margin-top: 10px;
}
.perfil-campo-etiqueta:first-child { margin-top: 0; }
.perfil-campo-valor { margin: 2px 0 0; font-size: 13px; color: var(--titulo); word-break: break-word; }
.perfil-campo-secundario { color: var(--texto); font-size: 13px; }

.perfil-contacto, .perfil-servicio { margin-bottom: 10px; }
.perfil-contacto:last-child, .perfil-servicio:last-child { margin-bottom: 0; }

/* Panel "Por cobrar" y comprobantes del chat (2026-08-28) */
.perfil-cobro-linea, .perfil-comprobante { margin-bottom: 10px; }
.perfil-cobro-linea:last-child, .perfil-comprobante:last-child { margin-bottom: 0; }
.perfil-cobro-monto { float: right; font-variant-numeric: tabular-nums; }
.perfil-cobro-estado { margin: 2px 0 0; font-size: 13.5px; color: var(--texto); }
/* Rojo solo en lo ya vencido: si todo se pinta igual, el color deja de avisar. */
.perfil-cobro-vencido { color: var(--peligro); font-weight: 600; }
.perfil-cobro-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.perfil-cobro-botones > * { flex: 1 1 auto; text-align: center; white-space: nowrap; }
.perfil-comprobante-enviar { margin-top: 6px; }
.perfil-comprobante-enviar button { width: 100%; }
.perfil-contacto-tipo { font-size: 13.5px; color: var(--texto-suave); }
/* La persona cuyo chat esta abierto, dentro de la lista de personas de la
   empresa (P193): sin esto no se sabe cual de las tres se esta leyendo. */
.perfil-contacto-abierto {
  border-left: 3px solid var(--acento);
  padding-left: 8px;
  margin-left: -11px;
}
/* "de EMPRESA S.A.", debajo del nombre de la persona en el panel del chat. */
.perfil-empresa-de { margin: 2px 0 0; font-size: 13.5px; color: var(--texto-suave); }

/* Popup nativo (<dialog>), estilo compartido -- vincular cliente
   (bandeja_huerfano.html) y programar envio (bandeja_hilo.html). */
.dialogo-generico {
  border: none;
  border-radius: var(--radio-lg);
  padding: 1.5rem;
  max-width: 340px;
  width: 90%;
  color: var(--texto);
  box-shadow: var(--sombra-lg);
}
.dialogo-generico::backdrop { background: rgba(34, 48, 62, .5); }
.dialogo-generico h3 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 500; }
.dialogo-vincular-cliente select {
  width: 100%;
  padding: .543rem .875rem;
  margin-top: 8px;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  font: inherit;
}
.dialogo-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* La configuracion de un agente en tarjetas (P255, equipo_cobrador.html).
   Cada tarjeta resume en una frase como esta HOY; «Editar» abre un popup
   con solo sus opciones. */
.tarjetas-config {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}
.tarjeta-config {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tarjeta-config-con-aviso { border-color: var(--aviso-borde); }
.tarjeta-config h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--titulo); }
.tarjeta-config-frase { margin: 0; flex: 1; }
.tarjeta-config-falta {
  margin: 0;
  padding: 6px 8px;
  border-radius: var(--radio-sm);
  background: var(--aviso-suave);
  color: var(--aviso-texto);
  font-size: 12.5px;
}
.tarjeta-config-pie { display: flex; flex-wrap: wrap; gap: 8px; }
.tarjetas-faltan {
  padding: 10px 12px;
  border-radius: var(--radio);
  background: var(--aviso-suave);
  color: var(--aviso-texto);
}
.tarjetas-faltan a { color: inherit; font-weight: 600; }
/* Lo que no deja encender a un agente (P258): la misma franja ámbar, con un
   «Completar» por renglón. */
.falta-encender {
  padding: 10px 12px; margin: 0 0 12px;
  border-radius: var(--radio);
  background: var(--aviso-suave);
  color: var(--aviso-texto);
}
.falta-encender p { margin: 0 0 6px; }
.falta-encender ul { list-style: none; margin: 0; padding: 0; }
.falta-encender li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.falta-encender li a { flex: 0 0 auto; }
.tarjetas-bienvenida {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; margin: 0 0 16px;
  border-radius: var(--radio-lg);
  background: var(--acento-suave);
}
.tarjetas-bienvenida p { margin: 0; flex: 1 1 320px; }
.tarjetas-bienvenida form { margin: 0; }
/* El popup de una tarjeta: mas ancho que el de la bandeja, con barra propia
   cuando el contenido es largo (los textos, la lista de clientes). */
.dialogo-config { max-width: 560px; max-height: 88vh; overflow-y: auto; }
.dialogo-config-grande { max-width: 880px; }
.dialogo-config-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.dialogo-config-cabecera h3 { margin: 0; }
.dialogo-config-cerrar {
  background: none; border: none; box-shadow: none; padding: 0 4px;
  font-size: 24px; line-height: 1; color: var(--texto-suave); cursor: pointer;
}
.dialogo-config-cerrar:hover { background: none; color: var(--titulo); box-shadow: none; }

/* Popup de "programar envio" -- muestra el texto que ya estaba escrito en
   el cuadro de respuesta (de solo lectura, se llena por JS) y pide fecha. */
.dialogo-programar-texto {
  background: var(--fondo);
  border-radius: var(--radio);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--titulo);
  white-space: pre-wrap;
  max-height: 120px;
  overflow-y: auto;
  margin: 0;
}
.dialogo-programar label {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--texto);
}
.dialogo-programar input[type="datetime-local"] {
  margin-top: 4px;
  width: 100%;
  padding: .543rem .875rem;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  font: inherit;
}

/* Popup de "ver / editar" un mensaje ya programado (P146). Mas ancho que el
   dialogo generico porque aqui se lee un mensaje entero, no una pregunta. */
.dialogo-programado { max-width: 460px; }
.dialogo-programado .dialogo-programado-vista { max-height: 320px; }
.dialogo-programado label {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--texto);
}
.dialogo-programado textarea,
.dialogo-programado input[type="datetime-local"] {
  margin-top: 4px;
  width: 100%;
  box-sizing: border-box;
  padding: .543rem .875rem;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  font: inherit;
}
.dialogo-programado textarea { resize: vertical; line-height: 1.45; }

/* Cita (responder sobre un mensaje) dentro de la burbuja, estilo WhatsApp:
   una franja angosta con el texto original arriba del mensaje nuevo. */
.burbuja-cita {
  border-left: 3px solid var(--primario);
  background: rgba(0,0,0,.05);
  padding: 5px 9px;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--texto);
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.burbuja-saliente .burbuja-cita { border-left-color: #fff; background: rgba(255, 255, 255, .15); color: #fff; }

/* Responder / reenviar AL COSTADO de la burbuja, no debajo (pedido del
   dueno el 2026-08-28, con WhatsApp Web al lado como referencia): en los
   mensajes del cliente salen a la derecha y en los propios a la izquierda,
   siempre por fuera de la burbuja. Ocultos hasta que el mouse pasa por
   encima para no ensuciar el hilo -- en celular (sin hover) quedan siempre
   visibles, que es lo correcto ahi. */
.burbuja-acciones {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
  margin: 0;
  opacity: 0;
  transition: opacity .1s;
}
.burbuja-entrante .burbuja-acciones { left: 100%; margin-left: 6px; }
.burbuja-saliente .burbuja-acciones { right: 100%; margin-right: 6px; }
.burbuja:hover .burbuja-acciones { opacity: 1; }
/* Con el desplegable de reenviar abierto los botones siguen visibles aunque
   el mouse se haya ido de la burbuja; sin esto, el panel quedaria abierto
   pero invisible. */
.burbuja-acciones:has(details[open]) { opacity: 1; }
@media (hover: none) { .burbuja-acciones { opacity: 1; } }

.burbuja-accion,
.burbuja-reenviar summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--texto-suave);
  border-radius: 50%;
  list-style: none;
}
.burbuja-accion:hover,
.burbuja-reenviar summary:hover { background: rgba(34, 48, 62, .08); color: var(--titulo); }
.burbuja-reenviar summary::-webkit-details-marker { display: none; }
.burbuja-reenviar[open] summary { background: rgba(34, 48, 62, .08); color: var(--titulo); }

/* El panel de "reenviar a..." abre HACIA ARRIBA: los botones ahora estan
   flotando fuera de la burbuja, asi que un panel hacia abajo lo cortaria el
   borde del hilo justo en los mensajes de mas abajo, que son los que uno
   reenvia. */
.burbuja-acciones .burbuja-reenviar { position: relative; }
.burbuja-acciones .form-reenviar {
  position: absolute;
  z-index: 6;
  width: 250px;
  bottom: 100%;
  margin: 0 0 4px;
}
.burbuja-entrante .burbuja-acciones .form-reenviar { left: 0; }
.burbuja-saliente .burbuja-acciones .form-reenviar { right: 0; }

.form-reenviar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  padding: .625rem;
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
}
.form-reenviar select {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--borde-input);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
}
/* "form input { width: 100% }" (mas arriba en este archivo) se cuela aca
   porque esto tambien es un <form>, y sin el "width: auto" cada input se
   estira a todo el ancho de la fila. Lo usa el formulario de "cambiar
   clave" de configuracion_usuarios.html. */
.form-reenviar input {
  flex: 1;
  min-width: 0;
  width: auto;
  margin-top: 0;
  padding: 4px 6px;
  border: 1px solid var(--borde-input);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
}
.form-reenviar button {
  padding: 4px 10px;
  font-size: 13px;
}

/* Vista previa de "respondiendo a..." arriba del cuadro de texto, con boton
   para cancelar y volver a un mensaje suelto. */
.cita-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--primario-suave);
  border-left: 3px solid var(--primario);
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--titulo);
  border-radius: var(--radio-sm);
}
/* El [hidden] de HTML normalmente basta, pero el display:flex de arriba
   tiene mas especificidad que el estilo por defecto del navegador para
   [hidden] y lo pisa -- sin esto, la barra de cita queda visible y vacia
   todo el tiempo, se haya citado algo o no. */
.cita-preview[hidden] { display: none; }
.cita-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cita-preview button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto);
  font-size: 13px;
  flex: none;
}

/* Barra de formato (negrita/cursiva/tachado/monoespaciado) + adjuntar,
   arriba del cuadro de texto del chat. */
.formato-barra {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.formato-barra button {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  /* 26x26/13px -> 32x32/16px el 2026-09-08: iconos mas grandes, tomando de
     referencia la barra de WhatsApp (pedido del dueno). */
  width: 32px;
  height: 32px;
  border-radius: var(--radio);
  color: var(--titulo);
  font-size: 16px;
}
.formato-barra button:hover { background: var(--hover); border-color: transparent; color: var(--primario); }
.formato-adjuntar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radio);
  color: var(--titulo);
  cursor: pointer;
  font-size: 17px;
}
.formato-adjuntar:hover { background: var(--hover); color: var(--primario); }

.programar-badge {
  position: relative;
  top: -1px;
  background: var(--acento);
  color: #fff;
  border-radius: 999px;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  font-size: 11px;
  text-align: center;
  padding: 0 4px;
  margin-left: 2px;
}
/* Vista previa de lo que se va a adjuntar (2026-10-01). Reemplaza al
   `.archivo-nombre` de antes, que solo escribia "image.png" al lado del
   clip: con una captura recien pegada ese nombre no dice nada. Ocupa su
   propia fila entre la barra de iconos y el cuadro de texto -- nada flota
   encima del hilo. */
.adjunto-previo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  margin: .35rem 0 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
}
.adjunto-previo[hidden] { display: none; }
.adjunto-previo-miniatura {
  flex: none;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--papel);
  cursor: zoom-in;
  line-height: 0;
  overflow: hidden;
}
.adjunto-previo-miniatura img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
}
/* Agrandada de un clic, dentro de la misma fila: no hay dialogo de por medio. */
.adjunto-previo-miniatura.adjunto-previo-grande { cursor: zoom-out; }
.adjunto-previo-miniatura.adjunto-previo-grande img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
}
.adjunto-previo-icono {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radio);
  background: var(--papel);
  border: 1px solid var(--borde);
  color: var(--secundario);
  font-size: 22px;
}
.adjunto-previo-datos { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.adjunto-previo-nombre {
  font-size: 13.5px;
  color: var(--titulo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adjunto-previo-peso { font-size: 12px; color: var(--secundario); }
.adjunto-previo-quitar {
  margin-left: auto;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: none;
  color: var(--secundario);
  cursor: pointer;
  font-size: 15px;
}
.adjunto-previo-quitar:hover { background: var(--peligro-suave); color: var(--peligro); }
.formato-plantilla {
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  font: inherit;
  font-size: .8125rem;
  padding: .3rem .5rem;
  color: var(--titulo);
  background-color: var(--papel);
  max-width: 160px;
}

/* Atajos (2026-10-07): boton con la lista de plantillas que se abre hacia arriba. */
.atajos-wrap { position: relative; display: inline-block; }
.formato-barra .atajos-boton {
  width: auto; height: auto; padding: .25rem .6rem;
  font-size: 12.5px; font-weight: 600; color: var(--primario);
  background: var(--primario-suave); border: 0; border-radius: var(--radio);
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.atajos-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30;
  width: 300px; max-height: 300px; overflow-y: auto;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg); padding: 6px;
}
.atajos-menu[hidden] { display: none; }
.atajos-ayuda { margin: 4px 6px 8px; font-size: 12px; color: var(--texto-suave); line-height: 1.4; }
.formato-barra .atajos-item {
  display: block; width: 100%; height: auto; text-align: left; padding: 7px 9px;
  background: transparent; border: 0; border-radius: var(--radio); cursor: pointer;
  color: var(--texto); font: inherit;
}
.formato-barra .atajos-item:hover { background: var(--primario-suave); }
.atajos-item.activo { background: var(--primario-suave); }
/* Sugerencias al escribir "/" (2026-10-07): aparecen encima de la caja. */
.atajos-sugerencias {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20;
  min-width: 160px; max-width: 320px; max-height: 220px; overflow-y: auto;
  padding: 4px;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
}
.atajos-sugerencias[hidden] { display: none; }
.atajos-sugerencias .atajos-item { padding: 6px 9px; }
.atajos-item strong { display: block; font-size: 13px; color: var(--titulo); }
.atajos-item span { display: block; font-size: 12px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Selector de emoticones (2026-08-17). Abre hacia ARRIBA (`bottom: 100%`) y
   no hacia abajo como el menu de IA: esta barra vive pegada al fondo de la
   pantalla, asi que un panel de 240px hacia abajo se saldria de la vista.
   OJO con la especificidad: los botones del panel estan DENTRO de
   .formato-barra, asi que `.formato-barra button` (26x26, para los iconos de
   la barra) tambien los alcanza. Por eso las reglas de abajo nombran el
   contenedor -- asi ganan por especificidad y no por el orden del archivo,
   que es lo que se rompe sin avisar cuando alguien mueve un bloque. */
.emojis { position: relative; display: flex; }
.emojis-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 20;
  margin-bottom: 6px;
  width: 296px;
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  padding: 6px;
}
.emojis-panel[hidden] { display: none; }
.emojis-pestanas {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.formato-barra .emojis-pestanas button {
  width: 32px;
  height: 28px;
  font-size: 16px;
  border-radius: 6px;
  line-height: 1;
}
.formato-barra .emojis-pestanas button.activa { background: var(--primario-suave); border-color: transparent; }
.emojis-rejilla {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-height: 208px;
  overflow-y: auto;
}
.formato-barra .emojis-rejilla button {
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  border-radius: 6px;
  /* Los emojis de color los pinta la fuente del sistema; sin esta familia,
     Windows los muestra en blanco y negro con la fuente heredada. */
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.emojis-vacio { margin: 8px 4px; font-size: 13.5px; color: var(--texto-suave); }
.emojis-vacio[hidden] { display: none; }

/* Boton "mejorar redaccion" con IA (P31) -- vive en la misma barra, en
   ambos canales (a diferencia de negrita/cursiva/adjuntar, que son solo de
   WhatsApp). */
.ia-redaccion { position: relative; }
/* `.formato-barra button` (los iconos de 32x32) tambien alcanza a este boton,
   que lleva texto: sin esto quedaba aplastado con "Mejorar" debajo del icono. */
.formato-barra .ia-redaccion-boton {
  width: auto;
  height: 32px;
  padding: 0 .75rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: var(--acento-suave);
  color: var(--acento-hover);
}
.formato-barra .ia-redaccion-boton:hover { background: var(--acento); color: #fff; }
/* Variante fuera de la bandeja (formulario de servicio): el boton no queda
   pegado a una barra de iconos, necesita su propio espacio arriba/abajo. */
.ia-redaccion-bloque { margin: 4px 0 16px; }
.ia-redaccion-bloque .ia-redaccion-boton { padding: 8px 12px; }
/* "Mejorar" con IA: boton chico naranja claro (lo de IA va con el acento). */
.ia-redaccion-boton {
  background: var(--acento-suave);
  border: 0;
  border-radius: var(--radio);
  cursor: pointer;
  color: var(--acento-hover);
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  padding: .3rem .75rem;
  transition: all .2s;
}
.ia-redaccion-boton:hover { background: var(--acento); color: #fff; box-shadow: 0 .125rem .25rem 0 rgba(var(--acento-rgb), .4); }
.ia-redaccion-boton:disabled { cursor: default; opacity: 0.6; }
/* Fila EN EL FLUJO normal, no flotando encima de nada (2026-09-08, tercer
   intento -- P112). Primero se probo `position: absolute` abriendo hacia
   abajo (tapaba el texto ya escrito) y despues hacia arriba (tapaba el hilo
   de mensajes): el dueno lo reporto las dos veces como "se sobrepone". Esta
   barra vive apretada entre el hilo y el cuadro de texto, sin aire
   alrededor, asi que cualquier menu flotante iba a tapar una cosa o la otra.
   La unica forma de no tapar nada es que ocupe su propio espacio y empuje el
   resto -- mismo truco que ya usa `.ia-redaccion-preview` de aqui abajo. Por
   eso en el HTML esta AFUERA de `.ia-redaccion` (que ahora solo envuelve el
   boton) y no necesita `position: absolute` ni z-index. */
.ia-redaccion-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.ia-redaccion-menu[hidden] { display: none; }
.ia-redaccion-menu button {
  background: var(--papel);
  border: 1px solid var(--borde-input);
  border-radius: 50rem;
  padding: 6px 12px;
  font-size: 13.5px;
  color: var(--titulo);
  cursor: pointer;
  white-space: nowrap;
}
.ia-redaccion-menu button:hover { background: var(--fondo); border-color: var(--primario-borde); }

.ia-redaccion-preview {
  background: var(--primario-suave);
  border: 0;
  border-left: 3px solid var(--primario);
  border-radius: var(--radio);
  padding: 8px 10px;
  margin-bottom: 6px;
}
.ia-redaccion-preview[hidden] { display: none; }
.ia-redaccion-etiqueta { font-size: 12.5px; color: var(--texto); margin: 0 0 4px; }
.ia-redaccion-texto { font-size: 13px; color: var(--titulo); white-space: pre-wrap; margin: 0 0 8px; }
.ia-redaccion-acciones { display: flex; gap: 6px; }
.ia-redaccion-acciones button {
  border: 1px solid var(--borde-input);
  background: var(--papel);
  border-radius: var(--radio);
  padding: 4px 10px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--texto);
}
.ia-redaccion-acciones button:hover { background: var(--fondo); }
.ia-redaccion-acciones #ia-redaccion-usar {
  background: var(--primario);
  color: #fff;
  border-color: var(--primario);
}
.ia-redaccion-acciones #ia-redaccion-usar:hover { background: var(--primario-hover); }
.ia-redaccion-error[hidden] { display: none; }
.ia-redaccion-error { font-size: 13.5px; margin-bottom: 6px; }

/* «Consultar con el agente» (P257): su propia fila, en el flujo (mismo motivo
   que .ia-redaccion-menu: nada flota encima del hilo ni del cuadro). Es de IA,
   asi que va con el acento como «Mejorar». */
.consulta-agente { margin: 0 0 6px; }
.consulta-agente-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.consulta-agente-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--acento-suave);
  color: var(--acento-hover);
  border: 0;
  border-radius: var(--radio);
  padding: .3rem .75rem;
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.consulta-agente-boton:hover { background: var(--acento); color: #fff; }
.consulta-agente-boton:disabled { cursor: default; opacity: .6; }
.consulta-agente-ayuda { font-size: 12.5px; color: var(--texto); }
.consulta-agente-resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--primario-suave);
  border-left: 3px solid var(--primario);
  border-radius: var(--radio);
  font-size: 12.5px;
  color: var(--texto);
}
.consulta-agente-resultado[hidden] { display: none; }
.consulta-agente-nota { flex: 1 1 220px; }
.consulta-agente-resultado button {
  border: 1px solid var(--borde-input);
  background: var(--papel);
  border-radius: var(--radio);
  padding: 3px 9px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--texto);
}
.consulta-agente-resultado button:hover { background: var(--fondo); }
.consulta-agente-resultado button[hidden] { display: none; }
.consulta-agente-error[hidden] { display: none; }
.consulta-agente-error { font-size: 13px; margin: 6px 0 0; }

/* Buscar dentro del hilo abierto, en la cabecera del chat. */
/* Compacto para que quepa la barra; se expande al hacer clic para escribir. */
.buscar-en-hilo {
  margin-left: 0;
  flex: 0 0 auto;
  min-width: 0;
  width: 150px;
  transition: width .2s ease;
  padding: .4rem .9rem .4rem 2.1rem;
  border: 1px solid var(--borde-input);
  background: var(--papel) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3e%3cpath fill='%23384551' d='M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z'/%3e%3c/svg%3e") no-repeat .7rem center;
  border-radius: 50rem;
  color: var(--titulo);
  font: inherit;
  font-size: 13px;
}
.buscar-en-hilo:focus { outline: none; border-color: var(--primario); box-shadow: var(--sombra-foco); width: 300px; }
.chat-atiende { display: inline-flex; align-items: center; gap: 6px; }
.chat-atiende-etiqueta { font-size: 12px; color: var(--texto-suave); white-space: nowrap; }

/* Fijar / marcar pendiente. Desde el 2026-08-28 viven en la cabecera del chat,
   al lado del nombre del cliente, no en el panel derecho: ahi quedaban lejos
   de la conversacion, que es donde uno decide "a este hay que volver". Sin
   `flex: 1` en los botones -- en la cabecera deben medir lo que dice su texto,
   no repartirse el ancho. */
/* align-items: center (2026-09-08): sin esto cada <form> de aca adentro
   (asignar, nueva venta, fijar, pendiente, PDF) se ESTIRA al alto del mas
   alto por el `stretch` de flex de fabrica, y el <select> de "asignar" -- que
   es el mas bajito -- quedaba pegado arriba de su propio formulario en vez de
   centrado, y se veia desnivelado contra los botones de al lado (reportado
   por el dueno el 2026-09-08). */
.chat-acciones { display: flex; gap: 6px; flex: none; align-items: center; }
.chat-acciones .boton-secundario { flex: none; white-space: nowrap; }

/* "PDF": bajar la conversacion en un archivo (P93). Desplegable con <details>
   y no un boton directo, igual que .burbuja-reenviar: antes de bajar nada hay
   que elegir el tramo de fechas. El panel va en posicion absoluta para que no
   empuje la cabecera del chat al abrirse. */
.chat-exportar { position: relative; flex: none; }
.chat-exportar summary { list-style: none; white-space: nowrap; }
.chat-exportar summary::-webkit-details-marker { display: none; }
.chat-exportar[open] summary { background: var(--secundario); color: #fff; }
.form-exportar {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 6;
  width: 230px;
  margin-top: 4px;
  padding: .875rem;
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  text-align: left;
}
.form-exportar-ayuda { margin: 0 0 8px; font-size: 12.5px; color: var(--texto); }
.form-exportar label { display: block; font-size: 13.5px; color: var(--texto); margin-bottom: 8px; }
.form-exportar input[type="date"] {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 4px 6px;
  border: 1px solid var(--borde-input);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
}
.form-exportar-casilla { display: flex; align-items: center; gap: 6px; }
/* "form input { width: 100% }" (mas arriba en este archivo) se cuela tambien
   aca y estiraria la casilla a todo el ancho. */
.form-exportar-casilla input { width: auto; margin: 0; }
.form-exportar button { width: 100%; padding: 6px; font-size: 13px; }
.perfil-acciones { display: flex; gap: 8px; margin-bottom: 4px; }
/* El boton "de segunda" de Sneat (btn-label-secondary): gris azulado claro,
   y al pasar el mouse se llena. El `.activo` (Fijado, Pendiente) va en el
   violeta claro del principal. */
.boton-secundario {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--secundario-suave);
  border: 1px solid var(--secundario-suave);
  border-radius: var(--radio);
  padding: .317rem .75rem;
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.375;
  cursor: pointer;
  color: var(--secundario);
  transition: all .2s ease-in-out;
}
.boton-secundario:hover {
  background: var(--secundario);
  border-color: var(--secundario);
  color: #fff;
  box-shadow: 0 .125rem .25rem 0 rgba(133, 146, 163, .4);
  text-decoration: none;
}
.boton-secundario.activo { background: var(--primario-suave); border-color: var(--primario-suave); color: var(--primario); }
.boton-secundario.activo:hover { background: var(--primario); border-color: var(--primario); color: #fff; box-shadow: var(--sombra-foco); }

/* Indicadores en la lista de conversaciones. */
.icono-fijado { font-size: 13.5px; margin-right: 2px; }
/* Campana del chat con un recordatorio cuya hora ya llego. Ambar y no rojo:
   rojo ya significa "fallo" en el resto del CRM y esto no es un error, es una
   cita que se puso el propio dueno. */
.icono-recordatorio { font-size: 12.5px; margin-right: 3px; color: var(--aviso); }
.punto-pendiente {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aviso);
  margin-left: 4px;
  vertical-align: middle;
}

/* Sub-navegacion entre las pantallas de Configuracion. */
/* Con el tema Sneat son las pildoras de su pantalla de ajustes de cuenta
   (nav-pills): la activa, violeta llena con sombra. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 1.5rem;
}
.subnav a {
  padding: .4812rem 1.25rem;
  border-radius: var(--radio);
  color: var(--titulo);
  font-size: 13px;
  transition: background-color .15s, color .15s;
}
.subnav a:hover { color: var(--primario); text-decoration: none; }
.subnav a.subnav-activo { color: #fff; background: var(--primario); box-shadow: var(--sombra-foco); }

/* Lista de plantillas de respuesta rapida. */
.lista-plantillas { list-style: none; padding: 0; margin: 16px 0 0; }
.plantilla-fila {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
}
.formulario-plantilla-editar {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.formulario-plantilla-editar input[type="text"] {
  width: 180px;
  padding: 6px 8px;
  border: 1px solid var(--borde-input);
  border-radius: 6px;
  font: inherit;
}
.plantilla-texto-campo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.formulario-plantilla-editar textarea {
  padding: 6px 8px;
  border: 1px solid var(--borde-input);
  border-radius: 6px;
  font: inherit;
  resize: vertical;
}
.plantilla-acciones { flex: none; }
/* btn-label-danger de Sneat. */
.boton-peligro {
  background: var(--peligro-suave);
  color: var(--peligro);
  border: 1px solid var(--peligro-suave);
  border-radius: var(--radio);
  padding: .4812rem 1.25rem;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: all .2s ease-in-out;
}
.boton-peligro:hover { background: var(--peligro); border-color: var(--peligro); color: #fff; box-shadow: 0 .125rem .25rem 0 rgba(255, 62, 29, .4); }

.aviso-hilo { margin: 0; border-radius: 0; padding: 8px 20px; font-size: 13px; }

/* Calendario de renovaciones: grilla estilo Google Calendar (semanas
   completas de lunes a domingo) en vez de una tabla plana. A todo el ancho,
   no a los 960px del resto (mismo criterio que .contenido-tablero): son 7
   columnas y con un tope se desperdicia pantalla a los lados, como en Kommo. */
.contenido-calendario { max-width: none; display: flex; flex-direction: column; }


.calendario-leyenda { display: flex; gap: 16px; font-size: 13px; color: var(--texto); }
.calendario-leyenda span { display: flex; align-items: center; gap: 6px; }
.calendario-punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* El calendario de Sneat: tarjeta blanca, cuadricula de lineas grises
   claras y los nombres de los dias centrados en el color de los titulos. */
.calendario { background: var(--papel); border: 0; border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; margin-top: 16px; }
.calendario-fila { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario-cabecera-dias {
  background: transparent;
  border-bottom: 1px solid var(--borde);
}
.calendario-cabecera-dias div {
  padding: .75rem 10px;
  font-size: 13px;
  color: var(--titulo);
  text-align: center;
  text-transform: capitalize;
  letter-spacing: 0;
}
.calendario-semana { border-bottom: 1px solid var(--borde); }
.calendario-semana:last-child { border-bottom: none; }

/* La vista de mes reparte TODO el alto que sobra debajo entre sus propias
   filas, en vez de quedarse en el min-height de las celdas y dejar un
   colchon de espacio en blanco al pie de la pantalla (lo que Kommo no hace).
   .cal-mes pasa a columna flex: la cabecera de dias mantiene su alto de
   contenido y cada semana crece con flex:1 para repartirse el resto por
   igual -- la que tenga mas eventos igual gana algo mas, porque el flex
   arranca del alto que ya necesita su contenido (flex-basis: auto). */
.calendario.cal-mes { display: flex; flex-direction: column; flex: 1 1 auto; }
.cal-mes .calendario-cabecera-dias { flex: 0 0 auto; }
.cal-mes .calendario-semana { flex: 1 1 auto; }

.calendario-dia {
  /* 96 -> 140 el 2026-09-11, a pedido del dueno. Es la cuenta de la cuadricula
     del mes (ver .cal-mes .calendario-dia mas abajo): 12 de relleno + 22 del
     numero del dia + 3 de separacion + dos filas de bloques de 48 con su hueco
     = 136, mas un respiro. Como las filas de bloques nunca pasan de dos, este
     es el alto maximo que puede necesitar un dia, tenga un bloque o seis. */
  min-height: 140px;
  min-width: 0;
  padding: 6px;
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.calendario-dia:last-child { border-right: none; }
.calendario-dia-fuera { background: var(--fondo-chat); }
.calendario-dia-fuera .calendario-dia-numero { color: var(--texto-suave); }

.calendario-dia-numero {
  font-size: 13px;
  color: var(--titulo);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.calendario-dia-hoy { background: var(--acento); color: #fff; font-weight: 600; box-shadow: 0 .125rem .25rem 0 rgba(var(--acento-rgb), .4); }

.calendario-evento {
  display: flex;
  flex-direction: column;
  padding: 2px 6px;
  border-radius: var(--radio-sm);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
  border-left: 0;
}
.calendario-evento:hover { text-decoration: none; filter: brightness(0.96); }
.calendario-evento-cliente { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.calendario-evento-monto { color: var(--texto); }

/* Los eventos como las etiquetas de Sneat: fondo tenue y letra del color. */
.evento-vencido { background: var(--peligro-suave); color: var(--peligro); }
.calendario-punto.evento-vencido { background: var(--peligro); }
.evento-hoy { background: var(--aviso-suave); color: var(--aviso-texto); }
.calendario-punto.evento-hoy { background: var(--aviso); }
.evento-proximo { background: var(--info-suave); color: var(--info-texto); }
.calendario-punto.evento-proximo { background: var(--info); }

@media (max-width: 720px) {
  .calendario-evento-monto { display: none; }
  .calendario-dia { min-height: 72px; }
}

/* --------------------------------------------------------------------------
   Vista del comprobante (comprobante_vista.html)

   Se pinta igual que el PDF que recibe el cliente, para que revisar antes de
   "Confirmar y emitir" -- que es irreversible -- sea mirar el documento y no
   una lista de etiquetas. Naranja de la marca tomado del logo.
   -------------------------------------------------------------------------- */
.cpe {
  background: #fff;
  border-radius: var(--radio);
  padding: 28px 32px;
  margin-bottom: 24px;
  max-width: 860px;
  border: 0;
  box-shadow: var(--sombra);
  font-size: 13px;
  color: #1f2430;
}

.cpe-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  border-bottom: 3px solid #f96800;
  padding-bottom: 16px;
}
.cpe-emisor { display: flex; align-items: flex-start; gap: 16px; }
.cpe-emisor p { margin: 2px 0; color: #4b5563; }
/* El logo no se encoge (flex: none) para que el texto de al lado no lo aplaste
   cuando la linea de servicios es larga. */
.cpe-logo { width: 150px; height: auto; display: block; flex: none; }
.cpe-razon { font-weight: 700; color: #1f2430 !important; font-size: 13px; }

/* El recuadro del numero, como en toda factura peruana: RUC arriba, tipo de
   comprobante y serie-numero debajo. */
.cpe-titulo {
  border: 2px solid #1f2430;
  border-radius: 6px;
  padding: 10px 18px;
  text-align: center;
  min-width: 210px;
  flex: none;
}
.cpe-titulo p { margin: 2px 0; }
.cpe-ruc { font-size: 12px; letter-spacing: 0.5px; }
.cpe-tipo { font-weight: 700; font-size: 15px; line-height: 1.2; margin: 6px 0 !important; }
.cpe-numero { font-weight: 700; font-size: 17px; color: #f96800; }

.cpe-partes { padding: 14px 0; border-bottom: 1px solid #e5e7eb; }
.cpe-partes p { margin: 4px 0; display: flex; gap: 12px; }
.cpe-partes strong {
  width: 165px;
  flex: none;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.cpe-partes span { font-weight: 400; }
/* Los iconos acompanan a la etiqueta, nunca la reemplazan: SUNAT exige que la
   denominacion ("RUC", "FACTURA ELECTRONICA") figure escrita. Ancho fijo para
   que todas las etiquetas arranquen alineadas aunque el icono sea mas angosto. */
.cpe-partes strong i { width: 18px; text-align: center; margin-right: 7px; color: #f96800; }
.cpe-contacto i { color: #f96800; margin-right: 4px; }
.cpe-contacto i + i, .cpe-contacto i:not(:first-child) { margin-left: 10px; }
.cpe-tipo i { color: #f96800; }
.cpe-letras i { color: #f96800; margin-right: 6px; }

.cpe-items { width: 100%; border-collapse: collapse; margin-top: 14px; }
.cpe-items th {
  background: #f96800;
  color: #fff;
  text-align: left;
  padding: 7px 10px;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.cpe-items td { padding: 9px 10px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.cpe-items .num { text-align: right; }

.cpe-cierre {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-top: 16px;
}
.cpe-letras { font-weight: 700; font-size: 12px; max-width: 55%; }
.cpe-totales { border-collapse: collapse; min-width: 250px; }
.cpe-totales td { padding: 5px 10px; }
.cpe-totales .num { text-align: right; font-variant-numeric: tabular-nums; }
.cpe-totales .cpe-total td {
  border-top: 2px solid #1f2430;
  font-weight: 700;
  font-size: 15px;
  padding-top: 8px;
}

.cpe-pie { margin-top: 18px; border-top: 1px solid #e5e7eb; padding-top: 12px; }
.cpe-pie p { margin: 0; font-size: 11px; color: #6b7280; font-style: italic; }
/* En borrador se avisa fuerte que esto todavia no existe ante SUNAT: el resto
   de la vista es identica a un comprobante ya emitido y sin esto se confunden. */
.cpe-borrador {
  background: #fff7ed;
  border: 1px solid #f96800;
  border-radius: 6px;
  padding: 8px 12px;
  color: #9a3412 !important;
  font-style: normal !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
}

@media (max-width: 700px) {
  .cpe { padding: 18px; }
  .cpe-cabecera, .cpe-cierre, .cpe-emisor { flex-direction: column; }
  .cpe-partes p { flex-direction: column; gap: 0; }
  .cpe-partes strong { width: auto; }
}
/* Las lineas de servicio que ofrece la empresa, bajo el logo. Van en una sola
   linea separada por puntos: son ocho y apiladas cargarian la cabecera. */
/* Contacto del emisor: una sola linea corrida y en letra chica -- es dato de
   referencia, no titular. */
.cpe-contacto { font-size: 10px; line-height: 1.5; color: #6b7280 !important; }

.cpe-servicios {
  font-size: 11px;
  color: #6b7280 !important;
  line-height: 1.5;
  margin-bottom: 6px !important;
}

/* ------------------------------------------------------------------
   Bandeja de CORREO con forma de correo (P73)

   Lo que habia antes era la pantalla del chat de WhatsApp reusada para
   correo: burbujas, fondo de conversacion y reproductor de audio en los
   adjuntos. El dueno lo vio con datos reales y pidio deshacerlo -- parecia
   que los dos canales estaban mezclados. De ahi que estas clases sean
   propias y no compartan nada con .burbuja-*.
   ------------------------------------------------------------------ */

/* Chip del filtro por cliente o por direccion, en lugar de las pestanas. */
.correo-filtro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: .75rem 1.25rem 0;
  padding: .4rem .75rem;
  background: var(--primario-suave);
  border: 0;
  border-radius: var(--radio);
  font-size: 13px;
  color: var(--primario);
}
.correo-filtro span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-filtro a { color: var(--primario-hover); text-decoration: none; font-size: 19px; line-height: 1; }

/* Buscador de la bandeja de correo: ademas de filtrar lo que esta a la
   vista, sugiere clientes para filtrar la bandeja entera (P75). El
   desplegable se posiciona sobre la lista, de ahi el `relative` del padre. */
.correo-buscador { position: relative; margin: .75rem 1.25rem; }
.correo-sugerencias {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  max-height: 260px;
  overflow-y: auto;
}
.correo-sugerencias a {
  display: block;
  padding: .543rem 1.25rem;
  font-size: 13px;
  color: var(--titulo);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.correo-sugerencias a:hover,
.correo-sugerencias a:focus { background: var(--primario-suave); color: var(--primario-hover); }
/* La direccion debajo del nombre en el filtro por contacto: en una empresa
   hay varias personas y el nombre solo no dice a cual se esta eligiendo. */
.correo-sugerencias a small {
  display: block;
  font-size: 12px;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Los DOS filtros de la bandeja de correo (P194): contacto y empresa, aparte
   del buscador de arriba. Buscar y filtrar son preguntas distintas -- una
   mira lo que ya esta en pantalla y la otra cambia lo que el servidor
   manda -- y compartian caja hasta el 2026-09-30. */
.correo-filtros {
  display: flex;
  gap: .5rem;
  padding: .55rem 1.25rem;
  border-bottom: 1px solid var(--borde);
}
.correo-filtro-campo { position: relative; flex: 1 1 0; min-width: 0; }
.correo-filtro-campo > i {
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-suave);
  font-size: 1rem;
  pointer-events: none;
}
.correo-filtro-campo input {
  width: 100%;
  padding: .45rem .55rem .45rem 1.95rem;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  background: var(--papel);
  font-size: .8125rem;
  color: var(--texto);
}
.correo-filtro-campo input:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: var(--sombra-foco);
}
/* Por que el filtro no se aplica en la carpeta Borradores. Sin la linea, la
   pastilla puesta y la lista sin filtrar parecen un error. */
.correo-filtro-nota { font-style: normal; color: var(--texto); opacity: .8; }

/* Mismo motivo que #lista-conversaciones-wrap: el scroll vive en el
   envoltorio, no en el <ul>, o la lista desborda y no hay como bajar. */
#lista-correos-wrap { flex: 1; min-height: 0; overflow-y: auto; }
.lista-correos { list-style: none; padding: 0; margin: 0; }

/* Las filas de la bandeja de correo de Sneat: los ya leidos en gris muy
   claro, los sin leer en blanco y en negrita; al pasar el mouse la fila se
   levanta con una sombra. */
.correo-fila {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--borde);
  background: rgba(34, 48, 62, .035);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s, background-color .2s;
}
.correo-fila:hover { z-index: 1; color: inherit; box-shadow: 0 3px 10px 0 rgba(34, 48, 62, .1); }
/* Leido y sin leer tienen que distinguirse de lejos (P149). Hasta hoy la
   unica diferencia era el fondo (gris 3,5 % contra blanco) y medio punto de
   grosor de letra: el dueno miro su bandeja real y no se notaba. Ahora un
   correo sin leer lleva las tres cosas juntas -- punto naranja, letra negra
   en negrita y franja al costado -- y el ya leido se atenua a gris. */
.correo-fila.sin-ver { background: var(--papel); }
.correo-fila.sin-ver::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--acento);
}
/* El punto, delante del remitente: es lo primero que se ve al recorrer la
   lista con la mirada, antes de leer una sola palabra. */
.correo-fila.sin-ver .correo-fila-quien::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--acento);
  vertical-align: middle;
}
/* Lo ya leido se aparta: gris y sin negrita. Sin esto, "no leido en negrita"
   no destaca, porque todo lo de al lado tambien esta oscuro. */
.correo-fila .correo-fila-quien,
.correo-fila .correo-fila-asunto { font-weight: 400; color: var(--texto); }
.correo-fila.activa { background: var(--primario-suave); }
.correo-fila.activa::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primario);
}
.correo-fila.sin-ver .correo-fila-quien,
.correo-fila.sin-ver .correo-fila-asunto { font-weight: 700; color: var(--titulo); }
.correo-fila.sin-ver .correo-fila-fecha { font-weight: 600; color: var(--titulo); }

/* El numerito de sin leer: naranja de acento, no el ambar de Borradores.
   Borradores es una tarea propia a medio hacer; esto es correo de otros
   esperando. */
.correo-carpeta-contador.contador-sin-leer { background: var(--acento-suave); color: var(--acento-hover); }

/* La salida para dejar Recibidos en cero */
.correo-marcar-leidos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: var(--radio);
  background: var(--acento-suave);
  font-size: 13.5px;
  color: var(--texto);
}
.correo-marcar-leidos strong { color: var(--acento-hover); }
.correo-marcar-leidos button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .3rem .7rem;
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  background: #fff;
  color: var(--acento-hover);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.correo-marcar-leidos button:hover { background: var(--acento); color: #fff; }

.correo-fila-arriba { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.correo-fila-quien {
  font-size: 13px;
  font-weight: 500;
  color: var(--titulo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.correo-icono-salida { color: var(--texto-suave); font-size: 12px; }
.correo-fila-fecha { font-size: 12.5px; color: var(--texto-suave); white-space: nowrap; }
.correo-fila-asunto {
  display: block;
  font-size: 13px;
  color: var(--texto);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.correo-fila-previa {
  display: block;
  font-size: 13.5px;
  color: var(--texto-suave);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El panel de lectura: fondo blanco liso, nada de fondo de conversacion. */
/* El correo abierto, como la vista de lectura de Sneat: cabecera blanca y,
   sobre el gris, el cuerpo y la respuesta en tarjetas. */
.correo-lectura {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--fondo-chat);
  overflow-y: auto;
}

.correo-cabecera { padding: 1.25rem 1.5rem 1rem; background: var(--papel); border-bottom: 1px solid var(--borde); }
.correo-cabecera h2 { font-size: 1.125rem; margin: 0 0 12px; font-weight: 500; }
.correo-cabecera-datos { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.correo-de { margin: 0; font-size: 13px; }
.correo-direccion { color: var(--texto); font-weight: 400; }
.correo-para { margin: 2px 0 0; font-size: 13.5px; color: var(--texto); }
.correo-cabecera-derecha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.correo-fecha { font-size: 13.5px; color: var(--texto); white-space: nowrap; }

/* btn-outline-secondary de Sneat. */
.boton-suave {
  padding: .25rem .75rem;
  border: 1px solid var(--secundario);
  border-radius: var(--radio);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--secundario);
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  transition: all .2s ease-in-out;
}
.boton-suave:hover { background: var(--secundario); color: #fff; text-decoration: none; }
/* P226: "Marcar pendiente" del correo abierto, mismo tratamiento que
   .boton-secundario.activo (Fijar/Pendiente de WhatsApp) para que el estado
   se lea igual en los dos canales. */
.boton-suave.activo { background: var(--primario-suave); border-color: var(--primario-suave); color: var(--primario); }
.boton-suave.activo:hover { background: var(--primario); border-color: var(--primario); color: #fff; }

.correo-adjuntos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.25rem 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: var(--sombra-xs);
}
.correo-adjuntos .adjunto-doc { max-width: 280px; }

/* El cuerpo viene de fuera y puede traer su propio HTML: se acota el ancho
   para que se lea, y las imagenes y tablas anchas no rompen la pagina. */
.correo-cuerpo {
  flex: 1 0 auto;
  margin: 1.25rem 1.5rem 0;
  padding: 1.5rem;
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: var(--sombra-xs);
  color: var(--titulo);
  font-size: 13px;
  line-height: 1.55;
  overflow-x: auto;
  word-break: break-word;
}
.correo-cuerpo img { max-width: 100%; height: auto; }
.correo-cuerpo table { max-width: 100%; }
.correo-cuerpo-texto {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

.correo-responder {
  margin: 1.25rem 1.5rem 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: var(--sombra-xs);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.correo-responder-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.correo-responder-para { font-size: 13px; color: var(--texto); }
.correo-responder-derecha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* "Responder a todos" (P183): boton secundario, como el de posponer. Se pinta
   con el color principal cuando esta activo, para que se vea que las copias
   van a salir aunque las casillas queden mas abajo. */
.correo-responder-todos {
  padding: .35rem .9rem;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  background: #fff;
  color: var(--texto);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.correo-responder-todos:hover { border-color: var(--primario); color: var(--primario); }
.correo-responder-todos.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.correo-responder-cc {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  padding: .5rem .875rem;
  border: 1px dashed var(--borde-input);
  border-radius: var(--radio);
  font-size: 13.5px;
}
.correo-responder-cc-titulo { color: var(--texto-suave, var(--texto)); }
.correo-responder-cc-persona { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.correo-responder-cc-persona input { margin: 0; accent-color: var(--primario); }
.correo-responder-cc-direccion { color: var(--texto-suave, var(--texto)); font-size: 12.5px; }
.correo-copia { word-break: break-word; }
.correo-responder input[type="text"],
.correo-responder textarea,
.correo-responder select {
  width: 100%;
  padding: .543rem .875rem;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.correo-responder select { width: auto; font-size: 13px; }
.correo-responder textarea { resize: vertical; }
/* El editor con formato del cuadro de responder (P166). Es el mismo de la
   ventana de Escribir y reusa sus clases; lo unico que cambia es el alto,
   porque alla la ventana es toda suya y aqui vive debajo del correo abierto
   -- con los 220px de la ventana, el boton Enviar quedaba fuera de la
   pantalla. La barra y el editor se pegan, asi que el editor no lleva margen
   arriba (`gap` del contenedor). */
.correo-responder .escribir-barra { margin-bottom: -8px; }
.correo-responder .escribir-editor { min-height: 120px; max-height: 32vh; }
.correo-responder-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.correo-responder-pie button {
  padding: .4812rem 1.25rem;
  border: none;
  border-radius: var(--radio);
  background: var(--primario);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.correo-responder-pie button:hover { background: var(--primario-hover); box-shadow: var(--sombra-foco); }
.adjuntar-archivo { cursor: pointer; color: var(--texto); font-size: 17px; }
.adjuntar-archivo input[type="file"] { display: none; }

/* --- Escribir un correo nuevo y seguimiento de apertura (P76) --- */

.correo-cabecera-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* "Escribir": el Compose de la bandeja de Sneat. */
.boton-escribir {
  margin-left: auto;
  padding: .4rem 1rem;
  border: none;
  border-radius: var(--radio);
  background: var(--primario);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sombra-foco);
  transition: all .2s ease-in-out;
}
.boton-escribir:hover { background: var(--primario-hover); }

/* El <dialog> nativo pone el fondo oscurecido por su cuenta (::backdrop) y
   Esc ya cierra: no hace falta JavaScript para nada de eso. */
.escribir-dialogo {
  width: min(620px, 92vw);
  max-height: 88vh;
  padding: 0;
  border: none;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  color: var(--texto);
  overflow: auto;
}
.escribir-dialogo::backdrop { background: rgba(34, 48, 62, .5); }

.escribir-form { display: flex; flex-direction: column; gap: 10px; padding: 1.5rem; }
.escribir-cabecera { display: flex; align-items: center; justify-content: space-between; }
.escribir-cabecera h2 { margin: 0; font-size: 1.125rem; font-weight: 500; }
.escribir-cerrar {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--texto-suave);
  cursor: pointer;
}
.escribir-cerrar:hover { color: var(--titulo); }

.escribir-campo { display: flex; align-items: center; gap: 10px; }
.escribir-campo > span {
  width: 60px;
  flex: none;
  font-size: 13px;
  color: var(--texto);
}
.escribir-campo input,
.escribir-campo select,
.escribir-form textarea {
  flex: 1;
  width: 100%;
  padding: .543rem .875rem;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.escribir-form textarea { resize: vertical; min-height: 140px; }
.escribir-herramientas { display: flex; align-items: center; gap: 14px; }
.escribir-pie { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.escribir-pie button[type="submit"] {
  padding: .4812rem 1.5rem;
  border: none;
  border-radius: var(--radio);
  background: var(--primario);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.escribir-pie button[type="submit"]:hover { background: var(--primario-hover); box-shadow: var(--sombra-foco); }
.escribir-pie button[type="submit"]:disabled { opacity: .6; cursor: default; }

/* Lo que reemplaza al formulario despues de enviar. */
.escribir-listo { padding: 34px 22px 28px; text-align: center; }
.escribir-listo-icono { margin: 0; font-size: 40px; color: var(--exito); }
.escribir-listo-titulo { margin: 10px 0 4px; font-size: 18px; font-weight: 600; }
.escribir-listo-detalle { margin: 0; color: var(--texto); font-size: 13px; }
.escribir-listo-botones { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.escribir-listo-botones button {
  padding: .4812rem 1.25rem;
  border: none;
  border-radius: var(--radio);
  background: var(--primario);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.escribir-listo-botones .boton-suave { background: #fff; color: var(--titulo); border: 1px solid var(--borde); }

/* Seguimiento de apertura. El azul es el mismo codigo que usan los checks
   de WhatsApp, a pedido del dueno -- aunque signifiquen menos, ver la nota
   desplegable de la plantilla. */
.correo-check { color: var(--texto-suave); font-size: 12.5px; }
/* Azul a proposito (no el naranja principal): es el azul de "leido" de los
   checks de WhatsApp, a pedido del dueno. */
.correo-check-abierto { color: var(--info-texto); font-size: 12.5px; }

/* El estado de seguimiento vive en la cabecera, junto a la fecha (pedido del
   dueno el 2026-08-29 senalando esa zona en una captura). */
.correo-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .4235em .77em;
  border-radius: var(--radio-sm);
  background: var(--secundario-suave);
  color: var(--secundario);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.correo-estado.abierto { background: var(--info-suave); color: var(--info-texto); }
/* Entregado: gris con doble check. A proposito NO es azul -- el azul dice
   "lo abrieron", y entregado solo dice que llego (P79). */
.correo-estado.entregado { background: var(--secundario-suave); color: var(--secundario); }
.correo-estado.sin-datos { background: #fff; border: 1px dashed var(--borde); color: var(--texto-suave); }

.correo-seguimiento-nota { padding: 8px 28px; border-bottom: 1px solid var(--borde); }
.correo-seguimiento-nota summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--texto);
}
.correo-seguimiento-nota ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--texto); }
.correo-seguimiento-nota li { margin-bottom: 4px; }

/* ---------------------------------------------------------------------------
   La bandeja de correo en TRES COLUMNAS, como la de Sneat (2026-09-22,
   pedido del dueno): carpetas con "Escribir" | lista | correo abierto.

   Sin correo abierto (`.correo-con-abierto` no esta), la lectura se esconde,
   la lista se lleva todo el ancho y cada correo va en UN renglon: avatar,
   quien, asunto, comienzo del texto y fecha. Al abrir uno, la lista se
   angosta a 360px y los datos de cada fila se apilan como antes. Cuando la
   bandeja entera queda angosta (laptop con el menu abierto), las carpetas se
   quedan solo con su icono.
   --------------------------------------------------------------------------- */
.bandeja-correo { container-type: inline-size; container-name: correo; }
/* Se lee con lector de pantalla pero no ocupa lugar (el titulo "Correo" ya
   esta en el menu). */
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.correo-carpetas {
  flex: none;
  width: 230px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--borde);
  overflow-y: auto;
}
.correo-carpetas-cabecera { display: flex; align-items: center; gap: 8px; padding: 1.5rem 1.25rem 1rem; }
.correo-carpetas .boton-escribir {
  flex: 1;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .55rem 1rem;
  font-size: 13px;
}
.correo-carpetas .bandeja-pestanas { border-bottom: 0; padding: .25rem 0 1rem; }

.bandeja-lista.correo-lista { flex: 1; width: auto; min-width: 0; border-right: 0; }
.correo-con-abierto .bandeja-lista.correo-lista { flex: none; width: 360px; min-width: 360px; border-right: 1px solid var(--borde); }
.bandeja-correo:not(.correo-con-abierto) .correo-lectura { display: none; }

/* El buscador arriba de la lista, a lo ancho y sin recuadro ("Search mail"
   de Sneat). */
.correo-lista .correo-buscador {
  order: 0;
  flex: none;
  margin: 0;
  padding: 0 1.25rem;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--borde);
}
.correo-lista .correo-buscador > i { left: 1.25rem; font-size: 1.15rem; }
.correo-lista .correo-buscador input,
.correo-lista .correo-buscador input:focus {
  padding: .9rem 0 .9rem 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* El orden de la columna de la izquierda: buscador, los dos filtros, la
   pastilla de lo que esta filtrado y la lista. La pastilla va pegada a los
   filtros (y no al final, como hasta P194) para que se vea de donde salio. */
.correo-lista .correo-filtros { order: 1; flex: none; }
.correo-lista .correo-filtro { order: 2; margin-top: .75rem; }
.correo-lista .correo-marcar-leidos,
.correo-lista .correo-papelera-aviso { order: 3; }
.correo-lista #lista-correos-wrap { order: 9; }

.correo-fila-avatar { width: 2.125rem; height: 2.125rem; font-size: .8125rem; margin-top: 1px; }
.correo-fila-datos { display: block; flex: 1; min-width: 0; }

/* Lista ancha: un renglon por correo. */
.bandeja-correo:not(.correo-con-abierto) .correo-fila { align-items: center; padding: .85rem 1.5rem; }
.bandeja-correo:not(.correo-con-abierto) .correo-fila-avatar { margin-top: 0; }
.bandeja-correo:not(.correo-con-abierto) .correo-fila-datos {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, max-content) minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: .875rem;
}
.bandeja-correo:not(.correo-con-abierto) .correo-fila-arriba { display: contents; }
.bandeja-correo:not(.correo-con-abierto) .correo-fila-quien { grid-column: 1; grid-row: 1; }
.bandeja-correo:not(.correo-con-abierto) .correo-fila-asunto { grid-column: 2; grid-row: 1; margin: 0; max-width: 380px; color: var(--titulo); }
.bandeja-correo:not(.correo-con-abierto) .correo-fila-previa { grid-column: 3; grid-row: 1; margin: 0; }
.bandeja-correo:not(.correo-con-abierto) .correo-fila-arriba > i { grid-column: 4; grid-row: 1; }
.bandeja-correo:not(.correo-con-abierto) .correo-fila-fecha { grid-column: 5; grid-row: 1; min-width: 64px; text-align: right; }

/* La flecha para volver a la lista, delante del asunto del correo abierto. */
.correo-cabecera h2 { display: flex; align-items: center; gap: .5rem; }
.correo-volver {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--titulo);
  font-size: 1.5rem;
}
.correo-volver:hover { background: var(--hover); color: var(--titulo); }

/* --- Borradores y Papelera (P139) --- */
/* El numerito de la carpeta, como el "2" de Draft en Sneat. */
.correo-carpeta-contador {
  margin-left: auto;
  min-width: 1.5rem;
  padding: .15em .5em;
  border-radius: 50rem;
  background: var(--aviso-suave);
  color: var(--aviso-texto);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.correo-papelera-aviso {
  order: 1;
  flex: none;
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: .75rem 1.25rem 0;
  padding: .6rem .875rem;
  border-radius: var(--radio);
  background: var(--info-suave);
  color: var(--info-texto);
  font-size: .8125rem;
  line-height: 1.45;
}
.correo-papelera-aviso i { font-size: 1.05rem; margin-top: 1px; }
/* La misma caja para un borrador y para un correo pospuesto (P160): un
   renglon con un boton suelto a la derecha. Se comparten los selectores en
   vez de duplicar el CSS, pero cada uno lleva SU nombre en el HTML -- ver
   "correo-borrador-item" en la fila de un programado confundiria a quien lea
   la plantilla. */
.correo-borrador-item,
.correo-programado-item { position: relative; }
/* Lugar para el tachito de descartar, a la derecha de la fecha. */
.bandeja-correo .correo-borrador-item .correo-fila,
.bandeja-correo .correo-programado-item .correo-fila { padding-right: 3.75rem; }
.correo-borrador-marca {
  display: inline-block;
  margin-right: .35rem;
  padding: .2em .5em;
  border-radius: var(--radio-sm);
  background: var(--aviso-suave);
  color: var(--aviso-texto);
  font-size: .72rem;
  font-weight: 600;
  vertical-align: 1px;
}
.correo-borrador-descartar,
.correo-programado-frenar { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); margin: 0; z-index: 2; }
.correo-borrador-descartar button,
.correo-programado-frenar button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-suave);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.correo-borrador-descartar button:hover,
.correo-programado-frenar button:hover { background: var(--peligro-suave); color: var(--peligro); }
/* "Eliminar": el boton gris delineado de la cabecera, pero en rojo. */
.boton-suave-peligro { border-color: var(--peligro); color: var(--peligro); }
.boton-suave-peligro:hover { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.correo-cabecera-derecha .boton-suave { display: inline-flex; align-items: center; gap: 4px; }

/* --- Correos pospuestos: carpeta Programados y boton del cuadro de
   responder (P160) --- */

/* El renglon de un correo programado es un <button> y no un <a>: abre un
   popup, no navega a ninguna parte. Hay que deshacerle la pinta de boton
   para que se vea igual que los demas renglones de la lista. */
.correo-fila-programado {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--borde);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* La hora de salida es el dato que se viene a mirar en esta carpeta, asi que
   se destaca -- al reves que la fecha de un correo ya recibido, que es solo
   referencia. */
.correo-fila-fecha-programada { font-weight: 600; color: var(--primario); }

/* Los dos botones del pie del cuadro de responder van juntos a la derecha;
   el adjuntar se queda a la izquierda por el `space-between` del pie. */
.correo-responder-acciones { display: flex; align-items: center; gap: 8px; }
/* `.correo-responder-pie button` pinta TODOS los botones del pie de color
   principal y relleno. El de posponer es secundario: se le devuelve el
   delineado de `.boton-programar-envio`, que pierde por especificidad. */
.correo-responder-pie .boton-programar-envio {
  padding: .4812rem 1rem;
  border: 1px solid var(--primario);
  background: transparent;
  color: var(--primario);
}
.correo-responder-pie .boton-programar-envio:hover { background: var(--primario); color: #fff; }

/* Lo pospuesto para esta persona, encima del cuadro de responder (P164).
   Reusa `.programar-lista` del panel de WhatsApp para que los dos canales se
   vean igual; lo unico propio es la caja que lo separa del correo de arriba. */
.correo-programados-aqui {
  margin: 1rem 1.5rem 0;
  padding: .875rem 1rem;
  border: 1px solid var(--primario-suave);
  border-radius: var(--radio);
  background: var(--primario-suave);
}
.correo-programados-aqui h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 .625rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--primario);
}
.correo-programados-aqui .programar-lista { margin: 0; }
.correo-programados-aqui .programar-lista li { background: var(--papel); }

/* Bandeja angosta: carpetas solo con icono (el nombre sale al pasar el mouse). */
@container correo (max-width: 1080px) {
  .correo-carpetas { width: 76px; }
  .correo-carpetas-texto { display: none; }
  .correo-carpetas-cabecera { flex-direction: column; padding: 1.25rem .75rem .75rem; }
  .correo-carpetas .boton-escribir { width: 100%; flex: none; padding: .55rem 0; }
  .correo-carpetas .bandeja-pestanas a { justify-content: center; gap: 0; padding: .6rem 0; position: relative; }
  /* Con la carpeta reducida a su icono, el numerito no puede ir "despues del
     nombre" -- no hay nombre. Se pega a la esquina del sobre, como el globo
     de una aplicacion del celular, o se sale de la columna. */
  .correo-carpetas .bandeja-pestanas a .correo-carpeta-contador {
    position: absolute;
    top: .1rem;
    left: 50%;
    margin-left: .3rem;
    min-width: 0;
    padding: .05em .35em;
    font-size: .6875rem;
  }
}


/* ---------------------------------------------------------------------------
   Uso del plan (/uso) y panel de administracion general (/admin) -- P77.
   --------------------------------------------------------------------------- */

/* Las tarjetas de arriba de /uso: un numero grande y su barra. */
.tarjetas-uso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
/* La tarjeta de estadistica de Sneat: el titulo arriba a la izquierda, el
   icono en un cuadrito de color tenue arriba a la derecha y la cifra grande
   debajo. El icono ya venia dentro del titulo; aqui solo se lo cambia de
   lado y se le da el cuadrito. */
.tarjeta-uso {
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
}
.tarjeta-uso h3 {
  margin: 0 0 .5rem;
  font-size: 13px;
  font-weight: 400;
  color: var(--titulo);
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.tarjeta-uso h3 > i:first-child {
  flex: none;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--radio);
  background: var(--primario-suave);
  color: var(--primario);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarjeta-uso-numero {
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--titulo);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.tarjeta-uso-de { font-size: 13px; color: var(--texto); font-weight: 400; }

/* La barra grande, la de las pantallas (la chiquita de la barra lateral es
   .medidor-barra). Misma escala de color en las dos: azul, ambar al 80%,
   rojo al llegar al tope. */
.barra-uso {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--primario-suave);
  overflow: hidden;
  margin-top: 10px;
}
.barra-uso-fina { height: 6px; margin-top: 6px; }
.barra-uso-relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primario);
}
.barra-uso-alto { background: var(--aviso); }
.barra-uso-lleno { background: var(--peligro); }

.desglose-uso { list-style: none; padding: .5rem 1.5rem; margin: 0; background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); }
.desglose-uso li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 13px;
}
.desglose-uso li:last-child { border-bottom: none; }
.desglose-uso i { width: 18px; text-align: center; color: var(--texto); }
.desglose-uso .desglose-valor {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* La pastilla del plan, en la lista de cuentas y en la ficha. */
.pastilla-plan {
  display: inline-block;
  padding: .4235em .77em;
  border-radius: var(--radio-sm);
  background: var(--primario-suave);
  color: var(--primario);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
}
.pastilla-plan-vacia { background: var(--secundario-suave); color: var(--texto); }
.pastilla-suspendida { background: var(--peligro-suave); color: var(--peligro); }

.admin-celda-uso { min-width: 150px; }
.admin-celda-uso span { font-size: 13.5px; color: var(--texto); }

/* Las cuatro cifras del encabezado del panel. */
.admin-totales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}
.admin-total {
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem 1.5rem;
}
.admin-total-numero { font-size: 1.5rem; font-weight: 500; color: var(--titulo); font-variant-numeric: tabular-nums; }
.admin-total-etiqueta { font-size: 13.5px; color: var(--texto); }

/* Los cinco planes, uno al lado del otro. */
.rejilla-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.tarjeta-plan {
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
}
.tarjeta-plan.plan-inactivo { opacity: 0.6; }
.tarjeta-plan h2 { margin: 0; font-size: 18px; }
.tarjeta-plan-precio {
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--titulo);
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}
.tarjeta-plan-precio small { font-size: 13px; font-weight: 400; color: var(--texto); }
.tarjeta-plan label { display: block; font-size: 13.5px; margin-top: 10px; color: var(--texto); }
.tarjeta-plan input[type="text"],
.tarjeta-plan input[type="number"] { width: 100%; }
.tarjeta-plan .acciones-form { margin-top: 14px; }
/* Las dos casillas de la tarjeta de plan: el input al lado del texto, no
   encima como el resto de los campos del formulario. */
.tarjeta-plan label.casilla { display: flex; align-items: center; gap: 8px; }
.tarjeta-plan label.casilla input { width: auto; }

/* --- Editor de correo con formato y envio pospuesto (P77) --- */

/* La ventana crece: con barra de formato y editor de verdad, la de antes
   quedaba apretada (el dueno pidio agrandarla si hacia falta). */
.escribir-dialogo { width: min(760px, 94vw); }

.escribir-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid var(--borde-input);
  border-bottom: none;
  border-radius: var(--radio) var(--radio) 0 0;
  background: var(--fondo);
}
.escribir-barra-separador {
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: var(--borde);
}
.escribir-formato {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 6px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--texto);
  font-size: 13px;
  cursor: pointer;
}
.escribir-formato:hover { background: var(--borde); color: var(--titulo); }
.escribir-archivo-nombre { font-size: 13.5px; color: var(--texto); }

/* "Mejorar con IA" destaca a proposito: es lo que mas se va a usar de esta
   barra, no un boton mas (pedido del dueno el 2026-08-29). */
.boton-ia-destacado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: none;
  border-radius: var(--radio);
  background: linear-gradient(72deg, #ff9a3d, var(--acento));
  box-shadow: var(--sombra-foco);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.boton-ia-destacado:hover { filter: brightness(1.08); }
.boton-ia-destacado:disabled { opacity: .6; cursor: default; }

.escribir-editor {
  min-height: 220px;
  max-height: 45vh;
  overflow-y: auto;
  padding: .75rem .875rem;
  border: 1px solid var(--borde-input);
  border-radius: 0 0 var(--radio) var(--radio);
  color: var(--titulo);
  background: #fff;
  font-size: 13px;
  line-height: 1.5;
}
.escribir-editor:focus { outline: none; border-color: var(--primario); box-shadow: var(--sombra-foco); }
/* El texto de ayuda de un contenteditable no existe: se dibuja aqui y
   desaparece solo en cuanto hay contenido. */
.escribir-editor:empty::before {
  content: attr(data-vacio);
  color: var(--texto-suave);
}
.escribir-editor ul, .escribir-editor ol { margin: 6px 0; padding-left: 24px; }
.escribir-editor a { color: var(--primario); }

/* Aviso de "queda programado", una vez elegida la hora en la ventana (P81).
   Antes aqui vivia el selector de fecha incrustado; el dueno pidio que fuera
   igual que en WhatsApp: un boton que abre una ventana. */
/* La ventana de programar se abre encima de la de escribir. */
#dialogo-programar-correo label { display: block; margin-top: 10px; font-size: 13px; }
#dialogo-programar-correo input[type="datetime-local"] {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid var(--borde-input);
  border-radius: 6px;
  font: inherit;
}
.escribir-pie { flex-wrap: wrap; }


/* ---------------------------------------------------------------------------
   PANEL DEL SISTEMA (base_admin.html) -- 2026-08-29
   ---------------------------------------------------------------------------
   Es un sitio aparte del CRM y tiene que NOTARSE de un vistazo: barra oscura
   arriba en vez de la lateral azul, franja ambar y un aviso permanente. No es
   decoracion -- lo que se evita es tocar algo creyendo que sigues en el CRM
   de siempre. El ambar se usa solo aqui; en el resto del CRM ese color
   significa "atencion" y aqui significa exactamente lo mismo.
   --------------------------------------------------------------------------- */

.admin-cuerpo { background: var(--fondo); }

/* Con el tema Sneat sigue siendo la barra OSCURA (la del menu "semi-dark" de
   Sneat) con la franja ambar: tiene que notarse que no es el CRM de siempre. */
.admin-barra {
  background: var(--oscuro);
  color: #fff;
  border-bottom: 3px solid var(--aviso);
}
.admin-barra-dentro {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.admin-marca {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-marca:hover { color: var(--aviso); text-decoration: none; }
.admin-marca i { color: var(--aviso); }

.admin-menu { display: flex; gap: 20px; align-self: stretch; }
.admin-menu a {
  color: #bdc1c5;
  font-size: 13px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.admin-menu a:hover { color: #fff; text-decoration: none; }
.admin-menu-activo, .admin-menu-activo:hover { color: #fff; border-bottom-color: var(--aviso); }

.admin-barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.admin-quien { color: var(--texto-suave); font-size: 13px; }
.admin-volver { color: #bdc1c5; font-size: 13px; }
.admin-volver:hover { color: #fff; text-decoration: none; }
.admin-salir-form { margin: 0; }
.admin-salir {
  background: #3a3b54;
  border: 1px solid #4e4f6c;
  color: #e6e6f1;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.admin-salir:hover { background: #4e4f6c; color: #fff; }

.admin-aviso {
  margin: 0;
  padding: 10px 24px;
  background: var(--aviso-suave);
  border-bottom: 1px solid var(--aviso-borde);
  color: var(--aviso-texto);
  font-size: 13px;
}
.admin-aviso i { margin-right: 6px; }

.admin-contenido { max-width: 1400px; margin: 0 auto; padding: 24px; }

/* La pantalla de ingreso: sola en el centro, sin nada alrededor que invite a
   seguir haciendo clic antes de escribir la contrasena. */
.admin-puerta {
  max-width: 460px;
  margin: 60px auto;
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 2rem;
}
.admin-puerta h1 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.admin-puerta h1 i { color: var(--aviso); }
.admin-puerta input[type="password"] { width: 100%; }

/* --- Historial de aperturas y aviso en vivo (P82, ampliado en P148) --- */

/* El doble check es un boton: de ahi sale el globo y el historial (P148). */
.correo-seg { cursor: pointer; }
.correo-fila .correo-seg { padding: 0 2px; }

/* El globo oscuro del doble check. Mismo tono que el globo del menu y el del
   calendario -- es el mismo objeto en todo el CRM, no un estilo nuevo.
   A diferencia de aquellos, este SI recibe el mouse: lleva un boton adentro
   y hay que poder apretarlo. */
.seg-globo {
  position: fixed;
  z-index: 1100;
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: var(--radio);
  background: var(--oscuro);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.seg-globo.visible { opacity: 1; visibility: visible; }
.seg-globo-texto { white-space: nowrap; }
/* Naranja de acento y no azul como en Gmail: en este CRM el azul significa
   "leido" y el naranja es lo que se puede apretar (decision 33). Aclarado y
   en semi-negrita porque el dueno lo reporto: el naranja del logo sobre el
   carbon del globo no se distinguia. */
.seg-globo-boton {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--acento-claro);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* Al pasar el mouse se va a blanco: sobre oscuro es el unico "mas visible"
   que queda, y deja claro que el mouse esta encima del enlace. */
.seg-globo-boton:hover { color: #fff; }

/* La ventana del historial (P148). Mas ancha que el dialogo generico: aqui
   se lee una lista con fecha, hora y dispositivo, no una pregunta. */
.dialogo-aperturas { max-width: 520px; }
.dialogo-aperturas .dialogo-cabecera { margin-bottom: 8px; }
.dialogo-aperturas .dialogo-cabecera strong { font-size: 1.0625rem; color: var(--titulo); }
.aperturas-cerrar {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.aperturas-cerrar:hover { color: var(--titulo); }
.aperturas-asunto {
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--titulo);
  font-size: 13px;
}
.aperturas-para { font-weight: 400; font-size: 13px; color: var(--texto); margin-top: 2px; }
.aperturas-para b { font-weight: 600; }
.aperturas-resumen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radio);
  background: var(--fondo);
  font-size: 13.5px;
  color: var(--texto);
}
.aperturas-resumen b { font-weight: 600; color: var(--titulo); }
.aperturas-cargando, .aperturas-vacio {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--texto);
}
.aperturas-cuerpo { max-height: 46vh; overflow: auto; }
/* El boton de cerrar no se estira de lado a lado: es una salida, no la
   accion principal de la ventana. */
.dialogo-aperturas .dialogo-acciones button { width: auto; flex: 0 0 auto; }

/* La lista de aperturas. Vive en la ventana desde P148; antes estaba
   plegada bajo el correo abierto y las clases son las mismas. */
.correo-historial-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.correo-historial-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  font-size: 13.5px;
  color: var(--texto);
  border-top: 1px solid var(--secundario-suave);
}
.correo-historial-lista .historial-icono { width: 16px; text-align: center; color: var(--texto-suave); }
.correo-historial-lista li.historial-apertura .historial-icono,
.correo-historial-lista li.historial-apertura .historial-que { color: var(--info-texto); }
.correo-historial-lista .historial-que { min-width: 74px; font-weight: 600; }
.correo-historial-lista .historial-cuando { flex: 1; }
.correo-historial-lista .historial-cuando b { font-weight: 600; color: var(--titulo); }
.correo-historial-lista .historial-como { color: var(--texto-suave); }

/* La nota de confiabilidad, dentro de la ventana: sin el borde ni el
   relleno que lleva bajo la cabecera del correo abierto. */
.dialogo-aperturas .correo-seguimiento-nota {
  padding: 12px 0 0;
  border-bottom: 0;
  border-top: 1px solid var(--borde);
  margin-top: 12px;
}

/* El aviso en vivo: abajo a la derecha, fuera del camino, y se va solo. */
.aviso-vivo {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  padding: .875rem 1.125rem;
  border-radius: var(--radio);
  background: var(--primario);
  color: #fff;
  font-size: 13px;
  box-shadow: var(--sombra-lg), var(--sombra-foco);
}
.aviso-vivo button {
  background: none;
  border: none;
  color: var(--primario-borde);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.aviso-vivo button:hover { color: #fff; }
/* Sin esto el cartel se ve SIEMPRE, vacio: `display: flex` le gana al
   `[hidden]` del navegador por venir despues con la misma especificidad. Es
   la misma trampa ya anotada arriba en .cita-preview y .ia-redaccion-menu.
   El dueno lo reporto el 2026-08-29 como "un boton vacio abajo que no lleva
   a ningun lugar". */
.aviso-vivo[hidden] { display: none !important; }

/* Campanita para activar los avisos de Windows (P83). Solo se ve mientras
   el permiso no este dado: una vez concedido no hay nada que apretar, y si
   el navegador lo bloqueo, este boton tampoco lo revierte. */
.boton-campana {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto);
  font-size: 13px;
  cursor: pointer;
}
.boton-campana:hover { background: var(--secundario-suave); color: var(--titulo); }
.boton-campana[hidden] { display: none !important; }


/* --- Recordatorios y notas del panel derecho del chat (2026-08-30) ------- */

.recordatorio-lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.recordatorio {
  background: var(--fondo);
  border-radius: var(--radio);
  padding: .625rem .75rem;
  font-size: 13px;
}
/* El que ya toca se distingue solo: si todos se vieran igual, habria que
   leer las fechas una por una para saber cual es de hoy. */
.recordatorio-vencido { background: var(--aviso-suave); box-shadow: inset 3px 0 0 var(--aviso); }
.recordatorio-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recordatorio-fecha { font-variant-numeric: tabular-nums; color: var(--titulo); }
.recordatorio-vencido .recordatorio-fecha { color: var(--aviso-texto); font-weight: 600; }
.recordatorio-tipo {
  background: var(--papel); color: var(--primario);
  border-radius: var(--radio-sm); padding: .3em .6em; font-size: .75rem; font-weight: 500; white-space: nowrap;
}
.recordatorio-nota { margin: 4px 0 0; color: var(--texto); white-space: pre-wrap; }
.recordatorio-acciones { display: flex; gap: 6px; margin-top: 6px; }
.recordatorio-acciones form { margin: 0; flex: 1; }
.recordatorio-acciones button { width: 100%; font-size: 13.5px; padding: 4px 6px; }
.recordatorio-toca { background: var(--aviso-suave); color: var(--aviso-texto); }

.recordatorio-form, .nota-form { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.recordatorio-campo { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 13.5px; color: var(--texto); }
.recordatorio-campo input, .recordatorio-campo select {
  width: 100%; margin: 0; padding: .45rem .75rem;
  border: 1px solid var(--borde-input); border-radius: var(--radio); font-size: 13px;
}
.recordatorio-guardar { width: 100%; }
.nota-form textarea {
  width: 100%; margin: 0; padding: .543rem .75rem;
  border: 1px solid var(--borde-input); border-radius: var(--radio); font-size: 13px; resize: vertical;
}
.nota-form button { width: 100%; }

/* El mensaje al que llego un resultado del buscador global. Se apaga solo a
   los 4 segundos: es un "es este", no un estado. */
.burbuja-destacada > * {
  outline: 2px solid var(--aviso);
  outline-offset: 2px;
  border-radius: var(--radio);
}

/* --- Buscador global de mensajes (2026-08-30) --------------------------- */

.resultados { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.resultado { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); }

/* La tarjeta entera es el enlace (P144). El relleno vive aqui y no en .resultado
   para que el area de clic sea toda la tarjeta y no solo el texto. */
.resultado-enlace {
  display: block; padding: 1rem 1.25rem;
  color: inherit; text-decoration: none;
  border-radius: var(--radio);
  transition: background .12s ease;
}
a.resultado-enlace:hover { background: var(--primario-suave); }
a.resultado-enlace:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
/* Sin a donde ir: se ve igual pero no finge ser un boton. */
.resultado-sin-enlace { cursor: default; }
.resultado-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.resultado-quien { display: flex; align-items: baseline; gap: 8px; font-weight: 600; }
.resultado-quien i { color: var(--texto); font-size: 13px; }
.resultado-sin-ficha { font-weight: 400; color: var(--texto); }
.resultado-meta { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--texto); }
.resultado-fecha { font-variant-numeric: tabular-nums; }
.resultado-asunto { margin: 6px 0 0; font-size: 13px; color: var(--titulo); font-weight: 600; }
.resultado-fragmento { margin: 6px 0 0; font-size: 13px; color: var(--texto); }
.resultado-etiqueta {
  display: inline-block;
  background: var(--secundario-suave); color: var(--secundario);
  border-radius: var(--radio-sm); padding: .4235em .77em; font-size: .75rem; font-weight: 500; line-height: 1;
}
.resultado-etiqueta-audio { background: var(--primario-suave); color: var(--primario); margin-right: 6px; }
/* El pie "hay N mensajes mas nuevos", solo al entrar desde el buscador. */
.hilo-posteriores { margin-top: 8px; }

/* --- Portal publico: el bloque de la ficha del cliente (Fase 7) ---------- */

.portal-bloque { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borde); }
.portal-bloque h3 { margin: 0 0 6px; font-size: 16px; }
.portal-bloque .ayuda { margin: 0 0 10px; }
.portal-enlace { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.portal-enlace input {
  flex: 1; min-width: 240px; margin: 0; padding: .543rem .875rem;
  border: 1px solid var(--borde-input); border-radius: var(--radio);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--fondo);
}
.portal-enlace .boton-secundario { white-space: nowrap; text-decoration: none; }
.portal-visitas { margin: 8px 0 10px; }
.portal-acciones { display: flex; gap: 8px; }
.portal-acciones form { margin: 0; }

/* --- Horario de atencion (2026-08-30) ----------------------------------- */

.horario-bloque { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.5rem; margin-top: 1.5rem; max-width: 780px; }
.horario-bloque h2 { margin: 0 0 8px; font-size: 1.125rem; }
.horario-form { margin: 12px 0 0; }
.horario-encendido { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 600; }
.horario-encendido input { width: auto; margin: 0; }
.horario-apagado { margin: 0 0 12px; }
.horario-dias { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.horario-dias label {
  display: flex; align-items: center; gap: 6px; margin: 0;
  background: var(--fondo); border-radius: var(--radio); padding: .45rem .8rem; font-size: 13px;
}
.horario-dias input { width: auto; margin: 0; }
.horario-horas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.horario-horas label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; color: var(--texto); }
.horario-horas input { width: auto; margin: 0; padding: 6px 8px; border: 1px solid var(--borde-input); border-radius: 6px; }

.avisos-previos-tabla { margin: 12px 0 0; }
.avisos-fila {
  display: grid; grid-template-columns: 1.4fr 1fr 0.6fr 0.6fr;
  align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde);
}
.avisos-cabecera { font-size: 13px; color: var(--texto); font-weight: 600; border-bottom: 2px solid var(--borde); }
.avisos-fila input[type="number"] { width: auto; margin: 0; padding: 6px 8px; border: 1px solid var(--borde-input); border-radius: 6px; }
.avisos-check { display: flex; justify-content: center; margin: 0; }
.avisos-check input { width: auto; margin: 0; }

/* --- Vista previa de un aviso (P121, 2026-09-11) ------------------------ */

.previa-controles { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.previa-controles label { margin: 0; flex: 1; min-width: 180px; }
.previa-controles select { margin: 0; }
.previa-controles button { margin: 0; white-space: nowrap; }
.previa-etiqueta { font-size: 13px; color: var(--texto); font-weight: 600; }
/* El dia en que saldria: es lo que evita leer "vence en 1 dia" como un error
   de cuentas cuando el vencimiento esta a meses. */
.previa-cuando {
  margin: 0 0 4px; padding: .625rem 1rem; border-radius: var(--radio);
  background: var(--primario-suave); color: var(--primario); font-size: 13px;
}
/* El correo, como una tarjeta con su asunto arriba: es lo primero que ve el
   cliente y lo mas facil de dejar con una variable sin reemplazar. */
.previa-correo { border: 0; border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra); margin-bottom: 16px; }
.previa-correo-cabecera {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--borde); background: var(--fondo);
  border-radius: 8px 8px 0 0;
}
.previa-correo-cuerpo { padding: 14px; font-size: 13px; line-height: 1.6; color: var(--titulo); }
.previa-whatsapp { margin-bottom: 8px; }
/* Burbuja verde como la del chat: ver el mensaje con la forma que va a tener
   ayuda mas que leerlo en un recuadro neutro. */
/* La burbuja propia del chat (violeta, tema Sneat): ver el mensaje con la
   forma que va a tener ayuda mas que leerlo en un recuadro neutro. */
.previa-burbuja {
  margin-top: 6px; padding: .543rem 1rem; max-width: 460px;
  background: var(--primario); border-radius: var(--radio) 0 var(--radio) var(--radio);
  font-size: 13px; line-height: 1.5; color: #fff; box-shadow: var(--sombra-xs);
}

/* --- Campos propios del tipo de servicio (P120, 2026-09-11) ------------- */

.lista-campos { margin: 12px 0; }
.campo-tipo-fila {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--borde);
}
.campo-tipo-nombre { display: flex; gap: 8px; align-items: center; margin: 0; }
.campo-tipo-nombre label { margin: 0; }
.campo-tipo-nombre input { width: 220px; margin: 0; padding: 6px 8px; border: 1px solid var(--borde-input); border-radius: 6px; }
.campo-tipo-nombre button { margin: 0; }
.campo-tipo-datos { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.campo-tipo-datos .ayuda { margin: 0; }
/* Con varios campos, la tabla de valores se pasa de ancho: que se desplace
   ella sola en vez de estirar toda la pantalla. */
.tabla-scroll { overflow-x: auto; }
.tabla-scroll input[type="text"] { width: 100%; min-width: 150px; margin: 0; padding: 6px 8px; border: 1px solid var(--borde-input); border-radius: 6px; }
/* Los campos propios en el formulario de un servicio y en la ficha del cliente. */
.campos-tipo-grupo { margin-bottom: 8px; }
.campos-tipo-valores { display: block; font-size: 13.5px; color: var(--texto); }

/* --- Envio por lotes (2026-08-30) --------------------------------------- */

.envio-form textarea { width: 100%; }
.envio-clientes { border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.25rem; margin: 16px 0; background: var(--papel); }
.envio-clientes legend { font-size: 13px; color: var(--texto); padding: 0 4px; }
.envio-acciones-lista { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.envio-acciones-lista input[type="search"] {
  flex: 1; min-width: 160px; margin: 0; padding: 6px 8px;
  border: 1px solid var(--borde-input); border-radius: 6px;
}
.envio-contador { white-space: nowrap; }
/* Alto fijo con scroll: con 60 clientes, una lista suelta empuja el boton de
   enviar fuera de la pantalla y hay que bajar a ciegas para encontrarlo. */
.envio-lista {
  max-height: 320px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px;
}
.envio-cliente { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 6px; border-radius: 6px; font-size: 13px; }
.envio-cliente:hover { background: var(--fondo); }
.envio-cliente input { width: auto; margin: 0; }
.envio-texto { color: var(--texto); font-size: 13px; }

/* --- Quien atiende cada conversacion (2026-08-30) ----------------------- */

.chat-atiende { margin: 0; }
.chat-atiende select {
  width: auto; margin: 0; padding: .4rem .75rem; font-size: 13px;
  border: 1px solid var(--borde-input); border-radius: var(--radio); background: var(--papel);
}
.bandeja-filtros { flex: none; display: flex; gap: 6px; padding: .25rem 1.5rem .5rem; }
.bandeja-filtro {
  font-size: .8125rem; font-weight: 500; color: var(--titulo); text-decoration: none;
  padding: .3rem .85rem; border-radius: var(--radio); background: transparent;
}
.bandeja-filtro:hover { text-decoration: none; color: var(--primario); }
.bandeja-filtro-activo, .bandeja-filtro-activo:hover { background: var(--primario); color: #fff; box-shadow: var(--sombra-foco); }

/* --- Listas de la bandeja de WhatsApp (P177, 2026-09-25) ---------------- */
/* La fila crece con las listas que cada empresa se arme, asi que envuelve a
   la linea siguiente en vez de empujar los chats fuera de la pantalla. */
.bandeja-filtros-listas { flex-wrap: wrap; row-gap: 4px; align-items: center; }
/* El numerito de "No leidos", como el que WhatsApp pone en su pastilla. */
.bandeja-filtro-cuenta { font-size: .75rem; font-weight: 700; opacity: .8; }
/* Un punto antes del nombre para distinguir de un vistazo una lista de la
   empresa de los filtros que vienen de fabrica. En WhatsApp es igual. */
.bandeja-filtro-lista::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px;
  border-radius: 50%; background: var(--acento); vertical-align: middle;
}
.bandeja-filtro-activo.bandeja-filtro-lista::before { background: #fff; }
/* El "+" y el lapiz: se ven como pastillas pero de contorno, para que no
   parezcan un filtro mas que se puede encender. */
.bandeja-filtro-boton {
  border: 1px dashed var(--borde-input); color: var(--texto); cursor: pointer;
  line-height: 1; padding: .3rem .6rem; background: transparent;
}
.bandeja-filtro-boton:hover { color: var(--primario); border-color: var(--primario); background: transparent; box-shadow: none; }
.bandeja-filtro-boton i { font-size: 1rem; vertical-align: middle; }
.bandeja-aviso { margin: 0 1.5rem .5rem; }

/* El dialogo de crear y editar una lista es mas ancho que los demas: dentro
   va la lista entera de chats con sus casillas. */
.dialogo-listas { max-width: 560px; }
.dialogo-listas label { display: block; }
.dialogo-listas-barra { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; }
.dialogo-listas-barra input {
  flex: 1; padding: .4rem .75rem; border: 1px solid var(--borde-input);
  border-radius: var(--radio); font: inherit;
}
.dialogo-listas-chats { border: 1px solid var(--borde); border-radius: var(--radio); padding: 6px; }
.dialogo-listas-borrar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }

/* Las casillas de "en que listas esta este chat", en el panel de la derecha. */
.perfil-listas { display: flex; flex-direction: column; gap: 4px; }
.perfil-lista-opcion { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.perfil-lista-opcion input { width: auto; margin: 0; }
.perfil-listas button { align-self: flex-start; margin-top: 8px; }

/* --- Mensajes postergados de WhatsApp (P177) ---------------------------- */
.tabla-postergados td { vertical-align: top; }
.postergado-cuando strong { display: block; color: var(--titulo); }
.postergado-cuando span { color: var(--texto-suave); font-size: .8125rem; }
/* Ya le paso la hora y sigue pendiente: sale en la proxima revision (cada
   minuto). Se marca en vez de dibujar una hora pasada como si nada. */
.postergado-vencido { background: var(--aviso-suave); }
.postergado-marca {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--aviso); color: #fff; font-size: .6875rem; font-weight: 600;
}
/* El renglon entero es el boton que abre el mensaje completo. */
.postergado-abrir {
  width: 100%; text-align: left; background: transparent; border: 0; padding: 0;
  color: var(--texto); font: inherit; cursor: pointer; box-shadow: none;
}
.postergado-abrir:hover { color: var(--primario); background: transparent; box-shadow: none; }
.postergado-acciones form { margin: 0; }
.postergados-lotes { margin-top: 1rem; }
/* La inicial de quien lo atiende, al lado del nombre. Gris y chica: dice de
   quien es sin competir con el nombre del cliente, que es lo que se lee. */
.conversacion-atiende {
  display: inline-flex; align-items: center; justify-content: center;
  /* 16px -> 20px (2026-09-08): el circulo crecio junto con la letra de
     adentro para que no quedara apretada -- una letra de 12px casi no
     entraba en el circulo viejo de 16px. */
  width: 20px; height: 20px; margin-left: 4px;
  border-radius: 50%; background: var(--secundario-suave); color: var(--secundario);
  font-size: 11px; font-weight: 600;
}

/* --- Escritorio Haky: el punto de estado en la tabla de usuarios (P91) --- */
/* Un punto de color y una palabra al lado, no solo el punto: el color por si
   solo no le dice nada a quien no distingue bien verde de gris, y el dueno de
   este CRM tiene problemas de vista. */
.celda-escritorio { white-space: nowrap; }

.escritorio-punto {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.escritorio-vivo { background: var(--exito); }
.escritorio-caido { background: #bdc1c5; }
.escritorio-texto { font-size: 13.5px; color: var(--texto); }
.escritorio-sin { color: #bdc1c5; }
/* Una PC que se quedo con una version vieja del programa (P166). En ambar
   y no en rojo: no esta rota, solo le falta pulsar Actualizar. */
.escritorio-viejo {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  padding: .1rem .45rem; border-radius: var(--radio-sm);
  background: var(--aviso-suave); color: var(--aviso-texto);
  font-size: 12px; font-weight: 600; cursor: help;
}

/* Recuadro del Facturador que corre en la PC del dueno (P92, pantalla
   /configuracion/facturacion). Va en su propio marco porque no es un campo
   mas del formulario: no se escribe nada ahi -- es lo que la computadora le
   REPORTA al CRM, y leerlo mezclado con las casillas del servidor haria
   pensar que se configura desde aqui. */
.bloque-form {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px 4px;
  margin: 0 0 16px;
}
.bloque-form legend { font-size: 13px; color: var(--texto); padding: 0 4px; }
.bloque-form p { margin: 0 0 10px; }

/* ------------------------------------------------------------------ */
/* Tablero de cobranza (P94). Las cajas para arrastrar, al estilo del  */
/* embudo de Kommo pero con columnas de cobranza -- ver app/cobranza.py */
/* ------------------------------------------------------------------ */

/* A todo el ancho, no a los 960px del resto: son cinco columnas y con el
   ancho normal habria que desplazarse en horizontal desde la primera. */
.contenido-tablero { max-width: none; }

.tablero {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
}
/* Con el tema Sneat las columnas no tienen fondo (como su Kanban): el titulo
   grande arriba y las tarjetas blancas con sombra sueltas sobre el gris. */
.tablero-columna {
  flex: 1 1 0;
  min-width: 250px;
  background: transparent;
  border-radius: var(--radio);
}
/* La barra de color de arriba. Kommo la usa para ubicarse sin leer el titulo
   y funciona: a los dos dias uno reconoce "la naranja" antes que la palabra.
   Se queda, redondeada, encima del titulo. */
.tablero-barra { height: 4px; border-radius: 4px; margin: 0 .25rem; }
.tablero-cabecera {
  padding: .75rem .25rem .875rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: help;
}
.tablero-titulo {
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--titulo);
}
.tablero-cuenta { font-size: .8125rem; color: var(--texto); }

/* La zona donde se sueltan las tarjetas. El alto minimo no es estetico: una
   columna vacia sin alto no se puede apuntar con el raton. */
.tablero-lista {
  min-height: 90px;
  padding: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tablero-lista.zona-activa {
  background: var(--primario-suave);
  outline: 2px dashed var(--primario);
  outline-offset: -4px;
  border-radius: var(--radio);
}

/* La tarjeta del Kanban de Sneat: blanca, sin borde, con sombra. El estado
   (vencida, promesa incumplida) sigue marcado con la franja de la izquierda,
   ahora dibujada con una sombra interior para no sumar borde. */
.tarjeta {
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1rem 1.125rem;
  font-size: 13px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tarjeta:active { cursor: grabbing; }
.tarjeta-arrastrando { opacity: .4; }
.tarjeta-vencida { box-shadow: inset 3px 0 0 var(--aviso), var(--sombra); }
/* Promesa incumplida: rojo. Es lo unico del tablero donde alguien dijo una
   fecha y no la cumplio, y merece verse antes que nada. */
.tarjeta-alerta { box-shadow: inset 3px 0 0 var(--peligro), var(--sombra); }

.tarjeta-fila { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tarjeta-cliente {
  font-weight: 500;
  font-size: 13px;
  color: var(--titulo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tarjeta-cliente:hover { color: var(--primario); }
.tarjeta-dias { font-size: 12.5px; color: var(--texto); white-space: nowrap; }
.tarjeta-dias.dias-vencido { color: var(--peligro); font-weight: 600; }
.tarjeta-dias.dias-hoy { color: var(--aviso-texto); font-weight: 600; }

.tarjeta-servicio {
  color: var(--texto);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tarjeta-monto { font-weight: 600; color: var(--titulo); }

.tarjeta-promesa {
  align-self: flex-start;
  background: var(--info-suave);
  color: var(--info-texto);
  border: none;
  border-radius: var(--radio-sm);
  padding: .35em .7em;
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
}
.tarjeta-promesa:hover { background: var(--info); color: #fff; }
.tarjeta-promesa.promesa-vencida { background: var(--peligro-suave); color: var(--peligro); }
.tarjeta-nota { font-size: 12.5px; color: var(--texto); font-style: italic; }

/* Lo ultimo que escribio el cliente, dentro de la tarjeta. Kommo lo hace en
   su columna de entrantes y es lo que evita abrir el chat solo para recordar
   de que iba la conversacion. */
.tarjeta-respuesta {
  display: flex;
  gap: 6px;
  font-size: .8125rem;
  color: var(--titulo);
  background: var(--fondo-chat);
  border-radius: var(--radio-sm);
  padding: .3rem .5rem;
}
.tarjeta-respuesta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tarjeta-etiqueta { font-size: 12.5px; color: var(--aviso-texto); }

/* Las dos senales de la tarjeta (P215). Deliberadamente discretas: son contexto
   para decidir a quien llamar, no alarmas. La de "te escribio y nadie le
   contesto" si llama la atencion, porque es la unica que senala algo que
   hicimos mal nosotros. */
.tarjeta-etiqueta.etiqueta-ojo { color: var(--peligro); font-weight: 600; }
.tarjeta-senal { font-size: 12px; color: var(--texto-suave); }
.tarjeta-senal i { margin-right: 4px; }

/* Franja de aviso arriba de una pantalla (hoy, el Cobrador apagado en el
   tablero). Usa los tokens de :root como toda regla nueva (decision 33). */
.aviso-franja {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--peligro-suave);
  border: 1px solid var(--peligro-borde);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
}
.aviso-franja i { color: var(--peligro); margin-top: 2px; }

/* La misma franja, pero cuando lo que avisa es bueno: hay pagos esperando a
   que alguien los confirme (P239). Se distingue del aviso rojo porque no es
   un problema -- es trabajo listo para hacer. */
.aviso-franja-ok { background: var(--exito-suave); border-color: #bfe9a6; }
.aviso-franja-ok i { color: var(--exito-texto); }

.lista-por-confirmar { list-style: none; margin: -6px 0 16px; padding: 0; }
.lista-por-confirmar li { border-bottom: 1px solid var(--borde); }
.lista-por-confirmar li:last-child { border-bottom: 0; }
.lista-por-confirmar a {
  display: block; padding: 8px 12px; color: var(--texto); text-decoration: none;
  font-size: 13px; border-radius: 6px;
}
.lista-por-confirmar a:hover { background: var(--fondo-suave, #f7f8fa); }
.lista-por-confirmar .gris { color: var(--texto-suave); }

.tarjeta-acciones {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
}
.tarjeta-acciones a, .tarjeta-acciones button {
  color: var(--texto-suave);
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  cursor: pointer;
}
.tarjeta-acciones a:hover, .tarjeta-acciones button:hover { color: var(--primario); text-decoration: none; }

/* Donde se explica por que una tarjeta no se quedo donde la soltaron. Sin
   esto, verla saltar sola parece un fallo del programa. */
.tablero-aviso {
  margin-top: 12px;
  padding: .75rem 1rem;
  background: var(--primario-suave);
  border-radius: var(--radio);
  font-size: 13px;
  color: var(--primario);
}

.dialogo-promesa label { display: block; margin-top: 12px; font-size: 13px; color: var(--texto); }
.dialogo-promesa input {
  width: 100%;
  margin-top: 4px;
  padding: .543rem .875rem;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  font: inherit;
}
.promesa-error { color: var(--peligro); font-size: 13px; margin: 10px 0 0; }

/* ------------------------------------------------------------------ */
/* Embudo de ventas (P95). Reusa .tablero / .tarjeta del tablero de     */
/* cobranza; aqui va solo lo que el embudo tiene de mas.                */
/* ------------------------------------------------------------------ */
.acciones-cabecera { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Un enlace suelto entre los botones de la cabecera ("Editar" en la ficha
   del cliente) se ve como el boton violeta claro de Sneat, no como texto. */
.acciones-cabecera > a:not([class]) {
  padding: .4812rem 1.25rem;
  border-radius: var(--radio);
  background: var(--primario-suave);
  color: var(--primario);
  font-weight: 500;
  transition: all .2s ease-in-out;
}
.acciones-cabecera > a:not([class]):hover { background: var(--primario); color: #fff; box-shadow: var(--sombra-foco); }

/* Entrantes: borde punteado = "todavia no es una tarjeta de verdad". */
.tarjeta-entrante { border-style: dashed; cursor: default; }
.tarjeta-acciones-entrante { gap: 6px; align-items: center; }
.tarjeta-acciones-entrante form { margin: 0; margin-left: auto; }

/* btn-sm de Sneat: primario, gris (label-secondary) y rojo (label-danger). */
.boton-mini {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--primario); color: #fff; border: 1px solid var(--primario); border-radius: var(--radio-sm);
  padding: .25rem .65rem; font: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.375; cursor: pointer;
  transition: all .2s ease-in-out;
}
.boton-mini:hover { background: var(--primario-hover); border-color: var(--primario-hover); text-decoration: none; color: #fff; box-shadow: var(--sombra-foco); }
.boton-mini-gris { background: var(--secundario-suave); border-color: var(--secundario-suave); color: var(--secundario); }
.boton-mini-gris:hover { background: var(--secundario); border-color: var(--secundario); color: #fff; box-shadow: none; }
.boton-mini.boton-peligro { background: var(--peligro-suave); border-color: var(--peligro-suave); color: var(--peligro); }
.boton-mini.boton-peligro:hover { background: var(--peligro); border-color: var(--peligro); color: #fff; }

/* El siguiente paso: la version barata del "No hay tareas" de Kommo. */
.tarjeta-paso { font-size: 12.5px; color: var(--texto); }
.tarjeta-paso i { margin-right: 3px; }
.tarjeta-paso.paso-sin, .tarjeta-paso.paso-vencido { color: var(--peligro); font-weight: 600; }
.tarjeta-paso.paso-hoy { color: var(--aviso-texto); font-weight: 600; }

/* Las zonas de cierre: aparecen solo mientras se arrastra (como Kommo). */
.tablero-cierre {
  display: none; gap: 12px; margin-top: 12px;
  position: sticky; bottom: 12px;
}
.tablero-cierre.visible { display: flex; }
.zona-cierre {
  flex: 1; padding: 18px; text-align: center; font-weight: 500;
  border: 2px dashed; border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra);
}
.zona-cierre i { margin-right: 6px; }
.zona-ganado { border-color: var(--exito); color: var(--exito-texto); }
.zona-perdido { border-color: var(--peligro); color: var(--peligro); }
.zona-cierre.zona-activa { background: var(--exito-suave); }
.zona-perdido.zona-activa { background: var(--peligro-suave); }

/* Configuracion de etapas. */
.etapas-tabla td { vertical-align: middle; }
.etapa-orden { white-space: nowrap; width: 70px; }
.etapa-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.etapa-form input[type="text"] { flex: 1; min-width: 160px; padding: .45rem .75rem; border: 1px solid var(--borde-input); border-radius: var(--radio); font: inherit; }
.etapa-form input[readonly] { background: var(--secundario-suave); color: var(--texto); }
.etapa-form select { padding: .45rem .75rem; border: 1px solid var(--borde-input); border-radius: var(--radio); font: inherit; }
.muestra-color { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.etapa-entrante td, .etapa-ganado td, .etapa-perdido td { background: var(--fondo-chat); }

.etiqueta-ganado { color: var(--exito-texto); font-weight: 600; }
.etiqueta-perdido { color: var(--peligro); font-weight: 600; }

/* Arrastrar las COLUMNAS de un tablero (P96). Lo usan Cobranza y Ventas. */
.cabecera-movible { cursor: grab; }
.cabecera-movible:active { cursor: grabbing; }
.cabecera-fija .agarre { visibility: hidden; }
.columna-arrastrando { opacity: .45; }

/* El agarre de seis puntos, como el de Kommo. Discreto hasta que se pasa el
   raton por encima: siempre visible ensuciaria cinco cabeceras a la vez. */
.agarre { color: #bdc1c5; font-size: 12.5px; margin-right: 2px; }
.tablero-cabecera:hover .agarre { color: var(--texto-suave); }

/* El color de la columna: un cuadrito que solo aparece al pasar por encima. */
.color-columna {
  border: none; background: none; font-size: 12.5px; padding: 0 2px;
  cursor: pointer; opacity: 0; transition: opacity .12s;
}
.tablero-cabecera:hover .color-columna { opacity: 1; }
.color-columna:focus { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Embudo de ventas, segunda tanda (P97): filtros, avatar, etiquetas,   */
/* lead rapido, acciones en lote, vista de lista y ficha con historial. */
/* ------------------------------------------------------------------ */

/* --- Barra de filtros --- */
/* Los "Search Filters" de Sneat: una tarjeta con los desplegables en fila. */
.barra-filtros {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 0 0 1.5rem; padding: 1rem 1.25rem;
  background: var(--papel); border: 0; border-radius: var(--radio); box-shadow: var(--sombra);
}
.barra-filtros select {
  margin-top: 0; padding: .45rem .875rem; border: 1px solid var(--borde-input); border-radius: var(--radio);
  font: inherit; font-size: 13px; background: var(--papel); color: var(--titulo);
}
.filtro-buscar { position: relative; flex: 1; min-width: 220px; }
.filtro-buscar i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--titulo); font-size: 13px; }
.filtro-buscar input {
  width: 100%; margin-top: 0; padding: .45rem .875rem .45rem 2.1rem;
  border: 1px solid var(--borde-input); border-radius: var(--radio); font: inherit; font-size: 13px;
}
.cambio-vista { display: flex; gap: 4px; margin-left: auto; }
.aviso-filtrado { margin: -4px 0 8px; }

/* --- Avatar de la tarjeta --- */
/* Solo dentro de la tarjeta del embudo. Antes decia `.avatar` a secas y,
   por venir despues, le pisaba el tamano y el color a los avatares del chat
   (salian todos del mismo gris palido). */
.tarjeta .avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--borde);
}
.tarjeta .avatar-letras {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em;
}

/* --- Etiquetas --- */
.tarjeta-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
/* Etiquetas y etapas: el badge de Sneat (esquinas de 4px). El color lo pone
   la plantilla con la etiqueta de cada una. */
.chip-etiqueta {
  display: inline-block; font-size: .75rem; font-weight: 500; line-height: 1; padding: .4em .7em;
  border-radius: var(--radio-sm); border: 0; white-space: nowrap;
}
.chip-etapa { display: inline-block; font-size: .8125rem; font-weight: 500; line-height: 1; padding: .4235em .77em; border-radius: var(--radio-sm); white-space: nowrap; }
.etiquetas-elegir { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-elegible {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .3rem .75rem; border: 1px solid; border-radius: var(--radio);
  font-size: .8125rem; cursor: pointer; background: var(--papel);
}

.tarjeta-responsable { margin-left: auto; font-size: 12px; color: var(--texto-suave); }

/* --- Lead rapido --- */
.lead-rapido { margin: 0 8px 8px; }
/* El "+ Add New Item" del Kanban de Sneat. */
.lead-rapido { margin: 0 0 .75rem; }
.lead-rapido input {
  width: 100%; margin-top: 0; padding: .45rem .75rem; font: inherit; font-size: 13px;
  border: 1px dashed var(--borde-input); border-radius: var(--radio); background: transparent; color: var(--titulo);
}
.lead-rapido input:focus { background: var(--papel); border-style: solid; border-color: var(--primario); box-shadow: var(--sombra-foco); outline: none; }

/* --- Marcar para acciones en lote --- */
.marca-lote { position: absolute; top: 6px; right: 6px; opacity: 0; }
.tarjeta { position: relative; }
.tarjeta:hover .marca-lote, .marca-lote:has(:checked) { opacity: 1; }

.barra-lote {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding: .75rem 1.25rem;
  background: var(--oscuro); color: #fff; border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
}
.barra-lote select { margin-top: 0; padding: .4rem .75rem; border-radius: var(--radio); border: none; font: inherit; font-size: 13px; }
.lote-cuantos { margin-right: 4px; font-size: 13px; }

/* --- Vista de lista --- */
.tabla-leads td { vertical-align: middle; font-size: 13px; }
.tabla-leads .fila-alerta { background: rgba(255, 62, 29, .05); }
/* Tabla de nueve columnas: el relleno de Sneat (1.25rem) la apretaba y el
   monto y los dias se partian en dos renglones. */
.tabla-leads th, .tabla-leads td { padding-left: .875rem; padding-right: .875rem; }
.tabla-leads td:nth-child(5), .tabla-leads td:last-child { white-space: nowrap; }
.tabla-leads .paso-sin, .tabla-leads .paso-vencido { color: var(--peligro); font-weight: 600; }
.tabla-leads .paso-hoy { color: var(--aviso-texto); font-weight: 600; }

/* --- Ficha del lead: datos a la izquierda, historial a la derecha --- */
.contenido-ficha-lead { max-width: 1200px; }
.ficha-lead { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .ficha-lead { grid-template-columns: 1fr; } }
.ficha-historial {
  background: var(--papel); border: 0; border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.5rem;
}
.ficha-historial h2 { margin: 0 0 10px; font-size: 1.125rem; }
.ficha-historial h3 { margin: 14px 0 6px; font-size: .75rem; text-transform: uppercase; color: var(--texto-suave); letter-spacing: .4px; }
.hilo-corto { display: flex; flex-direction: column; gap: 6px; }
.linea-mensaje { font-size: .8125rem; padding: .4rem .7rem; border-radius: var(--radio); background: var(--fondo-chat); color: var(--titulo); }
.linea-mensaje.saliente { background: var(--primario-suave); }
.linea-mensaje .cuando { color: var(--texto-suave); margin-right: 6px; font-size: 12px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.linea-tiempo li { border-left: 2px solid var(--borde); padding-left: 10px; font-size: 13.5px; }
.linea-tiempo .cuando { display: block; color: var(--texto-suave); font-size: 12px; }
.linea-tiempo .detalle { display: block; color: var(--texto); font-style: italic; }

.aviso-duplicado-lead {
  background: var(--aviso-suave); color: var(--aviso-texto); padding: 8px 10px;
  border-radius: 6px; font-size: 13px; margin: 0 0 4px;
}
.casilla { display: flex; align-items: center; gap: 8px; margin: 8px 0; }

/* Arreglo del arrastre (P98). En HTML un <a href> y un <img> son arrastrables
   de fabrica: al agarrar la tarjeta por el nombre del cliente o por la foto,
   el navegador arrastraba la URL o la imagen y el arrastre de la tarjeta no
   empezaba nunca. Las plantillas ya llevan draggable="false"; esto es el
   cinturon de seguridad para Safari, que ignora el atributo en algunos casos.
   `user-select: none` evita ademas que arrastrar seleccione el texto. */
.tarjeta a, .tarjeta img, .tablero-cabecera {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Los enlaces de la tarjeta SI se pueden clicar; lo que se apaga es que se
   arrastren ellos en vez de la tarjeta. */
.tarjeta a { cursor: pointer; }

.nota-entrantes { font-size: 12px; color: var(--texto-suave); line-height: 1.3; }

/* Arrastre por eventos de puntero (P99). Copiado del mecanismo de Kommo:
   una COPIA semitransparente sigue al cursor y un HUECO gris marca donde
   caeria. Ver app/estaticos/arrastre.js y kommo-pipeline-referencia.md §26. */
.arrastre-copia {
  position: fixed;
  z-index: 999;            /* el mismo que usa Kommo */
  opacity: .7;             /* y la misma opacidad */
  pointer-events: none;    /* si no, se tapa a si misma al buscar el destino */
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transform: rotate(1.5deg);
  margin: 0;
}
.arrastre-origen { opacity: .35; }
.arrastre-hueco {
  border: 2px dashed var(--primario-borde);
  background: var(--primario-suave);
  border-radius: 6px;
  box-sizing: border-box;
}
/* Mientras se arrastra: nada de seleccionar texto ni de desplazar la pantalla
   con el dedo. Sin esto, en el celular el dedo mueve la pagina en vez de la
   tarjeta. */
.arrastrando, .arrastrando body {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: contain;
}
.arrastrando .tarjeta, .arrastrando .tablero-columna { cursor: grabbing; }
.zona-cierre.extra-activo { transform: scale(1.03); }

/* ------------------------------------------------------------------ */
/* Arreglos de la pantalla de Ventas (P100), encontrados abriendo el    */
/* CRM en Chrome -- ninguno se veia leyendo el codigo.                  */
/* ------------------------------------------------------------------ */

/* 1. El atributo `hidden` tiene que ganarle SIEMPRE a un display propio.
      La barra de acciones en lote lleva `hidden` cuando no hay nada marcado,
      pero `.barra-lote { display: flex }` lo pisaba y la barra negra salia
      siempre, tapando el pie del tablero. Es la regla que trae de fabrica el
      navegador y que cualquier `display:` posterior anula; se repone aqui una
      vez para todo el CRM en vez de acordarse en cada componente. */
[hidden] { display: none !important; }

/* 2. TERCERA vez que `form input, form select, form textarea { width: 100% }`
      (linea ~378) se cuela donde no debe -- el archivo ya lo documenta dos
      veces mas arriba. Las dos barras nuevas de Ventas son <form>, asi que sus
      desplegables y botones median 1747 px: cada uno ocupaba una fila entera y
      los filtros llenaban la pantalla antes de que se vieran las columnas. */
.barra-filtros select,
.barra-filtros button,
.barra-filtros .boton-secundario,
.barra-lote select,
.barra-lote button { width: auto; }
.barra-filtros select { min-width: 150px; max-width: 220px; }
.barra-filtros .filtro-buscar { flex: 1 1 240px; }
.barra-filtros .filtro-buscar input { width: 100%; }
.barra-lote select { min-width: 170px; }

/* 3. Las tarjetas de Entrantes no se arrastran (primero se aceptan). Se dice
      con el cursor, no solo con un texto de ayuda que nadie lee: si el puntero
      no cambia a "mano que agarra", la pista de que ahi no se arrastra llega
      antes de intentarlo. */
/* Corregido en P101: los entrantes TAMBIEN se arrastran (a una columna se
   convierten en lead), asi que llevan el mismo cursor que el resto. */
.tarjeta { cursor: grab; }
.arrastrando .tarjeta { cursor: grabbing; }

/* Marca de origen del nombre (P102). El dueno la pidio para "asegurarme que he
   sido yo el que lo puso": el CRM rellena nombres solo, desde el perfil de
   WhatsApp de cada persona, y sin esta marca los dos tipos se ven igual.
   Check azul = lo confirmaste tu. Icono de WhatsApp = lo trajo el CRM. */
.check-nombre { color: var(--info-texto); font-size: 12.5px; margin-left: 3px; }
.check-perfil { color: var(--texto-suave); font-size: 12.5px; margin-left: 3px; }
.numero-crudo { color: var(--texto-suave); }

/* "Nueva venta" desde la ficha del cliente y desde su chat (P104). El campo de
   texto va pegado al boton: escribir que le quieres vender y darle a enviar es
   un solo gesto, y sin titulo la tarjeta nace con un nombre generico. */
.forma-oportunidad { display: inline-flex; gap: 6px; align-items: center; }
.forma-oportunidad input[type="text"] {
  width: 180px; margin-top: 0; padding: .45rem .75rem; font: inherit; font-size: 13px;
  border: 1px solid var(--borde-input); border-radius: var(--radio);
}

/* La misma forma, ahora dentro de la seccion "Ventas" del panel derecho
   (P115). Ahi el ancho es fijo y angosto (~300px), asi que el campo y el
   boton se apilan y ocupan todo: uno al lado del otro dejaba el campo en
   unos 90px, donde no cabe ni "hosting anual". */
.forma-oportunidad-perfil { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.forma-oportunidad-perfil input[type="text"] { width: auto; }
.forma-oportunidad-perfil button { width: 100%; justify-content: center; }
.perfil-seccion .chat-atiende select { width: 100%; }
/* El texto de ayuda pegado al boton, sin el hueco de un parrafo suelto. */
.perfil-seccion .forma-oportunidad-perfil + .ayuda { margin: 6px 0 0; }

/* Subtitulo de la tarjeta: que quiere comprar (P105). El nombre manda arriba y
   esto va debajo, mas chico -- en un tablero uno busca primero de quien es la
   tarjeta y despues que le vende. */
.tarjeta-interes {
  color: var(--texto);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El nombre pegado a la foto, y los dias al otro extremo (P105). Sin esto la
   fila reparte el hueco entre sus cuatro hijos y el nombre queda flotando en
   el centro, como si no perteneciera a la foto de al lado. */
.tarjeta-fila .tarjeta-cliente { flex: 1; min-width: 0; }
.tarjeta-fila .tarjeta-dias { flex: none; }

/* Dos datos en un mismo renglon (P106). La tarjeta era una pila de lineas
   cortas con la mitad derecha vacia, asi que crecia a lo alto por gusto. El
   dato de la izquierda cede espacio (y se corta con puntos suspensivos) y el
   de la derecha se ancla al borde.
   `:last-child:not(:first-child)` es a proposito: cuando el renglon trae un
   solo dato, ese dato NO se va al borde derecho -- se queda a la izquierda,
   donde uno lo busca. */
.tarjeta-par { display: flex; align-items: baseline; gap: 8px; }
.tarjeta-par > * { min-width: 0; }
.tarjeta-par > :last-child:not(:first-child) { margin-left: auto; }
/* Lo unico que nunca se encoge es el monto: un precio cortado a la mitad no
   se entiende. Todo lo demas cede y se corta con puntos suspensivos -- en
   cobranza el dato de la izquierda es el nombre del servicio y puede ser
   largo. */
.tarjeta-par .tarjeta-monto { flex: none; }
/* El siguiente paso si cede, porque su texto lo escribe el usuario y puede ser
   largo. Dentro del flex el <span> se comporta como bloque, asi que los puntos
   suspensivos funcionan. */
.tarjeta-par .tarjeta-paso {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* ==========================================================================
   PANEL DEL LEAD (P107). Se abre desde la derecha encima del embudo, como la
   ficha de Kommo: a la izquierda los datos, a la derecha la conversacion de
   WhatsApp de verdad -- la misma con la que se responde desde la bandeja, no
   una copia de solo lectura.
   ========================================================================== */

/* 1. Una pantalla del CRM dibujada DENTRO del panel pierde su marco. La clase
      la pone base.html cuando se ve a si misma dentro de un iframe. */
.en-panel .sidebar,
.en-panel .barra-superior,
.en-panel .menu-fondo,
.en-panel .bandeja-lista,
.en-panel .bandeja-perfil,
.en-panel .solo-pagina-completa { display: none !important; }
.en-panel .con-menu .layout-pagina { padding-left: 0; }
.en-panel .contenido-bandeja { height: 100vh; }
.en-panel .bandeja { border-radius: 0; box-shadow: none; }
/* La ficha deja de ser dos columnas: aqui es la columna estrecha, y el
   historial va debajo del formulario. */
.en-panel .ficha-lead { grid-template-columns: 1fr; }
.en-panel .contenido { max-width: none; padding: 16px; }

/* El formulario de la ficha, DENTRO DEL PANEL, va a dos columnas (pedido del
   dueno: "que no salga tan kilometrico"). Un campo por renglon convertia la
   ficha en una tira de diez renglones que habia que bajar entera.

   La pieza que lo hace posible es `display: contents` en las filas: disuelve
   el div que agrupa cada terna de campos y deja que sus etiquetas caigan
   directamente en la rejilla del formulario. Sin eso, cada fila seria su
   propia rejilla y el Correo se quedaria solo al final de la suya en vez de
   emparejarse con el Monto, que es justo lo que alargaba la pantalla.

   En la pagina completa no se toca nada: ahi el formulario es ancho y las
   filas de tres campos entran de sobra. */
/* Se quita el doble acolchado (la caja blanca de la ficha DENTRO de la caja
   blanca del formulario): en una columna de 460px eran 96px de aire lateral
   que le faltaban a las dos columnas. La caja blanca la pone el formulario. */
.en-panel .ficha-datos { padding: 0; background: none; }
.en-panel .ficha-datos > details {
  background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1rem 1.25rem; margin-top: 12px;
}
.en-panel .ficha-datos .formulario { max-width: none; padding: 16px; box-shadow: var(--sombra); }
.en-panel .ficha-datos form.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  align-items: start;
}
.en-panel .ficha-datos form.formulario > .fila-form { display: contents; }
/* El margen de cada etiqueta lo sustituye el hueco de la rejilla; con los dos
   puestos, las dos columnas quedaban desalineadas entre si. */
.en-panel .ficha-datos form.formulario label { margin-bottom: 0; }
/* Lo que NO se parte en dos: el titulo, la nota, la ayuda, las etiquetas y
   los botones. */
.en-panel .ficha-datos form.formulario > label:first-child,
.en-panel .ficha-datos form.formulario > label:has(textarea),
.en-panel .ficha-datos form.formulario > .ayuda,
.en-panel .ficha-datos form.formulario > fieldset,
.en-panel .ficha-datos form.formulario > .acciones-form { grid-column: 1 / -1; }
/* Un campo de texto no baja solo de su ancho natural (unos 20 caracteres) y
   desbordaria su columna. */
.en-panel .ficha-datos form.formulario input,
.en-panel .ficha-datos form.formulario select,
.en-panel .ficha-datos form.formulario textarea { width: 100%; min-width: 0; }
/* ...salvo las casillas, que se quedan de su tamano junto a su texto. */
.en-panel .ficha-datos form.formulario input:where([type="checkbox"], [type="radio"]) { width: 1.05rem; margin-right: .4rem; }
.en-panel .contenido-bandeja { padding: 0; max-width: none; }
.en-panel .cabecera-seccion h1 { font-size: 19px; }

/* 2. El cajon. `hidden` lo mantiene fuera del alcance del teclado mientras
      esta cerrado; la clase `abierto` es la que lo desliza. */
.panel-lead-fondo {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(34, 48, 62, .5);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.panel-lead-fondo.abierto { opacity: 1; pointer-events: auto; }

.panel-lead {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1091;
  width: min(1180px, 94vw);
  display: flex; flex-direction: column;
  background: var(--papel);
  border-left: 0;
  box-shadow: 16px 1px 45px 3px rgba(34, 48, 62, .5);
  transform: translateX(100%);
  transition: transform .22s ease;
}
.panel-lead.abierto { transform: none; }
/* Quien apaga las animaciones del sistema no quiere que esto se deslice. */
@media (prefers-reduced-motion: reduce) {
  .panel-lead, .panel-lead-fondo { transition: none; }
}

.panel-lead-cabecera {
  display: flex; align-items: center; gap: 10px;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--borde);
  background: var(--papel);
}
.panel-lead-cabecera strong { flex: 1; min-width: 0; font-size: 1.125rem; font-weight: 500; color: var(--titulo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-lead-cabecera .boton-mini { flex: none; }

.panel-lead-cuerpo { flex: 1; display: flex; min-height: 0; }
.panel-lead-cuerpo iframe { border: 0; height: 100%; display: block; }
.panel-lead-datos { width: 460px; min-width: 460px; border-right: 1px solid var(--borde); }
.panel-lead-chat { flex: 1; min-width: 0; }
/* Un lead sin numero todavia no tiene conversacion: se dice, en vez de
   dejar la mitad derecha en blanco como si algo hubiera fallado. */
.panel-lead-sinchat {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 30px; text-align: center; color: var(--texto); background: var(--fondo);
}

/* En pantalla angosta el cajon ocupa todo y las dos mitades se apilan. */
@media (max-width: 960px) {
  .panel-lead { width: 100vw; }
  .panel-lead-cuerpo { flex-direction: column; }
  .panel-lead-datos {
    width: 100%; min-width: 0; height: 45%;
    border-right: 0; border-bottom: 1px solid var(--borde);
  }
}

/* ------------------------------------------------------------------ */
/* Modulo Calendario (P109). Rejilla de semana en CSS puro, sin       */
/* librerias. ALTO de una hora = 48 px: tiene que coincidir con       */
/* ALTO_HORA_PX en app/modulos/calendario/agenda.py.                  */
/* ------------------------------------------------------------------ */
.cal-cabecera { margin-bottom: 12px; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav .boton-secundario { padding: 6px 10px; }
.cal-titulo { margin: 0 0 0 10px; font-size: 1.625rem; font-weight: 500; }
.cal-titulo::first-letter { text-transform: uppercase; }
/* Mes / Semana / Lista: el grupo de botones del calendario de Sneat, los
   no elegidos en violeta claro y el elegido lleno. */
.cal-vistas { display: inline-flex; border: 0; border-radius: var(--radio); overflow: hidden; }
.cal-vistas a { padding: .4812rem 1.25rem; font-size: 13px; font-weight: 500; color: var(--primario); background: var(--primario-suave); }
.cal-vistas a + a { border-left: 1px solid var(--primario-borde); }
.cal-vistas a.activo { background: var(--primario); color: #fff; }
.cal-vistas a:hover { text-decoration: none; }
.cal-vistas a:not(.activo):hover { background: var(--primario-borde); }

/* Semana */
.cal-semana { background: var(--papel); border: 0; border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; margin-top: 12px; }
.cal-semana-cabecera, .cal-tododia, .cal-rejilla {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
}
.cal-semana-cabecera { border-bottom: 1px solid var(--borde); background: transparent; }
.cal-dia-titulo {
  padding: .6rem 4px .5rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--texto);
  text-transform: capitalize;
  letter-spacing: 0;
  border-left: 1px solid var(--borde);
}
.cal-dia-titulo strong { display: block; font-size: 1.125rem; color: var(--titulo); font-weight: 500; margin-top: 2px; }
.cal-dia-titulo strong span {
  display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%;
}
.cal-dia-titulo.es-hoy strong span { background: var(--acento); color: #fff; box-shadow: 0 .125rem .25rem 0 rgba(var(--acento-rgb), .4); }
.cal-tododia { border-bottom: 1px solid var(--borde); }
.cal-tododia-etiqueta { font-size: 12px; color: var(--texto-suave); padding: 6px 6px 0 0; text-align: right; text-transform: uppercase; }
.cal-tododia-celda { border-left: 1px solid var(--borde); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-cuerpo { max-height: calc(100vh - 250px); overflow-y: auto; position: relative; }
.cal-hora {
  height: 72px;
  font-size: 12.5px;
  color: var(--texto-suave);
  text-align: right;
  padding-right: 6px;
  transform: translateY(-7px);
  font-variant-numeric: tabular-nums;
}
.cal-dia { position: relative; border-left: 1px solid var(--borde); min-width: 0; }
.cal-dia.es-hoy { background: rgba(var(--primario-rgb), .05); }
.cal-dia.es-pasado { background: var(--fondo-chat); }
.cal-slot { height: 36px; border-bottom: 1px dashed var(--borde); overflow: hidden; cursor: cell; }
.cal-slot:nth-child(even) { border-bottom-style: solid; }
.cal-slot:hover { background: rgba(var(--primario-rgb), .07); }
/* Los bloques de la semana y del mes, como los eventos del calendario de
   Sneat: el color del tipo en tenue de fondo y entero en la letra. El color
   llega de la plantilla en `--c` (antes llegaba como fondo lleno). */
.cal-evento {
  position: absolute;
  left: 2px; right: 2px;
  border-radius: var(--radio-sm);
  padding: 2px 6px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  --c: var(--primario);
  background: color-mix(in srgb, var(--c) 16%, #fff);
  color: color-mix(in srgb, var(--c) 82%, #000);
  overflow: hidden;
  cursor: pointer;
  border-left: 3px solid var(--c);
  box-shadow: none;
  z-index: 2;
}
.cal-evento:hover { text-decoration: none; color: color-mix(in srgb, var(--c) 82%, #000); filter: brightness(.97); }
.cal-evento strong, .cal-evento span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evento span { opacity: .9; }
.cal-evento i { margin-right: 2px; }
.cal-evento.cumplido { opacity: .45; text-decoration: line-through; }
/* Descartado: gris y punteado, sin color del tipo. Se ve para poder
   reabrirlo; si no se viera no habria donde hacer clic. */
.cal-evento.cancelado {
  background: var(--secundario-suave) !important; color: var(--texto); border: 1px dashed var(--texto-suave); border-left-width: 3px;
  box-shadow: none; opacity: .8;
}
.cal-evento.cancelado:hover { color: var(--texto); }
.cal-evento.vencido { outline: 2px solid var(--peligro); outline-offset: -1px; }
.cal-evento[data-fija="1"] { cursor: pointer; }
.cal-ahora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--peligro); z-index: 3; pointer-events: none; }
.cal-ahora::before {
  content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--peligro);
}
/* En la semana el hueco gris del arrastre no aporta (los bloques van en
   pixeles, no en fila) y empujaria las casillas. */
.cal-semana .arrastre-hueco { display: none; }
.cal-semana .arrastre-origen { opacity: .35; }

/* Mes: reusa la grilla .calendario de las renovaciones */
.cal-mes .calendario-dia { cursor: cell; overflow: hidden; }
.cal-chip {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 12.5px; font-weight: 500; padding: 1px 5px; border-radius: var(--radio-sm);
  --c: var(--primario);
  background: color-mix(in srgb, var(--c) 16%, #fff);
  color: color-mix(in srgb, var(--c) 82%, #000);
  cursor: pointer; overflow: hidden; white-space: nowrap;
}
.cal-chip:hover { text-decoration: none; color: color-mix(in srgb, var(--c) 82%, #000); filter: brightness(.97); }
.cal-chip b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.cumplido { opacity: .45; text-decoration: line-through; }
.cal-chip.cancelado { background: var(--secundario-suave) !important; color: var(--texto); border: 1px dashed var(--texto-suave); opacity: .8; }
.cal-chip.cancelado:hover { color: var(--texto); }
.cal-chip.vencido { outline: 2px solid var(--peligro); outline-offset: -1px; }
.cal-chip-hora { flex: none; display: inline-flex; align-items: center; gap: 4px; }

/* --------------------------------------------------------------------------
   El dia del mes es una cuadricula fija: todos los bloques miden lo mismo
   (2026-09-11, P125 -- antes dependia de cuantos hubiera)

   Tres columnas por dos filas, SIEMPRE. Un dia con dos bloques usa los dos
   primeros huecos y deja el resto vacio; uno con seis los llena. Asi un aviso
   se ve igual en todo el mes -- que es lo que el dueno pidio viendo que sus
   avisos de dominio salian como barras largas un dia y como cuadritos el
   siguiente.

   Las filas van en PIXELES (48), no en `1fr`: con `1fr` el bloque de un dia
   con dos eventos se estiraria al alto libre y volveria a medir distinto que
   el de un dia lleno. Como nunca hay mas de dos filas, el dia no crece y la
   semana no se estira por el dia mas cargado.

   Al ser tan chico, el bloque se lee recortado: el detalle lo da el globo
   oscuro al pasar el mouse (.cal-globo, mas abajo).
   -------------------------------------------------------------------------- */
.cal-mes .calendario-dia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;      /* la primera fila es el numero del dia */
  grid-auto-rows: 48px;          /* las demas, todas iguales */
  align-content: start;
}
.cal-mes .calendario-dia-numero { grid-column: 1 / -1; }

.cal-mes .cal-chip,
.cal-mes .calendario-evento {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 2px 5px;
  font-size: 11.5px;
  line-height: 1.25;
  overflow: hidden;
}
.cal-mes .cal-chip-hora { justify-content: flex-start; gap: 3px; font-size: 11px; }
/* El titulo pasa a dos lineas recortadas: en un bloque angosto, "..." al final
   de la primera linea esconderia casi todo el nombre. */
.cal-mes .cal-chip b,
.cal-mes .calendario-evento-cliente {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cal-mes .calendario-evento-monto { font-size: 11px; }

/* El ultimo hueco cuando no entran todos. Lleva a la semana de ese dia, que es
   donde se ven todos con su hora. */
.cal-mas {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-sm);
  background: var(--fondo);
  border: 1px dashed var(--borde-input);
  color: var(--texto);
  font-size: 11.5px;
  font-weight: 600;
  overflow: hidden;
}
.cal-mas:hover { text-decoration: none; background: var(--hover); color: var(--titulo); }

@media (max-width: 720px) {
  /* En el celular el dia mide unos 45px: tres columnas no se leerian. Se baja
     a dos (y el dia con cinco o seis bloques crece una fila) y se quita la
     hora, que es lo primero que sobra cuando no hay ancho. */
  .cal-mes .calendario-dia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-mes .cal-chip-hora { display: none; }
}

/* --------------------------------------------------------------------------
   El globo oscuro del mes (P125)

   El `title` del navegador no servia aqui: es chico, tarda casi un segundo en
   aparecer, no se puede pintar y se corta. Con los bloques recortados a un
   tercio de ancho, el detalle tenia que verse al pasar el mouse sin abrir el
   evento. Se dibuja en <body> (no dentro del dia) para que no lo recorte el
   `overflow: hidden` de la celda ni lo tape el bloque de al lado.
   -------------------------------------------------------------------------- */
.cal-globo {
  position: fixed;
  z-index: 1100;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: var(--radio);
  background: var(--oscuro);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  pointer-events: none;  /* el globo no debe robarle el mouse al bloque */
  opacity: 0;
  transition: opacity .12s ease;
}
.cal-globo.visible { opacity: 1; }
.cal-globo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.cal-globo-titulo i { font-size: 13px; }
.cal-globo-cuando { color: #bdc1c5; }
.cal-globo-linea { margin-top: 6px; }
.cal-globo-linea b { color: var(--texto-suave); font-weight: 600; }
.cal-globo-nota { margin-top: 6px; color: var(--borde); }
.cal-globo-estado {
  display: inline-block;
  margin-top: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--titulo);
  color: var(--fondo);
  font-size: 12.5px;
}
.cal-globo-pie {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--titulo);
  color: var(--texto-suave);
  font-size: 12.5px;
}

/* Lista */
.cal-lista-filtros { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.cal-grupo { margin-top: 18px; }
.cal-grupo h2 { font-size: 16px; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.cal-fila {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: .75rem 1.25rem;
  background: var(--papel);
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: box-shadow .2s;
}
.cal-fila:hover { box-shadow: var(--sombra-lg); }
.cal-fila-cuando { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--titulo); }
.cal-grupo-vencido .cal-fila-cuando { color: var(--peligro); font-weight: 600; }
.cal-fila-que { min-width: 0; }
.cal-fila-que strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-fila-que small { color: var(--texto); font-size: 13.5px; }
.cal-tipo-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .75rem; font-weight: 500; padding: .35em .7em; border-radius: var(--radio-sm);
  --c: var(--primario);
  background: color-mix(in srgb, var(--c) 16%, #fff);
  color: color-mix(in srgb, var(--c) 82%, #000);
}
.cal-fila-acciones { display: flex; gap: 6px; align-items: center; }
.cal-fila-acciones form { margin: 0; }

/* El dialogo del evento */
.dialogo-evento { max-width: 520px; }
.dialogo-evento label { display: block; margin-top: 10px; font-size: 13px; color: var(--texto); }
.dialogo-evento input, .dialogo-evento select {
  width: 100%; margin-top: 4px; padding: .543rem .875rem;
  border: 1px solid var(--borde-input); border-radius: var(--radio); font: inherit; box-sizing: border-box;
}
.ev-fila { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.ev-estado { margin: 0 0 4px; padding: 6px 10px; background: var(--secundario-suave); border-left: 3px solid var(--texto-suave); border-radius: 4px; font-size: 13px; color: var(--texto); }
.dialogo-evento input:disabled, .dialogo-evento select:disabled { background: var(--fondo); color: var(--texto); }
.ev-cerrar { display: inline-flex; gap: 6px; margin-right: auto; }
.dialogo-evento .dialogo-acciones { align-items: center; }

/* Tipos */
.cal-tipo-muestra {
  display: inline-flex; width: 30px; height: 30px; border-radius: var(--radio);
  color: #fff; align-items: center; justify-content: center; font-size: 13.5px; flex: none;
}

@media (max-width: 720px) {
  .cal-semana-cabecera, .cal-tododia, .cal-rejilla { grid-template-columns: 38px repeat(7, minmax(0, 1fr)); }
  .cal-evento { padding: 1px 3px; }
  .cal-evento span { display: none; }
  .cal-fila { grid-template-columns: 1fr; gap: 4px; }
  .ev-fila { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Tablero de inicio (P128). Reusa .tarjetas-uso, .tarjeta-uso y .barra-uso de
   la pantalla de Uso: aqui solo va lo propio del tablero.
   --------------------------------------------------------------------------- */
.inicio-kpi { display: block; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.inicio-kpi:hover { color: inherit; box-shadow: var(--sombra-lg); transform: translateY(-2px); }
.inicio-kpi-numero { font-size: 1.625rem; font-weight: 500; color: var(--titulo); margin-top: 4px; line-height: 1.2; }
.inicio-kpi-pie { font-size: .8125rem; color: var(--texto); margin-top: 4px; }
.inicio-kpi-alerta .inicio-kpi-numero { color: var(--peligro); }
/* Cada cifra con su color en el cuadrito del icono, como las tarjetas de
   Sneat (violeta, ambar, rojo, celeste, verde). */
.tarjetas-uso > .tarjeta-uso:nth-child(5n+1) h3 > i:first-child { background: var(--acento-suave); color: var(--acento); }
.tarjetas-uso > .tarjeta-uso:nth-child(5n+2) h3 > i:first-child { background: var(--aviso-suave); color: var(--aviso-texto); }
.tarjetas-uso > .tarjeta-uso:nth-child(5n+3) h3 > i:first-child { background: var(--peligro-suave); color: var(--peligro); }
.tarjetas-uso > .tarjeta-uso:nth-child(5n+4) h3 > i:first-child { background: var(--info-suave); color: var(--info-texto); }
.tarjetas-uso > .tarjeta-uso:nth-child(5n+5) h3 > i:first-child { background: var(--exito-suave); color: var(--exito-texto); }

.inicio-bloque { background: var(--papel); border: 0; border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.5rem; margin: 1.5rem 0; }
.inicio-bloque h3 { font-size: 13px; margin: 18px 0 4px; }
.inicio-bloque-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 1rem; }
.inicio-bloque-cabecera h2 { margin: 0; font-size: 1.125rem; font-weight: 500; display: flex; gap: 10px; align-items: center; }
.inicio-bloque-cabecera h2 > i:first-child { color: var(--primario); font-size: 1rem; }
.inicio-bloque-cabecera a { font-size: 13px; white-space: nowrap; }
.inicio-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.inicio-rejilla .inicio-bloque { margin: 0; }
.inicio-nota { margin: 0 0 8px; font-size: 13.5px; }
.inicio-aviso { color: var(--peligro); }

/* Bajas automaticas de servicios sin hosting (P159). En ambar y no en rojo: no
   es un problema que atender, es algo que el CRM ya hizo y conviene que se vea. */
.inicio-aviso-baja { margin: 0 0 1rem; padding: .75rem 1rem; font-size: 13.5px; line-height: 1.5;
  background: var(--aviso-suave); border: 1px solid var(--aviso-borde); border-radius: var(--radio); color: var(--aviso-texto); }
.inicio-aviso-baja i { margin-right: 6px; }
.inicio-aviso-baja a { color: inherit; text-decoration: underline; }

.inicio-mini { display: flex; flex-wrap: wrap; gap: 10px; }
.inicio-mini-dato { flex: 1 1 150px; background: var(--fondo); border-radius: var(--radio); padding: .875rem 1rem; text-decoration: none; color: inherit; }
.inicio-mini-dato strong { display: block; font-size: 1.375rem; font-weight: 500; color: var(--titulo); }
.inicio-mini-dato span { font-size: 13px; color: var(--texto); }
.inicio-mini-alerta strong { color: var(--peligro); }

.inicio-tabla-envoltura { overflow-x: auto; }
.inicio-tabla { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.inicio-tabla th { text-align: left; font-weight: 500; color: var(--titulo); font-size: .8125rem; text-transform: uppercase; letter-spacing: .2px; padding: .75rem 8px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.inicio-tabla td { padding: 8px; border-bottom: 1px solid var(--secundario-suave); vertical-align: top; }
.inicio-medida { min-width: 170px; }
.inicio-medida .barra-uso { margin: 4px 0 3px; }
.inicio-medida small { color: var(--texto); }

.inicio-fila-etapa { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--secundario-suave); font-size: 13px; }
.inicio-fila-etapa:last-child { border-bottom: 0; }
.inicio-punto { width: 10px; height: 10px; border-radius: 50%; }
.inicio-punto-linea { display: inline-block; margin-right: 6px; vertical-align: middle; }
.inicio-cifra { font-variant-numeric: tabular-nums; color: var(--titulo); white-space: nowrap; font-size: 13px; }
.inicio-etiqueta { display: inline-block; font-size: .8125rem; font-weight: 500; line-height: 1; padding: .4235em .77em; border-radius: var(--radio-sm); background: var(--peligro-suave); color: var(--peligro); margin: 0 6px 4px 0; white-space: nowrap; }
.inicio-etiqueta-suave { background: var(--secundario-suave); color: var(--secundario); }

.inicio-lista { list-style: none; padding: 0; margin: 6px 0 0; }
.inicio-lista li { padding: 6px 0; border-bottom: 1px solid var(--secundario-suave); display: flex; gap: 10px; font-size: 13px; }
.inicio-lista li:last-child { border-bottom: 0; }
.inicio-hora { font-variant-numeric: tabular-nums; color: var(--texto); min-width: 44px; }

/* ==========================================================================
   Modulo Asesor comercial (P130). Todo lleva el prefijo `asesor-` y reusa lo
   que ya existia (.inicio-bloque, .tarjeta-uso, .etiqueta-estado, .tabla): lo
   de aqui es solo lo que no habia -- la cola de aprobacion, las voces y la
   ficha.
   ========================================================================== */
.asesor-variante {
  font-size: .8125rem; font-weight: 500; line-height: 1; color: var(--primario); background: var(--primario-suave);
  padding: .4235em .77em; border-radius: var(--radio-sm); vertical-align: middle; margin-left: 6px;
}
.asesor-luz {
  display: inline-block; font-size: .8125rem; font-weight: 500; line-height: 1; padding: .4235em .77em;
  border-radius: var(--radio-sm); background: var(--secundario-suave); color: var(--secundario); margin-left: 4px;
}
.asesor-luz-on { background: var(--exito-suave); color: var(--exito-texto); }

.asesor-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.asesor-pasos li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.asesor-pasos li i { color: var(--borde-input); }
.asesor-paso-hecho { color: var(--texto); }
.asesor-pasos .asesor-paso-hecho i { color: var(--exito); }

.asesor-fila {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--borde);
}
.asesor-fila form { margin: 0; }
.asesor-fila-pausa td { background: var(--aviso-suave); }

/* Un mensaje en la cola: quien, que formato, el audio, el texto editable y
   los dos botones que deciden. El de enviar es el unico con color pleno. */
.asesor-mensaje {
  border: 0; border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem 1.5rem; margin: 1rem 0;
  display: flex; flex-direction: column; gap: 10px; background: var(--papel);
}
.asesor-mensaje > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.asesor-mensaje audio { width: 100%; max-width: 460px; height: 40px; }
.asesor-mensaje-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.asesor-mensaje-form textarea {
  width: 100%; font: inherit; line-height: 1.5; padding: .543rem .875rem;
  border: 1px solid var(--borde-input); border-radius: var(--radio); resize: vertical;
}
.asesor-mensaje-botones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.asesor-mensaje-botones form { margin: 0; }
.asesor-mensaje-decidir { border-top: 1px solid var(--borde); padding-top: 10px; }
.asesor-acompanante { margin: 0; color: var(--texto); font-size: 13px; }
.asesor-mensaje-cancelado, .asesor-mensaje-fallido { opacity: .65; }
.asesor-formato-audio { background: var(--aviso-suave); color: var(--aviso-texto); }
.asesor-formato-texto { background: var(--exito-suave); color: var(--exito-texto); }
.asesor-cola-por_aprobar { background: var(--peligro-suave); color: var(--peligro); }
.asesor-cola-enviado { background: var(--primario-suave); color: var(--primario); }
.asesor-pre { white-space: pre-wrap; margin: 0; line-height: 1.5; }
.asesor-vista-previa { font-size: 16px; line-height: 1.6; color: var(--titulo); margin: 0 0 8px; }

.asesor-estado-en_pausa { background: var(--aviso-suave); color: var(--aviso-texto); }
.asesor-estado-activo { background: var(--primario-suave); color: var(--primario-hover); }
.asesor-estado-agendado, .asesor-estado-asistio { background: var(--exito-suave); color: var(--exito-texto); }
.asesor-estado-rechazo, .asesor-estado-descartado { background: var(--secundario-suave); color: var(--texto); }
.asesor-voz-en_revision, .asesor-voz-fallida { background: var(--peligro-suave); color: var(--peligro); }
.asesor-voz-lista { background: var(--exito-suave); color: var(--exito-texto); }

.asesor-pausa { display: flex; flex-direction: column; gap: 6px; }
.asesor-pausa p { margin: 0; }
.asesor-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.asesor-acciones form { margin: 0; }

.asesor-agregar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 12px 0; }
.asesor-agregar label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto); flex: 1 1 180px; }
.asesor-agregar input, .asesor-agregar select { font: inherit; padding: .543rem .875rem; border: 1px solid var(--borde-input); border-radius: var(--radio); }

.asesor-voces { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 12px 0; }
.asesor-voz {
  border: 1px solid transparent; border-radius: var(--radio); box-shadow: var(--sombra); padding: 1rem; background: var(--papel);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.asesor-voz audio { width: 100%; height: 36px; }
.asesor-voz form { margin: 0; }
.asesor-voz-elegida { border-color: var(--exito); box-shadow: 0 0 0 2px var(--exito-suave), var(--sombra); }
.asesor-lista { line-height: 1.6; padding-left: 20px; }
.asesor-dia { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; }
.asesor-revision { background: var(--aviso-suave); border: 0; border-radius: var(--radio); padding: .875rem 1.125rem; margin: 10px 0; }
.asesor-revision audio { width: 100%; max-width: 460px; }

.asesor-ficha label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto); margin-bottom: 10px; }
.asesor-ficha input { font: inherit; padding: .543rem .875rem; border: 1px solid var(--borde-input); border-radius: var(--radio); color: var(--titulo); }
.asesor-ficha-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.asesor-dolor { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px 4px; margin: 0 0 12px; }
.asesor-dolor legend { font-size: 13px; font-weight: 600; color: var(--texto); padding: 0 6px; }
.asesor-kit { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 8px 16px; margin: 14px 0; }
.asesor-kit dt { color: var(--texto); font-size: 13px; }
.asesor-kit dd { margin: 0; }
@media (max-width: 640px) { .asesor-kit { grid-template-columns: 1fr; } }

/* --- Asesor comercial: gatillos, modo por oferta y aviso fijo (P132) --- */
.asesor-estado-en_espera { background: var(--primario-suave); color: var(--primario); }
.asesor-estado-senal { background: var(--peligro-suave); color: var(--peligro); }
.asesor-senal { border-left: 4px solid var(--peligro); }

.asesor-modo { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.asesor-modo legend { font-size: 13px; color: var(--texto); padding: 0 6px; }
.asesor-modo-pronto { opacity: .6; }

.asesor-agregar-varios { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr); gap: 18px; margin: 12px 0; align-items: start; }
.asesor-agregar-varios label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto); }
.asesor-agregar-varios label.opcion-casilla { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.asesor-agregar-varios label.opcion-casilla small { flex-basis: 100%; }
.asesor-agregar-varios input[type="text"], .asesor-agregar-varios input[type="search"],
.asesor-agregar-varios input[type="number"], .asesor-agregar-varios select {
  font: inherit; padding: .543rem .875rem; border: 1px solid var(--borde-input); border-radius: var(--radio);
}
.asesor-datos-gatillo { display: flex; flex-direction: column; gap: 12px; }
.asesor-datos-gatillo button { align-self: flex-start; }
.asesor-lista-clientes {
  margin-top: 8px; max-height: 320px; overflow-y: auto; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 6px 10px; background: #fff; display: flex; flex-direction: column; gap: 2px;
}
.asesor-lista-clientes label.opcion-casilla { padding: 4px 2px; color: var(--titulo); flex-wrap: nowrap; }
.asesor-lista-clientes label[hidden] { display: none; }
@media (max-width: 760px) { .asesor-agregar-varios { grid-template-columns: 1fr; } }

/* El aviso fijo: no se puede cerrar. Se va cuando alguien suelta al asesor. */
.asesor-senales {
  position: fixed; right: 18px; bottom: 18px; z-index: 9000; width: min(380px, calc(100vw - 36px));
  max-height: 70vh; overflow-y: auto;
  /* Igual que .franja-pendientes: sin esto, un `overflow-y` sin `overflow-x`
     explicito se resuelve solo como `auto` y Windows dibuja una barra
     horizontal clasica de la nada (P228, segunda vuelta). Este panel tiene su
     ancho fijo por `width` de arriba: nunca necesita scroll de lado a lado. */
  overflow-x: hidden;
  background: var(--papel); border: 2px solid var(--peligro); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg); font-size: 13px;
  /* Scroll fino: sin esto, el navegador dibuja su barra de scroll gruesa
     sobre este panel fijo abajo a la derecha en cuanto se pasa el mouse
     cerca. */
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 110, 120, .35) transparent;
}
.asesor-senales::-webkit-scrollbar { width: 6px; height: 6px; }
.asesor-senales::-webkit-scrollbar-track { background: transparent; }
.asesor-senales::-webkit-scrollbar-thumb { background: rgba(100, 110, 120, .35); border-radius: 3px; }
.asesor-senales[hidden] { display: none; }
.en-panel .asesor-senales { display: none; }
.asesor-senales-titulo { background: var(--peligro); color: #fff; font-weight: 600; padding: .7rem 1.1rem; display: flex; gap: 8px; align-items: center; position: sticky; top: 0; }
.asesor-senal-item { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; border-bottom: 1px solid var(--borde); }
.asesor-senal-item:last-child { border-bottom: 0; }
.asesor-senal-detalle { color: var(--titulo); }
.asesor-senal-que { color: var(--texto); font-size: 13.5px; }
.asesor-senal-botones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.asesor-senal-botones form { margin: 0; }
.asesor-senal-ver { margin-left: auto; font-size: 13px; color: var(--texto); }

/* --- Asesor comercial: conmutador de IA (P133) --- */
.asesor-ia-form { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.asesor-ia-form label.opcion-radio { display: flex; gap: 10px; align-items: flex-start; }
.asesor-ia-form label.opcion-radio small { display: block; color: var(--texto); }
.asesor-ia-form select { font: inherit; padding: .543rem .875rem; border: 1px solid var(--borde-input); border-radius: var(--radio); max-width: 320px; }
.asesor-ia-form button { align-self: flex-start; }
.asesor-ia .inicio-bloque-cabecera form { margin: 0; }

/* --- Asesor comercial: modo automatico, la contratacion (P134) --- */
.asesor-contratar-pasos { list-style: none; display: flex; gap: 8px; padding: 0; margin: 4px 0 18px; flex-wrap: wrap; }
/* Los pasos del asistente de Sneat (wizard): circulo con numero y rotulo. */
.asesor-contratar-pasos li { display: flex; align-items: center; gap: 8px; padding: .5rem 1rem; border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra-sm); color: var(--texto); font-size: 13px; }
.asesor-contratar-pasos li span { width: 26px; height: 26px; border-radius: var(--radio); background: var(--secundario-suave); color: var(--secundario); display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 600; }
.asesor-contratar-pasos li.actual { color: var(--primario); font-weight: 500; }
.asesor-contratar-pasos li.actual span { background: var(--primario); color: #fff; box-shadow: var(--sombra-foco); }
.asesor-contratar-pasos li.hecho { color: var(--titulo); }
.asesor-contratar-pasos li.hecho span { background: var(--primario-suave); color: var(--primario); }

/* --- Asesor comercial: el asesor de cada oferta (P135) --- */
.asesor-de-oferta > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.asesor-de-oferta > summary::-webkit-details-marker { display: none; }
.asesor-de-oferta > summary h2 { margin: 0; }
.asesor-de-oferta-resumen { color: var(--texto); font-size: 13px; }
.asesor-de-oferta .formulario { max-width: none; margin-top: 14px; }
.asesor-de-oferta h3 { margin: 18px 0 6px; font-size: 16px; }

.asesor-plan { margin: 12px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.asesor-plan li strong { display: block; color: var(--titulo); font-weight: 600; }
.asesor-plan li small { display: block; color: var(--texto); font-size: 13px; margin-top: 2px; }

/* El revisor del plan (P259): avisos, no errores. Ambar los de codigo; los
   que sugiere la IA, con el acento de todo lo de IA (decision 33). */
.asesor-revision-lista { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.asesor-revision-lista li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--titulo); line-height: 1.5; }
.asesor-revision-lista li > i { color: var(--aviso-texto); margin-top: 3px; flex: 0 0 auto; }
.asesor-revision-lista li.de-ia > i { color: var(--acento); }
.asesor-revision-ok { color: var(--exito-texto); margin: 4px 0 10px; }
.asesor-contrato-aprobado { background: var(--exito-suave); color: var(--exito-texto); }
.asesor-contrato-plan, .asesor-contrato-preguntas, .asesor-contrato-armando, .asesor-contrato-sin_contratar { background: var(--aviso-suave); color: var(--aviso-texto); }

/* Las columnas del embudo de una oferta (P205): la lista que explica, en la
   pantalla de la oferta, por donde va a ir moviendo el asesor cada cliente. */
.asesor-etapas-embudo { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.asesor-etapas-embudo li { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--borde); border-radius: 999px; font-size: 13.5px; color: var(--titulo); background: var(--fondo-suave, #fff); }
.asesor-etapa-color { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

.asesor-reglas { display: flex; flex-direction: column; gap: 14px; }
.asesor-reglas label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--texto); }
.asesor-reglas label > span { font-weight: 600; color: var(--titulo); }
.asesor-reglas label.opcion-casilla { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.asesor-reglas label.opcion-casilla small { flex-basis: 100%; }
.asesor-reglas textarea { font: inherit; padding: .543rem .875rem; border: 1px solid var(--borde-input); border-radius: var(--radio); color: var(--titulo); resize: vertical; }
.asesor-reglas-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.asesor-siempre { margin: 0; padding-left: 18px; color: var(--texto); font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }

/* Lo que el asesor averiguo del cliente (P164). Se muestra tal cual lo
   escribio la IA: son lineas con etiqueta, y respetar sus saltos se lee
   mucho mejor que un parrafo corrido. */
.asesor-perfil {
  margin: 0 0 8px; padding: .75rem .9rem; background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--radio); color: var(--titulo);
  font: inherit; font-size: .9rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}

/* Por que el agente eligio ese mensaje: va pegado a cada uno. */
.asesor-razon { margin: 4px 0 6px; padding: .5rem .8rem; border-left: 3px solid var(--primario); background: var(--primario-suave); color: var(--titulo); font-size: 13px; border-radius: 0 var(--radio) var(--radio) 0; }
.asesor-formato-correo { background: var(--info-suave); color: var(--info-texto); }
.asesor-armando { text-align: center; padding: 28px 18px; }
.asesor-armando p:first-child { font-size: 17px; }
.asesor-de-oferta .aviso-texto-alerta { color: var(--aviso-texto); }
.asesor-de-oferta summary .enlace { color: var(--primario); text-decoration: underline; }

/* --- El ID de cada correo enviado (P136) --- */
.correo-id { display: inline-block; font-size: 12px; font-weight: 500; color: var(--primario); background: var(--primario-suave);
  border: 0; border-radius: var(--radio-sm); padding: 0 6px; line-height: 20px; white-space: nowrap; }
button.correo-id-grande { font: inherit; font-size: 13px; padding: 3px 8px; cursor: pointer; width: auto; }
button.correo-id-grande:hover { background: var(--primario-suave); }

/* `form input { width: 100% }` estira tambien casillas y radios: en las
   pantallas del Asesor la casilla quedaba en medio y el texto corrido a la
   derecha (lo vio el dueno en la lista de clientes, 2026-09-21). */
label.opcion-casilla input[type="checkbox"], label.opcion-casilla input[type="radio"],
label.opcion-radio input[type="radio"], label.asesor-dia input[type="checkbox"] {
  width: auto; margin: 0 6px 0 0; padding: 0; flex: none;
}
label.opcion-casilla { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; cursor: pointer; }
label.opcion-casilla small { flex-basis: 100%; }
.asesor-lista-clientes label.opcion-casilla { justify-content: flex-start; }
.asesor-correos-lista { font-size: 13px; }

/* --- Asesor comercial: lo que sabe de cada oferta (P137) --- */
/* El globo de ayuda: se abre al pasar el mouse o al tocarlo en el celular. */
.tip { position: relative; display: inline-block; color: var(--texto); cursor: help; margin-left: 4px; font-weight: 400; }
.tip:focus { outline: none; color: var(--primario); }
.tip-globo { display: none; position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  width: min(340px, 78vw); background: var(--titulo); color: #fff; padding: .6rem .8rem; border-radius: var(--radio);
  font-size: .8125rem; line-height: 1.45; z-index: 60; box-shadow: var(--sombra-lg); text-align: left;
  white-space: normal; }
.tip-globo em { color: var(--primario-borde); font-style: normal; font-weight: 600; }
.tip:hover .tip-globo, .tip:focus .tip-globo, .tip:focus-within .tip-globo { display: block; }

.asesor-resumen { white-space: pre-wrap; background: var(--fondo); border: 0; border-radius: var(--radio);
  padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--titulo); max-height: 520px; overflow-y: auto; }
.asesor-texto-leido { max-height: 280px; font-size: 13.5px; margin-top: 6px; }
.asesor-piezas > summary, .asesor-de-oferta > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.asesor-piezas > summary::-webkit-details-marker { display: none; }
.asesor-piezas > summary h2 { margin: 0; }
.asesor-piezas summary .enlace { color: var(--primario); text-decoration: underline; }
.asesor-piezas-asistente { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 14px 0 4px; }
.asesor-piezas-form { max-width: none; padding: 16px 0 0; }
.asesor-piezas-form h3 { margin: 14px 0 4px; font-size: 16px; }
.asesor-pieza-titulo { font-weight: 600; color: var(--titulo); }
.asesor-nota-form { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 12px; flex-wrap: wrap; }
.asesor-nota-form textarea { flex: 1 1 320px; margin: 0; }
.asesor-nota-form input[type="file"] { flex: 1 1 260px; margin: 0; }
.asesor-nota-form button { flex: none; }
.asesor-notas, .asesor-archivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.asesor-notas li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: .75rem 1rem; border: 0; border-radius: var(--radio); box-shadow: var(--sombra-sm); background: var(--papel); }
.asesor-notas li .ayuda { grid-column: 1; }
.asesor-notas li p { grid-column: 1; margin: 0; white-space: pre-wrap; }
.asesor-notas li form { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
.asesor-archivos li { padding: .75rem 1rem; border: 0; border-radius: var(--radio); box-shadow: var(--sombra-sm); background: var(--papel); }
.asesor-archivo-cabecera { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.asesor-archivo-cabecera form { margin: 0 0 0 auto; }
.asesor-archivo-listo { background: var(--exito-suave); color: var(--exito-texto); }
.asesor-archivo-fallido { background: var(--peligro-suave); color: var(--peligro); }

/* El asistente paso a paso */
.asistente-progreso { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.asistente-progreso a { width: 32px; height: 32px; border-radius: var(--radio); display: inline-flex; align-items: center; justify-content: center;
  background: var(--secundario-suave); color: var(--secundario); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.asistente-progreso a.hecho { background: var(--primario-suave); color: var(--primario); }
.asistente-progreso a.actual { background: var(--primario); color: #fff; box-shadow: var(--sombra-foco); }
.asistente h2 { margin: 2px 0 8px; }
.asistente-contador { color: var(--texto); font-size: 13.5px; margin: 0; }
.asistente-porque { background: var(--primario-suave); border-left: 3px solid var(--primario); padding: .75rem 1rem; border-radius: 0 var(--radio) var(--radio) 0; color: var(--titulo); }
.asistente-botones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.asistente-revision dt { margin-top: 10px; font-weight: 600; }
.asistente-revision dd { margin: 2px 0 0; color: var(--titulo); }
.asistente-revision dd p { margin: 2px 0; white-space: pre-wrap; }
.aviso-alerta { background: var(--aviso-suave); color: var(--aviso-texto); padding: .75rem 1rem; border-radius: var(--radio); }

/* Las ofertas, arriba del tablero */
.asesor-oferta-tarjeta { display: flex; flex-direction: column; gap: 4px; padding: .875rem 1.125rem; border: 0;
  border-radius: var(--radio); box-shadow: var(--sombra-sm); margin-top: 10px; text-decoration: none; color: var(--titulo); background: var(--papel); transition: box-shadow .2s; }
.asesor-oferta-tarjeta:hover { box-shadow: var(--sombra-lg); color: var(--titulo); text-decoration: none; }
.asesor-oferta-tarjeta strong { color: var(--primario); font-weight: 500; }
.asesor-oferta-datos { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: var(--texto); }
.asesor-falta { color: var(--aviso-texto); }

/* Servicios > Hosting y dominios (P153): Cuentas de hosting y Avisos de hosting. */
.filtro-pildoras { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 1rem; }
.filtro-pildoras a { border-radius: var(--radio); padding: .4812rem 1.25rem; font-size: 13px; color: var(--titulo); text-decoration: none; }
.filtro-pildoras a:hover { color: var(--primario); text-decoration: none; }
.filtro-pildoras a.filtro-activo, .filtro-pildoras a.filtro-activo:hover { color: #fff; background: var(--primario); box-shadow: var(--sombra-foco); }

.hosting-aviso-celda { min-width: 210px; }
.hosting-aviso { display: inline-block; font-size: .8125rem; font-weight: 500; line-height: 1.3; padding: .35em .7em; border-radius: var(--radio-sm); }
.hosting-aviso-ok { background: var(--exito-suave); color: var(--exito-texto); }
.hosting-aviso-pendiente { background: var(--info-suave); color: var(--info-texto); }
.hosting-aviso-alerta { background: var(--peligro-suave); color: var(--peligro); }
.hosting-aviso-suave { background: var(--secundario-suave); color: var(--secundario); }

.hosting-avisos-bloque { margin: 0 0 2rem; }
.hosting-avisos-bloque h3 { margin: 1.5rem 0 .25rem; }
.hosting-avisos-form { max-width: 900px; background: var(--papel); padding: 1.5rem; border-radius: var(--radio); box-shadow: var(--sombra); }
.hosting-avisos-tabla { width: 100%; border-collapse: collapse; }
.hosting-avisos-tabla th { text-align: left; font-weight: 500; color: var(--titulo); font-size: .8125rem; text-transform: uppercase; letter-spacing: .2px; padding: 0 .5rem .6rem; border-bottom: 1px solid var(--borde); }
.hosting-avisos-tabla td { padding: .9rem .5rem; border-bottom: 1px solid var(--secundario-suave); vertical-align: middle; }
.hosting-pct { display: inline-flex; align-items: center; gap: 6px; }
.hosting-pct input { width: 5.5rem; }
.hosting-encendido { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.hosting-avisos-notas { margin: 1rem 0 .5rem; padding-left: 1.2rem; color: var(--texto); font-size: 13.5px; }
.hosting-avisos-notas li { margin: .3rem 0; }
/* La consecuencia de poner el aviso en "una sola vez" (P208): sin destacarla se
   lee como una nota mas, y lo que apaga es la suspension por ancho de banda. */
.hosting-avisos-notas li.hosting-avisos-ojo { color: var(--titulo); background: var(--acento-suave); border-left: 3px solid var(--acento); padding: .5rem .75rem; border-radius: 0 var(--radio) var(--radio) 0; list-style: none; margin-left: -1.2rem; }
.hosting-avisos-hoy { background: var(--primario-suave); border-left: 3px solid var(--primario); padding: .75rem 1rem; border-radius: 0 var(--radio) var(--radio) 0; color: var(--titulo); }
@media (max-width: 640px) {
  .hosting-avisos-tabla th:nth-child(n+2), .hosting-avisos-tabla td:nth-child(n+2) { padding-left: .25rem; padding-right: .25rem; }
  .hosting-pct input { width: 4.25rem; }
}

/* Submenu de la barra lateral: Servicios > Hosting / Dominios (P153).
   Solo existe si la empresa contrato el modulo Hosting y Dominios; sin el, base.html
   dibuja Servicios como un enlace comun y nada de esto se usa. */
.sidebar-grupo-cabecera { position: relative; }
.sidebar-grupo-cabecera .sidebar-link { padding-right: 2.5rem; }
.sidebar-grupo-flecha {
  position: absolute; top: 50%; right: 1.25rem; transform: translateY(-50%);
  width: 1.75rem; height: 1.75rem; padding: 0; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radio); color: var(--menu-texto); cursor: pointer; box-shadow: none;
}
.sidebar-grupo-flecha:hover { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
.sidebar-grupo-flecha i { font-size: 1.25rem; transition: transform .2s; }
html.grupo-servicios-cerrado .sidebar-grupo[data-grupo="servicios"] .sidebar-grupo-flecha i,
html.grupo-whatsapp-cerrado .sidebar-grupo[data-grupo="whatsapp"] .sidebar-grupo-flecha i { transform: rotate(-90deg); }
.sidebar-sublink { min-height: 2.25rem; padding-left: 2.6rem; font-size: .84rem; }
.sidebar-sublink i { font-size: 1.125rem; width: 1.125rem; }
html:not(.menu-plegado).grupo-servicios-cerrado .sidebar-grupo[data-grupo="servicios"] .sidebar-sub,
html:not(.menu-plegado).grupo-whatsapp-cerrado .sidebar-grupo[data-grupo="whatsapp"] .sidebar-sub { display: none; }
/* Plegado (solo iconos): sin flechita, y los hijos se ven siempre como iconos sueltos,
   cada uno con su nombre en el globo oscuro. */
.menu-plegado .sidebar-grupo-flecha { display: none; }
.menu-plegado .sidebar-grupo-cabecera .sidebar-link { padding-right: 0; }
.menu-plegado .sidebar-sublink { padding-left: 0; }
@media (max-width: 991.98px) {
  /* En el celular el menu se abre siempre entero, este plegado o no. */
  .menu-plegado .sidebar-grupo-flecha { display: flex; }
  .menu-plegado .sidebar-grupo-cabecera .sidebar-link { padding-right: 2.5rem; }
  .menu-plegado .sidebar-sublink { padding-left: 2.6rem; }
  html.menu-plegado.grupo-servicios-cerrado .sidebar-grupo[data-grupo="servicios"] .sidebar-sub,
  html.menu-plegado.grupo-whatsapp-cerrado .sidebar-grupo[data-grupo="whatsapp"] .sidebar-sub { display: none; }
}

/* === Asistente de puesta en marcha (P161, 2026-09-23) =====================

   El dueno lo pidio al ir a ofrecerle el CRM a su primer cliente: que apenas
   entre le vaya pidiendo la informacion poco a poco, y que se vea con el
   estilo del CRM. Asi que aqui no hay ningun color nuevo: todo sale de las
   variables del :root de arriba (decision 33). El naranja del logo aparece en
   un solo sitio -- el paso en el que se esta --, que es justo el criterio de
   "acento en pocos lugares" que se fijo ese dia.                            */

.bienvenida { max-width: 860px; }
.bienvenida-cabecera { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.bienvenida-cabecera h1 { margin: 2px 0 4px; }
.bienvenida-cabecera .ayuda { margin: 0; }
.bienvenida-sobretitulo { margin: 0; color: var(--acento); font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; }
.bienvenida-sobretitulo i { vertical-align: -2px; }

/* Los pasos. Cada uno es un enlace: se puede volver a cualquiera en cualquier
   momento -- el asistente guia, no encierra. */
.bienvenida-pasos { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 14px; flex-wrap: wrap; }
.bienvenida-pasos li { flex: 1 1 210px; }
.bienvenida-pasos a {
  display: flex; align-items: center; gap: 10px; height: 100%;
  padding: .625rem .875rem; border-radius: var(--radio);
  background: var(--papel); box-shadow: var(--sombra-sm);
  color: var(--texto); text-decoration: none; font-size: .8125rem;
}
.bienvenida-pasos a:hover { box-shadow: var(--sombra); color: var(--titulo); }
.bienvenida-pasos-num {
  flex: none; width: 28px; height: 28px; border-radius: var(--radio);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--secundario-suave); color: var(--secundario); font-weight: 600; font-size: .8125rem;
}
.bienvenida-pasos-texto { display: flex; flex-direction: column; line-height: 1.25; }
.bienvenida-pasos-texto small { color: var(--texto-suave); font-size: .75rem; }
.bienvenida-pasos li.hecho a { color: var(--titulo); }
.bienvenida-pasos li.hecho .bienvenida-pasos-num { background: var(--exito-suave); color: var(--exito-texto); }
.bienvenida-pasos li.hecho .bienvenida-pasos-texto small { color: var(--exito-texto); }
.bienvenida-pasos li.actual a { color: var(--titulo); font-weight: 600; box-shadow: var(--sombra); }
.bienvenida-pasos li.actual .bienvenida-pasos-num { background: var(--acento); color: #fff; }

.bienvenida-barra { height: 6px; border-radius: 999px; background: var(--secundario-suave); overflow: hidden; }
.bienvenida-barra span { display: block; height: 100%; background: var(--primario); border-radius: 999px; transition: width .3s; }
.bienvenida-contador { margin: 6px 0 16px; color: var(--texto); font-size: .8125rem; }

.bienvenida-tarjeta { max-width: none; }
.bienvenida-tarjeta h2 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.bienvenida-tarjeta h2 i { color: var(--acento); }
.bienvenida-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.bienvenida-avanzado { margin: 4px 0 14px; border: 1px solid var(--borde); border-radius: var(--radio); padding: .75rem 1rem; }
.bienvenida-avanzado > summary { cursor: pointer; color: var(--titulo); font-weight: 600; font-size: .8125rem; }
.bienvenida-avanzado .ayuda { margin: 8px 0 12px; }
.bienvenida-interruptor { display: flex; align-items: center; gap: 8px; }
.bienvenida-interruptor span { font-weight: 600; color: var(--titulo); }
.bienvenida-dias { display: flex; gap: 6px; flex-wrap: wrap; }
.bienvenida-dia { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: .375rem .625rem; border: 1px solid var(--borde-input); border-radius: var(--radio); font-size: .8125rem; cursor: pointer; }
.bienvenida-dia:has(input:checked) { border-color: var(--primario); background: var(--primario-suave); color: var(--titulo); }
.bienvenida-botones { margin-top: 18px; }
/* Un <a> dentro de un contenedor flex se reparte el espacio sobrante y el
   boton secundario del resumen salia estirado de lado a lado. */
.bienvenida-botones > a, .bienvenida-botones > form { flex: none; }
.bienvenida-pie { margin-top: 14px; color: var(--texto-suave); font-size: .8125rem; }

/* --- Paso "Trae tus mensajes viejos" (P179) ----------------------------- */
/* Tres renglones numerados y nada mas: el dueno pidio pasos, no explicacion
   ("la gente se aburre leyendo texto"). El numero grande y redondo es lo que
   hace que se lean como una secuencia y no como un parrafo con vinetas. */
.pasos-cortos { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: paso; }
.pasos-cortos li {
  counter-increment: paso;
  position: relative;
  padding: 8px 0 8px 40px;
  line-height: 1.5;
}
.pasos-cortos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 6px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--acento-suave); color: var(--acento);
  font-weight: 700; font-size: .8125rem;
}
.pasos-cortos code {
  background: var(--fondo); padding: 1px 6px; border-radius: var(--radio-sm);
  font-size: 13px;
}
.historial-accion { margin: 4px 0 8px; }
.historial-accion .ayuda { margin-top: 8px; }
.historial-hecho { display: flex; align-items: center; gap: 8px; }

/* El resumen final */
.bienvenida-resumen { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; }
.bienvenida-resumen li { display: flex; align-items: center; gap: 12px; padding: .75rem 0; border-top: 1px solid var(--borde); }
.bienvenida-resumen li:first-child { border-top: 0; }
.bienvenida-resumen-icono { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--secundario-suave); color: var(--secundario); }
.bienvenida-resumen li.hecho .bienvenida-resumen-icono { background: var(--exito-suave); color: var(--exito-texto); }
.bienvenida-resumen li.falta .bienvenida-resumen-icono { background: var(--aviso-suave); color: var(--aviso-texto); }
.bienvenida-resumen-texto { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.bienvenida-resumen-texto strong { color: var(--titulo); }
.bienvenida-resumen-texto small { color: var(--texto); }

.bienvenida-siguientes { margin-top: 24px; }
.bienvenida-siguientes h2 { font-size: 1rem; margin-bottom: 10px; }
.bienvenida-atajos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.bienvenida-atajos a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 1rem; border-radius: var(--radio); background: var(--papel);
  box-shadow: var(--sombra-sm); color: var(--texto); text-decoration: none;
}
.bienvenida-atajos a:hover { box-shadow: var(--sombra); }
.bienvenida-atajos i { font-size: 1.5rem; color: var(--acento); margin-bottom: 4px; }
.bienvenida-atajos strong { color: var(--titulo); }
.bienvenida-atajos small { color: var(--texto); font-size: .8125rem; }

/* --- El codigo QR de WhatsApp (_whatsapp_qr.html) --- */
.wa-columnas { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.wa-marco { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wa-qr {
  width: 244px; height: 244px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--borde); border-radius: var(--radio-lg); background: #fff; padding: 10px;
}
.wa-qr img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.wa-qr-vacio { text-align: center; color: var(--texto-suave); }
.wa-qr-vacio i { font-size: 3rem; display: block; margin-bottom: 8px; }
.wa-qr-vacio p { margin: 0; font-size: .8125rem; }
.wa-pasos { margin: 0; padding-left: 20px; color: var(--texto); display: flex; flex-direction: column; gap: 10px; flex: 1 1 240px; }
.wa-pasos strong { color: var(--titulo); }
.wa-mensaje { margin: 0; min-height: 1.2em; font-size: .8125rem; color: var(--texto); text-align: center; }
.wa-mensaje.wa-error { color: var(--peligro); }
.wa-mensaje.wa-esperando { color: var(--exito-texto); }
.wa-ayuda { margin-top: 16px; }

.wa-estado-listo { display: flex; align-items: center; gap: 12px; padding: 1rem; border-radius: var(--radio); background: var(--exito-suave); color: var(--exito-texto); }
.wa-estado-listo strong { color: var(--exito-texto); }
.wa-check { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--exito); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.wa-numero { margin: 2px 0 0; font-size: .8125rem; }
.wa-acciones { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); }
.wa-acciones .ayuda { margin: 8px 0 0; }

/* --- La franja de "te falta configurar" (base.html) ---
   Va en ambar y no en rojo a proposito: no es un fallo, es algo pendiente. El
   rojo aqui asustaria a una empresa que acaba de entrar y todavia no hizo
   nada malo. */
.franja-marcha {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 1.5rem 1rem; padding: .75rem 1rem;
  border: 1px solid var(--aviso-borde); border-radius: var(--radio);
  background: var(--aviso-suave); color: var(--aviso-texto);
}
.franja-marcha > i { font-size: 1.25rem; flex: none; }
.franja-marcha-texto { flex: 1 1 260px; display: flex; flex-direction: column; line-height: 1.3; }
.franja-marcha-texto strong { color: var(--aviso-texto); }
.franja-marcha-texto span { font-size: .8125rem; }
.franja-marcha-boton {
  flex: none; padding: .4rem .9rem; border-radius: var(--radio);
  background: var(--aviso-texto); color: #fff; text-decoration: none; font-size: .8125rem; font-weight: 600;
}
.franja-marcha-boton:hover { background: var(--titulo); color: #fff; }
.franja-marcha-cerrar { background: none; border: 0; box-shadow: none; color: var(--aviso-texto); cursor: pointer; padding: .25rem; font-size: 1.125rem; line-height: 1; }
.franja-marcha-cerrar:hover { background: none; box-shadow: none; color: var(--titulo); }
@media (max-width: 991.98px) { .franja-marcha { margin: 0 1rem 1rem; } }

/* --- Franja de pendientes de la bandeja (P226, 2026-10-02) ---
   Un cuadradito por ORIGEN (ese chat de WhatsApp, ese correo), fijo al
   costado derecho en TODAS las pantallas. Ancla ARRIBA, no al alto entero:
   .asesor-senales ya vive fijo abajo a la derecha (linea ~6341), y una
   franja que llegara hasta el fondo se la habria tapado. Con el hueco de
   abajo libre, las dos conviven sin tocarse. */
.franja-pendientes {
  position: fixed;
  top: calc(var(--alto-barra) + 2rem);
  right: 14px;
  z-index: 1070;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  /* SIN esto aparecia una barra de scroll HORIZONTAL que nadie pedia
     (P228, segunda vuelta, 2026-10-02): por regla del CSS, un `overflow-y`
     que no sea `visible` deja el `overflow-x` por defecto ("visible") sin
     sentido, y el navegador lo resuelve solo como si fuera `auto` -- en
     Windows eso dibuja su barra clasica, con flechas, con solo que el
     contenido se pase un pixel de ancho (el `box-shadow` de un avatar, por
     ejemplo). Esta franja es una columna vertical: nunca necesita scroll de
     lado a lado. */
  overflow-x: hidden;
  padding: 4px;
  /* Un scroll fino y propio: sin esto, con varios pendientes el navegador
     dibuja la barra de scroll de Windows entera -- gruesa, con flechas --
     pegada a los avatares en cuanto se pasa el mouse cerca. Mismo criterio
     que .sidebar-nav, pero en gris y no en blanco porque esta franja flota
     sobre fondo claro, no sobre el menu oscuro. */
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 110, 120, .35) transparent;
}
.franja-pendientes::-webkit-scrollbar { width: 6px; height: 6px; }
.franja-pendientes::-webkit-scrollbar-track { background: transparent; }
.franja-pendientes::-webkit-scrollbar-thumb { background: rgba(100, 110, 120, .35); border-radius: 3px; }
.pendiente-item {
  position: relative;
  flex: none;
  display: block;
  border-radius: 50%;
  box-shadow: var(--sombra);
  transition: transform .15s ease-in-out;
}
.pendiente-item:hover { transform: scale(1.08); }
.pendiente-item .avatar {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
  border: 2px solid #fff;
}
.pendiente-canal {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .5625rem;
  color: #fff;
  border: 2px solid #fff;
}
/* Tickets de soporte (P251): el color del circulo sale de la situacion del plazo.
   Rojo = plazo vencido; azul = con plazo, todavia a tiempo; gris = sin plazo.
   Los tres colores son fijos a proposito: son señales, no parte de la paleta. */
.pendiente-vencido { box-shadow: 0 0 0 3px #dc2626, var(--sombra); }
.pendiente-en_plazo { box-shadow: 0 0 0 3px #2563eb, var(--sombra); }
.pendiente-sin_plazo { box-shadow: 0 0 0 3px #9ca3af, var(--sombra); }
.ticket-plazo { font-weight: 600; }
.ticket-plazo-vencido { color: #dc2626; }
.ticket-plazo-en_plazo { color: #2563eb; }
.ticket-plazo-sin_plazo { color: #6b7280; }
.pendiente-canal-whatsapp { background: #25d366; }
.pendiente-canal-correo { background: var(--primario); }
/* Sin tope de ancho, el contenido llega hasta el borde y la franja (fija a la
   derecha) le taparia la columna del perfil. Se le reserva su carril solo
   cuando la franja existe; sin tickets abiertos, el contenido usa todo. */
@media (min-width: 576px) {
  body:has(.franja-pendientes) .layout-pagina { padding-right: 3rem; }
}
@media (max-width: 575.98px) {
  /* Pantalla de celular: la franja flotando sobre el chat tapa el cuadro de
     responder. Se esconde; los pendientes se siguen viendo y marcando desde
     dentro de cada chat o correo, que es donde de verdad se resuelven. */
  .franja-pendientes { display: none; }
}

/* --- Nota de voz dictada desde el chat (P167, modulo Asesor) ---
   El boton va en el acento naranja como el resto de lo que habla con la IA
   (decision 33), para que se distinga de los iconos de formato de al lado. */
.formato-barra .formato-nota-voz { color: var(--acento-hover); background: var(--acento-suave); }
.formato-barra .formato-nota-voz:hover { background: var(--acento); color: #fff; }
.formato-barra .formato-nota-voz:disabled { background: none; color: var(--texto-suave); cursor: default; opacity: .6; }

/* Mas ancho que el dialogo generico: aqui se escribe un mensaje entero y
   despues se escucha, no se contesta una pregunta. */
.dialogo-nota-voz { max-width: 440px; }
.dialogo-nota-voz textarea {
  width: 100%;
  margin-top: 10px;
  padding: .543rem .875rem;
  border: 1px solid var(--borde-input);
  border-radius: var(--radio);
  font: inherit;
  resize: vertical;
}
.dialogo-nota-voz .nota-voz-campo { display: block; margin-top: 10px; font-size: 13px; }
.dialogo-nota-voz .nota-voz-campo select {
  width: 100%; margin-top: 4px; padding: .543rem .875rem;
  border: 1px solid var(--borde-input); border-radius: var(--radio); font: inherit;
}
.dialogo-nota-voz .nota-voz-quien { margin: 8px 0 0; }
.nota-voz-contador { margin: 4px 0 10px; font-size: .75rem; color: var(--texto-suave); }
.nota-voz-largo { margin: 0 0 10px; font-size: .75rem; color: var(--aviso-texto); }
.nota-voz-error { margin: 10px 0 0; }
.nota-voz-listo { margin-top: 12px; }
.nota-voz-listo audio { width: 100%; }
.nota-voz-listo .ayuda { margin: 6px 0 0; }

/* La guia para conseguir una clave: la contrasena del correo (P174) y la
   clave del conector de IA (P178). Va pegada al campo al que sirve, en el
   asistente de puesta en marcha y en Configuracion. No es un "alert": es una
   instruccion, asi que lleva el gris de las tarjetas y solo el numero del
   paso en naranja. Se llamaba .guia-clave hasta P178. */
.guia-clave {
  margin: 4px 0 16px;
  padding: .875rem 1rem;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  background: var(--hover);
}
.guia-clave h3 { margin: 0 0 6px; font-size: .9375rem; color: var(--titulo); display: flex; align-items: center; gap: 8px; }
.guia-clave h3 i { color: var(--acento); font-size: 1.125rem; }
.guia-clave-resumen { margin: 0 0 10px; color: var(--texto); }
.guia-clave-pasos { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 10px; }
.guia-clave-pasos li { color: var(--texto); }
.guia-clave-pasos li::marker { color: var(--acento); font-weight: 700; }
/* El boton va en su propia linea: pegado al final del texto se lee como
   parte de la frase y no como el sitio donde hay que hacer clic. */
.guia-clave-pasos li > span { display: block; }
.guia-clave-boton {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  padding: .375rem .75rem; border-radius: var(--radio);
  background: var(--primario); color: #fff; font-weight: 600;
  font-size: .8125rem; text-decoration: none;
}
.guia-clave-boton:hover { background: var(--primario-hover); color: #fff; }
.guia-clave-nota { margin: 10px 0 0; color: var(--texto-suave); font-size: .8125rem; }
.guia-clave-nota i { vertical-align: -1px; }
/* Outlook y Hotmail, que Microsoft ya no deja conectar: aqui no hay pasos que
   seguir sino una decision que tomar, y por eso si va en rojo. */
.guia-clave-alerta { border-left-color: var(--peligro); background: var(--peligro-suave); }
.guia-clave-alerta h3 i { color: var(--peligro); }
/* Cuando el error que acaba de salir ES el de la contrasena, la guia se
   resalta: es justo lo que hay que hacer a continuacion. */
.guia-clave-resaltada { box-shadow: 0 0 0 2px rgba(var(--acento-rgb), .35); }

/* El error del servidor: arriba la traduccion, abajo y plegado el texto
   original tal como vino. */
.correo-diagnostico p, .cuenta-correo-error p { margin: 0; }
.correo-diagnostico details, .cuenta-correo-error details { margin-top: 8px; }
.correo-diagnostico summary, .cuenta-correo-error summary { cursor: pointer; font-size: .8125rem; opacity: .85; }
.correo-diagnostico code, .cuenta-correo-error code { display: block; margin-top: 6px; font-size: .75rem; word-break: break-word; }

/* ---------------------------------------------------------------------------
   Certificados SSL (P176)
   --------------------------------------------------------------------------- */
/* Rojo y no ambar a proposito: un certificado vencido no es una advertencia,
   es el sitio del cliente ya roto con la pantalla del navegador en rojo. El
   ambar queda para el estado "pronto", que si es una tarea que se agenda. */
.etiqueta-canal-aviso { background: var(--aviso-suave); color: var(--aviso-texto); }

.ssl-urgente {
  margin: 0 0 1.25rem; padding: 1rem 1.125rem;
  background: var(--peligro-suave); border: 1px solid var(--peligro); border-radius: var(--radio);
}
.ssl-urgente h2 { margin: 0 0 .5rem; font-size: 1rem; color: var(--peligro); display: flex; align-items: center; gap: 6px; }
.ssl-urgente ul { margin: 0; padding-left: 1.125rem; font-size: 13px; line-height: 1.7; }
.ssl-urgente a { color: inherit; }
.ssl-urgente-pie { margin: .625rem 0 0; font-size: 13px; color: var(--texto); }

.ssl-conteos { margin-bottom: 1.25rem; }
.tabla-ssl td { vertical-align: top; }
.ssl-cuando { white-space: nowrap; }
.ssl-fila-urgente { background: var(--peligro-suave); }
.ssl-viejo { color: var(--aviso-texto); }
.ssl-nota { margin-top: 1rem; line-height: 1.6; }

/* El aviso del tablero de inicio (/inicio). Solo se dibuja si hay algun
   certificado a 3 dias o menos: si no hay ninguno, no ocupa ni una linea. */
.inicio-aviso-ssl {
  margin: 0 0 1rem; padding: .75rem 1rem; font-size: 13.5px; line-height: 1.6;
  background: var(--peligro-suave); border: 1px solid var(--peligro); border-radius: var(--radio); color: var(--peligro);
}
.inicio-aviso-ssl i { margin-right: 6px; }
.inicio-aviso-ssl strong { color: inherit; }
.inicio-aviso-ssl a { color: inherit; text-decoration: underline; }
.inicio-aviso-ssl ul { margin: .5rem 0 .375rem; padding-left: 1.125rem; }

/* Cargar los sitios del servidor (P183) */
.cabecera-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Ambar y no rojo: no es un problema, es algo que conviene leer ANTES de pulsar
   el boton (que la primera carga no dispara avisos de caida). */
.siembra-aviso {
  margin: 0 0 1.25rem; padding: .75rem 1rem; font-size: 13.5px; line-height: 1.6;
  background: var(--aviso-suave); border: 1px solid var(--aviso-borde); border-radius: var(--radio); color: var(--aviso-texto);
}
.siembra-aviso i { margin-right: 6px; }
.siembra-aviso strong { color: inherit; }

/* --- Panel del sistema: ¿estan usando el CRM? (/admin/uso, P190) ----------
   La palabra siempre esta escrita; el color solo la acompana (nunca es el
   unico portador del dato). Tira de dias y barras de semanas en CSS puro,
   sin librerias (regla 19). */
.pastilla-uso {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pastilla-uso-bien { background: var(--exito-suave); color: var(--exito-texto); }
.pastilla-uso-regular { background: var(--aviso-suave); color: var(--aviso-texto); }
.pastilla-uso-mal { background: var(--peligro-suave); color: var(--peligro); }

.tabla-uso-crm td { vertical-align: top; }
.uso-detalle-chico { font-size: 12.5px; color: var(--texto); margin-top: 2px; }
.uso-traba { font-size: 12.5px; color: var(--peligro); font-weight: 600; }

.uso-tira { display: inline-flex; gap: 3px; margin-top: 4px; }
.uso-dia {
  width: 11px; height: 11px; border-radius: 3px;
  background: var(--primario-suave); border: 1px solid var(--primario-borde);
}
.uso-dia-on { background: var(--primario); border-color: var(--primario); }

.uso-semanas { display: flex; gap: 14px; align-items: flex-end; margin: .5rem 0 1.5rem; }
.uso-semana { text-align: center; }
.uso-semana-caja {
  width: 34px; height: 84px; display: flex; align-items: flex-end;
  background: var(--primario-suave); border-radius: 4px; overflow: hidden;
}
.uso-semana-barra { width: 100%; background: var(--primario); border-radius: 4px 4px 0 0; }
.uso-semana-numero { font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.uso-semana-fecha { font-size: 11.5px; color: var(--texto); }

.uso-lista-trabas { margin: .5rem 0 1.5rem; padding-left: 1.125rem; line-height: 1.7; }
.uso-lista-trabas li { margin-bottom: .375rem; font-size: 13.5px; }

/* Editar el nombre desde el chat (panel derecho). */
.perfil-renombrar { margin: .25rem 0 .5rem; font-size: .8125rem; }
.perfil-renombrar summary { cursor: pointer; color: var(--primario); list-style: none; }
.perfil-renombrar summary::-webkit-details-marker { display: none; }
.perfil-renombrar form { display: flex; gap: 6px; margin-top: 6px; }
.perfil-renombrar input[type="text"] { flex: 1; min-width: 0; }

/* Pantalla del Asistente IA (P195). El estado del celular arriba, en la misma
   tarjeta blanca que el resto del CRM; las filas de lo que NO va a sonar en
   gris y tachadas, porque "apagado" tiene que verse sin leer la columna. */
.asistente-estado {
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.asistente-estado p { margin: 0 0 .5rem; }
.asistente-estado form { margin-top: .75rem; }
.asistente-apagado td:not(:last-child) { opacity: .55; }
.asistente-agenda .asistente-apagado td:nth-child(2) { text-decoration: line-through; }
.asistente-silencio {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.asistente-silencio label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

/* INTERRUPTOR DESLIZANTE (P203, 2026-10-01)
   --------------------------------------------------------------------------
   Reemplaza a la pastilla verde "✓ Si" en la pantalla del Asistente. El dueno
   la rechazo porque no se entiende: un recuadro verde que dice "Si" se lee
   como una ETIQUETA de estado, no como algo que se pueda tocar, y tampoco deja
   claro si al hacer clic se enciende o se apaga.
   El deslizante resuelve las dos cosas de un vistazo: la bolita a la derecha y
   en verde es "encendido", a la izquierda y en gris es "apagado", y la forma es
   la que ya conoce cualquiera de los ajustes de su propio celular.
   Es un BOTON (no una casilla): un clic manda el formulario y guarda, sin un
   "Guardar" aparte que se pueda olvidar -- misma idea que tenia la pastilla. */
.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  font: inherit;
  font-size: .8125rem;
  color: var(--secundario);
}
.interruptor-pista {
  position: relative;
  width: 38px;
  height: 22px;
  flex: none;
  border-radius: 11px;
  background: var(--secundario-suave);
  transition: background .15s ease-in-out;
}
.interruptor-bolita {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(34, 48, 62, .3);
  transition: transform .15s ease-in-out;
}
.interruptor-si .interruptor-pista { background: var(--exito); }
.interruptor-si .interruptor-bolita { transform: translateX(16px); }
.interruptor-si { color: var(--exito-texto); font-weight: 500; }
.interruptor:hover .interruptor-pista { filter: brightness(.95); }
.interruptor:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: var(--radio); }

/* El boton que abre el popup de las partes del resumen. Lleva el contador
   ("8 de 13 encendidas") porque sin el no hay forma de saber que hay algo
   apagado ahi dentro sin abrirlo. */
.asistente-abrir-partes {
  margin-top: 6px;
  font-size: .8125rem;
  padding: .3rem .7rem;
}
/* El popup es mas ancho que el generico (340px): son trece renglones con
   nombre, contador e interruptor, y a 340 se parten todos en dos lineas. */
.dialogo-resumen { max-width: 540px; }
.dialogo-resumen .tabla { margin: 12px 0 0; }
.dialogo-resumen .tabla td { padding: 8px 6px; }
/* La lista puede crecer con cada modulo que se contrate: que haga scroll ella
   y no la ventana entera, para que los botones de abajo no se vayan de vista. */
.dialogo-resumen-lista { max-height: min(55vh, 420px); overflow-y: auto; }

/* --- A quién le escribe un agente (decision 43, /equipo/cobrador) ---------
   La tabla reusa `.tabla`; aqui va solo lo propio: la fila apagada de quien no
   recibe nada, las dos pastillas de si/no y el boton que parece enlace con el
   que se arregla cada causa sin salir de la pantalla. */
.tabla-alcance td { vertical-align: top; font-size: 13px; }
.tabla-alcance .fila-apagada td:first-child a { color: var(--texto); }
.tabla-alcance .fila-apagada { background: var(--fondo-suave, #fafafa); }
.enlace-accion {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: var(--primario); text-decoration: none; cursor: pointer;
}
.enlace-accion:hover { text-decoration: underline; }
.motivo-alcance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 2px; }
.pastilla-si, .pastilla-no {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 10px; font-size: 13px; font-weight: 500; white-space: nowrap;
}
.pastilla-si { background: rgba(40, 199, 111, .14); color: #1f9254; }
.pastilla-no { background: rgba(255, 62, 29, .1); color: var(--peligro); }

/* --- «Tu equipo»: una tarjeta por agente (2026-10-01) --------------------
   Era una tabla con el interruptor dentro. El dueño pidió que la
   configuración no viviera aquí, así que la fila se quedó sin su única
   columna de acción y lo que importa pasó a ser otra cosa: la cara, qué trae
   contratado y los dos botones (Entrar / Configuración). Eso ya no es una
   fila de tabla, es una ficha.

   Rejilla que se adapta sola: con un agente ocupa el ancho de uno, con tres
   se ponen en fila, y en el celular quedan una debajo de otra sin media
   query. */
.equipo-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.equipo-ficha {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta, #fff);
}
.equipo-ficha > p { margin: 0; font-size: 13px; }
.equipo-ficha-cabecera { display: flex; align-items: center; gap: 12px; }
.equipo-ficha-foto {
  flex: none; width: 56px; height: 56px;
  border-radius: 50%; object-fit: cover; background: var(--secundario-suave);
}
.equipo-ficha-quien { min-width: 0; }
.equipo-ficha-quien h2 { margin: 0; font-size: 17px; }
.equipo-ficha-quien h2 a { color: var(--texto-fuerte, var(--texto)); text-decoration: none; }
.equipo-ficha-quien h2 a:hover { text-decoration: underline; }
.equipo-ficha-quien p { margin: 2px 0 0; }
/* Las partes que trae el agente. Sin viñeta: cada una ya lleva su nombre en
   negrita y su línea de explicación debajo. */
.equipo-partes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.equipo-partes li { font-size: 13px; }
/* Lo que se vende dentro del paquete y todavía no existe (hoy, Postventa). En
   ámbar y dicho, no escondido: prometer en el menú algo que no abre nada es
   peor que avisar que está en camino. */
.et-pend {
  display: inline-block; margin-left: 6px;
  padding: .1rem .45rem; border-radius: var(--radio-sm);
  background: var(--aviso-suave); color: var(--aviso-texto);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.equipo-ficha-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* --- La lista del Agente de asistencia (decisión 45, 2026-10-01) ---------
   «Un calendario en formato de Lista» con arrastre: cada día es una banda y
   dentro van tres casillas (Mañana · Tarde · Noche) donde se suelta. No es el
   tablero de `.tablero` porque aquí las columnas no son estados sino horas del
   mismo día, y son muchos días uno debajo de otro.

   Lo vencido y «más adelante» se dibujan como filas sueltas con su fecha
   delante: no son días concretos, así que no se puede soltar nada en ellos. */
.asis-nuevo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta, #fff);
}
.asis-nuevo label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
/* Lo que se escribe manda sobre lo demás: crece y los campos de fecha, hora y
   tipo se quedan de su tamaño. */
.asis-nuevo label:first-child { flex: 1 1 260px; }
.asis-nuevo input, .asis-nuevo select { font-weight: 400; }

.asis-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.asis-dia {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta, #fff);
  overflow: hidden;
}
.asis-dia-hoy { border-color: var(--acento, #ff6600); }
.asis-dia-cabecera {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--fondo-suave, #fafafa);
  border-bottom: 1px solid var(--borde);
}
.asis-dia-cabecera h2 { margin: 0; font-size: 15px; text-transform: capitalize; }
.asis-dia-vencidos .asis-dia-cabecera { background: var(--peligro-suave); }

/* Las tres casillas del día. En el celular quedan una debajo de otra. */
.asis-franjas { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .asis-franjas { grid-template-columns: 1fr; }
}
.asis-franja {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px;
  min-height: 62px;
  border-right: 1px solid var(--borde);
}
.asis-franja:last-child { border-right: 0; }
.asis-franja-nombre {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); font-weight: 700;
}
/* Donde caería el aviso: arrastre.js mete un `.arrastre-hueco` de la altura de
   la fila dentro de la casilla, igual que en los tableros. Aquí se le da el
   mismo radio que una fila para que se lea como "va a entrar aquí". */
.asis-franja .arrastre-hueco { border-radius: var(--radio-sm); }

.asis-fila {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--tarjeta, #fff);
  cursor: grab;
}
.asis-fila:hover { border-color: var(--primario); }
.asis-hora { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; }
.asis-que { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.asis-que strong { font-size: 13px; font-weight: 600; }
.asis-que small { color: var(--texto-suave); font-size: 12.5px; }
.asis-motivo { color: var(--aviso-texto); }
.asis-acciones { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Lo apagado: se ve, pero se ve que no suena. Atenuado y sin tachar el texto
   entero, que a 14px se vuelve ilegible. */
.asistente-apagado .asis-que strong { color: var(--texto-suave); font-weight: 500; }

.asis-sueltos { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.asis-fila-fecha { display: flex; align-items: center; gap: 8px; }
.asis-fila-fecha .asis-fila { flex: 1; cursor: default; }
.asis-dia-chico {
  flex: none; width: 46px;
  font-size: 12px; font-weight: 700; color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* ===================================================================
   Pantalla del Agente de asistencia, segun la captura del dueno (2026-10-03).
   Va despues de las reglas de arriba y gana por orden. Colores solo por
   variables: el rojo y el naranja de las dos secciones de arriba son
   --peligro-suave/--peligro y --acento-suave/--acento, no valores sueltos. */

/* Cabecera: titulo grande y negrita, subtitulo gris, botones blancos con borde. */
.cabecera-agente { align-items: center; margin-bottom: 18px; }
.cabecera-agente h1 { font-size: 1.75rem; font-weight: 700; margin: 0; }
.cabecera-agente .ayuda { font-size: .9375rem; color: var(--texto); font-weight: 400; }
.cabecera-agente .boton-secundario {
  background: var(--papel); border: 1px solid var(--borde-input); border-radius: var(--radio);
  color: var(--titulo); font-size: 13px; font-weight: 500; padding: 9px 14px; box-shadow: var(--sombra-sm);
}
.cabecera-agente .boton-secundario:hover { background: var(--hover); }

/* Formulario de arriba: tarjeta blanca, etiquetas sobre cada campo. */
.asis-nuevo {
  padding: 18px 20px; gap: 14px; align-items: flex-end;
  border-radius: var(--radio-lg); box-shadow: var(--sombra); border-color: var(--borde);
}
.asis-nuevo label { font-size: .8125rem; font-weight: 600; color: var(--titulo); gap: 6px; }
.asis-nuevo input, .asis-nuevo select {
  height: 42px; padding: 0 12px; font-size: .9375rem; color: var(--titulo);
  border: 1px solid var(--borde-input); border-radius: var(--radio); background: var(--papel);
}
.asis-nuevo button {
  height: 42px; padding: 0 22px; font-size: .9375rem; font-weight: 600;
  background: var(--primario); color: #fff; border: 0; border-radius: var(--radio);
}
.asis-nuevo button:hover { background: var(--primario-hover); }

/* Aviso azul de arriba de la lista, con su icono. */
.asis-info {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 18px; padding: 12px 16px;
  background: var(--info-suave); border: 1px solid #cfe0fb; border-radius: var(--radio);
  color: var(--info-texto); font-size: 13px; line-height: 1.5;
}
.asis-info i { font-size: 1.25rem; margin-top: 1px; }
.asis-info p { margin: 0; }
.asis-info strong { color: var(--info-texto); }

/* Cada dia es una tarjeta con la cabecera plegable. */
.asis-lista { gap: 12px; margin-bottom: 24px; }
.asis-dia { border-radius: var(--radio-lg); box-shadow: var(--sombra); border-color: var(--borde); background: var(--papel); }
.asis-dia > summary { list-style: none; cursor: pointer; }
.asis-dia > summary::-webkit-details-marker { display: none; }
.asis-dia-cabecera {
  padding: 14px 18px; gap: 12px; background: var(--papel); border-bottom: 0;
  transition: background .15s ease;
}
.asis-dia-cabecera:hover { background: var(--hover); }
.asis-dia[open] > .asis-dia-cabecera { border-bottom: 1px solid var(--borde); }
.asis-dia-cabecera h2 { font-size: 1.1875rem; font-weight: 700; color: var(--titulo); text-transform: capitalize; }
.asis-fecha { font-size: 1rem; color: var(--texto); font-variant-numeric: tabular-nums; }
.asis-flecha, .asis-flecha-der { font-size: 1.375rem; color: var(--titulo); transition: transform .15s ease; }
.asis-flecha { order: -1; }
.asis-flecha-der { margin-left: auto; }
.asis-dia[open] > .asis-dia-cabecera .asis-flecha { transform: rotate(90deg); }
.asis-dia[open] > .asis-dia-cabecera .asis-flecha-der { transform: rotate(180deg); }
.asis-cabecera-nota { font-size: 13px; color: var(--texto); }
.asis-dia-cabecera .programar-contador {
  background: var(--info-suave); color: var(--info-texto); font-weight: 600;
  min-width: 26px; height: 26px; border-radius: 13px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}

/* Vencidos: rosa. Hoy: durazno con el naranja de acento. */
.asis-dia-vencidos { background: var(--peligro-suave); border-color: var(--peligro-borde); }
.asis-dia-vencidos > .asis-dia-cabecera { background: var(--peligro-suave); }
.asis-dia-vencidos > .asis-dia-cabecera:hover { background: #fdd5d5; }
.asis-dia-vencidos > .asis-dia-cabecera h2 { color: var(--peligro); }
.asis-dia-vencidos > .asis-dia-cabecera .asis-flecha,
.asis-dia-vencidos > .asis-dia-cabecera .asis-flecha-der { color: var(--peligro); }
.asis-dia-vencidos .asis-cabecera-nota { color: var(--peligro); }
.asis-dia-vencidos .programar-contador { background: #fff; color: var(--peligro); }
.asis-dia-vencidos[open] > .asis-dia-cabecera { border-bottom-color: var(--peligro-borde); }
.asis-dia-hoy { border-color: #fed7b3; background: var(--acento-suave); }
.asis-dia-hoy > .asis-dia-cabecera { background: var(--acento-suave); }
.asis-dia-hoy > .asis-dia-cabecera:hover { background: #ffe3cc; }
.asis-dia-hoy > .asis-dia-cabecera h2,
.asis-dia-hoy > .asis-dia-cabecera .asis-fecha { color: var(--acento); }
.asis-dia-hoy > .asis-dia-cabecera .asis-flecha,
.asis-dia-hoy > .asis-dia-cabecera .asis-flecha-der { color: var(--acento); }
.asis-dia-hoy .programar-contador { background: #fff; color: var(--acento); }
.asis-dia-hoy[open] > .asis-dia-cabecera { border-bottom-color: #fed7b3; }

/* Las casillas y las filas: texto mas grande, sin la cara de tabla. */
.asis-franjas { background: var(--papel); }
.asis-franja { padding: 12px; min-height: 74px; }
.asis-franja-nombre { font-size: .75rem; letter-spacing: .6px; color: var(--texto); }
.asis-fila { border-radius: var(--radio); padding: 10px 12px; border-color: var(--borde); }
.asis-hora { font-size: 13px; color: var(--titulo); }
.asis-que strong { font-size: .9375rem; color: var(--titulo); font-weight: 600; }
.asis-que small { font-size: .8125rem; color: var(--texto); }
.asis-sueltos { background: var(--papel); padding: 12px; }
.asis-dia-chico { font-size: .8125rem; color: var(--texto); width: 52px; }

/* El bloque de abajo: tarjeta propia con icono y tabla de encabezado en mayusculas. */
.asis-historial {
  margin-top: 26px; padding: 20px 22px;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-lg); box-shadow: var(--sombra);
}
.asis-historial-cabecera { display: flex; align-items: center; gap: 10px; }
.asis-historial-cabecera i { font-size: 1.5rem; color: var(--titulo); }
.asis-historial-cabecera h2 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--titulo); }
.asis-historial-texto { font-size: 13px; color: var(--texto); line-height: 1.55; margin: 8px 0 14px; }
.asis-historial-texto strong { color: var(--titulo); }
.asis-historial-tabla { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
.asis-historial .tabla { margin: 0; }
.asis-historial .tabla thead th {
  background: var(--papel); font-size: .75rem; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--texto); padding: 12px 14px; border-bottom: 1px solid var(--borde);
}
.asis-historial .tabla td { padding: 12px 14px; font-size: 13px; color: var(--titulo); border-bottom: 1px solid var(--borde); }
.asis-historial .tabla td.ayuda { color: var(--texto); }
.asis-celda-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .cabecera-agente h1 { font-size: 1.4rem; }
  .asis-nuevo { padding: 14px; }
  .asis-historial { padding: 16px; }
}

/* ===================================================================
   Asistente paso a paso para crear una oferta (P230)
   El dueno lo pidio "en forma de popup que ocupa casi toda la pantalla".
   Es una pagina propia vestida de popup: asi se puede entrar por un enlace,
   recargar sin perder la direccion y volver con el boton del navegador.
   =================================================================== */
.asistente-telon {
  position: fixed; inset: 0; z-index: 8500; overflow-y: auto;
  background: rgba(31, 41, 55, .55);
  padding: 24px 16px;
  display: flex; align-items: flex-start; justify-content: center;
}
.asistente-caja {
  background: #fff; border-radius: 12px; box-shadow: var(--sombra);
  width: min(840px, 100%); padding: 24px 28px 20px; position: relative;
}
.asistente-caja-angosta { width: min(620px, 100%); text-align: center; }
.asistente-cabecera { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.asistente-cabecera h1 { margin: 0; flex: 1; font-size: 22px; }
.asistente-salir { font-size: 26px; line-height: 1; color: var(--texto-suave); text-decoration: none; }
.asistente-salir:hover { color: var(--texto); }
.asistente-progreso { display: flex; align-items: center; gap: 6px; }
.asistente-punto { width: 24px; height: 4px; border-radius: 2px; background: var(--borde); }
.asistente-punto.activo { background: var(--acento); }
.asistente-progreso .ayuda { margin-left: 6px; }

.asistente-paso { display: flex; flex-direction: column; gap: 14px; }
.asistente-paso[hidden] { display: none; }
.asistente-paso h2 { margin: 0 0 2px; font-size: 18px; }
.asistente-paso > label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto); }
.asistente-paso input[type="text"], .asistente-paso input[type="search"],
.asistente-paso input[type="number"], .asistente-paso select, .asistente-paso textarea {
  font: inherit; padding: .543rem .875rem; border: 1px solid var(--borde-input); border-radius: var(--radio);
}
.asistente-paso [hidden] { display: none; }

/* Una opcion grande y clickeable entera: es mas facil de acertar que un
   radio suelto, y en estas pantallas cada paso tiene dos o tres. */
.opcion-tarjeta {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; cursor: pointer;
}
.opcion-tarjeta:hover { border-color: var(--acento); }
.opcion-tarjeta:has(input:checked) { border-color: var(--acento); background: var(--primario-suave); }
.opcion-tarjeta span { display: flex; flex-direction: column; gap: 3px; }
.opcion-tarjeta small { color: var(--texto-suave); }

.asesor-elegir-lista {
  max-height: 260px; overflow-y: auto; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 6px 10px; background: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.asesor-elegir-fila { display: flex; gap: 8px; align-items: center; padding: 4px 2px; cursor: pointer; }
.asesor-elegir-fila[hidden] { display: none; }

.asistente-pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--borde); }
.asistente-pie [hidden] { display: none; }

.asistente-tilde { font-size: 42px; color: var(--exito, #16a34a); margin: 4px 0 0; }
.asistente-resumen { list-style: none; padding: 0; margin: 18px 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.asistente-resumen li { border-bottom: 1px solid var(--borde); padding-bottom: 8px; font-size: 13px; }
.asistente-resumen li:last-child { border-bottom: 0; }
.asistente-recomendacion { border: 1px dashed var(--acento); border-radius: var(--radio); padding: 16px; margin-top: 10px; text-align: left; }
.asistente-recomendacion h2 { margin: 0 0 6px; font-size: 16px; }
.asistente-pie-enlaces { margin-top: 16px; font-size: 13px; }

/* Dos campos lado a lado dentro de un paso del asistente (P231: las fechas de
   la campana). En celular caen uno debajo del otro. */
.asistente-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.asistente-dos label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto); }
.asistente-dos input[type="datetime-local"] {
  font: inherit; padding: .543rem .875rem; border: 1px solid var(--borde-input); border-radius: var(--radio);
}
@media (max-width: 620px) { .asistente-dos { grid-template-columns: 1fr; } }

/* La campana en la pantalla de la oferta y en la de «listo». */
.campana-pastilla {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; border-radius: 20px; padding: 3px 11px;
  background: var(--primario-suave); color: var(--primario);
}
.campana-terminada { background: var(--borde); color: var(--texto-suave); }

/* ---------------------------------------------------------------------------
   TEMA 2026-10-03 (pedido del dueno con siete capturas de referencia: menu
   azul marino, tarjetas blancas, botones navy y gris, columnas de color en
   los tableros). Va AL FINAL a proposito: gana a las reglas de arriba con la
   misma especificidad. Los colores y formas salen de :root; aqui solo estan
   las piezas que cambian de forma. La letra pasa de Nunito a Inter (la de las
   capturas). Si algo de aqui parece roto en una pantalla vieja, lo primero
   es mirar si esa pantalla usa un color suelto en vez de una variable.
   --------------------------------------------------------------------------- */

body {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  background: var(--fondo);
}

h1 { font-size: 1.625rem; font-weight: 700; letter-spacing: -.01em; color: var(--titulo); }
h2 { font-size: 1.125rem; font-weight: 600; color: var(--titulo); }
h3 { font-size: .9375rem; font-weight: 600; color: var(--titulo); }

/* --- Menu lateral: azul marino, secciones en mayusculas pequenas ---------- */
.sidebar { background: var(--menu-fondo); box-shadow: none; }
.sidebar-cabecera { height: 4.25rem; margin-top: 0; padding: 0 1.25rem; }
.sidebar-logo-completo { height: 34px; }
.sidebar-plegar { left: 12.9rem; border-color: var(--fondo); }
.menu-plegado .sidebar-plegar { left: calc(var(--ancho-menu-plegado) - 1.05rem); }
.sidebar-seccion {
  margin: .875rem 0 .25rem;
  padding: .75rem 1.25rem .375rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--menu-seccion);
}
.sidebar-seccion::before { display: none; }
.sidebar-link {
  min-height: 2.375rem;
  margin: 1px .75rem;
  padding: .4375rem .75rem;
  border-radius: .5rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--menu-texto);
}
.sidebar-link i { width: 1.25rem; margin-right: .75rem; font-size: 1.1875rem; }
.sidebar-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar-link-activo, .sidebar-link-activo:hover {
  background: rgba(255, 255, 255, .11);
  color: #fff;
  font-weight: 600;
}
/* La rayita de la opcion activa: naranja, como el logo. */
.sidebar-link-activo::after {
  right: -.75rem;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--acento);
}
.menu-plegado .sidebar-link { padding-left: 0; padding-right: 0; }
.menu-plegado .sidebar-seccion { height: auto; padding-left: 0; padding-right: 0; text-align: center; }
.menu-plegado .sidebar-link i { margin-right: 0; }

/* --- Barra de arriba: tarjeta blanca flotante ------------------------------ */
.barra-superior {
  height: var(--alto-barra);
  margin-top: .875rem;
  padding: 0 1rem;
  border: 1px solid var(--borde);
  border-radius: .75rem;
  background: #fff;
  backdrop-filter: none;
  box-shadow: var(--sombra-sm);
}
.barra-buscar i { color: var(--texto-suave); font-size: 1.25rem; }
form.barra-buscar input { font-size: 13px; color: var(--titulo); }
.barra-buscar input::placeholder { color: var(--texto-suave); }
.medidor { color: var(--texto); font-size: .8125rem; }
.medidor:hover { background: var(--hover); }
.medidor-fila i { color: var(--texto); }
.medidor-barra { background: #e5eaf2; }
.medidor-relleno { background: var(--primario); }

/* --- Botones ----------------------------------------------------------------- */
.boton, :where(button[type="submit"]) {
  padding: .5625rem 1.125rem;
  border-radius: .625rem;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
.boton:hover, :where(button[type="submit"]):hover { box-shadow: 0 2px 6px rgba(17, 28, 46, .18); }
/* El boton gris claro de las capturas: "Ver calendario", "Configuracion",
   "Setup". Fondo azul grisaceo suave y letra oscura. */
.boton-secundario {
  padding: .5625rem 1rem;
  border-radius: .625rem;
  background: #e9eef6;
  border-color: #e9eef6;
  color: var(--titulo);
  font-size: 13px;
  font-weight: 600;
}
.boton-secundario:hover {
  background: #dce4f0;
  border-color: #dce4f0;
  color: var(--primario);
  box-shadow: none;
}
.boton-secundario.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.boton-peligro { border-radius: .625rem; font-weight: 600; }
.boton-mini { border-radius: .5rem; }

/* --- Tarjetas y tablas -------------------------------------------------------- */
.tabla {
  border: 1px solid var(--borde);
  border-radius: .75rem;
  box-shadow: var(--sombra-sm);
}
.tabla th, .tabla td { padding: .8125rem 1rem; }
.tabla th {
  padding-top: .8125rem;
  padding-bottom: .8125rem;
  background: #f8fafc;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--texto);
}
.tabla > tbody > tr:hover > td { background: #fafbfd; }

/* Pestanas de la ficha: la activa en navy lleno, como "Embudo principal". */
.tab-ficha { border-radius: .5rem; padding: .5rem 1rem; font-weight: 600; color: var(--texto); }
.tab-ficha-activo, .tab-ficha-activo:hover {
  background: var(--primario);
  color: #fff;
  box-shadow: none;
}
.tab-cuenta { background: #e9eef6; color: var(--titulo); font-weight: 600; }
.tab-ficha-activo .tab-cuenta { background: rgba(255, 255, 255, .2); color: #fff; }

/* Etiquetas en pastilla redonda, como "vence hace 35 d" y "Activo". */
.etiqueta-estado,
.etiqueta-al-dia, .etiqueta-vencido, .etiqueta-pagado, .etiqueta-por-cobrar {
  padding: .3125rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}
.insignia { font-weight: 600; font-size: .6875rem; }

/* Circulos de inicial: letra en negrita, como en Clientes. */
.avatar { font-weight: 600; }

/* --- Tableros (cobranza, ventas): cada columna lleva su color ---------------
   La seccion de la columna trae `--col` (plantillas tablero.html y
   ventas.html). Con eso el encabezado se tine de ese color, la tarjeta lleva
   su franja de la izquierda y el titulo se lee como en las capturas. */
.tablero-columna { --col: #94a3b8; }
.tablero-barra { height: 3px; border-radius: 3px 3px 0 0; margin: 0; }
.tablero-cabecera {
  margin-bottom: .625rem;
  padding: .75rem .875rem .8125rem;
  border: 1px solid color-mix(in srgb, var(--col) 22%, #fff);
  border-radius: .75rem;
  background: color-mix(in srgb, var(--col) 13%, #fff);
}
.tablero-titulo { font-size: .9375rem; font-weight: 600; color: var(--titulo); }
.tablero-cuenta { font-size: .75rem; color: var(--texto); }
.tablero-lista { gap: .75rem; }
.tarjeta {
  border: 1px solid var(--borde);
  border-left: 4px solid var(--col);
  border-radius: .75rem;
  box-shadow: var(--sombra-sm);
  padding: .875rem 1rem;
}
/* El estado sigue marcado: vencida (ambar) y promesa rota (rojo) cambian la
   franja, para no perder la senal al pintar la columna de color. */
.tarjeta-vencida { border-left-color: var(--aviso); }
.tarjeta-alerta { border-left-color: var(--peligro); }

/* Documentos del chat (P250, popup ampliado el 2026-10-06). Colores y medidas: variables de :root. */
.dialogo-documentos { width: min(760px, 94vw); max-height: 88vh; border: 0; border-radius: 14px; padding: 0; box-shadow: var(--sombra); background: #fff; color: var(--texto); }
.dialogo-documentos::backdrop { background: rgba(15, 23, 42, 0.45); }
.docs-cuerpo { padding: 18px 20px; overflow-y: auto; max-height: 88vh; }
.docs-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.docs-cabecera .docs-cerrar { margin-left: auto; font-size: 20px; line-height: 1; padding: 2px 10px; }
.docs-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.docs-filtros select, .docs-filtros input { font: inherit; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 8px; }
.docs-filtros .docs-fecha { display: flex; flex-direction: column; font-size: 12px; }
.docs-lista { list-style: none; padding: 0; margin: 8px 0; }
.docs-fila { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.docs-icono { font-size: 24px; color: var(--acento); margin-top: 2px; }
.docs-datos { flex: 1; min-width: 0; }
.docs-nombre { font-weight: 600; word-break: break-word; }
.docs-acciones { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.docs-acciones .boton-secundario { text-decoration: none; white-space: nowrap; }
.docs-reenvio { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.docs-reenvio select { font: inherit; padding: 5px 8px; border: 1px solid var(--borde); border-radius: 8px; min-width: 200px; }
.docs-paginas { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; }
@media (max-width: 600px) { .docs-fila { flex-wrap: wrap; } .docs-acciones { flex-direction: row; width: 100%; } }

/* Conversacion copiada de un ticket de WhatsApp (P252): la misma burbuja del chat, con
   el dia en una pastilla y el nombre de quien escribio, en gris, encima del mensaje. */
.conv-ticket { border-radius: 12px; max-height: 72vh; }
.conv-dia { display: flex; justify-content: center; margin: 10px 0; list-style: none; }
.conv-dia span { background: var(--papel); border-radius: var(--radio-sm); padding: 2px 10px;
  font-size: 12px; color: var(--texto-suave); box-shadow: var(--sombra-xs); }
.conv-autor { display: block; font-size: 12px; font-weight: 600; color: var(--texto-suave); margin-bottom: 2px; }

/* Elegir la voz del celular del Agente de asistencia (P265). */
.voz-opcion { flex-wrap: wrap; }
.voz-opcion .voz-escuchar { margin-left: auto; white-space: nowrap; }

/* Autoridad, testimonios y urgencia de una oferta (P273). Pedido del dueno:
   minimalista. Cada bloque muestra lo que tiene datos y una fila vacia. */
.prueba-check { display: flex !important; flex-direction: row !important; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.prueba-check input { margin-top: 2px; }
.prueba-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.boton-enlace { background: none; border: 0; padding: 4px 0; color: var(--primario); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; align-self: flex-start; }
.prueba-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.prueba-logo { border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.prueba-logo img { height: 48px; object-fit: contain; }
.prueba-logo input[type="text"] { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--borde-input); border-radius: var(--radio); }
.prueba-quitar { font-size: 12px; color: var(--texto-suave); display: flex; gap: 4px; align-items: center; }
.prueba-tarjeta { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.prueba-tarjeta[hidden], .prueba-urgencia[hidden] { display: none; }
.prueba-tarjeta textarea, .prueba-urgencia textarea { width: 100%; box-sizing: border-box; }
.prueba-tarjeta-cabeza { display: flex; justify-content: space-between; gap: 8px; min-height: 0; }
.prueba-tarjeta-cabeza:empty { display: none; }
.prueba-sesgo { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.prueba-falta { font-size: 12px; color: #b45309; }
.prueba-ok { font-size: 12px; color: var(--exito, #16a34a); }
.prueba-foto { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.prueba-foto img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.prueba-foto label { display: flex; flex-direction: column; gap: 4px; }
.prueba-urgencia span { flex: 1; }
.prueba-separador { border: 0; border-top: 1px solid var(--borde); margin: 22px 0; }

/* La pagina de venta de una oferta (P273), del lado del administrador. */
.pagina-faltan { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.pagina-faltan .ok { color: var(--exito, #16a34a); }
.pagina-faltan .falta { color: var(--texto); }
.pagina-estado { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pagina-url { flex: 1; min-width: 220px; font: inherit; font-size: 12px; padding: 6px 10px; border: 1px solid var(--borde-input); border-radius: var(--radio); }
.pagina-previa { width: 100%; height: 70vh; border: 1px solid var(--borde); border-radius: var(--radio); margin: 8px 0 14px; background: #fff; }
.pagina-ajustes { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; margin-bottom: 10px; }
.pagina-ajustes summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.pagina-ajustes form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pagina-ajustes label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pagina-ajustes input[type="text"], .pagina-ajustes textarea { font: inherit; padding: .543rem .875rem; border: 1px solid var(--borde-input); border-radius: var(--radio); }
.pagina-titulares, .pagina-faltan-ia { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.pagina-faltan-ia { background: var(--primario-suave); }
.pagina-faltan-ia ul { margin: 0; padding-left: 18px; }

/* La pantalla de una oferta en dos paneles (P274, asesor_oferta.html): a la
   izquierda la oferta pieza por pieza (3/4), a la derecha sus ajustes (1/4).
   En pantallas angostas los ajustes van primero y todo en una columna. */
.oferta-columnas {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1080px) {
  .oferta-columnas { grid-template-columns: 1fr; }
  .oferta-lateral { order: -1; }
}
.oferta-principal > h2 { font-size: 15px; font-weight: 600; color: var(--titulo); margin: 22px 0 10px; }
.oferta-principal > h2:first-of-type { margin-top: 4px; }
.oferta-principal .tarjetas-config { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 4px; }
.oferta-pieza-ancha { grid-column: 1 / -1; }
.oferta-pieza-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.oferta-sello {
  flex: none; font-size: 11.5px; font-weight: 600; line-height: 1.6;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}
.oferta-sello-ok { background: var(--exito-suave); color: var(--exito-texto); }
.oferta-sello-ia { background: var(--acento-suave); color: var(--acento); }
.oferta-pieza-texto {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden; white-space: pre-line;
}
.oferta-pieza-propuesta { font-style: italic; color: var(--texto-suave); }
.oferta-barra-ia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px; margin: 0 0 8px;
  border: 1px solid var(--borde); border-radius: var(--radio-lg);
  background: var(--papel); box-shadow: var(--sombra);
}
.oferta-barra-ia p { margin: 0; flex: 1 1 300px; }
.oferta-barra-ia form { margin: 0; }
.oferta-sin-cortar { white-space: nowrap; }
.oferta-barra-pendientes { background: var(--acento-suave); border-color: transparent; box-shadow: none; }
.oferta-barra-pendientes > p > i { color: var(--acento); }
.oferta-barra-trabajando { background: var(--info-suave); border-color: transparent; box-shadow: none; color: var(--info-texto); }
.oferta-nota-ia {
  margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radio-sm);
  background: var(--acento-suave); font-size: 13px;
}
.oferta-nota-ia i { color: var(--acento); }
.oferta-pieza-form textarea { width: 100%; }
.oferta-pieza-ia { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.oferta-prueba-popup > h2 { display: none; }

.oferta-lateral { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.oferta-panel {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio-lg); box-shadow: var(--sombra); padding: 16px;
}
.oferta-panel > h2 {
  margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-suave);
}
.oferta-panel form { margin: 0; }
.oferta-panel label { display: block; font-size: 13px; font-weight: 600; color: var(--titulo); margin: 0 0 10px; }
.oferta-panel label .ayuda { font-weight: 400; }
.oferta-panel input, .oferta-panel select {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  font: inherit; font-weight: 400; padding: .45rem .7rem;
  border: 1px solid var(--borde-input); border-radius: var(--radio);
}
.oferta-panel hr { border: 0; border-top: 1px solid var(--borde); margin: 14px 0; }
.oferta-estado-caja { display: block; position: relative; }
.oferta-estado-caja select { padding-left: 1.8rem; }
.oferta-estado-caja::before {
  content: ""; position: absolute; left: .7rem; top: calc(50% + 2px); transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--secundario);
}
.oferta-estado-activa::before { background: var(--exito); }
.oferta-estado-pausada::before { background: var(--aviso); }
.oferta-campana-estado { margin: 0 0 10px; }
.oferta-acciones { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
button.oferta-fila {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; margin: 0; text-align: left; cursor: pointer;
  font: inherit; font-weight: 400; color: var(--texto);
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: none; transition: background .15s, border-color .15s;
}
button.oferta-fila:hover { background: var(--hover); border-color: var(--primario-borde); color: var(--texto); box-shadow: none; }
.oferta-fila-icono {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  background: var(--primario-suave); color: var(--primario);
}
.oferta-fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oferta-fila-texto strong { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--titulo); }
.oferta-fila-texto small {
  font-size: 12px; line-height: 1.35; color: var(--texto-suave);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.oferta-fila-flecha { flex: none; font-size: 18px; color: var(--texto-suave); }
button.oferta-fila-alerta { border-color: var(--aviso-borde); }
.oferta-fila-alerta .oferta-fila-icono { background: var(--aviso-suave); color: var(--aviso-texto); }
.oferta-material { border-top: 1px solid var(--borde); padding-top: 12px; margin-top: 12px; }
.oferta-material h4 { margin: 0 0 6px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* «Lo que no tiene permiso» (P275): una fila por limite, con su valor y el
   boton que lleva a donde se cambia. */
.oferta-limites { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.oferta-limite {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--borde);
}
.oferta-limite:first-child { border-top: 0; }
.oferta-limite-icono {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; background: var(--peligro-suave); color: var(--peligro);
}
.oferta-limite-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oferta-limite-texto strong { font-size: 13px; font-weight: 600; color: var(--titulo); }
.oferta-limite-texto small { font-size: 12.5px; color: var(--texto-suave); line-height: 1.4; }
.oferta-limite > .boton-mini, .oferta-limite > .oferta-sello { flex: none; }
.oferta-sello-fija { background: var(--secundario-suave); color: var(--secundario); }

/* La memoria de cada cliente en una oferta (P277): ficha, chat y prospecto. */
.memoria-grilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.memoria-cliente { display: flex; flex-direction: column; gap: 6px; }
.memoria-cliente h3 { margin: 0; font-size: 15px; }
.memoria-cliente h4 { margin: 10px 0 2px; font-size: 13px; color: var(--titulo); }
.memoria-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.memoria-cabeza .ayuda { margin: 2px 0 0; }
.memoria-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.memoria-acciones form { margin: 0; }
.memoria-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.memoria-codigo {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px;
  background: var(--acento-suave); color: var(--acento); vertical-align: 1px;
}
.memoria-en-linea { display: inline; margin: 0 0 0 6px; }
.memoria-editar { margin-top: 8px; }
.memoria-editar > summary { list-style: none; cursor: pointer; display: inline-flex; }
.memoria-editar > summary::-webkit-details-marker { display: none; }
.memoria-editar[open] > summary { margin-bottom: 8px; }
.oferta-regalos-ayuda { margin-top: -4px; }
.oferta-descuento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oferta-descuento[hidden] { display: none; }
.oferta-descuento small { grid-column: 1 / -1; }