/* Sistema de estilos compartido — alineado a la plantilla de presentación de Assemp.
   --color-accent es lo único que cada empresa puede personalizar (color de marca);
   el resto de la paleta y la tipografía se mantienen fijas para conservar el estilo. */
:root {
  --color-bg: #FFFFFF;
  --color-accent: #0B6E8F;
  --color-title: #222222;
  --color-body: #2B2B2B;
  --color-line: #CCCCCC;
  --color-positive: #2E7D5B;
  --color-negative: #C00000;
  --color-secondary: #6B6B6B; /* antes #A8A8A8 (2,4:1): por debajo del 4,5:1 de WCAG AA para texto */

  --font-family: 'Calibri', Arial, sans-serif;

  /* Escala tipográfica de la plantilla (pt → px, redondeado) */
  --fs-cover-title: 50px;   /* 38pt */
  --fs-section-label: 17px; /* 12.5pt, negrita */
  --fs-title: 37px;         /* 28pt, negrita */
  --fs-subtitle: 20px;      /* 15pt, cursiva */
  --fs-body: 18px;          /* 14pt */
  --fs-footer: 16px;        /* 12pt */
}

.page-header {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 40px 36px;
  text-align: center;
}
.section-label {
  font-size: var(--fs-section-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin: 0 0 14px;
}
.page-divider {
  border: none;
  border-top: 1px solid var(--color-line);
  width: 64px;
  margin: 0 auto 22px;
}
.page-title {
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--color-title);
  margin: 0 0 10px;
  line-height: 1.25;
}
.page-title em { color: var(--color-accent); font-style: normal; }
.page-subtitle {
  font-size: var(--fs-subtitle);
  font-style: italic;
  color: var(--color-secondary);
  margin: 0;
  line-height: 1.5;
}
.page-footer {
  font-size: var(--fs-footer);
  color: var(--color-secondary);
  text-align: center;
  padding: 0 0 30px;
}

.box { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 8px; }
.box-positive { border-color: var(--color-positive); }
.box-negative { border-color: var(--color-negative); }

/* Hilo de mensajes denunciante↔RSII — compartido entre seguimiento.html y panel.html */
.msg-list { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 82%; }
.msg.rsii { margin-right: auto; }
.msg.denunciante { margin-left: auto; }
.msg-author { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary); margin-bottom: 3px; }
.msg.denunciante .msg-author { text-align: right; }
.msg-bubble { display: inline-block; text-align: left; background: #F7F9FA; border: 1px solid var(--color-line); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--color-body); white-space: pre-wrap; }
.msg.denunciante .msg-bubble { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.msg-meta { font-size: 11px; color: var(--color-secondary); margin-top: 3px; }
.msg.denunciante .msg-meta { text-align: right; }
.msg-empty { font-size: 13px; color: var(--color-secondary); text-align: center; padding: 12px 0; }

/* Adjuntos del caso — compartido entre seguimiento.html y panel.html */
.attach-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--color-line); border-radius: 8px; margin-bottom: 6px; font-size: 13px; }
.attach-item-name { flex: 1; color: var(--color-accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-item-meta { font-size: 11px; color: var(--color-secondary); white-space: nowrap; }
.attach-empty { font-size: 13px; color: var(--color-secondary); }

/* Móvil (E-1): la cabecera decorativa ocupaba ~340px de alto en un iPhone SE (375px de
   ancho) antes de llegar al primer botón — casi la mitad de la pantalla solo en
   márgenes y tipografía de portada. Se reduce padding y escala tipográfica sin cambiar
   el diseño de escritorio, que sigue leyendo estos mismos tokens sin tocar. */
@media (max-width: 480px) {
  .page-header { padding: 26px 20px 20px; }
  .page-title { font-size: 27px; }
  .page-subtitle { font-size: 15px; }
  .section-label { font-size: 14px; }
  .msg { max-width: 92%; }
}


/* ── Accesibilidad (E-2) ─────────────────────────────────────────────────────────── */
/* Foco visible para quien navega con teclado: el borde por defecto del navegador se
   pierde sobre botones de color de marca. Solo con teclado (:focus-visible), no al clic. */
:focus-visible {
  outline: 3px solid #1D4ED8;
  outline-offset: 2px;
  border-radius: 3px;
}
.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;
}
/* Enlace para saltar la cabecera: invisible hasta que recibe el foco con Tab. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: #fff; color: #111; padding: 10px 16px; border-radius: 6px;
  border: 2px solid #1D4ED8; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Selector de idioma de la gestión interna (public/js/i18n.js) */
.lang-switch { display: inline-flex; gap: 2px; border: 1px solid var(--color-line); border-radius: 999px; padding: 2px; background: #fff; }
.lang-switch button {
  border: 0; background: transparent; color: var(--color-secondary); font: inherit; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; cursor: pointer; letter-spacing: .04em;
}
.lang-switch button[aria-pressed="true"] { background: var(--color-accent); color: #fff; }
.page-header > .lang-switch { display: flex; width: max-content; margin: 0 0 14px auto; }
.landing-lang { display: flex; justify-content: flex-end; padding: 14px 16px 0; }
.rsii-topbar .lang-switch { border-color: rgba(255,255,255,.35); background: transparent; }
.rsii-topbar .lang-switch button { color: rgba(255,255,255,.85); }
.rsii-topbar .lang-switch button[aria-pressed="true"] { background: #fff; color: #0F172A; }