/* Cambia Ya - chat.css · widget de Donna con el sistema de diseno v4 (coral). */

.cy-chat-container{
  background:var(--bg); border:1px solid var(--line); border-radius:24px; overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.4); display:flex; flex-direction:column;
  min-height:560px; max-height:78vh;
}
html.dark .cy-chat-container{ background:#17191C; border-color:#2D3035; box-shadow:0 40px 90px -38px rgba(0,0,0,.8),0 0 0 1px rgba(242,101,74,.16); }

.cy-chat-header{ display:flex; align-items:center; gap:13px; padding:16px 20px; border-bottom:1px solid var(--line-soft); }
html.dark .cy-chat-header{ border-bottom-color:#2A2D31; }
.cy-chat-header .cy-chat-av{ width:46px; height:46px; border-radius:14px; flex:none; position:relative; background:#FFF1EC; overflow:hidden; border:1px solid var(--line); }
.cy-chat-header .cy-chat-av img{ position:absolute; width:116%; left:-8%; top:-7%; max-width:none; }
.cy-chat-header .cy-chat-av .on{ position:absolute; right:-3px; bottom:-3px; width:13px; height:13px; border-radius:50%; background:var(--ok); border:2.5px solid var(--bg); }
.cy-chat-header-name{ font-weight:600; font-size:16px; }
.cy-chat-header-role{ font-size:12.5px; color:var(--ink-2); }

.cy-chat-messages{ flex:1; overflow-y:auto; padding:20px; background:var(--bg-soft); display:flex; flex-direction:column; gap:12px; }

.cy-chat-bubble-assistant,.cy-chat-bubble-user{ max-width:86%; padding:12px 16px; border-radius:18px; font-size:15px; line-height:1.5; }
.cy-chat-bubble-assistant{ background:var(--bg); border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start; }
html.dark .cy-chat-bubble-assistant{ background:#202327; border-color:#34383D; }
.cy-chat-bubble-user{ background:var(--accent); color:#fff; border-bottom-right-radius:5px; align-self:flex-end; }
.cy-chat-bubble-assistant a{ color:var(--accent-ink); font-weight:600; }
.cy-chat-typing{ align-self:flex-start; font-size:13px; color:var(--ink-3); padding:4px 6px; }

/* tarjetas de oferta dentro del chat */
.cy-chat-offers{ align-self:stretch; display:flex; flex-direction:column; gap:10px; }
.cy-chat-offer-card{ background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:16px; position:relative; }
html.dark .cy-chat-offer-card{ background:#202327; border-color:#34383D; }
.cy-chat-offer-card.best{ border-color:var(--accent); }
.cy-chat-offer-card.chosen{ opacity:.55; }
.cy-chat-offer-card .oc-best{ position:absolute; top:-9px; left:14px; background:var(--accent); color:#fff; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; }
.cy-chat-offer-card .oc-logo{ font-family:'Poppins',var(--sans); font-weight:600; font-size:17px; letter-spacing:-.01em; }
.cy-chat-offer-card .oc-logo-img{ height:25px; width:auto; max-width:60%; display:block; object-fit:contain; object-position:left center; }
html.dark .cy-chat-offer-card .oc-logo-img{ filter:invert(1) brightness(1.08); }
.cy-chat-offer-card .oc-plan{ font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.cy-chat-offer-card .oc-price{ font-weight:600; font-size:24px; letter-spacing:-.02em; margin-top:8px; }
.cy-chat-offer-card .oc-price small{ font-size:13px; color:var(--ink-2); font-weight:400; }
.cy-chat-offer-card .oc-save{ display:inline-block; margin-top:8px; font-weight:600; font-size:14px; color:var(--accent); background:var(--accent-soft); padding:5px 11px; border-radius:999px; }
.cy-chat-offer-card .oc-cta{ display:block; width:100%; margin-top:12px; padding:11px; border:none; border-radius:12px; background:var(--accent); color:#fff; font-family:var(--sans); font-weight:600; font-size:15px; cursor:pointer; transition:background .2s; }
.cy-chat-offer-card .oc-cta:hover{ background:var(--accent-ink); }
.cy-chat-offer-card .oc-cta:disabled{ opacity:.5; cursor:default; }

/* formulario de datos del lead */
.cy-chat-leadform{ align-self:stretch; background:var(--bg); border:1px solid var(--accent); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:10px; }
html.dark .cy-chat-leadform{ background:#202327; }
.cy-chat-leadform .lf-title{ font-weight:600; font-size:15px; }
.cy-chat-leadform .lf-note{ font-size:12.5px; color:var(--ink-2); margin-bottom:4px; }
.cy-chat-leadform input{ border:1.5px solid var(--line); border-radius:11px; padding:12px 14px; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--bg); }
html.dark .cy-chat-leadform input{ background:#17191C; border-color:#34383D; }
.cy-chat-leadform input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.cy-chat-leadform .lf-send{ margin-top:2px; padding:13px; border:none; border-radius:12px; background:var(--accent); color:#fff; font-family:var(--sans); font-weight:600; font-size:15px; cursor:pointer; }
.cy-chat-leadform .lf-send:hover{ background:var(--accent-ink); }
.cy-chat-leadform .lf-send:disabled{ opacity:.5; cursor:default; }
.cy-chat-leadform .lf-err{ font-size:12.5px; color:#DC2626; min-height:14px; }

/* confirmacion del lead */
.cy-chat-confirm{ align-self:stretch; display:flex; gap:12px; align-items:flex-start; background:var(--ok-soft); border:1px solid var(--ok); border-radius:16px; padding:16px; }
.cy-chat-confirm .cf-ico{ width:28px; height:28px; border-radius:50%; background:var(--ok); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.cy-chat-confirm .cf-txt{ font-size:14.5px; line-height:1.5; }
.cy-chat-confirm a{ color:var(--accent-ink); font-weight:600; }

/* input row */
.cy-chat-input-row{ display:flex; gap:10px; align-items:center; padding:14px 16px; border-top:1px solid var(--line-soft); background:var(--bg); }
html.dark .cy-chat-input-row{ border-top-color:#2A2D31; background:#17191C; }
.cy-chat-input{ flex:1; border:1.5px solid var(--line); border-radius:14px; padding:12px 16px; font-family:var(--sans); font-size:15.5px; color:var(--ink); background:var(--bg-soft); }
html.dark .cy-chat-input{ background:#202327; border-color:#34383D; }
.cy-chat-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.cy-chat-send-btn{ padding:0 20px; height:46px; border:none; border-radius:13px; background:var(--accent); color:#fff; font-family:var(--sans); font-weight:600; font-size:15px; cursor:pointer; flex:none; transition:background .2s; }
.cy-chat-send-btn:hover{ background:var(--accent-ink); }
.cy-chat-send-btn:disabled{ opacity:.5; cursor:default; }

.cy-chat-escape{ padding:10px 16px 14px; font-size:13px; color:var(--ink-3); text-align:center; }
.cy-chat-escape a{ color:var(--accent-ink); font-weight:500; }
.cy-chat-file-input{ font-size:13px; }

/* ===== v2 demo fibra: tarjeta enriquecida + formulario 2 modos + cuenta ===== */
.cy-chat-offer-card{ display:flex; flex-direction:column; gap:10px; }
.cy-chat-offer-card .oc-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cy-chat-offer-card .oc-plan{ font-size:12.5px; color:var(--ink-2); margin-top:0; }
.cy-chat-offer-card .oc-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cy-chat-offer-card .oc-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; color:var(--ink-2); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:4px 9px; }
html.dark .cy-chat-offer-card .oc-chip{ background:#17191C; border-color:#34383D; }
.cy-chat-offer-card .oc-chip svg{ width:12px; height:12px; stroke:var(--ok); stroke-width:2.6; fill:none; flex:none; }
.cy-chat-offer-card .oc-priceRow{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:2px; }
.cy-chat-offer-card .oc-price{ font-weight:600; font-size:24px; letter-spacing:-.02em; margin-top:0; }
.cy-chat-offer-card .oc-save{ display:inline-block; font-weight:600; font-size:13px; color:var(--accent); background:var(--accent-soft); padding:5px 11px; border-radius:999px; margin-top:0; white-space:nowrap; }

.cy-chat-leadform .lf-modes{ display:flex; gap:8px; }
.cy-chat-leadform .lf-mode{ flex:1; text-align:left; border:1.5px solid var(--line); background:var(--bg); border-radius:12px; padding:10px 12px; cursor:pointer; font-family:var(--sans); transition:.18s; }
html.dark .cy-chat-leadform .lf-mode{ background:#17191C; border-color:#34383D; }
.cy-chat-leadform .lf-mode b{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.cy-chat-leadform .lf-mode span{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:1px; }
.cy-chat-leadform .lf-mode.active{ border-color:var(--accent); background:var(--accent-soft); }
.cy-chat-leadform .lf-mode.active b{ color:var(--accent-ink); }
.cy-chat-leadform .lf-note{ display:flex; align-items:flex-start; gap:7px; }
.cy-chat-leadform .lf-note svg{ width:14px; height:14px; stroke:var(--accent); stroke-width:2; fill:none; flex:none; margin-top:2px; }
.cy-chat-leadform .lf-online{ display:flex; flex-direction:column; gap:10px; }
.cy-chat-leadform .lf-online[hidden]{ display:none; }

.cy-chat-confirm .cf-ico{ display:flex; align-items:center; justify-content:center; }
.cy-chat-confirm .cf-ico svg{ width:15px; height:15px; stroke:#fff; stroke-width:3; fill:none; }
.cy-chat-confirm .cf-acct{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:10px 16px; border-radius:12px; background:var(--accent); color:#fff !important; font-weight:600; font-size:14px; text-decoration:none; }
.cy-chat-confirm .cf-acct:hover{ background:var(--accent-ink); }
.cy-chat-confirm .cf-acct svg{ width:15px; height:15px; stroke:#fff; stroke-width:2; fill:none; }

/* boton reiniciar chat (demo) */
.cy-chat-reset{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500; color:var(--ink-2); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; font-family:var(--sans); transition:.18s; }
.cy-chat-reset:hover{ border-color:var(--accent); color:var(--accent-ink); }
.cy-chat-reset svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; }
html.dark .cy-chat-reset{ background:#17191C; border-color:#34383D; }
.cy-chat-offer-card .oc-from{ font-size:12px; color:var(--ink-3); font-weight:400; }
.cy-chat-leadform .lf-consent{ display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.45; color:var(--ink-2); cursor:pointer; margin-top:2px; }
.cy-chat-leadform .lf-consent input{ margin-top:2px; flex:none; width:16px; height:16px; accent-color:var(--accent); }
.cy-chat-leadform .lf-consent a{ color:var(--accent-ink); font-weight:600; }

/* Botones de respuesta rapida (OPCIONES) */
.cy-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}
.cy-chat-chip {
  appearance: none;
  border: 1px solid var(--accent, #ff5a4d);
  background: var(--accent-soft, rgba(255,90,77,.08));
  color: var(--accent-ink, #c8362b);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}
.cy-chat-chip:hover {
  background: var(--accent, #ff5a4d);
  color: #fff;
}
.cy-chat-chip:active { transform: translateY(1px); }

/* Lista de lo que incluye la oferta en la tarjeta */
.oc-includes {
  list-style: none;
  margin: 8px 0 2px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.oc-includes li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink, #1a1a2e);
}
.oc-includes svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 1px;
  fill: none;
  stroke: var(--ok, #18a558);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}