/* ============================================================
   dentsu Social Media Platform — sistema de diseño dentsu Intelligence Editorial
   Fuente: dentsu-tender/DESIGN.md + web/app/globals.css

   Reemplaza al sistema iProspect (ip.css). Reglas del contrato:
   - Lienzo Natural White (#e6e6e6), no blanco puro. Paneles planos separados
     por regla y espacio, no una tarjeta envolviendo cada fragmento.
   - El texto es negro, gris (--muted) o blanco. Solo los enlaces usan indigo.
   - Los acentos viven en trazos, filetes, bordes e indicadores lineales: nunca
     son fondo de botón, badge ni alerta.
   - Signal (rojo-naranja) solo para lo crítico, errores y acciones destructivas.
     Una advertencia que no es falla usa indigo (--state-attention).
   - El color nunca es la única señal: va con palabra, forma o icono.
   - Bordes rectos (2 px). Píldoras solo en badges.
   - Halcom por Adobe Fonts (licencia dentsu), fallback oficial Verdana.

   Tender es Next + Tailwind v4 y esta app es HTML/CSS/JS: se copia el
   lenguaje, no el código. Los valores deben coincidir con los de Tender.
   ============================================================ */

:root {
  /* Superficies neutrales */
  --canvas: #e6e6e6;
  --panel: #b4b9c3;
  --panel-soft: rgba(180, 185, 195, 0.24);
  --ink-zone: #323232;
  --ink: #000000;
  --muted: #4f4f4f;
  --reverse: #ffffff;

  /* Acentos de línea y data-viz. NO son fondos. */
  --signal: #ff5023;
  --link: #646ed2;
  --positive-line: #aaff6e;
  --teal-line: #008287;
  --soft-line: #f0bebe;
  --cyan-line: #00d2e6;

  /* La separación es una línea, no una sombra ni una tarjeta. */
  --rule: rgba(0, 0, 0, 0.22);
  --rule-soft: rgba(0, 0, 0, 0.12);

  /* Estados: siempre con etiqueta y forma además del color. */
  --state-ok: var(--teal-line);
  --state-attention: var(--link);
  --state-critical: var(--signal);

  --space-page: clamp(1rem, 3vw, 3rem);
  --content-max: 90rem;
  --header-h: 4.25rem;
  --font: 'halcom', Verdana, Geneva, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--canvas); color: var(--ink); }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Jerarquía por escala y peso, nunca por texto de color. */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }

/* Enlaces: la única excepción de color en texto. */
a { color: var(--link); text-underline-offset: 0.18em; text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--panel); color: var(--ink); }

