/* Paquete 20 de Design (11/11/2026): 90a Registro de campaña, 91a Comunicado.
   Hoja propia del grupo, cargada en base.html después de styles.css.
   Sólo tokens del CRM; cada regla con el prefijo de su pantalla. */

/* ===================== 90a · Registro de una campaña ===================== */

.reg-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.reg-volver { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-muted); text-decoration: none; margin-bottom: 6px; }
.reg-volver:hover { color: var(--accent); filter: none; }
.reg-cab h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reg-cab .muted-note { margin: 6px 0 0; max-width: 72ch; }
.reg-estado { font-size: 11px; }

.reg-g { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.reg-izq { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.reg-lectura h3 { margin: 0 0 4px; }
.reg-lectura > .muted-note { margin: 0 0 14px; }
.reg-lectura .kpi-row { margin: 0; }
.reg-lectura .kpi-sub b { font-family: var(--font-mono); color: var(--ink); }
.reg-curso { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-muted); }
.reg-curso .ic { color: var(--revisar); margin-top: 1px; }
.reg-sinmedir { margin: 14px 0 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--ink-muted); }
.reg-sinmedir strong { color: var(--ink); }

.reg-tandas h3 { margin: 0 0 12px; }
.reg-tabla td { vertical-align: top; }
.reg-tabla td.mono, .reg-tabla td.der { font-variant-numeric: tabular-nums; }
.reg-c-est .sem-chip { white-space: nowrap; }
.reg-tabla td.reg-c-quien { min-width: 120px; }
.reg-quien { white-space: nowrap; }
.reg-tabla .reg-guion { color: var(--ink-faint); }
.reg-en-curso > td { background: var(--surface-2); }
.reg-parcial { color: var(--ink-muted); }
.reg-parcial small { display: block; font: 400 10.5px var(--font-body); color: var(--ink-faint); }
.reg-quien small { display: block; font-size: 11px; color: var(--ink-faint); font-family: var(--font-mono); }
.reg-nota { margin: 12px 0 0; max-width: 92ch; }

.reg-arm { padding: 16px 18px; display: flex; flex-direction: column; gap: 0; position: sticky; top: 76px; }
.reg-arm h3 { margin: 0 0 8px; }
.reg-arm dl { margin: 0; }
.reg-arm dl > div { padding: 11px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.reg-arm dt { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.reg-arm dd { margin: 0; font-size: 13px; color: var(--ink); }
.reg-arm dd .muted-note { margin: 2px 0 0; font-size: 12px; }
.reg-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.reg-canal { display: flex; flex-direction: column; gap: 4px; }
.reg-canal + .reg-canal { margin-top: 8px; }
.reg-canal b { font-weight: 600; }
/* Una espera no es un dato: ámbar, con ícono. */
.reg-espera { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--revisar); background: var(--revisar-soft); border: 1px solid var(--revisar-line); border-radius: var(--radius-pill); padding: 2px 9px; }
.reg-espera .ic { width: 13px; height: 13px; }

@media (max-width: 1150px) {
  .reg-g { grid-template-columns: minmax(0, 1fr); }
  .reg-arm { position: static; }
}
@media (max-width: 720px) {
  .reg-tandas { padding: 14px 0 0; }
  .reg-tandas h3, .reg-nota { padding: 0 14px; }
  .reg-tabla, .reg-tabla tbody, .reg-tabla tr, .reg-tabla td { display: block; }
  .reg-tabla thead { display: none; }
  .reg-tabla { border-radius: 0; border-left: 0; border-right: 0; }
  .reg-tabla tr { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
  .reg-tabla td { border: 0 !important; padding: 0 !important; text-align: left !important; }
  .reg-tabla td.reg-c-tanda, .reg-tabla td.reg-c-est, .reg-tabla td.reg-c-quien { grid-column: 1 / -1; }
  .reg-tabla td[data-et]::before { content: attr(data-et); display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
  .reg-tabla td.reg-c-quien::before { display: inline; content: attr(data-et) " · "; }
  .reg-volver { min-height: 44px; }
}

/* Agregado al llevarlo al CRM: lo que el prototipo no tenía. */
.reg-tabla .mono { font-family: var(--font-mono); }
.reg-vacio { margin: 0; }
.reg-curso .ic-sm { color: var(--revisar); margin-top: 1px; flex: none; }
.reg-chico { margin: 14px 0 0; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-muted); }
.reg-chico .ic-sm { flex: none; margin-top: 1px; }
.reg-espera .ic-sm, .reg-falta .ic-sm { width: 13px; height: 13px; }
/* Lo que falta (el texto) no es lo mismo que una espera (Meta): rojo, con su palabra. */
.reg-falta { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--no-otorgable); background: var(--no-otorgable-soft); border: 1px solid var(--no-otorgable-line); border-radius: var(--radius-pill); padding: 2px 9px; }

/* ===================== 91a · Comunicado nuevo / editar ===================== */

.com-cab { margin-bottom: 16px; }
.com-cab .muted-note { margin: 6px 0 0; max-width: 72ch; }
.com-volver { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-muted); text-decoration: none; margin-bottom: 6px; }
.com-volver:hover { color: var(--accent); filter: none; }

