/* ==========================================================================
   Brok · conversación unificada · liquid glass
   Tokens del manual de marca Sektor + los del lienzo aprobado.
   Esta hoja es solo de index.html; admin.html sigue con app.css.
   ========================================================================== */
:root {
  /* Paleta clara alineada con la app de Sektor: azul marino + blanco/gris muy
     claro + amarillo dorado como acento puntual (ver _migracion para el criterio). */
  --sk-navy: #1B2A44; --sk-navy-press: #16233B; --sk-petroleo: #1B2A44;
  --sk-celeste: #3E76A8; --sk-amarillo: #F2B90F; --sk-amarillo-hover: #FFCB3D;
  --sk-amarillo-texto: #8A6300; /* gold como texto o icono sobre blanco necesita esta version oscura para contraste */
  --st-azul-texto: #2C567F; --st-rojo: #DC2626; --st-alerta: #A6710A; --st-ok: #22C55E; /* punto de "En línea" */
  --bk-fondo: #F3F5F9; --bk-superficie: #FFFFFF; --bk-superficie-sutil: #F7F9FC;
  --bk-borde: #E3E7EF; --bk-borde-ctl: #D7DDE8;
  --bk-oro-tinte: #FCF3D6; --bk-muted: #64748B; --bk-texto: #16233B;
  --bk-font: 'Quicksand', 'Century Gothic', system-ui, sans-serif;
  /* liquid glass: vidrio blanco esmerilado en vez de vidrio oscuro */
  --glass-tint: rgba(255,255,255,.72); --glass-tint-video: rgba(255,255,255,.65);
  --glass-gold: rgba(242,185,15,.14); --glass-gold-line: rgba(242,185,15,.45);
  --glass-line: rgba(27,42,68,.08);
  --glass-rim: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(27,42,68,.05);
  --glass-shadow: 0 10px 26px rgba(27,42,68,.10);
  --glass-blur: 14px; --glass-sat: 140%;
  /* movimiento */
  --ease-glass: cubic-bezier(.2,.8,.2,1);
  --t-enter: 420ms; --t-exit: 180ms; --t-stagger: 60ms;
  --sidebar-ancho: 17.5rem; --derecha-ancho: 18.75rem;
}

* { box-sizing: border-box; }
/* Escala general: todos los tamanos de esta hoja estan en rem, asi que este valor
   los sube o baja en proporcion. 18px = 1,125x sobre el lienzo (1180 px de ancho). */
html { font-size: 15px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }  /* el navegador del teléfono no agranda el texto por su cuenta */
@media (min-width: 1600px) { html { font-size: 16px; } }
@media (max-width: 900px) { html { font-size: 16px; } }
/* Entre 900 y 1200 px las columnas laterales ceden un poco para que el hilo conserve su ancho de lectura */
@media (min-width: 901px) and (max-width: 1200px) { :root { --sidebar-ancho: 15rem; --derecha-ancho: 16.5rem; } }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--bk-font); color: var(--bk-texto); overflow: hidden;
  /* Mismo fondo que el dashboard de consumo: blanco con acentos de color en las esquinas
     (dorado arriba a la derecha, marino arriba a la izquierda, celeste abajo) para que el
     vidrio de los paneles siempre tenga algo que difuminar. */
  background:
    radial-gradient(1100px 620px at 100% -8%, rgba(242,185,15,.22), rgba(242,185,15,0) 62%),
    radial-gradient(900px 640px at -6% 4%, rgba(27,42,68,.20), rgba(27,42,68,0) 60%),
    radial-gradient(1000px 700px at 50% 110%, rgba(62,118,168,.16), rgba(62,118,168,0) 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F7FB 55%, #EEF2F7 100%);
}
button { font-family: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--sk-amarillo); outline-offset: 2px; }
.oculto { display: none !important; }
.rotulo { font-size: 0.688rem; letter-spacing: .13em; text-transform: uppercase; color: var(--sk-navy); font-weight: 700; }

/* ---------- vidrio ---------- */
.vidrio, .sidebar, .columna-derecha > .voice-files-panel, .brok-acoplado, .brok-avatar-glow-container {
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-line); box-shadow: var(--glass-rim), var(--glass-shadow);
}
@supports not (backdrop-filter: blur(1px)) {
  .vidrio, .sidebar, .columna-derecha > .voice-files-panel, .brok-acoplado, .brok-avatar-glow-container { background: rgba(255,255,255,.96); }
}
/* La barra superior, a diferencia del resto (vidrio blanco), va en azul marino solido:
   es el patron real de la app de Sektor (todas las pantallas internas llevan una franja
   de navegacion azul marino) y el logo (img/logo-blanco.png) esta pensado para ir sobre
   ese azul, no sobre blanco. */
.barra { background: var(--sk-navy); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 8px 22px rgba(27,42,68,.20); }

/* ---------- fondo: tres luces que derivan (solo transform) ---------- */
/* Sobre fondo claro el mismo efecto necesita mucha menos opacidad para leerse como
   un ambiente sutil y no como manchas; ver _migracion/paleta-clara.md para la
   comparativa con el fondo totalmente plano. */
.fondo-luces { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: .9; transition: opacity 600ms ease; }
body[data-estado="pensando"] .fondo-luces { opacity: 1; }
/* Las tres luces del dashboard de consumo: círculos grandes, color pleno en el centro y
   filter: blur() para que el vidrio de los paneles tenga sustancia. El JS solo cambia
   transform y border-radius alrededor de la posición base (translate), así que la
   posición se fija con left/top + ese translate. */