/* Foco visible y con separación: requisito de accesibilidad del sistema. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.shell-header :focus-visible { outline-color: var(--reverse); }

button, input, select, textarea { font: inherit; color: inherit; }
button, select, summary, label[for] { cursor: pointer; }

/* Las cifras se comparan en vertical: sin esto, las columnas bailan. */
table, .tabular { font-variant-numeric: tabular-nums; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ico { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* La firma de señal: seis segmentos de 4 px. Una vez, arriba del header. */
.signal-rule { display: grid; grid-template-columns: repeat(6, 1fr); height: 4px; }
.signal-rule i:nth-child(1) { background: var(--signal); }
.signal-rule i:nth-child(2) { background: var(--link); }
.signal-rule i:nth-child(3) { background: var(--positive-line); }
.signal-rule i:nth-child(4) { background: var(--teal-line); }
.signal-rule i:nth-child(5) { background: var(--soft-line); }
.signal-rule i:nth-child(6) { background: var(--cyan-line); }

.skip-link {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--reverse); color: var(--ink); border: 2px solid var(--ink);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

/* ─── Shell: header oscuro con la navegación ─────────────────────────────── */

.shell-header { position: sticky; top: 0; z-index: 40; background: var(--ink-zone); color: var(--reverse); }

.shell-bar {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-page);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: inherit; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.055em; }
.brand-sep { width: 1px; height: 1rem; background: rgba(255, 255, 255, 0.45); }
.brand-name { font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em; }

.shell-nav { display: flex; gap: 0.25rem; flex: 1; min-width: 0; }

/* Activo por peso y línea, nunca con una píldora de color. */
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.nav-item:hover { color: var(--reverse); border-bottom-color: rgba(255, 255, 255, 0.45); }
.nav-item.active { color: var(--reverse); border-bottom-color: var(--reverse); }

/* Marca y estado de sincronización: a la derecha del header. */
.shell-tools { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

/* Select sobre la zona oscura: mismo contrato del field, invertido. */
.marca-select {
  min-height: 2.75rem;
  padding: 0 2rem 0 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  background-color: var(--ink-zone);
  color: var(--reverse);
  font-size: 0.8125rem;
  font-weight: 700;
}
.marca-select:hover { border-color: var(--reverse); }

.estado-sync { display: flex; align-items: center; font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); white-space: nowrap; }

/* Cuántas alertas abiertas hay: el número acompaña a la palabra. */
.nav-count {
  min-width: 1.25rem;
  padding: 0 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  font-size: 0.6875rem;
  line-height: 1.1rem;
  text-align: center;
}

/* ─── Área de trabajo ────────────────────────────────────────────────────── */

.main { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-page) 4rem; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.page-head h1 { font-size: 1.25rem; letter-spacing: -0.03em; }
.page-head .sub { font-size: 0.875rem; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.content { padding-top: 1.5rem; }

/* Rótulo de sección: mayúsculas cortas, nunca como cuerpo. */
.eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }

.section-title {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.section-title .tabular { font-weight: 400; color: var(--muted); letter-spacing: 0; }

/* ─── Botones ────────────────────────────────────────────────────────────── */

.btn {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink-zone);
  color: var(--reverse);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.btn:hover { background: var(--ink); text-decoration: none; }
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
/* Compatibilidad: el landing y el JS usan btn-primary. Es el primario. */
.btn-primary { background: var(--ink-zone); color: var(--reverse); }

.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:not(:disabled):hover { background: var(--panel); color: var(--ink); }

/* Destructivo: la regla avisa; el fondo sigue neutral. */
.btn-destructive { border-top: 4px solid var(--signal); }

/* Compacto para filas de tabla y de la cola: mantiene el área táctil de 44 px
   en alto con menos relleno lateral. */
.btn-sm { padding: 0 0.75rem; font-size: 0.8125rem; }

/* ─── Badges ─────────────────────────────────────────────────────────────── */

/* Borde y texto, nunca fondo de color. Las variantes cambian el filete. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}
.badge-ok { border-left: 3px solid var(--state-ok); }
.badge-attention { border-left: 3px solid var(--state-attention); }
.badge-critical { border-left: 3px solid var(--state-critical); }
.badge-strong { font-weight: 700; }

/* ─── Controles ──────────────────────────────────────────────────────────── */

.controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }

/* El field es el contenedor de label + control. Labels siempre visibles. */
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field label { font-size: 0.75rem; font-weight: 700; }

select, input[type="text"], input[type="email"], input[type="date"], input[type="password"], .editor-input {
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--canvas);
  color: var(--ink);
  font-size: 0.875rem;
}
::placeholder { color: var(--muted); }

/* Filtro segmentado: activo por peso y línea, como la navegación. */
.segmented { display: inline-flex; border-bottom: 1px solid var(--rule); }
.segmented button {
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ─── Cifras ─────────────────────────────────────────────────────────────── */

/* Fila de cifras separada por reglas, no un mosaico de tarjetas. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}
.kpi { padding: 1rem 1.25rem 1rem 0; }
.kpi + .kpi { padding-left: 1.25rem; border-left: 1px solid var(--rule-soft); }
.kpi-label { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.kpi-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 0.75rem; color: var(--muted); }

/* Indicador de estado: un cuadro, acompañado siempre de su palabra. */
.dot { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.4rem; vertical-align: 0.1em; }
.dot-ok { background: var(--state-ok); }
.dot-attention { background: var(--state-attention); }
.dot-critical { background: var(--state-critical); }
.dot-neutral { background: var(--panel); }

/* ─── Tablas ─────────────────────────────────────────────────────────────── */

/* Las tablas anchas scrollean en su contenedor, nunca la página. */
.table-wrap { border-top: 1px solid var(--rule); overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

thead th {
  text-align: left;
  padding: 0.75rem 0.875rem 0.75rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody td { padding: 0.75rem 0.875rem 0.75rem 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
tbody tr:hover { background: var(--panel-soft); }

.cell-text { max-width: 22rem; overflow-wrap: anywhere; }
.cell-muted { color: var(--muted); }
.cell-nowrap { white-space: nowrap; }

.empty { padding: 3rem 0.875rem; text-align: center; color: var(--muted); font-size: 0.875rem; }

/* Respuesta de la propia marca: un filete neutro, no un fondo. */
tr.from-page td:first-child { box-shadow: inset 2px 0 0 var(--panel); padding-left: 0.5rem; }

.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--muted);
}
.pagination-btns { display: flex; gap: 0.5rem; }

/* ─── Comentarios ───────────────────────────────────────────────────────── */

/* Respuesta de la marca, anidada bajo el comentario que responde. */
.respuesta-marca {
  margin-top: 0.5rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--panel);
  font-size: 0.8125rem;
  color: var(--muted);
}
.respuesta-marca-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--ink); }

