/* 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: #A8A8A8;

  --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%; }
}