.luz { position: absolute; left: 0; top: 0; will-change: transform, border-radius; display: block; filter: blur(78px); }
.luz.a { width: 64vw; aspect-ratio: 1; max-width: 940px; border-radius: 50%; opacity: .44; background: radial-gradient(circle at 40% 40%, #1B2A44 0%, rgba(27,42,68,.55) 45%, rgba(27,42,68,0) 72%); transform: translate(-30%, -40%); }
.luz.b { width: 50vw; aspect-ratio: 1; max-width: 780px; border-radius: 50%; opacity: .55; left: 40vw; top: -9vw; background: radial-gradient(circle at 50% 50%, #F2B90F 0%, rgba(242,185,15,.55) 45%, rgba(242,185,15,0) 72%); transform: translate(40%, 10%); }
.luz.c { width: 56vw; aspect-ratio: 1; max-width: 860px; border-radius: 50%; opacity: .48; left: 32vw; top: -10vw; background: radial-gradient(circle at 50% 50%, #3E76A8 0%, rgba(62,118,168,.5) 45%, rgba(62,118,168,0) 72%); transform: translate(-10%, 60%); }
.luz { transition: transform 2.6s cubic-bezier(.42,.12,.58,.88), border-radius 2.6s cubic-bezier(.42,.12,.58,.88); }
/* la duracion de cada salto la pone el JS (luces): reposo 1,8–3,4 s, pensando 0,4–0,8 s */

/* ---------- layout ---------- */
.brok-app { position: relative; z-index: 1; height: 100vh; display: flex; padding: 0.875rem; gap: 0.875rem; }
.sidebar { width: var(--sidebar-ancho); flex: 0 0 auto; border-radius: 1.125rem; display: flex; flex-direction: column; overflow: hidden; transition: width var(--t-enter) var(--ease-glass), opacity var(--t-enter), margin var(--t-enter) var(--ease-glass); }
body[data-sidebar="cerrado"] .sidebar { width: 0; opacity: 0; margin-right: -0.875rem; border-width: 0; }
.sidebar-sombra { display: none; }
.escenario { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.barra { border-radius: 1rem; height: 3.5rem; display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem 0 0.625rem; }
.marca { height: 1.625rem; width: auto; }
.barra-titulo { font-size: 0.719rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: #fff; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-modo { font-size: 0.75rem; color: #fff; border: 1.5px solid rgba(255,255,255,.24); border-radius: 62.438rem; padding: 0.313rem 0.688rem; background: rgba(255,255,255,.12); white-space: nowrap; }
/* .btn-icono tambien lo usan botones fuera de la barra (cerrar sidebar, cerrar buscador),
   sobre superficies blancas: esos siguen en azul marino. Solo dentro de la barra, que es
   azul marino solido, los iconos pasan a blanco. */
.btn-icono { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; border: 1px solid var(--glass-line); background: transparent; color: var(--sk-navy); font-size: 0.875rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; line-height: 1; }
.btn-icono:hover, .btn-borde:hover { background: rgba(27,42,68,.06); }
.btn-borde { border: 1.5px solid var(--bk-borde-ctl); background: var(--bk-superficie); color: var(--sk-navy); border-radius: 0.625rem; padding: 0.5rem 0.75rem; font-size: 0.781rem; font-weight: 600; white-space: nowrap; }
.barra .btn-icono { border-color: rgba(255,255,255,.22); color: #fff; }
.barra .btn-icono:hover, .barra .btn-borde:hover { background: rgba(255,255,255,.14); }
.barra .btn-borde { border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.10); color: #fff; }
body[data-sidebar="cerrado"] #btn-abrir-sidebar { display: inline-flex; }
#btn-abrir-sidebar { display: none; align-items: center; justify-content: center; }
.cuerpo { flex: 1; min-height: 0; display: flex; gap: 0.875rem; }
.centro { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.columna-derecha { width: var(--derecha-ancho); flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.75rem; min-height: 0; }

/* ---------- sidebar ---------- */
.sidebar-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0.75rem 0.5rem 1rem; min-height: 3.25rem; }
/* El buscador en panel (boton .buscador, .buscador-panel, filas, pie) vive en buscador.css,
   compartido con el admin. */
/* Nueva conversación: acción principal del sidebar, mismo tratamiento que los
   botones principales de Sektor (fondo azul, texto blanco, forma de píldora). */
.btn-nueva { margin: 0.625rem 0.75rem 0.375rem; border: 1px solid var(--sk-navy); background: var(--sk-navy); color: #fff; border-radius: 0.625rem; padding: 0.563rem; font-size: 0.781rem; font-weight: 700; }
.btn-nueva:hover { background: var(--sk-navy-press); border-color: var(--sk-navy-press); }
.lista-conversaciones { flex: 1; overflow-y: auto; padding: 0.25rem 0.5rem 0.5rem; }
/* Barras de scroll: finas, discretas sobre fondo claro (sidebar, hilo y panel de archivos) */
* { scrollbar-width: thin; scrollbar-color: rgba(27,42,68,.18) rgba(27,42,68,.04); }
*::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
*::-webkit-scrollbar-track { background: rgba(27,42,68,.04); border-radius: 62.438rem; }
*::-webkit-scrollbar-thumb { background: rgba(27,42,68,.18); border-radius: 62.438rem; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(242,185,15,.55); background-clip: padding-box; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }
.grupo-fecha { font-size: 0.688rem; letter-spacing: .13em; text-transform: uppercase; color: var(--bk-muted); font-weight: 700; padding: 1rem 0.5rem 0.5rem; }
.conv { width: 100%; text-align: left; background: var(--bk-superficie); border: 1.5px solid var(--bk-borde); border-radius: 0.75rem; padding: 0.75rem 0.875rem; margin-bottom: 0.5rem; color: var(--bk-texto); display: grid; grid-template-columns: 1fr auto; gap: 2px 0.5rem; cursor: pointer; position: relative; font: inherit; }
.conv:focus-visible { outline: 2px solid var(--glass-gold-line); outline-offset: 1px; }
/* Renombrar / eliminar: botones discretos que aparecen al pasar el raton o al enfocar la fila */
.conv-acciones { grid-column: 2; grid-row: 1; display: flex; gap: 0.125rem; opacity: 0; transition: opacity 120ms; }
.conv:hover .conv-acciones, .conv:focus-within .conv-acciones, .conv.editando .conv-acciones { opacity: 1; }
.conv:hover .conv-hora, .conv:focus-within .conv-hora, .conv.editando .conv-hora { visibility: hidden; }
.conv-hora { grid-column: 2; grid-row: 1; }
.conv-accion { width: 1.5rem; height: 1.5rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--bk-muted); font-size: 0.72rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.conv-accion:hover { background: var(--glass-gold); color: var(--sk-amarillo-texto); }
.conv-accion.conv-eliminar:hover { background: rgba(220,38,38,.12); color: var(--st-rojo); }
.conv-editar { grid-column: 1; grid-row: 1; min-width: 0; width: 100%; background: var(--bk-superficie); border: 1.5px solid var(--glass-gold-line); border-radius: 0.375rem; color: var(--bk-texto); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.125rem 0.375rem; outline: none; box-shadow: 0 0 0 3px var(--glass-gold); }
.sidebar-pie-alerta { color: var(--st-alerta); }
@media (hover: none) { .conv-acciones { opacity: 1; } .conv .conv-hora { visibility: hidden; } .buscador-item .conv-accion { width: 2rem; height: 2rem; font-size: 0.85rem; } }
.conv:hover { border-color: var(--bk-borde-ctl); }
.conv.activa { border-color: var(--glass-gold-line); }
.conv-titulo { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.activa .conv-titulo::before { content: ""; display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--sk-amarillo); margin-right: 0.375rem; vertical-align: middle; }
.conv-hora { font-size: 0.688rem; color: var(--bk-muted); }
.conv-meta { grid-column: 1 / -1; font-size: 0.75rem; margin-top: 0.125rem; color: var(--bk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-pie { padding: 0.625rem 1rem 0.875rem; font-size: 0.75rem; color: var(--bk-muted); font-weight: 600; border-top: 1px solid var(--glass-line); }
.sidebar-vacia { padding: 1.125rem 0.75rem; font-size: 0.781rem; color: var(--bk-muted); text-align: center; line-height: 1.5; }

/* ---------- avatar y su escenario ---------- */
.voice-immersive-container { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.5rem 0.75rem 0; transition: padding var(--t-enter) var(--ease-glass); }
.brok-avatar-glow-container { position: relative; width: clamp(8rem, 22vh, 13rem); height: clamp(8rem, 22vh, 13rem); border-radius: 50%; display: grid; place-items: center; transition: width 480ms var(--ease-glass), height 480ms var(--ease-glass); }
.brok-avatar-outer-ring, .brok-avatar-inner-ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; transition: border 240ms, box-shadow 240ms, opacity 240ms; }
.brok-avatar-inner-ring { inset: 0.375rem; border: 2px solid rgba(27,42,68,.16); }
.brok-avatar-outer-ring { inset: -0.5rem; border: 1px solid rgba(27,42,68,.06); animation: respirar 4s ease-in-out infinite; }
.brok-avatar-face { position: relative; width: calc(100% - 1.625rem); height: calc(100% - 1.625rem); border-radius: 50%; overflow: hidden; background: var(--bk-superficie-sutil); }
.brok-avatar-face video, .brok-acoplado-cara video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; border-radius: 50%; }
/* Imagen estática debajo del vídeo: si el vídeo no carga o el navegador lo bloquea, es lo que se ve */
.avatar-respaldo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; border-radius: 50%; display: block; }
/* Fotograma congelado durante el cambio de fuente del video */
.avatar-congelado { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; border-radius: 50%; display: none; pointer-events: none; }
video[data-avatar-unico].roto { display: none; }
.brok-acoplado-cara { position: relative; }
/* estados: className lo pone app.js (listening / speaking / thinking) */
.brok-avatar-glow-container.listening .brok-avatar-inner-ring { border: 3px solid var(--sk-amarillo); }
.brok-avatar-glow-container.listening .brok-avatar-outer-ring { border: 2px solid rgba(242,185,15,.45); animation: respirar 1.2s ease-in-out infinite; }
.brok-avatar-glow-container.thinking .brok-avatar-inner-ring { border: 2.5px solid var(--sk-amarillo); border-right-color: transparent; animation: girar 1.1s linear infinite; }
.brok-avatar-glow-container.speaking .brok-avatar-inner-ring { border: 3px solid var(--sk-celeste); box-shadow: 0 0 0 6px rgba(62,118,168,.12), 0 0 32px rgba(62,118,168,.22); }
.brok-avatar-glow-container.speaking .brok-avatar-outer-ring { animation: respirar 1.6s ease-in-out infinite; border-color: rgba(62,118,168,.3); }
@keyframes respirar { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes girar { to { transform: rotate(360deg); } }
.avatar-nombre { margin-top: 0.875rem; font-size: 0.688rem; letter-spacing: .13em; text-transform: uppercase; color: var(--sk-navy); font-weight: 700; }
.voice-status-text { margin-top: 0.375rem; font-size: 0.781rem; color: var(--bk-muted); border: 1.5px solid var(--bk-borde-ctl); background: var(--bk-superficie); border-radius: 62.438rem; padding: 0.313rem 0.75rem; display: inline-block; }
body[data-estado="escuchando"] .voice-status-text { color: var(--sk-amarillo-texto); border-color: var(--glass-gold-line); }
body[data-estado="pensando"] .voice-status-text { color: var(--sk-amarillo-texto); }
body[data-estado="hablando"] .voice-status-text { color: var(--st-azul-texto); border-color: rgba(62,118,168,.4); }
body[data-estado="error"] .voice-status-text { color: var(--st-rojo); border-color: rgba(220,38,38,.35); }

.saludo { max-width: 35rem; margin-top: 1.375rem; }
.saludo h2 { margin: 0; font-size: 1.625rem; font-weight: 700; letter-spacing: -.012em; color: var(--sk-navy); }
.saludo p { margin: 0.5rem 0 0; font-size: 0.906rem; line-height: 1.55; color: var(--bk-muted); }
.sugerencias { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.125rem; align-items: center; }
.sugerencia { border: 1.5px solid var(--bk-borde-ctl); background: var(--bk-superficie); color: var(--sk-navy); border-radius: 62.438rem; padding: 0.5rem 0.875rem; font-size: 0.813rem; font-weight: 600; }
.sugerencia:hover { border-color: var(--sk-navy); background: var(--bk-superficie-sutil); }

/* Por voz la experiencia es escuchar a Brok: la respuesta escrita no se muestra nunca
   (el JS la sigue rellenando por compatibilidad, pero el !important gana al style en linea). */
.voice-transcript-bubble { display: none !important; }
.voice-transcript-bubble--legado { margin-top: 1.125rem; max-width: 40rem; background: var(--bk-superficie); border: 1px solid var(--bk-borde); border-radius: 0.875rem; padding: 0.875rem 1.125rem; text-align: left; font-size: 0.906rem; line-height: 1.55; color: var(--bk-texto); }
.voice-transcript-bubble a { color: var(--sk-amarillo-texto); }

/* ---------- fases y modalidad ---------- */
/* vacía: avatar grande, saludo visible, sin hilo */
body[data-fase="vacia"] .chat-messages { display: none; }
body[data-fase="vacia"] .brok-acoplado { display: none; }
/* conversando por texto: el avatar se acopla a la derecha y el hilo ocupa el centro */
body[data-fase="conversando"][data-modo="texto"] .voice-immersive-container { display: none; }
body[data-fase="conversando"][data-modo="texto"] .brok-acoplado { display: flex; }
body[data-fase="conversando"][data-modo="texto"] .ptt, body[data-modo="texto"] .voice-waveform-box { display: none; }
/* conversando por voz: Brok habla desde su escenario; sin campo ni hilo */
body[data-fase="conversando"][data-modo="voz"] .chat-messages { display: none; }
body[data-modo="voz"] .text-input-container { display: none; }
body[data-fase="conversando"] .saludo { display: none; }
body[data-fase="conversando"][data-modo="voz"] .voice-immersive-container { flex: 1; justify-content: center; overflow-y: auto; }

/* ---------- hilo ---------- */
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 0.75rem 0.5rem 0.75rem 0.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.message { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; max-width: min(78%, 42rem); animation: entrar 320ms var(--ease-glass) both; }
.message .avatar { width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.813rem; background: var(--sk-navy); color: #fff; border: none; }
.message-bubble { border-radius: 1rem; padding: 0.875rem 1.125rem; font-size: 0.95rem; line-height: 1.6; background: var(--bk-superficie); border: 1.5px solid var(--bk-borde); color: var(--bk-texto); overflow-wrap: anywhere; }
.message-bubble p { margin: 0 0 0.5rem; } .message-bubble p:last-child { margin-bottom: 0; }
.message-bubble ul, .message-bubble ol { margin: 0.375rem 0; padding-left: 1.25rem; }
.message-bubble a { color: var(--sk-amarillo-texto); font-weight: 600; }
.message-bubble strong { color: var(--sk-navy); }
.message-time { grid-column: 2; font-size: 0.688rem; color: var(--bk-muted); padding-left: 0.25rem; animation: entrar 320ms var(--ease-glass) 80ms both; display: flex; align-items: center; gap: 0.75rem; }
/* Copiar la respuesta: discreto junto a la hora, se afirma al pasar el raton */
.btn-copiar { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid transparent; background: transparent; color: var(--bk-muted); font: inherit; font-size: 0.688rem; font-weight: 600; letter-spacing: .04em; padding: 0.15rem 0.45rem; border-radius: 0.5rem; cursor: pointer; opacity: .75; transition: opacity 120ms, color 120ms, background 120ms, border-color 120ms; }
.message:hover .btn-copiar, .btn-copiar:focus-visible { opacity: 1; }
.btn-copiar:hover { color: var(--bk-texto); background: var(--glass-gold); border-color: var(--glass-gold-line); }
.btn-copiar.copiado { color: var(--sk-amarillo-texto); border-color: var(--glass-gold-line); background: var(--glass-gold); opacity: 1; }
.btn-copiar.fallo { color: var(--st-rojo); opacity: 1; }
@media (hover: none) { .btn-copiar { opacity: 1; } }
.user-message { align-self: flex-end; grid-template-columns: 1fr auto; }
.user-message .avatar { grid-column: 2; grid-row: 1; background: var(--sk-petroleo); color: #fff; border-color: transparent; }
.user-message .message-bubble { grid-column: 1; grid-row: 1; background: var(--sk-petroleo); border-color: transparent; color: #fff; }
.user-message .message-time { grid-column: 1; text-align: right; padding-right: 0.25rem; }
.loader-bubble { color: var(--sk-amarillo-texto); font-size: 0.813rem; display: flex; align-items: center; gap: 0.5rem; }
@keyframes entrar { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: translateY(0); } }

/* ---------- zona inferior ---------- */
.controls-bar { flex: 0 0 auto; padding: 0.625rem 0 0.875rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
/* Vista inicial: avatar + saludo + sugerencias caben en lo que deja la zona inferior.
   Si la ventana es muy baja, se recorta el escenario, no los controles. */
body[data-fase="vacia"] .voice-immersive-container { flex: 1; min-height: 0; justify-content: center; overflow: hidden; }
/* Pantallas de escritorio de poca altura (1366x768 y similares): menos aire vertical */
@media (min-width: 901px) and (max-height: 860px) {
  .voice-immersive-container { padding-top: 0.25rem; }
  .avatar-nombre { margin-top: 0.5rem; }
  .voice-status-text { margin-top: 0.25rem; }
  .saludo { margin-top: 0.75rem; }
  .saludo h2 { font-size: 1.35rem; }
  .saludo p { font-size: 0.85rem; margin-top: 0.3rem; line-height: 1.45; }
  .sugerencias { margin-top: 0.7rem; gap: 0.4rem; }
  .sugerencia { padding: 0.4rem 0.8rem; font-size: 0.78rem; }
  .controls-bar { padding: 0.25rem 0 0.75rem; gap: 0.45rem; }
  .waveform-container, .voice-waveform-box { height: 1.25rem; }
  .pie-aviso { font-size: 0.64rem; }
}
.waveform-container, .voice-waveform-box { width: min(26.25rem, 100%); height: 2.125rem; opacity: 0; transition: opacity 200ms; }
.waveform-container.active { opacity: 1; }
body[data-estado="escuchando"] .voice-waveform-box { opacity: 1; }
.waveform-container canvas, .voice-waveform-box canvas { width: 100%; height: 100%; display: block; }
/* Dock de vidrio: campo, enviar y microfono dentro de una misma pieza */
.controles { width: min(52rem, 100%); display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem 0.55rem 0.7rem;
  border-radius: 1.5rem; background: var(--glass-tint); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-rim), var(--glass-shadow); }
@supports not (backdrop-filter: blur(1px)) { .controles { background: rgba(255,255,255,.97); } }
/* Campo: pastilla blanca (fondo de formulario de Sektor) dentro del vidrio, dorado al enfocar */
.text-input-container { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; background: var(--bk-superficie); border: 1.5px solid var(--bk-borde-ctl); border-radius: 62.438rem; padding: 0.3rem 0.3rem 0.3rem 1.1rem; transition: border-color 160ms, box-shadow 160ms; }
.text-input-container:focus-within { border-color: var(--glass-gold-line); box-shadow: 0 0 0 4px var(--glass-gold); }
#input-text { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--bk-texto); font-family: inherit; font-size: 1rem; outline: none; padding: 0.55rem 0; }
#input-text::placeholder { color: var(--bk-muted); }
/* Enviar: redondo, azul marino con texto/icono blanco, como los botones principales de Sektor */
.btn-send { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: var(--sk-navy); color: #fff; font-size: 0.95rem; display: grid; place-items: center; transition: background 160ms, transform 120ms; }
.btn-send:hover { background: var(--sk-navy-press); transform: scale(1.04); }
.btn-send:disabled { opacity: .45; cursor: default; transform: none; }
/* Microfono: en el mismo dock, con su etiqueta debajo sin apretarse. Se queda en
   amarillo (no pasa a azul como Enviar): es una accion distinta a un envio de
   formulario -grabar una nota de voz- y el contraste de color ayuda a que el
   usuario la reconozca de un vistazo; ver criterio completo en _migracion. */
.ptt { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 8.5rem; padding: 0 0.25rem; }
.btn-voice-record { position: relative; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: var(--sk-amarillo); color: var(--sk-navy); font-size: 1.1rem; box-shadow: 0 0 0 5px var(--glass-gold); transition: transform 120ms, background 200ms, box-shadow 200ms; user-select: none; -webkit-user-select: none; touch-action: none; }
.btn-voice-record:hover { background: var(--sk-amarillo-hover); box-shadow: 0 0 0 7px var(--glass-gold); }
.btn-voice-record.recording, .btn-voice-record.ptt-active { background: var(--sk-navy); color: var(--sk-amarillo); transform: scale(1.06); box-shadow: 0 0 0 8px rgba(242,185,15,.22), 0 0 32px rgba(242,185,15,.3); }
.record-pulse { position: absolute; inset: -0.5rem; border-radius: 50%; border: 2px solid rgba(242,185,15,.5); opacity: 0; }
.btn-voice-record.recording .record-pulse { animation: pulso 1.2s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.voice-ptt-label { font-size: 0.56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bk-muted); font-weight: 700; white-space: nowrap; line-height: 1.2; }
/* Por voz solo queda el microfono: el dock se encoge a su alrededor */
body[data-modo="voz"] .controles { width: auto; padding: 0.55rem 1.1rem; }
/* Aviso discreto bajo el dock: pequeño, gris y centrado; no compite con el campo de texto */
.pie-aviso { margin: 0; padding: 0 1rem; font-size: 0.68rem; line-height: 1.4; color: var(--bk-muted); opacity: .85; text-align: center; }

/* ---------- columna derecha ---------- */
.brok-acoplado { display: none; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.875rem; animation: entrar var(--t-enter) var(--ease-glass) both; }
.brok-acoplado-cara { width: 3.75rem; height: 3.75rem; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(27,42,68,.16); flex: 0 0 auto; }

.brok-acoplado-nombre { font-size: 0.875rem; font-weight: 700; color: var(--bk-texto); }
.brok-acoplado-estado { font-size: 0.719rem; color: var(--bk-muted); border: 1px solid var(--bk-borde-ctl); border-radius: 62.438rem; padding: 0.188rem 0.563rem; display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem; background: var(--bk-superficie); }
.brok-acoplado-estado .punto { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--st-ok); }
body[data-estado="pensando"] .brok-acoplado-estado .punto, body[data-estado="escuchando"] .brok-acoplado-estado .punto { background: var(--sk-amarillo); animation: respirar 1s ease-in-out infinite; }
body[data-estado="error"] .brok-acoplado-estado .punto { background: var(--st-rojo); }

.voice-files-panel { flex: 1; min-height: 0; border-radius: 1rem; display: flex; flex-direction: column; overflow: hidden; }
.voice-files-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.875rem; font-size: 0.688rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--sk-navy); border-bottom: 1px solid var(--glass-line); }
.voice-files-header .contador { min-width: 1.375rem; height: 1.375rem; border-radius: 62.438rem; background: var(--sk-amarillo); color: var(--sk-navy); display: grid; place-items: center; font-size: 0.75rem; letter-spacing: 0; transition: transform 240ms; }
.voice-files-header .contador.late { animation: latido 240ms ease-out; }
@keyframes latido { 50% { transform: scale(1.15); } }
.voice-files-list { flex: 1; overflow-y: auto; padding: 0.875rem; display: flex; flex-direction: column; gap: 0.875rem; }
.empty-voice-files { text-align: center; color: var(--bk-muted); font-size: 0.781rem; line-height: 1.5; padding: 1.5rem 0.625rem; }
.empty-voice-files i { font-size: 1.625rem; color: var(--sk-celeste); opacity: .7; display: block; margin-bottom: 0.625rem; }
/* Tarjeta de documento: blanca con borde sutil, como las tarjetas de Sektor (antes
   era un panel oscuro traslucido). */
.source-card { background: var(--bk-superficie) !important; border: 1.5px solid var(--bk-borde) !important; border-radius: 0.875rem; padding: 1rem; box-shadow: 0 1px 3px rgba(27,42,68,.06); animation: tarjeta 380ms var(--ease-glass) both; }
.source-card .source-title { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; min-width: 0; color: var(--bk-texto) !important; font-weight: 600; word-break: break-word !important; }
.source-card .source-title i { color: var(--sk-amarillo-texto) !important; margin-top: 2px; font-size: 1rem; }
/* El nombre: hasta dos lineas y puntos suspensivos; el nombre completo va en el title de la tarjeta. */
.source-card .source-title .source-nombre { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.source-card .source-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.source-card .etiqueta { font-size: 0.688rem; color: var(--sk-navy); background: rgba(27,42,68,.05); border: 1px solid var(--bk-borde-ctl); border-radius: 62.438rem; padding: 2px 0.5rem; }
.source-card a.btn-primary { background: var(--sk-navy) !important; color: #fff !important; border: 0; margin-top: 0.625rem !important; font-size: 0.75rem !important; padding: 0.5rem 0.75rem !important; border-radius: 0.563rem !important; }
.source-card a.btn-primary:hover { background: var(--sk-navy-press) !important; }
@keyframes tarjeta { from { opacity: 0; transform: translateY(0.75rem) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- móvil (≤900 px): una columna, dock siempre abajo, documentos en bandeja ---------- */
.barra-estado, .bandeja-flecha { display: none; }
@media (max-width: 900px) {
  /* Rendimiento en teléfonos: luces estáticas (el JS no las mueve en móvil) con menos
     desenfoque, y desenfoque solo en la barra y el dock (y más suave) */
  :root { --glass-blur: 8px; }
  .luz { filter: blur(48px); }
  .luz.a { width: 110vw; max-width: none; transform: translate(-36%, -48%); }
  .luz.b { width: 90vw; max-width: none; left: 30vw; top: 4vw; }
  .luz.c { display: none; }
  .sidebar, .columna-derecha > .voice-files-panel, .brok-avatar-glow-container { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.97); }
  .brok-avatar-outer-ring { animation: none; }
  .message, .message-time, .source-card { animation-duration: 200ms; }

  /* La app mide lo que mide el viewport visible: con el teclado abierto encoge (--vvh la pone app.js) */
  .brok-app { height: 100vh; height: 100dvh; height: var(--vvh, 100dvh); padding: 0.5rem; padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); gap: 0.5rem; }
  .escenario { gap: 0.5rem; min-height: 0; }

  /* Barra: menú · logo · estado de Brok · reiniciar (solo icono) */
  .barra { height: 3.25rem; padding: 0 0.5rem; gap: 0.5rem; }
  .barra-titulo, .chip-modo { display: none; }
  .barra-estado { display: inline-flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; font-size: 0.75rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-estado .punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--st-ok); flex: 0 0 auto; }
  body[data-estado="pensando"] .barra-estado .punto, body[data-estado="escuchando"] .barra-estado .punto { background: var(--sk-amarillo); animation: respirar 1s ease-in-out infinite; }
  body[data-estado="hablando"] .barra-estado .punto { animation: respirar 1.2s ease-in-out infinite; background: var(--sk-celeste); }
  body[data-estado="error"] .barra-estado .punto { background: var(--st-rojo); }
  body[data-fase="vacia"] .barra-estado { visibility: hidden; }
  .btn-icono { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
  #btn-reset { width: 2.75rem; height: 2.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
  #btn-reset span { display: none; }

  /* Sidebar: cajón sobre la pantalla */
  .sidebar { position: fixed; z-index: 30; top: 0.5rem; bottom: 0.5rem; left: 0.5rem; width: min(18.75rem, 86vw); transform: translateX(-110%); opacity: 1; margin: 0; transition: transform 320ms var(--ease-glass); }
  body[data-sidebar="abierto"] .sidebar { transform: none; }
  body[data-sidebar="cerrado"] .sidebar { width: min(18.75rem, 86vw); opacity: 1; margin: 0; border-width: 1px; }
  .sidebar-sombra { display: block; position: fixed; inset: 0; background: rgba(16,23,38,.45); z-index: 29; opacity: 0; pointer-events: none; transition: opacity 320ms; }
  body[data-sidebar="abierto"] .sidebar-sombra { opacity: 1; pointer-events: auto; }
  #btn-abrir-sidebar { display: inline-flex; }
  #btn-cerrar-sidebar { display: inline-flex; }
  .buscador { min-height: 2.75rem; }
  .btn-nueva { min-height: 2.75rem; }
  .conv { padding: 0.75rem 0.75rem; }
  .conv-accion { width: 2.25rem; height: 2.25rem; font-size: 0.9rem; }

  /* Cuerpo: una columna. El hilo es el protagonista y el dock queda siempre abajo */
  .cuerpo { flex-direction: column; overflow: hidden; gap: 0; }
  .centro { flex: 1; min-height: 0; }
  .chat-messages { flex: 1; min-height: 0; max-height: none; padding: 0.5rem 0.25rem 0.5rem 0; gap: 1rem; }
  .message { max-width: 94%; }
  .message-bubble { padding: 0.75rem 0.95rem; }
  .btn-copiar { min-height: 2.5rem; padding: 0.25rem 0.75rem; font-size: 0.75rem; }

  /* Avatar: cabe con el saludo y el dock; por voz es el escenario */
  .voice-immersive-container { padding: 0.25rem 0.5rem 0; }
  .brok-avatar-glow-container { width: clamp(6.5rem, 22vh, 11rem); height: clamp(6.5rem, 22vh, 11rem); }
  .saludo { margin-top: 0.75rem; }
  .saludo h2 { font-size: 1.3rem; }
  .saludo p { font-size: 0.85rem; line-height: 1.45; }
  body[data-fase="conversando"][data-modo="voz"] .voice-immersive-container { flex: 1; min-height: 0; justify-content: center; overflow: hidden; }
  body[data-fase="conversando"][data-modo="voz"] .centro { min-height: 0; }
  /* Por voz, con la bandeja cerrada, Brok es el escenario: más grande */
  body[data-fase="conversando"][data-modo="voz"]:not([data-archivos="abierto"]) .brok-avatar-glow-container { width: clamp(8rem, 30vh, 14rem); height: clamp(8rem, 30vh, 14rem); }
  /* Con la bandeja abierta el documento manda: el avatar se hace pequeño y el saludo se va */
  body[data-archivos="abierto"] .brok-avatar-glow-container { width: 5rem; height: 5rem; }
  body[data-archivos="abierto"] .saludo, body[data-archivos="abierto"] .avatar-nombre { display: none; }

  /* Dock */
  .controls-bar { padding: 0.4rem 0 0.15rem; gap: 0.35rem; }
  .pie-aviso { font-size: 0.62rem; padding: 0 0.5rem; line-height: 1.3; }
  .waveform-container, .voice-waveform-box { height: 1.5rem; }
  /* Las ondas solo ocupan sitio mientras se graba: el resto del tiempo no dejan un hueco sobre el dock */
  .waveform-container:not(.active) { height: 0; }
  body:not([data-estado="escuchando"]) .voice-waveform-box { height: 0; }
  .controles { width: 100%; padding: 0.4rem 0.4rem 0.4rem 0.5rem; gap: 0.5rem; border-radius: 1.75rem; }
  .text-input-container { padding: 0.25rem 0.25rem 0.25rem 1rem; }
  #input-text { font-size: 1rem; padding: 0.65rem 0; }  /* 16 px: iOS no hace zoom al enfocar */
  .btn-send { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
  .ptt { min-width: 0; padding: 0; gap: 0.35rem; }
  .voice-ptt-label { display: none; }
  .btn-voice-record { width: 3rem; height: 3rem; font-size: 1.1rem; }
  /* Por voz: micrófono grande para el pulgar, con su etiqueta */
  body[data-modo="voz"] .controles { width: auto; padding: 0.6rem 1.5rem 0.5rem; }
  body[data-modo="voz"] .btn-voice-record { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; }
  body[data-modo="voz"] .voice-ptt-label { display: block; font-size: 0.6rem; }

  /* Bandeja de documentos: pegada sobre el dock. Cerrada es una barra; abierta ocupa hasta la mitad */
  .columna-derecha { width: 100%; flex: 0 0 auto; gap: 0; margin: 0.25rem 0 0; max-height: 50%; min-height: 0; }
  .brok-acoplado { display: none !important; }
  .voice-files-panel { flex: 1; min-height: 0; max-height: none; border-radius: 1rem; }
  .voice-files-header { min-height: 2.875rem; padding: 0.5rem 0.875rem; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
  .voice-files-header > span:first-child { flex: 1; min-width: 0; }
  .bandeja-flecha { display: inline-block; margin-left: 0.625rem; color: var(--bk-muted); font-size: 0.8rem; transition: transform 240ms var(--ease-glass); }
  body[data-archivos="abierto"] .bandeja-flecha { transform: rotate(180deg); }
  body[data-archivos="cerrado"] .voice-files-list { display: none; }
  body[data-archivos="cerrado"] .voice-files-header { border-bottom: 0; }
  .voice-files-list { padding: 0.625rem; gap: 0.625rem; }
  .source-card { padding: 0.875rem; }
  .source-card a.btn-primary { display: flex !important; justify-content: center; align-items: center; min-height: 2.75rem; font-size: 0.85rem !important; }
}
/* ---------- celular (≤600 px): todo más pequeño, mismas posiciones y misma estructura ---------- */
@media (max-width: 600px) {
  /* Todos los tamaños de esta hoja van en rem: bajar la base de 16 a 14 px los achica un 12,5 %
     en proporción (letras, iconos, burbujas, barra de archivos, márgenes, espacios) sin mover
     nada de sitio. */
  html { font-size: 14px; }

  /* Texto pequeño con suelo, para que achicar no sea forzar la vista */
  .voice-files-header, .barra-estado { font-size: max(0.75rem, 10.5px); }

  /* Zonas táctiles: nada por debajo de 44 px (el mínimo de Apple), aunque se vea más pequeño.
     Truco: borde transparente que sigue recibiendo el toque; lo visible es lo de dentro, y el
     contorno se dibuja con una sombra interior. */
  .btn-icono, #btn-reset {
    width: 44px; height: 44px; font-size: 0.95rem;
    border: 4px solid transparent; background-clip: padding-box; border-radius: 0.875rem;
    box-shadow: inset 0 0 0 1px var(--glass-line);
  }
  .barra .btn-icono { border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
  .barra .btn-borde#btn-reset { border-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.26); }
  .btn-send { width: 44px; height: 44px; font-size: 0.95rem; border: 3px solid transparent; background-clip: padding-box; }
  .btn-voice-record { width: 44px; height: 44px; }
  body[data-modo="voz"] .btn-voice-record { width: 4rem; height: 4rem; }
  .btn-copiar { min-height: 44px; }
  .voice-files-header { min-height: 44px; }
  .source-card a.btn-primary { min-height: 44px; }
  .buscador, .btn-nueva { min-height: 44px; }
  .conv-accion { width: 44px; height: 44px; }

  /* Segunda vuelta (06-10): mensajes y barra de escribir más pequeños. Encabezado y barra de archivos, igual. */
  /* Mensajes: 13 px, menos relleno y menos aire entre uno y otro */
  .message-bubble { font-size: 13px; line-height: 1.5; padding: 0.55rem 0.8rem; }
  .chat-messages { gap: 0.6rem; }
  .message { row-gap: 0.3rem; }
  .message-time, .btn-copiar { font-size: 9.5px; }
  /* Copiar se ve pequeño pero toca en 44 px: los márgenes negativos meten la zona táctil en el hueco
     de arriba (4,2 px hasta la burbuja) y en el de abajo (8,4 px hasta el mensaje siguiente), sin pisar
     ninguno ni empujar el mensaje siguiente 44 px hacia abajo. */
  .btn-copiar { min-height: 44px; margin: -4px 0 -8px; padding: 0 0.6rem; }

  /* Barra de escribir: más baja y con menos relleno. La caja mide 44 px (tocar su borde también enfoca:
     app.js); el texto va a 14 px y en iPhone/iPad no hay zoom al tocarla por maximum-scale=1 (app.js). */
  .controls-bar { padding: 0.25rem 0 0.1rem; gap: 0.25rem; }
  .controles { padding: 0.25rem 0.3rem 0.25rem 0.35rem; }
  .text-input-container { height: 44px; padding: 0 0 0 0.85rem; }
  #input-text { font-size: 14px; min-height: 0; height: 100%; padding: 0; }
  /* Enviar: se ve de 32 px; la zona táctil sigue siendo de 44 */
  .btn-send { width: 44px; height: 44px; border-width: 6px; font-size: 0.85rem; }
  .pie-aviso { font-size: 8.5px; }
}
@media (min-width: 901px) { #btn-cerrar-sidebar { display: inline-flex; } }

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
::selection { background: rgba(242,185,15,.35); }

/* Aviso de conexion perdida en el chat: el indicador de "escribiendo" no puede quedarse girando
   para siempre. Lleva la pregunta a la vista y el boton que la reenvia tal cual. */
.aviso-conexion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #C23838;
  font-weight: 600;
}
.aviso-conexion .btn-reintentar-chat {
  border: 1px solid #C23838;
  background: #fff;
  color: #C23838;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.aviso-conexion .btn-reintentar-chat:hover { background: #C23838; color: #fff; }
/* La pregunta no se pierde: queda escrita debajo del aviso. */
.aviso-conexion-pregunta {
  flex-basis: 100%;
  color: var(--texto-suave, #5B6B82);
  font-weight: 400;
  font-size: 13px;
  overflow-wrap: anywhere;
}