.check { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-bottom: 0.5rem; font-size: 0.875rem; }
.check input { width: 1.125rem; height: 1.125rem; accent-color: var(--ink-zone); }

/* ─── Alertas: cola + riel de estado ─────────────────────────────────────── */

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.5rem; align-items: start; }

/* El riel se CONSULTA mientras se recorre la cola. Las acciones viven en la
   columna de trabajo, no acá. */
.riel {
  position: sticky;
  top: calc(var(--header-h) + 4px + 1rem);
  /* Sticky y más alto que la pantalla deja el final inalcanzable: scroll propio. */
  max-height: calc(100vh - var(--header-h) - 4px - 2rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.riel-bloque { border-top: 1px solid var(--ink); padding-top: 0.75rem; }
.riel-cifra { font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.riel-lista { list-style: none; margin-top: 0.5rem; font-size: 0.875rem; }
.riel-lista li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; border-bottom: 1px solid var(--rule-soft); }
.riel-lista li:last-child { border-bottom: 0; }
.riel-nota { font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; }

/* Cabecera de la cola: con olas arriba, la cola puede quedar fuera de pantalla; el
   título y los filtros activos dicen qué se está viendo. */
.cola-zona { scroll-margin-top: calc(var(--header-h) + 4px + 1rem); }
.cola-cabecera { border-top: 1px solid var(--ink); padding-top: 0.75rem; margin-bottom: 1rem; }
.cola-cabecera .section-title { margin: 0; }
.cola-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.cola-chips:empty { display: none; }
.cola-chips-label { font-size: 0.75rem; color: var(--muted); }
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font: inherit; font-size: 0.8125rem; color: var(--reverse); background: var(--ink-zone);
  border: 0; padding: 0.25rem 0.5rem 0.25rem 0.625rem; cursor: pointer;
}
.chip:hover { background: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.cola.cargando { opacity: 0.4; transition: opacity 0.15s; }
/* Tras un cambio de filtro: un filete Signal que se desvanece. */
.cola-zona.cola-cambio .cola-cabecera { animation: cola-cambio 1.2s ease-out; }
@keyframes cola-cambio {
  0% { box-shadow: inset 0 3px 0 var(--signal); }
  100% { box-shadow: inset 0 3px 0 transparent; }
}

.cola-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }

.cola { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }

/* Cada alerta: un panel plano con filete izquierdo según la urgencia. */
.alerta {
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--panel);
  padding: 1rem 1.25rem;
}
/* Solo los tres bordes neutros: el filete izquierdo es la urgencia y no cambia. */
.alerta:hover { border-top-color: var(--rule); border-right-color: var(--rule); border-bottom-color: var(--rule); }
.alerta.sev-3 { border-left-color: var(--state-critical); }
.alerta.sev-2 { border-left-color: var(--state-attention); }
.alerta.resuelta { border-left-color: var(--state-ok); }

.alerta-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.alerta-resumen { font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; }
.alerta-texto { margin-top: 0.5rem; padding-left: 0.75rem; border-left: 1px solid var(--rule); overflow-wrap: anywhere; }
.alerta-meta { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.75rem; color: var(--muted); }
.alerta-meta a { display: inline-flex; align-items: center; gap: 0.25rem; }

.sugerida { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--rule-soft); }
.sugerida-label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.sugerida-texto { margin-top: 0.375rem; font-size: 0.875rem; }
/* Lo que la IA no puede saber queda marcado para que nadie lo publique tal cual. */
.sugerida-texto mark { background: transparent; color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--state-attention); }

