/* ===========================================================================================
   Liana: marca del producto y su tema oficial (claro y oscuro).
   Va en un archivo aparte, cargado después de styles.css: pisa por orden de cascada sin
   tocar las reglas de los demás temas.
   =========================================================================================== */

/* --- Isotipo en línea: los colores salen del tema activo --------------------------------- */
:root {
  --liana-punto: #081A2D;
  --liana-rama: #081A2D;
  --liana-g1: #0274BE;
  --liana-g2: #4A86CB;
}

:root[data-theme="dark"] {
  --liana-punto: #FFFFFF;
  --liana-rama: #4BC9E5;
  --liana-g1: #4A86CB;
  --liana-g2: #4BC9E5;
}

.liana-iso { display: block; flex: none; overflow: visible; }
.liana-iso .liana-punto { fill: var(--liana-punto); }
.liana-iso .liana-rama { stroke: var(--liana-rama); }
.liana-iso .liana-g1 { stop-color: var(--liana-g1); }
.liana-iso .liana-g2 { stop-color: var(--liana-g2); }

/* Mosaico navy del ícono de la app: igual en todos los temas. */
.liana-iso-marco {
  --liana-punto: #FFFFFF;
  --liana-rama: #4BC9E5;
  --liana-g1: #4A86CB;
  --liana-g2: #4BC9E5;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #081A2D;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.icon-rail .rail-logo-liana { width: 40px; height: 40px; margin-bottom: 4px; }

@media (max-width: 1024px) {
  .topbar .brand .liana-iso-marco { width: 34px; height: 34px; border-radius: 9px; }
  .topbar .brand .liana-iso-marco .liana-iso { width: 24px; height: 24px; }
}

/* --- Pantallas de ingreso -------------------------------------------------------------------- */
.liana-marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.liana-marca-texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  font-family: "Sora", "Segoe UI", "IBM Plex Sans", system-ui, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.liana-marca-texto small {
  color: var(--muted);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}

.login-brand h1 { letter-spacing: -0.01em; }

/* --- Mensajes que manda liana (menú, saludos, IA, recordatorios): en TODOS los temas ---------
   Borde punteado + firma con el isotipo, para no confundirlos con lo que escribe una persona. */
:root[data-theme] .message.message.es-liana,
:root .message.message.es-liana {
  opacity: 1;
  border: 1.5px dashed var(--liana-borde-msg, color-mix(in srgb, var(--green) 70%, transparent));
  box-shadow: none;
}

:root[data-theme] .message.message.es-liana.es-sticker { border: 0; }

:root .message.es-liana footer {
  color: color-mix(in srgb, var(--text) 80%, var(--bubble-auto));
  opacity: 1;
}

.msg-autor-liana {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: -2px;
  font-weight: 600;
}

.msg-autor-liana b { font-weight: 700; }
.msg-autor-liana .liana-iso { width: 1.2em; height: 1.2em; }

/* ===========================================================================================
   Tema oficial "Liana" -- claro
   =========================================================================================== */
:root[data-sistema="liana-claro"] {
  --page: #F5F7FA;
  --card: #FFFFFF;
  --soft: #EEF2F6;
  --soft-green: #E1EEF8;
  --line: #DDE3EA;
  --text: #081A2D;
  --muted: #4A5A6C;
  --green: #0274BE;
  --green-dark: #015A94;
  --green-ink: #081A2D;
  --red: #C22A3F;
  --red-soft: #FBE3E7;
  --yellow: #946000;
  --yellow-soft: #FFF3D1;
  --blue-soft: #E1EEF8;
  --blue-ink: #0A3F66;
  --panel-soft: #EEF4FA;
  --input-bg: #FFFFFF;
  --bubble-in: #FFFFFF;
  --bubble-out: #D3ECF8;
  --bubble-auto: #E9EEF4;
  --rail-bg: #081A2D;
  --liana-borde-msg: #4A86CB;
  --m-top: #FFFFFF; --m-bg: #F5F7FA; --m-chip: #EEF2F6; --m-chipink: #33475B;
  --m-brand: #015A94; --m-brand2: #0274BE; --m-brandsoft: #E1EEF8;
  --m-line: #DDE3EA; --m-ink: #081A2D; --m-muted: #4A5A6C;
  --m-inbub: #FFFFFF; --m-outbub: #D3ECF8; --m-autobub: #E9EEF4; --m-panel: #F8FAFC;
}

:root[data-sistema="liana-claro"] .msg-ticks.read { color: #0268AB; }
:root[data-sistema="liana-claro"] .message { --msg-leido: #0268AB; }

/* ===========================================================================================
   Tema oficial "Liana" -- oscuro
   Burbuja propia cyan con texto navy; el acento cyan va con texto navy (no blanco) en todos
   los botones y contadores rellenos.
   =========================================================================================== */
:root[data-theme="dark"][data-sistema="liana-oscuro"] {
  --page: #0B1B2E;
  --card: #0F2238;
  --soft: #0D1F33;
  --soft-green: #123A55;
  --line: #22384F;
  --text: #E8F1F8;
  --muted: #A3B6CA;
  --green: #4BC9E5;
  --green-dark: #7FDBEF;
  --green-ink: #081A2D;
  --red: #FF8FA0;
  --red-soft: #3D1F2B;
  --yellow: #F2C14E;
  --yellow-soft: #3A3116;
  --panel-soft: #11283F;
  --input-bg: #132A42;
  --bubble-in: #16304B;
  --bubble-out: #4BC9E5;
  --bubble-auto: #173650;
  --rail-bg: #081A2D;
  --liana-borde-msg: #4BC9E5;
  --m-top: #0F2238; --m-bg: #0B1B2E; --m-chip: #16304B; --m-chipink: #C9D8E6;
  --m-brand: #7FDBEF; --m-brand2: #4BC9E5; --m-brandsoft: #123A55;
  --m-line: #22384F; --m-ink: #E8F1F8; --m-muted: #A3B6CA;
  --m-inbub: #16304B; --m-outbub: #4BC9E5; --m-autobub: #173650; --m-panel: #0D1F33;
}

:root[data-sistema="liana-oscuro"] :is(
  .emoji-mas, .primary, .rail-btn.active, .rail-avatar .rail-ico-avatar, .top-actions .secondary.active,
  .count, .nav-ico-all, .ia-chip.active, mark.chat-search-hit.active, .barra-formato .fmt-btn.activo,
  .sticker-tab.active, .sticker-tab.activo, .call-btn.accept, .toast-reply-send, .unread-badge, .rail-badge,
  .unread-filter-btn.active, .user-channel-count, .history-chip.active, .col-filter-btn.active,
  .chip-btn.active, .badge-nuevo, .cuenta-foto-btn, .cal-dia.con-msgs:hover, .agenda-vista-toggle button.active,
  .agenda-cal-punto, .tab-button.active, .block-sort .secondary.active, .send-icon-button,
  .panel-tabs button.active, .app-menu-item.active, .agenda-cal-celda.elegido, .msg-check.on,
  .editor-acciones .primary, .editor-barra > button.activa, .new-chat-plus
) {
  color: #081A2D;
}

:root[data-sistema="liana-oscuro"] :is(.message.out, .message.out.es-liana) { color: #081A2D; }
:root[data-sistema="liana-oscuro"] .message.out :is(p, footer, a, .msg-origen, .msg-marca, .msg-reenviado, .msg-broadcast, .msg-actions button, .msg-menu-btn, .msg-texto-en-whatsapp) { color: #081A2D; }
:root[data-sistema="liana-oscuro"] .message.out footer { opacity: 1; }
:root[data-sistema="liana-oscuro"] .message.out .msg-ticks { color: #2D4B66; }
:root[data-sistema="liana-oscuro"] .message.out .msg-ticks.read { color: #081A2D; }
:root[data-sistema="liana-oscuro"] .message.out .msg-ticks.fallido { color: #7A0019; }
:root[data-sistema="liana-oscuro"] .message.out .liana-iso {
  --liana-punto: #081A2D;
  --liana-rama: #081A2D;
  --liana-g1: #0A4F8A;
  --liana-g2: #0274BE;
}
:root[data-sistema="liana-oscuro"] .message.out.es-liana { --liana-borde-msg: #081A2D; }
:root[data-sistema="liana-oscuro"] .message.out {
  --msg-tinta: #081A2D;
  --msg-acento: #0A3D62;
  --msg-enlace: #0A3D62;
  --msg-leido: #081A2D;
  --msg-alerta: #7A0019;
}
:root[data-sistema="liana-oscuro"] .msg-ticks.read { color: #4BC9E5; }

/* Chat de IA (Asistente y panel Comercial): la burbuja propia usa el mismo cyan de fondo que
   .message.out (--bubble-out), así que en Liana oscuro necesita el mismo texto navy encima --
   sin esto el texto claro del tema general quedaba casi ilegible sobre ese celeste (28/09/2026,
   mismo criterio que .message.out de arriba: cada burbuja saca su tinta de SU propio fondo). */
:root[data-sistema="liana-oscuro"] .consulta-msg.mia { color: #081A2D; }
:root[data-sistema="liana-oscuro"] .consulta-msg.mia .consulta-autor { color: #0A3D62; }

:root[data-sistema="liana-oscuro"] .conversation-item.active { background: #16304B; }
:root[data-sistema="liana-oscuro"] .avatar { background: #1A3A5A; color: #BFEFFA; }
:root[data-sistema="liana-oscuro"] .pill { background: #17324E; color: #C9D8E6; }
:root[data-sistema="liana-oscuro"] .pill.green { background: #123A55; color: #7FDBEF; }
:root[data-sistema="liana-oscuro"] .pill.blue { background: #173A5A; color: #9CD6FF; }
:root[data-sistema="liana-oscuro"] .pill.gray { background: #1A2F45; color: #C9D8E6; }
:root[data-sistema="liana-oscuro"] .message.internal { background: #332D14; color: #FFE6A3; }

:root[data-sistema="liana-oscuro"] :is(
  .call-btn.reject, .call-btn.hangup, .secondary.danger, .primary.danger, button.danger,
  .chip-btn.danger, .vista-switch-btn .count, .toast-error .toast-appicon
) {
  color: #081A2D;
}

@media (max-width: 1024px) {
  :root[data-sistema="liana-oscuro"] :is(.inbox-actions .new-chat-btn, .conv-meta .unread-badge) { color: #081A2D; }
  :root[data-sistema^="liana-"] .message footer { opacity: 1; }
}