/* ==========================================================================
   LeadSync - Ventana de servicio de 24 h
   El contador de la ventana de Meta y el selector de plantillas.

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y
   ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos
   de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* --- Ventana de servicio de 24 h --- */
.window-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);

  /* fijada bajo la cabecera de la conversación */
}
.window-bar .window-ic {
  display: inline-flex;
  flex: 0 0 auto;
}
.window-bar .window-ic .ic {
  width: 17px;
  height: 17px;
}
.window-bar .window-msg {
  flex: 1;
  min-width: 0;
}
.window-bar .window-count { font-variant-numeric: tabular-nums; }

/* El tiempo restante, al final de la barra y después del (?) (punto 8 del 09-09). No se
   encoge: es el dato, y con la barra estrecha lo que debe ceder es el texto de la izquierda. */
.window-bar .window-restante {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Estados por color: verde (con tiempo) → amarillo (queda poco) → azul (cerrada). */
.window-bar.active {
  background: var(--accent-dim);
  color: var(--author-bot);
  border-bottom-color: var(--accent);
}
.window-bar.low {
  background: var(--warn-bg);
  color: var(--warn);
  border-bottom-color: var(--warn);
}
.window-bar.expired {
  background: var(--info-bg);
  color: var(--info);
  border-bottom-color: var(--info-border);
}

/* En la barra amarilla el conteo va en color de texto; en la azul "plantillas"
   hereda el azul de la barra (item 23) y queda en negrita por el <b>. */
.window-bar.low .window-msg b { color: var(--text); }

/* Botón "(?)" de ayuda de la ventana de 24 h. */
.window-help {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: .8;
  padding: 2px;
  border-radius: 6px;
  display: inline-flex;
}
.window-help:hover {
  opacity: 1;
  background: rgba(127, 127, 127, .15);
}
.window-help .ic {
  width: 17px;
  height: 17px;
}

.window-info p {
  margin: 0 0 10px;
  line-height: 1.5;
}
.window-info p:last-child { margin-bottom: 0; }
/* El icono que encabeza cada dato de la barra («Quedan…») y su sección en la modal: el
   mismo dibujo en los dos sitios, para que se asocien de un vistazo (06-10). */
.window-dato-ic {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 5px;
}
.window-dato-ic .ic {
  width: 15px;
  height: 15px;
}

/* Modal: una sección por dato. [icono] Título en negrita y el texto sangrado debajo, a la
   altura del título (icono 17 + hueco 8 = 25). */
.window-info-sec + .window-info-sec { margin-top: 18px; }
.window-info .window-info-tit {
  display: flex;
  align-items: center;
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--text);
}
.window-info-tit .window-dato-ic { margin-right: 8px; vertical-align: 0; }
.window-info-tit .window-dato-ic .ic { width: 17px; height: 17px; }
.window-info-txt { padding-left: 25px; }
.window-tmpl-btn {
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.window-tmpl-btn:hover { background: var(--accent-strong); }

/* Composer bloqueado (fuera de la ventana de 24 h). */
.composer.blocked .composer-pill {
  opacity: .55;
  cursor: not-allowed;
}
.composer.blocked .icon-btn,
.composer.blocked .send-btn {
  opacity: .5;
  cursor: not-allowed;
}

/* --- Selector de plantillas --- */
.tmpl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
}
.tmpl-loading,
.tmpl-empty {
  color: var(--text-dim);
  text-align: center;
  padding: 18px 8px;
  line-height: 1.5;
}
.tmpl-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.tmpl-card:hover:not(.disabled) { border-color: var(--accent); }
.tmpl-card.disabled {
  opacity: .6;
  cursor: not-allowed;
}
.tmpl-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tmpl-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tmpl-cat {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text-dim);
  flex: 0 0 auto;
}
.tmpl-body {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmpl-card-foot { font-size: 12px; }
.tmpl-vars {
  color: var(--warn);
  font-weight: 600;
}
.tmpl-vars.ok { color: var(--accent); }
.tmpl-note { color: var(--danger); }
.tmpl-preview {
  background: var(--chat-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 13.5px;
  color: var(--text);
}

/* item 17: en la modal "Enviar plantilla" solo scrollea la lista, no el cuerpo. */
.modal-card.tmpl-modal .modal-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.modal-card.tmpl-modal .tmpl-list {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

/* item 18: variables {{n}} editables dentro del propio texto de la plantilla. */
.tmpl-var-chip {
  display: inline;
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 4px;
  padding: 0 4px;
  outline: none;
  cursor: text;
  box-shadow: inset 0 0 0 1px var(--warn);
  white-space: pre-wrap;
}
.tmpl-var-chip:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--accent-dim);
  color: var(--text);
}
.tmpl-var-chip:empty::before {
  content: attr(data-ph);
  color: var(--warn);
  opacity: .7;
}
.tmpl-var-demo {
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 4px;
  padding: 0 4px;
  box-shadow: inset 0 0 0 1px var(--warn);
}

/* item 19: acordeón de plantillas no disponibles (cerrado por defecto). */
.tmpl-accordion {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 6px;
}
.tmpl-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;

  /* item 22 (nuevo): quitar el border por defecto del botón */
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  text-align: left;
}
.tmpl-acc-head:hover { color: var(--text); }
.tmpl-acc-ic {
  display: inline-flex;
  transition: transform .2s ease;
}
.tmpl-accordion.open .tmpl-acc-ic { transform: rotate(180deg); }