.alerta-acciones { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Publicar respuesta (simulación). Panel plano dentro de la alerta, separado
   por una regla; el rótulo de simulación va arriba y en palabras, no solo color. */
.publicar { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--rule); }
.publicar-sim {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border: 1px dashed var(--ink);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.publicar-destino { margin-top: 0.625rem; font-size: 0.875rem; }
.publicar-label { display: block; margin-top: 0.75rem; font-size: 0.75rem; font-weight: 700; }
.publicar-texto {
  display: block; width: 100%; margin-top: 0.25rem;
  min-height: 5.5rem; resize: vertical;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ink); border-radius: 2px;
  background: var(--canvas); color: var(--ink);
  font-size: 0.9375rem; line-height: 1.5;
}
.publicar-estado { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.375rem; font-size: 0.75rem; min-height: 1.2rem; }
/* Lo que bloquea publicar: filete indigo (atención) + texto, no rojo. */
.publicar-aviso.activo { padding-left: 0.5rem; border-left: 3px solid var(--state-attention); }

/* Vista previa: el hilo como se vería en la red. */
.hilo { margin-top: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--rule-soft); font-size: 0.875rem; }
.hilo-autor { font-weight: 700; font-size: 0.8125rem; }
.hilo-respuesta { margin-top: 0.75rem; margin-left: 1.25rem; padding-left: 0.75rem; border-left: 2px solid var(--panel); }

.controls-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.25rem; }
.filtro-tema { font-size: 0.875rem; padding-left: 0.75rem; border-left: 3px solid var(--state-attention); }
.bar-label.link-btn { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Operación de SAC: plazo, responsable, notas, historial ───────────── */

.alerta-operacion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 0.625rem; }
.responsable { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; }
.responsable select { min-height: 2.25rem; padding: 0.25rem 0.5rem; font-size: 0.8125rem; font-weight: 400; }

/* Acción secundaria dentro de un texto: subrayada, sin peso de botón. */
.link-btn {
  min-height: 1.5rem;
  border: 0; background: none; padding: 0;
  color: var(--link); font-size: inherit; text-decoration: underline; text-underline-offset: 0.18em;
}
.alerta-historial { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--muted); }
.historial-lista { list-style: none; margin-top: 0.5rem; padding-left: 0.75rem; border-left: 2px solid var(--panel); font-size: 0.8125rem; display: flex; flex-direction: column; gap: 0.375rem; }
.historial-lista li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; }

.notas { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--rule-soft); }
.notas-lista { list-style: none; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.notas-lista li { padding-left: 0.75rem; border-left: 1px solid var(--rule); }
.notas-form { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }

.riel-lista-sola { margin-top: 0.5rem; font-size: 0.875rem; }

/* Menú de equipo en el header: details nativo, panel sobre el lienzo. */
.cuenta-menu { position: relative; }
.cuenta-menu summary {
  display: flex; align-items: center; gap: 0.4rem;
  min-height: 2.75rem; padding: 0 0.625rem;
  border: 1px solid transparent;
  font-size: 0.75rem; font-weight: 700;
  list-style: none;
}
.cuenta-menu summary::-webkit-details-marker { display: none; }
.cuenta-menu[open] summary, .cuenta-menu summary:hover { border-color: rgba(255, 255, 255, 0.45); }
.cuenta-panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 50;
  width: min(21rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--ink);
  background: var(--canvas); color: var(--ink);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.cuenta-panel select, .cuenta-panel input { width: 100%; }
.cuenta-sep { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--rule-soft); }
.cuenta-form { display: grid; gap: 0.5rem; }
.cuenta-form .btn { justify-self: start; }
.cuenta-sesion { display: grid; gap: 0.375rem; font-size: 0.8125rem; }
.cuenta-sesion .link-btn { justify-self: start; }
.cuenta-sla { display: grid; grid-template-columns: 1fr auto; gap: 0.375rem 0.75rem; align-items: center; font-size: 0.8125rem; }
.cuenta-sla input { width: 5.5rem; min-height: 2.25rem; padding: 0.25rem 0.5rem; }
.cuenta-sla .btn { grid-column: 1 / -1; justify-self: start; margin-top: 0.25rem; }

