/* Nexoria · Gestuagro — la identidad de Nexoria (noche azul, cian y violeta,
   cristal) con un acento rojo-ámbar que se enciende en el modo REAL. */

:root {
  --bg: #04060c;
  --panel: rgba(13, 19, 34, 0.72);
  --panel-2: rgba(17, 26, 46, 0.86);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --accent: #4fd8f5;
  --accent-soft: rgba(79, 216, 245, 0.14);
  --violet: #8b7cff;
  --violet-soft: rgba(139, 124, 255, 0.16);
  --lime: #b8ff57;
  --amber: #ffb547;
  --real: #ff5d6c;
  --real-soft: rgba(255, 93, 108, 0.14);
  --grad: linear-gradient(120deg, #4fd8f5 0%, #8b7cff 100%);
  --grad-real: linear-gradient(120deg, #ffb547 0%, #ff5d6c 100%);
  --text: #f3f6fc;
  --text-soft: #b9c2d6;
  --muted: #7d889d;
  --ok: #5ee8a0;
  --err: #ff6b7a;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --radius: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(79, 216, 245, 0.16) 0%, transparent 60%),
    radial-gradient(900px 700px at 92% 110%, rgba(139, 124, 255, 0.18) 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.modo-real {
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(255, 181, 71, 0.12) 0%, transparent 60%),
    radial-gradient(900px 700px at 92% 110%, rgba(255, 93, 108, 0.16) 0%, transparent 60%),
    var(--bg);
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hidden, [hidden] { display: none !important; }
.empty { color: var(--muted); font-size: 0.85rem; margin: 0.4rem 0; }
button { font: inherit; }
a { color: var(--accent); }
.link { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; letter-spacing: inherit; font: inherit; }
.link:hover, .statusbar a:hover { color: var(--text); }

.hud { display: flex; flex-direction: column; height: 100vh; padding: 0.8rem 1rem; gap: 0.7rem; }

/* ── Cabecera ── */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.brand-core { width: 36px; height: 36px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--violet), transparent 70%, var(--accent));
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 74%);
          mask: radial-gradient(closest-side, transparent 72%, #000 74%);
  animation: spin 9s linear infinite; }
.modo-real .brand-core { background: conic-gradient(from 0deg, var(--amber), var(--real), transparent 70%, var(--amber)); }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name strong { font-family: var(--head); font-size: 1.15rem; letter-spacing: 0.2em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-name small { color: var(--muted); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; margin-top: 0.15rem; }

.modo-switch { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); }
.modo-btn { border: 0; border-radius: 999px; padding: 0.35rem 1.1rem; cursor: pointer;
  background: transparent; color: var(--muted); display: flex; flex-direction: column;
  align-items: center; line-height: 1.1; transition: background 0.25s var(--ease), color 0.25s; }
.modo-btn b { font-family: var(--head); letter-spacing: 0.18em; font-size: 0.82rem; }
.modo-btn small { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.08em; }
.modo-btn:hover { color: var(--text); }
.modo-btn.activo[data-modo="local"] { background: var(--grad); color: #04060c; }
.modo-btn.activo[data-modo="real"] { background: var(--grad-real); color: #1a0508;
  box-shadow: 0 0 18px rgba(255, 93, 108, 0.45); }
.modo-btn:disabled { opacity: 0.5; cursor: wait; }

.status-cluster { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
.status-pill { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.3rem 0.75rem; font-family: var(--mono); font-size: 0.64rem;
  background: var(--panel); color: var(--muted); backdrop-filter: blur(10px); white-space: nowrap; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.status-pill.online { color: var(--text); }
.status-pill.online i { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.status-pill.aviso i { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.status-pill.error { color: var(--text-soft); }
.status-pill.error i { background: var(--err); box-shadow: 0 0 8px var(--err); }
.persona select { background: var(--panel); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 0.3rem 0.7rem; font-family: var(--mono); font-size: 0.68rem; }

.banda-real { border: 1px solid rgba(255, 93, 108, 0.5); background: var(--real-soft); color: #ffd0d5;
  border-radius: var(--radius-sm); padding: 0.4rem 0.9rem; text-align: center;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; }

/* ── Escenario ── */
.stage { flex: 1; display: grid; grid-template-columns: 270px minmax(0, 1fr) 250px; gap: 0.9rem; min-height: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.85rem; overflow-y: auto; backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.section-label { font-family: var(--mono); color: var(--accent); font-size: 0.64rem;
  letter-spacing: 0.18em; margin: 0.9rem 0 0.5rem; }
.modo-real .section-label { color: var(--amber); }
.section-label:first-child { margin-top: 0; }

.pending-count { color: var(--err); font-family: var(--mono); }
.pending-list { display: flex; flex-direction: column; gap: 0.5rem; }
.pending-item { position: relative; border: 1px solid var(--line-strong); overflow: hidden;
  border-radius: var(--radius-sm); padding: 0.6rem 0.7rem 0.6rem 0.95rem; font-size: 0.8rem;
  background: var(--panel-2); animation: entra 0.35s var(--ease); }
.pending-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
.pending-item.real::before { background: var(--grad-real); }
.pending-item h4 { margin: 0 0 0.35rem; font-size: 0.82rem; font-family: var(--head); font-weight: 600; }
.pending-item dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.5rem; }
.pending-item dt { color: var(--muted); font-size: 0.7rem; }
.pending-item dd { margin: 0; font-size: 0.74rem; word-break: break-word; }
.pending-item .avisos { margin: 0.4rem 0 0; color: var(--amber); font-size: 0.7rem; }
.pending-buttons { display: flex; gap: 0.4rem; margin-top: 0.55rem; }
.pending-buttons button { flex: 1; border: 0; background: var(--grad); color: #04060c;
  border-radius: 999px; padding: 0.38rem 0.5rem; font-family: var(--head);
  font-weight: 700; font-size: 0.72rem; cursor: pointer; }
.pending-item.real .pending-buttons button.ok { background: var(--grad-real); color: #1a0508; }
.pending-buttons .cancel { background: transparent; color: var(--text-soft); border: 1px solid var(--line-strong); }
.pending-buttons button:disabled { opacity: 0.5; cursor: wait; }

.guardrail-card, .memory-stat { border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem; margin-top: 0.6rem; background: rgba(255, 255, 255, 0.02); }
.guardrail-card span, .memory-stat span { display: block; font-family: var(--mono);
  font-size: 0.58rem; color: var(--muted); letter-spacing: 0.14em; }
.guardrail-card strong, .memory-stat strong { font-family: var(--head); font-size: 0.88rem; word-break: break-word; }
.guardrail-card small, .memory-stat small { display: block; color: var(--muted); font-size: 0.7rem; margin-top: 0.25rem; }

.chips { display: flex; flex-direction: column; gap: 0.35rem; }
.chips button { text-align: left; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
  color: var(--text-soft); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; font-size: 0.74rem;
  cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.chips button:hover { border-color: var(--accent); color: var(--text); }

.abrir-crm { display: block; margin-top: 0.7rem; font-family: var(--mono); font-size: 0.7rem; text-decoration: none; }
.audit-list { display: flex; flex-direction: column; gap: 0.3rem; }
.audit-item { font-family: var(--mono); font-size: 0.62rem; color: var(--muted);
  border-bottom: 1px dashed var(--line); padding-bottom: 0.3rem; word-break: break-word; }
.audit-item b { color: var(--text); font-weight: 600; }
.audit-item .t-real { color: var(--real); }

/* ── Centro ── */
.center-stage { display: flex; flex-direction: column; min-height: 0; gap: 0.6rem; align-items: center; }
.core { position: relative; width: 74px; height: 74px; flex: none; }
.core i { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--violet) 40%, transparent 65%, transparent 80%, var(--accent));
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 90%);
          mask: radial-gradient(closest-side, transparent 88%, #000 90%);
  animation: spin 8s linear infinite; }
.core b { position: absolute; inset: 19px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff 0%, rgba(79, 216, 245, 0.95) 18%, rgba(139, 124, 255, 0.85) 55%, #0b1024 100%);
  box-shadow: 0 0 30px rgba(79, 216, 245, 0.45), 0 0 70px rgba(139, 124, 255, 0.3);
  animation: pulse 3s ease-in-out infinite; }
.modo-real .core i { background: conic-gradient(from 0deg, var(--amber), var(--real) 40%, transparent 65%, transparent 80%, var(--amber)); }
.modo-real .core b { background: radial-gradient(circle at 36% 30%, #fff 0%, rgba(255, 181, 71, 0.95) 18%, rgba(255, 93, 108, 0.85) 55%, #1a0710 100%);
  box-shadow: 0 0 30px rgba(255, 181, 71, 0.4), 0 0 70px rgba(255, 93, 108, 0.3); }
.core.pensando i { animation-duration: 1.4s; }
.core.hablando b { animation: pulse 0.7s ease-in-out infinite; }
.core.escuchando b { animation: pulse 1.2s ease-in-out infinite; filter: saturate(1.4); }

.messages { flex: 1; width: min(880px, 100%); overflow-y: auto; display: flex;
  flex-direction: column; gap: 0.6rem; padding: 0.2rem 0.4rem; }
.message { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; max-width: 92%; backdrop-filter: blur(10px); animation: entra 0.3s var(--ease); }
.message.persona { align-self: flex-end; border-color: rgba(139, 124, 255, 0.45); background: var(--violet-soft); }
.message.error { border-color: var(--err); }
.message.sistema { border-style: dashed; color: var(--text-soft); }
.message .speaker { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--accent); }
.modo-real .message .speaker { color: var(--amber); }
.message.persona .speaker { color: var(--text-soft); }
.message p { margin: 0.25rem 0 0; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.message small { display: block; margin-top: 0.4rem; color: var(--muted); font-family: var(--mono); font-size: 0.6rem; }
.message .enlaces { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.message .enlaces a { font-family: var(--mono); font-size: 0.62rem; text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.15rem 0.55rem; }
.message .repetir { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.75rem; padding: 0; margin-left: 0.4rem; }
.message .repetir:hover { color: var(--text); }

.voice-state { display: flex; align-items: center; gap: 0.6rem; font-family: var(--mono);
  font-size: 0.72rem; color: var(--text-soft); min-height: 1.2rem; max-width: min(880px, 100%); }
.voice-state #voice-state-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wave { display: inline-flex; gap: 3px; align-items: center; height: 16px; }
.wave i { width: 3px; height: 100%; background: var(--accent); border-radius: 2px; animation: wave 0.9s ease-in-out infinite; }
.modo-real .wave i { background: var(--amber); }
.wave i:nth-child(2) { animation-delay: 0.1s; } .wave i:nth-child(3) { animation-delay: 0.2s; }
.wave i:nth-child(4) { animation-delay: 0.3s; } .wave i:nth-child(5) { animation-delay: 0.4s; }

.command-row { display: flex; gap: 0.6rem; width: min(880px, 100%); align-items: stretch; }
.mic { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--line-strong);
  background: var(--panel-2); color: var(--text); border-radius: 999px; padding: 0.35rem 1rem 0.35rem 0.4rem;
  cursor: pointer; flex: none; transition: border-color 0.2s, box-shadow 0.2s; }
.mic-orb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); }
.modo-real .mic-orb { background: var(--grad-real); }
.mic-orb svg { width: 20px; height: 20px; fill: #04060c; }
.mic-text { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.mic-text strong { font-family: var(--head); font-size: 0.85rem; }
.mic-text small { color: var(--muted); font-family: var(--mono); font-size: 0.58rem; }
.mic[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 22px rgba(79, 216, 245, 0.35); }
.mic[aria-pressed="true"] .mic-orb { animation: pulse 1s ease-in-out infinite; }
.mic:disabled { opacity: 0.45; cursor: not-allowed; }

.composer { flex: 1; display: flex; align-items: flex-end; gap: 0.35rem; border: 1px solid var(--line-strong);
  background: var(--panel-2); border-radius: 22px; padding: 0.35rem 0.4rem 0.35rem 0.9rem; min-width: 0; }
.composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 0.92rem; padding: 0.55rem 0; max-height: 160px; min-width: 0; }
.composer textarea::placeholder { color: var(--muted); }
.composer button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--text-soft); cursor: pointer; flex: none; display: grid; place-items: center; }
.composer button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.composer #send-button { background: var(--grad); color: #04060c; border: 0; font-weight: 700; }
.modo-real .composer #send-button { background: var(--grad-real); }
.composer #send-button:disabled { opacity: 0.5; cursor: wait; }
.hint { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; text-align: center; }

.statusbar { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--muted); }
.statusbar a { color: var(--muted); text-decoration: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1100px) {
  .stage { grid-template-columns: 240px minmax(0, 1fr); }
  #panel-der { display: none; }
}
.pendientes-movil { display: none; }

@media (max-width: 760px) {
  .hud { height: auto; min-height: 100vh; padding: 0.7rem 16px calc(0.7rem + env(safe-area-inset-bottom)); }
  .stage { grid-template-columns: 1fr; }
  #panel-izq { order: 2; max-height: none; }
  /* Las confirmaciones, encima del micrófono; no repetidas abajo. */
  #panel-izq > .section-label:first-child, #pending-list { display: none; }
  .pendientes-movil { display: flex; width: 100%; }
  .center-stage { order: 1; min-height: 72vh; }
  .topbar { justify-content: center; }
  .status-cluster { justify-content: center; }
  .command-row { flex-direction: column; }
  .mic { justify-content: center; padding: 0.6rem 1.2rem 0.6rem 0.6rem; }
  .mic-orb { width: 56px; height: 56px; }
  .mic-orb svg { width: 26px; height: 26px; }
  .mic-text strong { font-size: 1.05rem; }
  .hint { display: none; }
  .foot-center { display: none; }
}

/* ── Entrar (servidor) ── */
.entrar { max-width: 380px; margin: 0 auto; padding: 12vh 16px 2rem; display: flex; flex-direction: column;
  align-items: center; gap: 0.4rem; }
.entrar h1 { font-family: var(--head); letter-spacing: 0.3em; margin: 0.8rem 0 0; font-size: 1.5rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.entrar .sub { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--muted); margin: 0 0 1rem; }
.entrar form { width: 100%; display: flex; flex-direction: column; gap: 0.8rem; }
.entrar .boton { padding: 0.75rem; font-size: 0.95rem; }
.entrar .nota { color: var(--muted); font-size: 0.72rem; text-align: center; margin-top: 0.6rem; }

/* ── Ajustes ── */
.ajustes { max-width: 860px; margin: 0 auto; padding: 1rem 16px 3rem; }
.ajustes h1 { font-family: var(--head); letter-spacing: 0.08em; font-size: 1.3rem; margin: 0.6rem 0 0.3rem; }
.ajustes .intro { color: var(--text-soft); font-size: 0.9rem; margin: 0 0 1rem; }
.tarjeta { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 0.9rem; backdrop-filter: blur(14px); }
.tarjeta h2 { font-family: var(--head); font-size: 1rem; margin: 0 0 0.2rem; }
.tarjeta h2 .etq { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; border-radius: 999px;
  padding: 0.12rem 0.5rem; margin-left: 0.4rem; vertical-align: middle; }
.etq.local { background: var(--accent-soft); color: var(--accent); }
.etq.real { background: var(--real-soft); color: var(--real); }
.tarjeta > p { color: var(--muted); font-size: 0.8rem; margin: 0 0 0.7rem; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.9rem; }
.campos .ancho { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 0.25rem; }
.campo span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-soft); }
.campo small { color: var(--muted); font-size: 0.7rem; }
.campo input, .campo select { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-strong); color: var(--text);
  border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; font: inherit; font-size: 0.88rem; min-width: 0; }
.campo input:focus, .campo select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-soft); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; align-items: center; }
.boton { border: 1px solid var(--line-strong); background: transparent; color: var(--text); border-radius: 999px;
  padding: 0.45rem 1rem; cursor: pointer; font-family: var(--head); font-size: 0.8rem; }