/* Transición suave al desplegar/plegar (item 22 nuevo). */
.tmpl-acc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  transition: max-height .28s ease, opacity .2s ease, padding-top .28s ease;
}
.tmpl-accordion.open .tmpl-acc-body {
  max-height: 1200px;
  opacity: 1;
  padding-top: 6px;
}

/* Elementos solo para móvil (ocultos en escritorio). */
.mobile-only { display: none; }

/* --- Sin saldo en Meta (item A33) ---
   Es el MISMO componente, no una barra nueva: el hueco sobre el composer ya existe para
   decir por que no se puede escribir, y meter ahi un segundo diseño seria tener dos
   avisos distintos en el mismo sitio.

   Rojo y no amarillo: la ventana cerrada tiene salida -una plantilla-, y esto no la tiene
   hasta que alguien pague. Si los dos avisos se vieran igual, el que importa se perderia
   entre los que no.

   El fondo se construye con color-mix sobre --danger y no con un token propio porque no
   hace falta uno: --danger ya cambia solo entre claro y oscuro, y el mezclado hereda ese
   cambio sin que haya que declararlo dos veces. */
.window-bar.sin-saldo {
  background: color-mix(in srgb, var(--danger) 13%, transparent);
  color: var(--danger);
  border-bottom-color: var(--danger);
}
.window-bar.sin-saldo .window-msg b { color: var(--text); }

/* --- Tope diario de Meta (item B123) --- */
.window-cupo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 13px;
  white-space: nowrap;
  animation: windowCupoEntra 180ms ease-out;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.window-cupo[hidden] {
  display: none !important;
}
.window-cupo-sep {
  color: inherit;
  opacity: .5;
  margin: 0 1px;
}
.window-cupo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px;
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.window-cupo-val {
  font-variant-numeric: tabular-nums;
}
.window-cupo-compact {
  display: none;
}
.window-cupo.cupo-bajo .window-cupo-badge {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: var(--warn);
}
.window-cupo.cupo-agotado .window-cupo-badge {
  background: color-mix(in srgb, var(--danger) 13%, transparent);
  color: var(--danger);
  border-color: var(--danger);
  font-weight: 600;
}
@keyframes windowCupoEntra {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

.window-msg-corto { display: none; }

/* COLUMNA ESTRECHA: dos filas. Arriba el icono y el mensaje; abajo los datos y el botón,
   este a la derecha. Antes todo iba en una fila y el mensaje quedaba a una palabra por línea. */
@container chat (max-width: 620px) {
  .window-bar {
    padding: 6px 12px;
    gap: 6px 8px;
    font-size: 12px;
    flex-wrap: wrap;
  }
  .window-bar .window-msg {
    flex: 1 1 calc(100% - 30px);
  }
  .window-tmpl-btn {
    margin-left: auto;
  }
  .window-cupo-full {
    display: none;
  }
  .window-cupo-compact {
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .window-cupo-compact-ic .ic {
    width: 13px;
    height: 13px;
  }
  .window-tmpl-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* MUY ESTRECHA: el mensaje se acorta; el detalle sigue en el (i). */
@container chat (max-width: 380px) {
  .window-msg-full { display: none; }
  .window-msg-corto { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .window-cupo {
    animation: none;
    transition: none;
  }
  .window-cupo-badge {
    transition: none;
  }
}