/* ─── Corrección y calibración de la IA ──────────────────────────────── */

.corregir { margin-top: 0.5rem; font-size: 0.75rem; }
.correccion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  margin-top: 0.5rem; padding: 0.625rem 0.75rem;
  border-left: 3px solid var(--state-attention);
  font-size: 0.8125rem;
}
.correccion label { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 700; }
.correccion select { min-height: 2.25rem; padding: 0.25rem 0.5rem; font-weight: 400; font-size: 0.8125rem; }

.calidad { margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid var(--ink); }
.calidad > .btn { margin-top: 0.75rem; }
.calibrar { margin-top: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink-zone); max-width: 52rem; }
.calibrar .alerta-texto { font-size: 1rem; }
.calibrar-opciones { border: 0; margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.calibrar-opciones legend { font-size: 0.75rem; font-weight: 700; margin-bottom: 0.25rem; }
.calibrar-sev { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; margin-top: 0.5rem; }
.chart-ancho { grid-column: 1 / -1; }

/* ─── Olas ───────────────────────────────────────────────────────────────── */

.olas { margin-bottom: 2rem; }
#olas-lista { display: flex; flex-direction: column; gap: 0.75rem; }
.ola {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--state-attention);
}
/* En curso: la regla Signal arriba y al costado. Es lo más urgente de la pantalla. */
.ola.ola-en_curso, .ola.rebrote { border-left-color: var(--state-critical); border-top: 4px solid var(--state-critical); }
/* Terminó sin atender: se quedó sin dueño. Sigue a la vista hasta que alguien la cierre. */
.ola.ola-sin_atender { border-left-color: var(--state-attention); }
/* Atendida: historial, sin peso visual. */
.ola.ola-atendida { border-left-color: var(--state-ok); grid-template-columns: 4rem minmax(0, 1fr); }
.ola.ola-atendida .ola-thumb { width: 4rem; height: 4rem; }
.ola.ola-atendida .ola-datos { display: none; }
.ola-cerrada { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.75rem; font-size: 0.875rem; }
.ola-cerrada .ico { margin-top: 0.2rem; color: var(--teal-line); }
.ola-cierre { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--rule-soft); display: grid; gap: 0.625rem; }
.ola-cierre fieldset { border: 0; display: grid; gap: 0.375rem; }
.ola-motivo { display: flex; gap: 0.5rem; align-items: center; font-size: 0.875rem; }
.olas-pie { font-size: 0.8125rem; color: var(--muted); }
.ola-thumb { width: 7rem; height: 7rem; object-fit: cover; background: var(--panel-soft); display: block; }
.ola-thumb.vacia, .post-thumb.vacia, .post-imagen.vacia { background: var(--panel-soft); }
.ola-titulo { margin-top: 0.5rem; font-size: 1.125rem; letter-spacing: -0.02em; }
.ola-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; margin-top: 0.75rem; }
.spark { display: block; max-width: 100%; height: auto; }
.spark-ventana { fill: var(--panel-soft); }
.spark-linea { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linejoin: round; }
.ola-dl { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8125rem; }
.ola-dl dt { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.ola-ejemplos { list-style: none; margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; }
.ola-ejemplos li { padding-left: 0.75rem; border-left: 1px solid var(--rule); }
.ola-sugerencia { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--rule-soft); }
.ola-sugerencia .sugerida-label { margin-top: 0.625rem; }
.ola-sugerencia .sugerida-label:first-child { margin-top: 0; }
.ola-recos { margin: 0.375rem 0 0 1.125rem; font-size: 0.875rem; }
.spinner { display: inline-block; vertical-align: middle; margin-right: 0.375rem; }

/* ─── Posts ──────────────────────────────────────────────────────────────── */

/* Una lista con reglas, no un mosaico de tarjetas iguales. */
.posts { list-style: none; border-top: 1px solid var(--rule); }
.post-fila {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.4fr) minmax(0, 1.4fr) 9rem auto;
  gap: 1.25rem;
  align-items: center;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.post-fila.con-alertas { box-shadow: inset 3px 0 0 var(--state-attention); padding-left: 0.75rem; }
