/* EduTrack — Módulo «Comunicados» (SIS). Ver docs/COMUNICADOS.md.
   Reusa .an-head/.an-title/.an-sub/.tab-nav/.btn de anuncios.css y app.css; aquí solo va
   lo propio, con prefijo .com- para no chocar con nada. */

.com-vacio { padding: 40px 24px; color: #6b7280; font-size: 13.5px; }
.com-pill  { background:#f0f0f0; border-radius:10px; padding:1px 7px; font-size:11px; margin-left:4px; }

/* ── Tarjeta ─────────────────────────────────────────────────────── */
.com-card {
  border: 1px solid #ececf0; border-radius: 10px; padding: 16px 18px;
  margin: 0 24px 12px; background: #fff;
}
.com-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.com-title   { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #1b1f27; }
.com-resumen { margin: 0 0 10px; font-size: 13px; color: #6b7280; line-height: 1.5; }

.com-chip {
  font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px;
  background: #f4f4f6; color: #6b7280; white-space: nowrap;
}
.com-chip--newsletter { background:#eef4ff; color:#1d4ed8; }
.com-chip--comunicado { background:#eaf6ee; color:#1f9254; }
.com-chip--circular   { background:#fdf0e6; color:#9a4f00; }
.com-chip--dest       { background:#f4f4f6; color:#4b5563; }
.com-chip--borrador   { background:#f4f4f6; color:#9ca3af; }
.com-chip--archivado  { background:#f4f4f6; color:#9ca3af; }
.com-chip--prog       { background:#eef4ff; color:#1d4ed8; }
.com-chip--conf       { background:#fbe9ec; color:#980000; }

/* La medición. Va discreta a propósito: es información de gestión, no el contenido. */
.com-medicion {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 12px; color: #6b7280; padding: 8px 0; border-top: 1px dashed #ececf0;
}
.com-medicion b { color: #1b1f27; }
.com-sep { color: #d1d5db; }

.com-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; border-top: 1px solid #f4f4f6; padding-top: 10px; margin-top: 6px;
}
.com-meta     { font-size: 11.5px; color: #9ca3af; }
.com-acciones { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── El visor ────────────────────────────────────────────────────── */
.com-visor:empty { display: none; }
.com-visor { margin-top: 12px; }

/* El iframe del comunicado. Fondo blanco explícito: el HTML del diseñador puede no
   traerlo y heredaría el del SIS, cambiando cómo se ve respecto al portal. */
.com-frame {
  width: 100%; border: 1px solid #ececf0; border-radius: 8px;
  background: #fff; display: block;
}

/* ── Formulario ──────────────────────────────────────────────────── */
.com-form { padding: 0 24px 32px; max-width: 760px; }

.com-lbl {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #9ca3af; margin: 18px 0 6px;
}
.com-sublbl { font-size: 12px; font-weight: 600; color: #6b7280; margin: 10px 0 6px; }
.com-hint    { font-size: 12px; color: #9ca3af; margin: 6px 0 0; line-height: 1.5; }
.com-hint-in { font-weight: 400; color: #9ca3af; }

.com-in {
  width: 100%; padding: 8px 11px; border: 1px solid #ddd; border-radius: 6px;
  font-size: 13.5px; font-family: inherit; color: #1b1f27; background: #fff;
}
.com-in:focus { outline: 2px solid #1f9254; outline-offset: 1px; border-color: transparent; }

.com-tipos { display: flex; gap: 6px; flex-wrap: wrap; }
.com-tipo, .com-todo, .com-opt {
  border: 1px solid #ddd; background: #fff; border-radius: 20px;
  padding: 6px 14px; font-size: 12.5px; cursor: pointer; color: #4b5563;
}
.com-tipo.sel, .com-todo.sel, .com-opt.sel {
  border-color: #1f9254; background: #eaf6ee; color: #1f9254; font-weight: 600;
}
.com-opt:disabled { opacity: .4; cursor: not-allowed; }
.com-opt-n { color: #9ca3af; font-weight: 400; font-size: 11px; }
.com-opts { display: flex; gap: 6px; flex-wrap: wrap; }

/* Cuando está marcado «Todo el colegio», los grados y grupos se apagan en vez de
   desaparecer: así se ve que siguen ahí y que la opción de arriba los reemplaza. */
.com-grupo-wrap.off { opacity: .45; pointer-events: none; }

.com-alcance {
  margin: 14px 0 0; font-size: 13px; color: #4b5563;
  background: #f8f8fa; border-radius: 6px; padding: 9px 12px;
}

.com-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.com-file-name { font-size: 12.5px; color: #6b7280; }

.com-prev { margin-top: 12px; }
.com-prev-lbl { font-size: 11.5px; color: #9ca3af; margin-bottom: 6px; }

.com-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #1b1f27; }
.com-check input { width: 15px; height: 15px; }

.com-form-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid #f4f4f6;
}

@media (max-width: 760px) {
  .com-card, .com-form { margin-left: 14px; margin-right: 14px; padding-left: 0; padding-right: 0; }
  .com-foot { flex-direction: column; align-items: flex-start; }
}

/* ══ Fase 4: el tablero de lectura ════════════════════════════════════════════════
   Mismos tokens que arriba (verde #1f9254, grises #6b7280/#9ca3af, rojo #980000) y la
   misma geometría de barra que el reporte del comedor en app.js: pista de 8 px, radio 4.
   Se repite a propósito para que las dos pantallas se lean como la misma herramienta. */

.com-volver {
  border: none; background: none; padding: 0 0 6px;
  font-size: 13px; color: #6b7280; cursor: pointer; font-family: inherit;
}
.com-volver:hover { color: #1b1f27; }

.com-h3 { margin: 26px 24px 10px; font-size: 13px; font-weight: 700;
          letter-spacing: .04em; color: #9ca3af; text-transform: uppercase; }

/* La nota explica la unidad de medida. Va en la pantalla y no solo en el commit porque
   «1 de 1.600» invita a asumir que son familias, y son personas. */
.com-nota {
  margin: 0 24px; padding: 9px 12px; background: #f8f8fa; border-radius: 6px;
  font-size: 12.5px; color: #6b7280; line-height: 1.55; max-width: 760px;
}
.com-aviso {
  margin: 10px 24px; padding: 9px 12px; background: #fbe9ec; border-radius: 6px;
  font-size: 12.5px; color: #980000; line-height: 1.55; max-width: 760px;
}

/* ── Los números de arriba ──────────────────────────────────────── */
.com-kpis { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 24px 16px; }
.com-kpi {
  display: flex; flex-direction: column; gap: 2px; position: relative;
  border: 1px solid #ececf0; border-radius: 10px; padding: 12px 16px;
  min-width: 190px; background: #fff;
}
.com-kpi--chico { min-width: 110px; }
.com-kpi-n   { font-size: 22px; font-weight: 700; color: #1b1f27; line-height: 1.1; }
.com-kpi-l   { font-size: 12px; color: #6b7280; }
.com-kpi-pct {
  position: absolute; top: 12px; right: 16px;
  font-size: 13px; font-weight: 700; color: #1f9254;
}

/* ── Barras por grupo ───────────────────────────────────────────── */
.com-barras { padding: 0 24px; }
.com-barra {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 4px 6px; margin: 0 -6px; border: none; background: none;
  border-radius: 6px; cursor: pointer; font-family: inherit; text-align: left;
}
.com-barra:hover  { background: #f8f8fa; }
.com-barra.sel    { background: #eaf6ee; }
.com-barra-g      { width: 42px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: #1b1f27; }
.com-barra-pista  { flex: 1; max-width: 320px; height: 8px; background: #f0f0f0;
                    border-radius: 4px; overflow: hidden; }
.com-barra-fill   { display: block; height: 100%; background: #1f9254; border-radius: 4px; }
.com-barra-pct    { width: 42px; flex-shrink: 0; font-size: 12px; color: #6b7280; text-align: right; }
.com-barra-n      { font-size: 12px; color: #9ca3af; white-space: nowrap; }
.com-barra-n.falta { color: #980000; }
.com-barra-de     { color: #9ca3af; }

.com-link { border: none; background: none; padding: 0; font-family: inherit;
            font-size: inherit; color: #1f9254; cursor: pointer; text-decoration: underline; }

/* ── La tabla nominal ───────────────────────────────────────────── */
.com-excel { margin-left: auto; align-self: center; }

.com-tabla-wrap { margin: 0 24px; overflow-x: auto; border: 1px solid #ececf0; border-radius: 10px; }
.com-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.com-tabla th {
  text-align: left; padding: 9px 12px; background: #f8f8fa; color: #6b7280;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap; position: sticky; top: 0;
}
.com-tabla td { padding: 8px 12px; border-top: 1px solid #f4f4f6; color: #1b1f27; }
.com-tabla tbody tr:hover td { background: #fcfcfd; }
.com-td-min { color: #6b7280; white-space: nowrap; }

@media (max-width: 760px) {
  .com-kpis, .com-barras { padding-left: 14px; padding-right: 14px; }
  .com-h3, .com-nota, .com-aviso, .com-tabla-wrap { margin-left: 14px; margin-right: 14px; }
  .com-barra-n { display: none; }
  .com-excel { margin-left: 0; }
}

/* ══ Comunicados internos (al personal) ══════════════════════════════════════════
   Reusa todo lo de arriba: tarjeta, chips, barras, tabla, visor. Aquí va solo lo
   propio de las dos pantallas nuevas. */

/* El chip que distingue un comunicado interno en la lista de administración. Morado
   y no verde ni azul: los otros chips ya usan esos para tipo y audiencia, y lo que
   este responde es otra pregunta — a quién le habla. */
.com-chip--interno { background: #f1ecfd; color: #5b21b6; }

/* Las personas ya elegidas y las sugeridas del buscador del personal. */
.com-elegidas  { margin-bottom: 8px; }
.com-sugeridas { margin-top: 8px; }

/* ── «Mis comunicados»: la bandeja del personal ──────────────────── */

/* La burbuja del menú lateral. El position:relative se declara AQUÍ porque .menu-item
   en app.css no lo trae (verificado): sin él la burbuja se posicionaría contra el
   viewport y acabaría en una esquina de la pantalla. Va por id y no por clase para no
   cambiar el apilamiento de las otras 20 entradas del menú. */
#tab-mis-comunicados { position: relative; }
.mic-badge {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #980000; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* Un comunicado sin leer se marca con una barra a la izquierda, no con fondo de
   color: el contenido de la tarjeta ya es denso y un fondo competiría con el texto. */
.mic-card--nuevo { border-left: 3px solid #1f9254; }
.mic-chip--nuevo { background: #eaf6ee; color: #1f9254; }
.mic-chip--ok    { background: #f4f4f6; color: #6b7280; }