/* ============================================================================
 * ui.css — Estilos de los módulos nuevos (iconos (i), popover, asesor, pegado)
 * Usa los MISMOS tokens semánticos del app (--app-*) para respetar la marca
 * Hoyos & Associates y heredar el modo oscuro automáticamente:
 *   --app-surface / -2 / -3   superficies (se invierten en dark)
 *   --app-line / -strong      bordes hairline
 *   --app-text / -2 / -muted  texto
 *   --app-brand               navy (claro) / paper (oscuro)
 *   --app-radius (4px) / --app-radius-sm (2px)   esquinas (marca = crisp)
 *   --app-shadow-1 / -2       sombras planas
 * Colores semáforo (verde/ámbar/rojo) son semánticos del asesor, con su
 * variante dark explícita (no existen como tokens de marca).
 * ========================================================================== */

/* ---- Icono (i) junto a los términos -------------------------------------- */
.info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; padding: 0;
  font: italic 700 10px/1 var(--font-body, sans-serif);
  color: var(--app-brand, #002C62);
  background: transparent;
  border: 1.3px solid currentColor;
  border-radius: 999px; cursor: help; vertical-align: middle;
  opacity: 0.5; transition: opacity .15s, background .15s, color .15s;
}
.info-i:hover { opacity: 1; background: var(--app-brand, #002C62); color: var(--app-surface, #fff); }
.kpi .label .info-i { color: var(--app-text-muted, #6E6E73); }

/* ---- Popover de definición ------------------------------------------------ */
.gloss-pop {
  position: absolute; z-index: 4000; max-width: 320px;
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-line-strong, #C9C8C5);
  border-radius: var(--app-radius, 4px);
  box-shadow: var(--app-shadow-2, 0 8px 24px rgba(20,20,20,.16));
  padding: 12px 14px;
}
.gloss-pop .gloss-term {
  font: 700 13px/1.2 var(--font-body, sans-serif);
  color: var(--app-brand, #002C62); margin-bottom: 6px; letter-spacing: .01em;
}
.gloss-pop .gloss-def {
  font: 400 13px/1.5 var(--font-body, sans-serif);
  color: var(--app-text-2, #323238);
}

/* ---- Asesor de contratación ---------------------------------------------- */
.hiring-wrap { display: grid; grid-template-columns: 360px 1fr; gap: var(--s-5, 24px); align-items: start; }
@media (max-width: 900px) { .hiring-wrap { grid-template-columns: 1fr; } }

.hiring-form .card, .hiring-out .card { margin-bottom: var(--s-4, 16px); }
.hiring-form .field { margin-bottom: 10px; }
.hiring-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Banner de recomendación (semáforo) */
.reco {
  border-radius: var(--app-radius, 4px); padding: 16px 18px; margin-bottom: var(--s-4,16px);
  border: 1px solid var(--app-line, rgba(20,20,20,.08)); background: var(--app-surface, #fff);
}
.reco .reco-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.reco .dot { width: 12px; height: 12px; border-radius: 999px; flex: none; }
.reco .reco-title { font: 700 16px/1.2 var(--font-body, sans-serif); color: var(--app-text, #141414); }
.reco .reco-why { font: 400 14px/1.55 var(--font-body, sans-serif); color: var(--app-text-2, #323238); }
.reco.go      { border-color: #b8e0c8; background: #f0faf4; }
.reco.go      .dot { background: var(--ha-green, #276B4B); }
.reco.caution { border-color: #ecd9a6; background: #fbf6e9; }
.reco.caution .dot { background: #B07D08; }
.reco.stop    { border-color: #e8bcbc; background: #fbeeee; }
.reco.stop    .dot { background: #A8332F; }
[data-theme="dark"] .reco.go      { background: #102018; border-color: #234a31; }
[data-theme="dark"] .reco.caution { background: #211c0f; border-color: #4a3f1f; }
[data-theme="dark"] .reco.stop    { background: #221212; border-color: #4a2424; }

/* Métricas del asesor */
.hiring-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hiring-metrics .m {
  border: 1px solid var(--app-line, rgba(20,20,20,.08)); border-radius: var(--app-radius-sm, 2px);
  padding: 12px; background: var(--app-surface, #fff);
}
.hiring-metrics .m .k { font: 600 11px/1.2 var(--font-body,sans-serif); letter-spacing:.08em; text-transform: uppercase; color: var(--app-text-muted,#6E6E73); }
.hiring-metrics .m .v { font: 700 22px/1.1 var(--font-display, monospace); color: var(--app-text,#141414); margin-top: 4px; }
.hiring-metrics .m .d { font: 400 12px/1.4 var(--font-body,sans-serif); color: var(--app-text-muted,#6E6E73); margin-top: 2px; }
.hiring-metrics .m.warn .v { color: #A8332F; }
[data-theme="dark"] .hiring-metrics .m.warn .v { color: #e98b86; }

/* Barra de banda de benchmark */
.band { margin: 6px 0 2px; }
.band .band-label { display:flex; justify-content: space-between; font: 400 12px/1.3 var(--font-body,sans-serif); color: var(--app-text-muted,#6E6E73); }
.band .band-track { position: relative; height: 8px; border-radius: 999px; background: var(--app-surface-3,#E2E2DE); margin-top: 6px; border:1px solid var(--app-line,rgba(20,20,20,.08)); }
.band .band-fill { position:absolute; top:0; bottom:0; background: var(--ha-green-light,#5DB17E); border-radius: 999px; opacity:.45; }
.band .band-mark { position:absolute; top:-3px; width: 3px; height: 14px; background: var(--app-brand,#002C62); border-radius: 1px; }
.band .band-you  { position:absolute; top:-5px; width: 3px; height: 18px; background: #A8332F; border-radius: 1px; }

.hiring-note { font: 400 12px/1.5 var(--font-body,sans-serif); color: var(--app-text-muted,#6E6E73); margin-top: 8px; }
.bench-editor summary { cursor: pointer; color: var(--app-text-2, #323238); }
.bench-editor table { width:100%; border-collapse: collapse; font: 400 12px/1.3 var(--font-body,sans-serif); color: var(--app-text-2,#323238); }
.bench-editor th, .bench-editor td { border-bottom: 1px solid var(--app-line, rgba(20,20,20,.08)); padding: 5px 6px; text-align: right; }
.bench-editor th:first-child, .bench-editor td:first-child { text-align: left; }
.bench-editor input { width: 84px; }

/* ---- Pegar desde hoja ----------------------------------------------------- */
.paste-modal-bg {
  position: fixed; inset: 0; background: rgba(6,18,38,.5); z-index: 5000;
  display: flex; align-items: center; justify-content: center;
}
.paste-modal {
  background: var(--app-surface,#fff); width: min(680px, 92vw); border-radius: var(--app-radius,4px);
  box-shadow: var(--app-shadow-2); padding: 20px; border: 1px solid var(--app-line-strong,#C9C8C5);
  color: var(--app-text, #141414);
}
.paste-modal h3 { margin-bottom: 8px; color: var(--app-text,#141414); }
.paste-modal textarea {
  width: 100%; min-height: 160px; font: 400 13px/1.4 ui-monospace, monospace;
  border: 1px solid var(--app-line-strong,#C9C8C5); border-radius: var(--app-radius-sm,2px);
  padding: 10px; resize: vertical; background: var(--app-bg, #fff); color: var(--app-text, #141414);
}
.paste-modal .paste-actions { display:flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.paste-modal .paste-help { font: 400 12px/1.5 var(--font-body,sans-serif); color: var(--app-text-muted,#6E6E73); margin: 6px 0 10px; }

/* ============================================================================
 * ELEVACIÓN VISUAL (polish impeccable) — refinamiento sobre la base de marca.
 * Solo color/borde/sombra/transform: nada de animar layout. Restrained.
 * ========================================================================== */
:root { --ease-q: cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---- Topbar: separador antes de los toggles (idioma/tema) ---------------- */
#btn-lang { position: relative; margin-left: 12px; }
#btn-lang::before {
  content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--app-line-strong);
}

/* ---- KPIs: acento navy superior + cifras niveladas ---------------------- */
.kpis { border-top: 2px solid var(--app-brand); }
[data-theme="dark"] .kpis { border-top-color: var(--ha-green-soft, #35B479); }
.kpi .value { letter-spacing: -0.015em; }

/* ---- Pestañas: subrayado animado --------------------------------------- */
.tabs .tab { position: relative; transition: color .18s var(--ease-q); }
.tabs .tab::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--app-brand);
  transform: scaleX(0); transform-origin: center; opacity: 0;
  transition: transform .26s var(--ease-q), opacity .2s ease;
}
.tabs .tab:hover::after { transform: scaleX(.45); opacity: .4; }
.tabs .tab.active { border-bottom-color: transparent !important; }
.tabs .tab.active::after { transform: scaleX(1); opacity: 1; }
.tab:focus-visible { outline: 2px solid var(--ha-green); outline-offset: -2px; border-radius: 2px; }

/* ---- Icono (i): leve realce al pasar + foco ----------------------------- */
.info-i { vertical-align: 1px; transition: opacity .15s, background .15s, color .15s, transform .15s var(--ease-q); }
.info-i:hover { transform: translateY(-1px); }
.info-i:focus-visible { outline: 2px solid var(--ha-green); outline-offset: 2px; opacity: 1; }

/* ---- Popover: entrada + caret que apunta al icono ----------------------- */
.gloss-pop { animation: glossIn .16s var(--ease-q); }
.gloss-pop::before {
  content: ""; position: absolute; top: -6px; left: var(--caret-x, 18px);
  width: 11px; height: 11px; background: var(--app-surface, #fff);
  border-left: 1px solid var(--app-line-strong); border-top: 1px solid var(--app-line-strong);
  transform: translateX(-50%) rotate(45deg);
}
@keyframes glossIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ---- Asesor: veredicto como badge con icono ---------------------------- */
.reco { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px 20px; }
.reco .dot { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; margin-top: 1px; }
.reco .dot::after { font: 800 15px/1 var(--font-body, sans-serif); color: #fff; }
.reco.go .dot::after { content: "\2713"; }       /* ✓ */
.reco.caution .dot::after { content: "\0021"; }  /* ! */
.reco.stop .dot::after { content: "\2715"; }     /* ✕ */
.reco .reco-title { font: 700 17px/1.25 var(--font-body, sans-serif); color: var(--app-text); margin-bottom: 7px; letter-spacing: -0.01em; }
.reco ul.reco-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.reco ul.reco-why li { position: relative; padding-left: 15px; font: 400 13.5px/1.5 var(--font-body, sans-serif); color: var(--app-text-2); text-wrap: pretty; }
.reco ul.reco-why li::before { content: "–"; position: absolute; left: 0; color: var(--app-text-muted); }

/* ---- Bandas de benchmark: track + marca recomendada + pill "tu oferta" -- */
.band { margin: 8px 0 2px; }
.band .band-track {
  position: relative; height: 7px; border-radius: 999px;
  background: var(--app-surface-3, #E2E2DE); border: 1px solid var(--app-line);
  margin: 28px 0 7px;
}
.band .band-mark {
  position: absolute; top: 50%; left: 0; width: 2px; height: 13px;
  transform: translate(-50%, -50%); background: var(--app-text-muted); border-radius: 2px;
}
.band .band-you {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  transition: left .25s var(--ease-q);
}
.band .band-you::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 13px; height: 13px; border-radius: 999px;
  background: var(--app-brand); border: 2px solid var(--app-surface); box-shadow: 0 0 0 1px var(--app-brand);
}
.band .band-you .you-pill {
  position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 700 11px/1 var(--font-display, monospace); color: var(--app-surface, #fff); background: var(--app-brand);
  padding: 3px 7px; border-radius: 999px;
}
.band .band-you .you-pill::after {
  content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 6px; height: 6px; background: var(--app-brand);
}
.band .band-you.out::before { background: #A8332F; box-shadow: 0 0 0 1px #A8332F; }
.band .band-you.out .you-pill { background: #A8332F; color: #fff; }
.band .band-you.out .you-pill::after { background: #A8332F; }
.band .band-label { display: flex; justify-content: space-between; align-items: baseline;
  font: 400 11.5px/1.3 var(--font-body, sans-serif); color: var(--app-text-muted); }
.band .band-mid-label { color: var(--app-text-2); font-weight: 600; }

/* ---- Métricas del asesor: cifras niveladas ----------------------------- */
.hiring-metrics .m { transition: border-color .15s ease; }
.hiring-metrics .m .v, .hiring-metrics .m .d { font-variant-numeric: tabular-nums; }
.hiring-metrics .m .v { letter-spacing: -0.01em; }

/* ---- Lista de escenarios: activo con marca ----------------------------- */
.scenario-item { transition: background .15s ease; }
.scenario-item.active .name { color: var(--app-brand); }
[data-theme="dark"] .scenario-item.active .name { color: var(--ha-paper); }

/* ---- Botón "Pegar desde hoja" como acción suave ------------------------ */
[data-paste-btn] { transition: background .15s, border-color .15s, color .15s; }

/* ---- Waterfall de salida ------------------------------------------------ */
.exit-wrap { display: grid; grid-template-columns: 340px 1fr; gap: var(--s-5, 24px); align-items: start; }
@media (max-width: 900px) { .exit-wrap { grid-template-columns: 1fr; } }
.exit-form .card, .exit-out .card { margin-bottom: var(--s-4, 16px); }
.exit-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exit-form .field { margin-bottom: 10px; }
.exit-table th.num, .exit-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.exit-table tr.exit-common td { font-weight: 600; border-top: 2px solid var(--app-line-strong); }
.exit-out .chart-card { height: 270px; position: relative; padding: 4px 0; }
.exit-out .chart-card canvas { max-height: 244px; }
input[type="range"] { accent-color: var(--app-brand, #002C62); }

/* ---- Banner de validación ---------------------------------------------- */
.validation-banner {
  border-radius: var(--app-radius, 4px); padding: 12px 16px; margin: 0 0 18px;
  border: 1px solid var(--app-line-strong, #C9C8C5); background: var(--app-surface, #fff);
  font: 400 13px/1.5 var(--font-body, sans-serif);
}
.validation-banner.has-error { border-color: #e8bcbc; background: #fbeeee; }
.validation-banner.warn-only { border-color: #ecd9a6; background: #fbf6e9; }
[data-theme="dark"] .validation-banner.has-error { background: #211212; border-color: #4a2424; }
[data-theme="dark"] .validation-banner.warn-only { background: #211c0f; border-color: #4a3f1f; }
.validation-banner .vb-title { font-weight: 700; color: var(--app-text, #141414); margin-bottom: 4px; }
.validation-banner ul { margin: 0; padding-left: 18px; }
.validation-banner li { color: var(--app-text-2, #323238); margin: 2px 0; }
.validation-banner li.vb-error { color: #A8332F; }
[data-theme="dark"] .validation-banner li.vb-error { color: #e98b86; }

/* ---- Vesting / tenedores ----------------------------------------------- */
.vesting-bar { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.vesting-bar .field { margin: 0; }
.vesting-table th, .vesting-table td { white-space: nowrap; }
.vesting-table th.num, .vesting-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.vesting-table input { width: 100%; min-width: 72px; }
.vesting-table input.vg-name { min-width: 130px; }
.vesting-table input.vg-sm { width: 62px; min-width: 0; }
.vesting-table tr.total td { font-weight: 600; border-top: 2px solid var(--app-line-strong); }

/* ---- Rondas (timeline) -------------------------------------------------- */
.rounds-wrap { display: grid; grid-template-columns: 1fr; gap: var(--s-4, 16px); }
.round-head, .round-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.7fr auto; gap: 8px; align-items: center; }
.round-head { font: 600 11px/1.2 var(--font-body, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--app-text-muted, #6E6E73); margin-bottom: 6px; padding: 0 2px; }
.round-row { margin-bottom: 6px; }
.round-row input { width: 100%; }
.rounds-table th.num, .rounds-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rounds-table tr.rd-now td { background: var(--app-surface-2, #ececE8); font-weight: 600; }
.rounds-table tr.rd-bad td { color: #A8332F; }
.rounds-wrap .chart-card { height: 250px; position: relative; margin-top: 8px; padding: 4px 0; }
.rounds-wrap .chart-card canvas { max-height: 226px; }

/* ---- Pestañas: ahora son 12; que envuelvan en vez de desbordar ---------- */
.tabs { flex-wrap: wrap; row-gap: 2px; }
.tabs .tab { padding-left: 14px; padding-right: 14px; }

/* ---- Fix de desborde: inputs number en celdas de grid ------------------- */
/* Los <input type=number> tienen un ancho intrínseco mínimo; en un grid
   (min-width:auto por defecto) no encogen y se salen del recuadro. Forzamos
   que llenen su celda y permitimos que la celda encoja. */
.cards .field, .cards .row, .cards .row > *, .cards .select-wrap { min-width: 0; }
.cards input, .cards select { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
/* Inputs PAREJOS en filas de 2 columnas con etiquetas de distinto número de líneas.
   Causa del desnivel: `.field` lleva `margin-bottom:12px` (salvo :last-child, que es
   0); ese margen recortaba el stretch del primer field, dejándolo ~12px más corto y
   su input a otra altura. Fix: mover el espaciado a la fila (margin-bottom) y anular
   el de los fields dentro de ella; con `grid-template-rows:1fr auto` la etiqueta (de
   N líneas) absorbe el sobrante y el input queda SIEMPRE al fondo → inputs alineados,
   etiquetas arriba. Funciona para 1, 2, 3+ líneas y en ES/EN. */
.cards .row { align-items: stretch; margin-bottom: 12px; }
.cards .row .field { margin-bottom: 0; grid-template-rows: 1fr auto; }
/* Mismo principio en las tarjetas de los módulos nuevos. */
.exit-form input, .exit-form select, .foa-form input, .foa-form select,
.round-terms input, .round-terms select, .sec-row input, .sec-row select { box-sizing: border-box; }

/* ---- Términos por-ronda (timeline multi-serie) -------------------------- */
.round-block { margin-bottom: 6px; }
.round-block .round-row { margin-bottom: 0; }
.rd-actions { display: flex; gap: 6px; justify-content: flex-end; }
.rd-actions .btn { padding: 4px 8px; }
.rd-terms-toggle.on { background: var(--app-brand, #002C62); color: var(--app-surface, #fff); }
.round-terms { margin: 8px 2px 4px; padding: 12px; border: 1px dashed var(--app-line, rgba(20,20,20,.14)); border-radius: 8px; background: var(--app-surface-2, #f6f6f3); }
.round-terms.hidden { display: none; }
.round-terms .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.round-terms .field { margin-bottom: 0; }
.round-terms input, .round-terms select { width: 100%; }
.rd-seniority-hint { font-weight: 600; color: var(--app-text-2, #323238); }

/* ---- Secundario / tender ------------------------------------------------ */
.secondary-wrap { display: grid; grid-template-columns: 380px 1fr; gap: var(--s-5, 24px); align-items: start; }
@media (max-width: 960px) { .secondary-wrap { grid-template-columns: 1fr; } }
.sec-form .card, .sec-out .card { margin-bottom: var(--s-4, 16px); }
.sec-head, .sec-row { display: grid; grid-template-columns: 1.4fr 0.7fr 0.8fr 0.8fr 1.2fr auto; gap: 6px; align-items: center; }
.sec-head { font: 600 10px/1.2 var(--font-body, sans-serif); letter-spacing: .05em; text-transform: uppercase; color: var(--app-text-muted, #6E6E73); margin: 8px 0 6px; padding: 0 2px; }
.sec-row { margin-bottom: 6px; }
.sec-row input, .sec-row select { width: 100%; min-width: 0; }
.sec-out .cap-table td.num, .sec-out .cap-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sec-out .cap-table tr.exit-common td { font-weight: 600; border-top: 2px solid var(--app-line-strong, rgba(20,20,20,.2)); }
.sec-out .cap-table tr.rd-now td { background: var(--app-surface-2, #ececE8); }

/* ---- 409A FMV ----------------------------------------------------------- */
.foa-wrap { display: grid; grid-template-columns: 360px 1fr; gap: var(--s-5, 24px); align-items: start; }
@media (max-width: 960px) { .foa-wrap { grid-template-columns: 1fr; } }
.foa-form .card, .foa-out .card { margin-bottom: var(--s-4, 16px); }
.foa-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.foa-form .field { margin-bottom: 10px; }
.foa-headline { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.foa-big { font: 800 34px/1 var(--font-display, monospace); color: var(--app-brand, #002C62); letter-spacing: -0.02em; }
.foa-sub { font: 400 13px/1.4 var(--font-body, sans-serif); color: var(--app-text-muted, #6E6E73); }
.foa-out .cap-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.foa-out .chart-card { height: 250px; position: relative; padding: 4px 0; }
.foa-out .chart-card canvas { max-height: 226px; }

/* ---- Sincronización en la nube ------------------------------------------ */
#btn-cloud { font-size: 16px; line-height: 1; }
.cloud-modal { max-width: 420px; }
.cloud-modal h3 { display: flex; align-items: center; gap: 8px; }
.cloud-modal input[type="email"], .cloud-modal input[type="text"] { margin-bottom: 4px; padding: 9px 11px; border: 1px solid var(--app-line-strong, rgba(20,20,20,.2)); border-radius: 8px; font: 400 14px/1.3 var(--font-body, sans-serif); box-sizing: border-box; }
.cloud-sync-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
.cloud-sync-actions .btn { width: 100%; }
.cloud-status { color: var(--app-brand, #002C62); font-weight: 600; }

/* ---- ASC 718 ------------------------------------------------------------ */
.asc718-wrap { display: grid; grid-template-columns: 360px 1fr; gap: var(--s-5, 24px); align-items: start; }
@media (max-width: 960px) { .asc718-wrap { grid-template-columns: 1fr; } }
.asc718-form .card, .asc718-out .card { margin-bottom: var(--s-4, 16px); }
.asc718-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.asc718-form .field { margin-bottom: 10px; }
.asc718-form input, .asc718-form select { box-sizing: border-box; width: 100%; }
.asc-headline { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.asc-big { font: 800 30px/1 var(--font-display, monospace); color: var(--app-brand, #002C62); letter-spacing: -0.02em; }
.asc-sub { font: 400 13px/1.4 var(--font-body, sans-serif); color: var(--app-text-muted, #6E6E73); }
.asc718-out .cap-table td.num, .asc718-out .cap-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.asc718-out .cap-table tr.exit-common td { font-weight: 600; border-top: 2px solid var(--app-line-strong, rgba(20,20,20,.2)); }

/* ---- Auditoría ---------------------------------------------------------- */
.audit-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.audit-bar #audit-filter { flex: 1 1 180px; min-width: 140px; }
.audit-bar .audit-check { font: 400 13px/1.3 var(--font-body, sans-serif); color: var(--app-text-2, #323238); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.audit-bar-spacer { flex: 1 1 auto; }
.audit-count { font-variant-numeric: tabular-nums; }
.audit-table th, .audit-table td { vertical-align: top; }
.audit-table .audit-ts { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--app-text-muted, #6E6E73); }
.audit-table .audit-path { font-family: var(--font-display, monospace); font-size: 12px; }
.audit-table .audit-old { color: #A8332F; }
.audit-table .audit-new { color: var(--ha-green, #276B4B); }
.audit-kind { font: 600 11px/1 var(--font-body, sans-serif); padding: 2px 7px; border-radius: 999px; background: var(--app-surface-3, #E2E2DE); color: var(--app-text-2, #323238); }
.audit-kind.audit-add { background: #e7f4ec; color: var(--ha-green, #276B4B); }
.audit-kind.audit-remove { background: #fbeeee; color: #A8332F; }

/* ---- Botón de cuenta / login en la topbar (cloud.js) -------------------- */
#btn-cloud { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btn-cloud.signed-in::before {
  content: "●"; color: var(--ha-green-soft, #35B479);
  font-size: 9px; vertical-align: middle; margin-right: 6px;
}