.post-thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; display: block; }
.post-texto { font-size: 0.875rem; overflow-wrap: anywhere; }
.post-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.post-cifras dt { font-size: 0.6875rem; font-weight: 700; color: var(--muted); }
.post-cifras dd { font-size: 1rem; font-weight: 700; }
.cifra-alerta dd { box-shadow: inset 0 -2px 0 var(--state-attention); display: inline-block; }

.sent { display: flex; flex-direction: column; gap: 0.25rem; }
.sent-bar { display: flex; height: 0.5rem; background: var(--panel-soft); overflow: hidden; }
.sent-bar i { display: block; height: 100%; }
.s-pos { background: var(--teal-line); }
.s-neu { background: var(--panel); }
.s-neg { background: var(--signal); }
.sent-leyenda { font-size: 0.75rem; color: var(--muted); }

.post-cabecera { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; margin: 1.25rem 0 1.5rem; }
.post-imagen { width: 14rem; height: 14rem; object-fit: cover; display: block; }
.post-texto-completo { margin: 0.5rem 0 1rem; white-space: pre-line; overflow-wrap: anywhere; max-width: 60rem; }

.hilo-lista { list-style: none; border-top: 1px solid var(--rule); }
.hilo-item { padding: 0.875rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.875rem; overflow-wrap: anywhere; }
.hilo-item .alerta-head { margin-top: 0.375rem; }
.hilo-respuestas { list-style: none; margin: 0.5rem 0 0 1.25rem; padding-left: 0.75rem; border-left: 2px solid var(--panel); }
.hilo-respuestas .hilo-item { padding: 0.5rem 0; border-bottom: 0; }
.hilo-item.de-marca { color: var(--muted); }

/* ─── Mensajes: bandeja ───────────────────────────────────────────────── */

.bandeja { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 0; border-top: 1px solid var(--rule); min-height: 28rem; }
.conversaciones { list-style: none; border-right: 1px solid var(--rule); max-height: 70vh; overflow-y: auto; }
.conv {
  width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.875rem 1rem 0.875rem 0.75rem;
  border: 0; border-bottom: 1px solid var(--rule-soft); border-left: 3px solid transparent;
  background: none; font-size: 0.875rem;
}
.conv:hover { background: var(--panel-soft); }
.conv.activa { border-left-color: var(--ink); background: var(--panel-soft); }
.conv.con-alertas:not(.activa) { border-left-color: var(--state-attention); }
.conv-fila { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; }
.conv-texto { color: var(--ink); overflow-wrap: anywhere; }
.conversacion { padding: 1rem 1.5rem; }
.conv-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule-soft); }
.burbujas { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; margin: 1rem 0; }
.burbuja { max-width: 70%; padding: 0.625rem 0.875rem; border: 1px solid var(--rule); font-size: 0.875rem; overflow-wrap: anywhere; }
.burbuja.de-marca { align-self: flex-end; background: var(--panel-soft); border-color: var(--rule-soft); }
.burbuja-meta { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }

/* ─── Análisis: gráficos y barras ────────────────────────────────────────── */

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.chart-card { border-top: 1px solid var(--ink); padding-top: 0.75rem; }
.chart-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 0.875rem; }
.chart-box { position: relative; height: 14rem; }

.bars { display: flex; flex-direction: column; gap: 0.5rem; }
.bar-row { display: grid; grid-template-columns: 8rem 1fr 3rem; gap: 0.625rem; align-items: center; font-size: 0.8125rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* display:block es necesario, no cosmético: son <span> y height no aplica a
   elementos inline — sin esto el relleno no se dibuja. */
.bar-track { display: block; height: 0.375rem; background: var(--panel-soft); }
.bar-fill { display: block; height: 100%; background: var(--teal-line); }
.bar-n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ─── Avisos y estado de proceso ─────────────────────────────────────────── */

.banner {
  display: none;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--ink-zone);
  font-size: 0.875rem;
}
.banner.active { display: flex; }
.banner.ok { border-left-color: var(--state-ok); }
.banner.error { border-left-color: var(--state-critical); }

.notice {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--state-attention);
  font-size: 0.875rem;
}
.notice strong { font-weight: 700; }

/* Actividad en curso: un latido, no un spinner girando. */
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.spinner { width: 0.5rem; height: 0.5rem; flex-shrink: 0; background: var(--ink-zone); animation: latido 1.2s ease-in-out infinite; }

/* ─── Pie ────────────────────────────────────────────────────────────────── */