.com-g { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.com-izq { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.com-datos { display: flex; flex-direction: column; gap: 14px; }
.com-datos .ab-campo { max-width: 620px; }
.com-datos .ab-campo.com-nombre { max-width: 420px; }
.com-datos .ab-campo.com-nombre input { font-size: 15px; font-weight: 600; }
.com-cuenta { font: 500 10.5px var(--font-mono); color: var(--ink-faint); }
.com-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ab-campo.com-err input { border-color: var(--no-otorgable); box-shadow: 0 0 0 1px var(--no-otorgable); }
.com-msg { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; font-size: 12px; font-weight: 500; color: var(--no-otorgable); }
.com-msg .ic { width: 14px; height: 14px; margin-top: 1px; }
.com-acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }

.com-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.com-paso { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 12.5px; color: var(--ink-muted); }
.com-paso b { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.com-paso-n { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 600 10.5px var(--font-mono); color: var(--ink-muted); flex: none; }
.com-paso.es-actual { border-color: var(--accent); }
.com-paso.es-actual .com-paso-n { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-contrast); }

.com-canales h3 { margin: 0 0 12px; }
.com-canales td { vertical-align: middle; }
.com-canal { font-weight: 600; }
.com-est { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.com-est .ic { width: 13px; height: 13px; }
.com-canales .muted-note { margin: 12px 0 0; max-width: 80ch; }

.com-vars { padding: 16px 18px; position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; }
.com-vars h3 { margin: 0; }
.com-vars > .muted-note { margin: 0; }
.com-vars dl { margin: 0; display: flex; flex-direction: column; }
.com-vars dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.com-vars dt code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.com-vars dd { margin: 0; color: var(--ink-muted); }

@media (max-width: 1100px) {
  .com-g { grid-template-columns: minmax(0, 1fr); }
  .com-vars { position: static; }
}
@media (max-width: 720px) {
  .com-pasos { grid-template-columns: 1fr; }
  .com-acc .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .com-canales table, .com-canales tbody, .com-canales tr, .com-canales td { display: block; }
  .com-canales thead { display: none; }
  .com-canales tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .com-canales td { border: 0 !important; padding: 0 !important; text-align: left !important; }
  .com-canales td.com-c-btn { grid-column: 1 / -1; }
  .com-canales td.com-c-btn .btn-ghost { width: 100%; justify-content: center; min-height: 44px; }
  .com-volver { min-height: 44px; }
}

/* Agregado al llevarlo al CRM. La etiqueta va dentro de .com-lbl, así que
   no la alcanza `.ab-campo > label` de styles.css: se viste igual acá. */
.com-lbl label { font-size: 10.5px; font-weight: 500; line-height: 1.3; color: var(--ink-muted); }
.com-nota { margin: 0; }
.com-canales .mono { font-family: var(--font-mono); }
.com-est .ic-sm { width: 13px; height: 13px; }
.com-msg .ic-sm { width: 14px; height: 14px; margin-top: 1px; flex: none; }