.boton.principal { background: var(--grad); color: #04060c; border: 0; font-weight: 700; }
.boton:disabled { opacity: 0.5; cursor: wait; }
.resultado { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.resultado.ok { color: var(--ok); }
.resultado.mal { color: var(--err); }
.guardar-fijo { position: sticky; bottom: 0.8rem; display: flex; justify-content: flex-end; gap: 0.6rem; align-items: center;
  background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.45rem 0.5rem 0.45rem 1rem;
  backdrop-filter: blur(14px); }
@media (max-width: 640px) { .campos { grid-template-columns: 1fr; } }

.criterios { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.criterios li { font-size: 0.78rem; color: var(--muted); padding-left: 1.4rem; position: relative; }
.criterios li::before { content: "○"; position: absolute; left: 0.2rem; color: var(--muted); }
.criterios li.cumple { color: var(--text-soft); }
.criterios li.cumple::before { content: "✔"; color: var(--ok); }

/* ── Pruebas ── */
.lista-pruebas { list-style: none; padding: 0; margin: 0.9rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.prueba { display: grid; grid-template-columns: 28px 1fr; gap: 0.5rem; align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; background: rgba(255, 255, 255, 0.02); }
.prueba .icono { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; }
.prueba.ok .icono { background: rgba(94, 232, 160, 0.16); color: var(--ok); }
.prueba.fallo { border-color: rgba(255, 107, 122, 0.5); }
.prueba.fallo .icono { background: rgba(255, 107, 122, 0.16); color: var(--err); }
.prueba.saltada .icono { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.prueba strong { font-size: 0.85rem; }
.prueba small { color: var(--muted); font-family: var(--mono); font-size: 0.6rem; }
.prueba p { margin: 0.15rem 0 0; color: var(--text-soft); font-size: 0.78rem; word-break: break-word; }
.chip-enlace { display: block; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); color: var(--text-soft);
  border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font-size: 0.82rem; text-decoration: none; }
.chip-enlace:hover { border-color: var(--accent); color: var(--text); }
.buzon { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.7rem; }
.correo { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; background: rgba(255, 255, 255, 0.02); }
.correo summary { cursor: pointer; display: flex; flex-direction: column; gap: 0.1rem; }
.correo summary strong { font-size: 0.85rem; }
.correo summary small { color: var(--muted); font-family: var(--mono); font-size: 0.62rem; }
.correo pre { white-space: pre-wrap; font-family: var(--mono); font-size: 0.72rem; color: var(--text-soft);
  background: rgba(0, 0, 0, 0.25); border-radius: var(--radius-sm); padding: 0.6rem; margin: 0.6rem 0 0; }