.shell-foot {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.5rem var(--space-page) 2rem;
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.shell-foot a { color: var(--muted); }
.shell-foot a:hover { color: var(--ink); }

/* ─── Landing ────────────────────────────────────────────────────────────── */

/* Mismo acceso que GEO Monitor: panel de marca a la izquierda, formulario a la derecha. */
.landing { min-height: calc(100vh - 4px); display: flex; align-items: center; padding: 3rem var(--space-page); }
.auth-layout {
  width: 100%;
  max-width: var(--content-max);
  min-height: min(720px, calc(100vh - 8rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  border: 1px solid var(--ink);
}
.auth-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 6vw, 6rem);
  background: var(--panel);
}
.auth-wordmark { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.055em; }
.auth-intro-texto { margin-top: auto; }
.auth-intro h1 { max-width: 13ch; margin: 1rem 0 1.5rem; font-size: clamp(1.85rem, 4vw, 3.75rem); line-height: 1.03; letter-spacing: -0.055em; }
.auth-lede { max-width: 38rem; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.auth-capabilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.auth-capabilities div { padding: 1rem; background: var(--panel); }
.auth-capabilities dt { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.auth-capabilities dd { margin: 0.25rem 0 0; font-size: 0.75rem; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 5rem); }
.auth-panel-heading { margin-bottom: 2rem; }
.auth-panel-heading h2 { margin: 0.4rem 0 0.6rem; font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
.auth-submit { width: 100%; }
.form-message { margin-bottom: 1.25rem; padding: 1rem; border: 1px solid var(--ink); border-left: 5px solid var(--signal); }
.auth-domains { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.75rem; }
.auth-legal { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.75rem; }
.auth-legal a { color: var(--muted); }
.auth-legal a:hover { color: var(--ink); }

@media (max-width: 1023px) {
  .auth-layout { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .landing { padding: 1rem; align-items: flex-start; }
  .auth-layout { min-height: 0; grid-template-columns: 1fr; }
  .auth-intro, .auth-panel { padding: 2rem 1.25rem; }
  .auth-capabilities { grid-template-columns: 1fr; }
  .auth-capabilities div { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: 0.5rem; }
  .auth-capabilities dd { margin: 0; }
}
@media (max-height: 720px) and (min-width: 768px) {
  .auth-capabilities, .auth-lede { display: none; }
}

/* ─── Páginas legales ────────────────────────────────────────────────────── */

.legal { max-width: 48rem; margin: 0 auto; padding: 0 var(--space-page) 5rem; }
.legal-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0;
  margin-bottom: 2.75rem;
  border-bottom: 1px solid var(--rule-soft);
}
.legal-brand { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.8125rem; }
.legal-nav a { color: var(--muted); }
.legal-nav a:hover { color: var(--ink); }
.legal-content h1 { font-size: 1.75rem; letter-spacing: -0.04em; margin-bottom: 0.375rem; }
.legal-meta { color: var(--muted); font-size: 0.8125rem; margin-bottom: 2.25rem; }
.legal-content h2 { font-size: 1rem; margin: 2.125rem 0 0.625rem; }
.legal-content p, .legal-content li { margin-bottom: 0.625rem; }
.legal-content ul, .legal-content ol { padding-left: 1.25rem; margin-bottom: 0.625rem; }
.legal-content code { background: var(--panel-soft); padding: 0.05rem 0.3rem; font-size: 0.8125rem; font-family: ui-monospace, monospace; }
.legal-content strong { font-weight: 700; }
.legal-footer { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-soft); font-size: 0.8125rem; color: var(--muted); }

/* ─── Informe semanal ─────────────────────────────────────────────────── */

.informe { max-width: 60rem; margin: 0 auto; padding: 2rem var(--space-page) 4rem; }
.informe-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ink); }
.informe-cabecera h1 { font-size: clamp(1.85rem, 4vw, 2.75rem); letter-spacing: -0.055em; margin: 0.25rem 0; }
.informe-acciones { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.informe-seccion { margin-top: 2rem; }
.informe-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; }
.informe-lectura { font-size: 1rem; font-weight: 700; }
.informe-lista { list-style: none; border-top: 1px solid var(--rule); }
.informe-lista li { padding: 0.75rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.25rem; }
.informe-pie { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); font-size: 0.75rem; color: var(--muted); }

/* Impresión: el informe en A4, sin controles ni cortes de sección a medias. */
@media print {
  @page { size: A4; margin: 14mm; }
  body, html { background: #fff; }
  .no-imprimir, .skip-link { display: none !important; }
  .informe { padding: 0; max-width: none; }
  .informe-seccion, .kpis, .informe-lista li { break-inside: avoid; }
  .signal-rule { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .bar-fill, .dot { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  a { color: var(--ink); }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

/* Bajo 1024 px el riel se apila arriba, repartido en grilla, para no empujar
   la cola fuera de la primera pantalla. */
@media (max-width: 1024px) {
  .post-fila { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .post-fila .post-cifras, .post-fila .sent, .post-fila > .btn { grid-column: 2; }
  .post-cabecera { grid-template-columns: minmax(0, 1fr); }
  .bandeja { grid-template-columns: minmax(0, 1fr); }
  .conversaciones { border-right: 0; max-height: 22rem; }
  .burbuja { max-width: 90%; }
  .workspace { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .riel { order: -1; position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem 1.5rem; }
}

/* Bajo 768 px el nav baja a su propia fila en vez de esconderse tras un botón. */
@media (max-width: 768px) {
  .shell-bar { flex-wrap: wrap; gap: 0 1rem; padding-top: 0.5rem; }
  .shell-nav { order: 3; flex: 0 0 100%; overflow-x: auto; margin: 0 -0.75rem; }
  .shell-tools { margin-left: auto; gap: 0.5rem; }
  .estado-sync, .solo-lectura { display: none; }
  .kpi { padding-right: 0.75rem; }
  .kpi + .kpi { padding-left: 0.75rem; }
  .bar-row { grid-template-columns: 6rem 1fr 2.5rem; }
  .alerta { padding: 0.875rem 1rem; }
  .ola { grid-template-columns: minmax(0, 1fr); }
  .ola-thumb { width: 100%; height: 10rem; }
  .post-imagen { width: 100%; height: 14rem; }
}

/* Motion: solo transform y opacity; con motion reducido, nada se mueve. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Recorrido de bienvenida ─────────────────────────────────────────── */

/* La capa tapa la página entera: mientras dura el recorrido no se hace clic afuera. */
.tour { position: fixed; inset: 0; z-index: 200; }
.tour-velo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
/* El foco ilumina el elemento con una sombra gigante que oscurece el resto. */
.tour-foco {
  position: fixed;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  outline: 2px solid var(--reverse);
  transition: top 200ms ease-out, left 200ms ease-out, width 200ms ease-out, height 200ms ease-out;
  pointer-events: none;
}
.tour-card {
  position: fixed;
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-top: 4px solid var(--ink);
  outline: none;
}
.tour-card.centro {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(34rem, calc(100vw - 2rem));
  border-top: 1px solid var(--ink);
}
.tour-contenido { padding: 1.25rem 1.5rem 1.25rem; display: grid; gap: 0.75rem; }
.tour-card.centro .tour-contenido { padding: 2rem 2rem 1.75rem; gap: 1rem; }
.tour-card h2 { font-size: 1.25rem; letter-spacing: -0.03em; line-height: 1.15; }
.tour-card.centro h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: -0.05em; }
.tour-cuerpo { display: grid; gap: 0.75rem; font-size: 0.9375rem; }
.tour-candado { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem; background: var(--panel); border-left: 4px solid var(--ink); font-size: 0.875rem; }
.tour-candado .ico { margin-top: 0.125rem; }
.tour-lista { margin-left: 1.25rem; display: grid; gap: 0.375rem; }
.tour-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.25rem; }
.tour-salir { margin-left: auto; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .tour-foco { transition: none; } }

/* ─── Solo lectura: lo que la app NO hace, siempre a la vista ─────────── */

.solo-lectura {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font-size: 0.75rem; white-space: nowrap; color: var(--reverse);
}
.shell-foot .foot-lectura { flex-basis: 100%; color: var(--muted); display: flex; gap: 0.5rem; align-items: center; }
.aviso-modulo { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.25rem; margin-bottom: 1rem; border: 1px solid var(--rule); border-left: 4px solid var(--state-attention); max-width: 52rem; }
.aviso-modulo p + p { margin-top: 0.25rem; }