/* =============================================================================
   COMUNICADOS — escribir una carta y ponerle nombres detrás.

   DE DÓNDE SALE TODO LO QUE SE VE AQUÍ. Ni un color, ni una tipografía ni un
   radio inventados: las variables son las del panel (tokens.css) y los botones,
   las fichas y el vacío son los que ya existen (.usr-btn, .avi-vacio,
   .dash-h2). Lo único propio de esta pantalla son las tres piezas que no había:
   la rejilla de dos columnas, la chuleta del cuerpo y el marco de la vista
   previa.

   LA PANTALLA ES DE DOS COLUMNAS PORQUE SON DOS TRABAJOS. Izquierda: qué dice
   la carta. Derecha: a quién se le manda. Se hacen en días distintos y se miran
   a la vez — mientras se afina el titular se ve quién está esperando.

   Y SE APILAN POR DEBAJO DE 1100px, con la gente ARRIBA. En un portátil
   estrecho lo que se viene a hacer casi siempre es mandarle la carta al
   siguiente, no reescribir el tercer párrafo.
   ========================================================================== */

.com-doble {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.com-panel {
  display: grid;
  gap: 14px;
  padding: 20px 20px 22px;
  border: 1px solid var(--edge, rgba(157, 107, 255, .18));
  border-radius: 14px;
  background: rgba(157, 107, 255, .045);
}

.com-panel .dash-h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

/* El acuse de guardado. Aparece, dice que sí y se va: no es un cartel. */
.com-guardado {
  font-family: Rubik, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--lime, #a8f425);
  opacity: .9;
}
.com-guardado[data-mal="true"] { color: rgba(255, 120, 130, .95); }

/* --- La lista de campañas ------------------------------------------------- */

.com-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.com-tarjeta {
  display: grid;
  gap: 10px;
  padding: 16px 16px 14px;
  border: 1px solid var(--edge, rgba(157, 107, 255, .18));
  border-radius: 14px;
  background: rgba(157, 107, 255, .05);
  transition: border-color 140ms ease, transform 140ms ease;
}
.com-tarjeta:hover {
  border-color: rgba(157, 107, 255, .45);
  transform: translateY(-2px);
}

.com-tarjeta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.com-tarjeta-t { font-size: 16px; color: var(--ink, #eee); }

/* CUÁNTOS FALTAN, que es lo único que se quiere saber sin abrir la campaña.
   En verde solo cuando ya han salido todos: media campaña mandada no es una
   campaña hecha, y pintarla de verde diría que sí. */
.com-marcha {
  font-family: Rubik, system-ui, sans-serif;
  font-size: 12px;
  color: var(--ink-dim, #9a92b8);
  white-space: nowrap;
}
.com-marcha[data-fin="true"] { color: var(--lime, #a8f425); }

.com-tarjeta-asunto {
  margin: 0;
  font-family: Rubik, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-dim, #9a92b8);
}

.com-tarjeta-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.com-chapa {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(168, 244, 37, .13);
  color: var(--lime, #a8f425);
  font-family: Rubik, system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: .02em;
}

.com-aviso {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 3px solid #ffb43d;
  border-radius: 0 10px 10px 0;
  background: rgba(255, 180, 61, .08);
  font-family: Rubik, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #e8dfc4;
}
.com-aviso b { color: #ffb43d; }

/* --- Las casillas de la carta --------------------------------------------- */

.com-campo { display: grid; gap: 5px; }
.com-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.com-k {
  font-family: Rubik, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim, #9a92b8);
}

.com-ayuda {
  font-family: Rubik, system-ui, sans-serif;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(154, 146, 184, .75);
}

.com-input,
.com-area {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--edge, rgba(157, 107, 255, .2));
  border-radius: 8px;
  background: rgba(11, 7, 20, .55);
  color: var(--ink, #eee);
  font-family: Rubik, system-ui, sans-serif;
  font-size: 14px;
}
.com-input:focus, .com-area:focus { border-color: rgba(157, 107, 255, .6); outline: 0; }

/* EL CUERPO EN MONOESPACIADA. Se escribe con marcas al principio de la línea
   —«## », «- », «| »— y en una tipografía proporcional esas marcas no se alinean
   entre sí: la lista parece torcida aunque esté bien escrita. */
.com-area {
  font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  min-height: 260px;
}

/* La chuleta de las marcas, pegada debajo del cuadro. Sin ella hay que
   acordarse de seis cosas entre campaña y campaña, que son meses. */
.com-chuleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px 14px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(11, 7, 20, .4);
}
.com-chuleta-f { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.com-chuleta code {
  color: var(--lime, #a8f425);
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 11.5px;
  white-space: nowrap;
}
.com-chuleta small {
  overflow: hidden;
  font-family: Rubik, system-ui, sans-serif;
  font-size: 11px;
  color: rgba(154, 146, 184, .7);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.com-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 9px;
  align-items: center;
  font-family: Rubik, system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--ink, #eee);
  cursor: pointer;
}
.com-check input { width: 16px; height: 16px; accent-color: #9d6bff; cursor: pointer; }
.com-check .com-ayuda { grid-column: 2; }

/* --- Los botones de abajo -------------------------------------------------- */

.com-acciones {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--edge, rgba(157, 107, 255, .16));
}
.com-probar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.com-probar .com-input { flex: 1 1 180px; width: auto; }
.com-dice {
  flex: 1 1 100%;
  font-family: Rubik, system-ui, sans-serif;
  font-size: 12px;
  color: var(--lime, #a8f425);
}
.com-dice[data-mal="true"] { color: rgba(255, 120, 130, .95); }

.usr-btn--fuerte {
  background: rgba(168, 244, 37, .16);
  color: var(--lime, #a8f425);
}
.usr-btn--fuerte:hover { background: rgba(168, 244, 37, .3); color: #fff; }

.com-peligro { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255, 85, 102, .16); }
.com-cab-t { display: grid; justify-items: start; gap: 4px; }

/* «‹ Comunicados» está escrito para un enlace, y aquí es un botón: sin esto sale
   con el fondo gris del navegador y una barra de trescientos píxeles debajo del
   título. Mismo apaño que en el editor de novedades. */
.com-cab-t .adm-back {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* --- La gente -------------------------------------------------------------- */

.com-alta { display: flex; flex-wrap: wrap; gap: 8px; }
.com-alta .com-input { flex: 1 1 140px; width: auto; }

.com-nadie {
  margin: 0;
  padding: 16px 16px;
  border: 1px dashed var(--edge, rgba(157, 107, 255, .25));
  border-radius: 12px;
  font-family: Rubik, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim, #9a92b8);
}
.com-nadie strong { color: var(--ink, #eee); }

.com-gente { display: grid; gap: 4px; }

.com-persona {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(157, 107, 255, .05);
}
.com-persona:hover { background: rgba(157, 107, 255, .1); }

.com-persona-quien { display: grid; gap: 2px; min-width: 0; }
.com-persona-quien strong {
  overflow: hidden;
  font-size: 14px;
  color: var(--ink, #eee);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.com-correo {
  overflow: hidden;
  font-family: Rubik, system-ui, sans-serif;
  font-size: 11.5px;
  color: rgba(154, 146, 184, .8);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Las llaves que le tocaron, en monoespaciada y con las letras separadas: se
   dictan por teléfono y se teclean a mano, y así el 0 no se confunde con la O.
   Van en fila y se parten si no caben: son tres, no una. */
.com-llaves { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.com-llave {
  justify-self: start;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(168, 244, 37, .1);
  color: var(--lime, #a8f425);
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: .08em;
}

.com-estado {
  font-family: Rubik, system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--ink-dim, #9a92b8);
  white-space: nowrap;
}
.com-persona[data-estado="bien"] .com-estado { color: var(--lime, #a8f425); }
.com-persona[data-estado="mal"] .com-estado { color: rgba(255, 120, 130, .95); }

/* --- Ver cómo queda -------------------------------------------------------- */

.com-mirar {
  position: fixed;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: rgba(6, 4, 12, .82);
  inset: 0;
}
.com-mirar-caja {
  display: grid;
  grid-template-rows: auto auto 1fr;
  width: min(720px, 100%);
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--edge, rgba(157, 107, 255, .25));
  border-radius: 16px;
  background: #120d20;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.com-mirar-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--edge, rgba(157, 107, 255, .18));
}
.com-mirar-k {
  font-family: Rubik, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim, #9a92b8);
}
.com-mirar-x {
  padding: 2px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-dim, #9a92b8);
  font-size: 16px;
  cursor: pointer;
}
.com-mirar-x:hover { background: rgba(157, 107, 255, .2); color: #fff; }

/* EL ASUNTO SE ENSEÑA APARTE, encima del correo. Es la mitad del trabajo de una
   campaña y dentro del HTML no se ve: en la bandeja va en otra pantalla. */
.com-mirar-asunto {
  padding: 12px 16px;
  border-bottom: 1px solid var(--edge, rgba(157, 107, 255, .12));
  background: rgba(157, 107, 255, .07);
  font-family: Rubik, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #eee);
}

.com-mirar-marco {
  width: 100%;
  min-height: 320px;
  border: 0;
  background: #0d0819;
}

@media (max-width: 1100px) {
  /* La gente arriba: en estrecho lo que se viene a hacer es mandarle la carta
     al siguiente, no reescribir el tercer párrafo. */
  .com-doble { grid-template-columns: 1fr; }
  .com-doble > .com-panel:last-child { order: -1; }
}

@media (max-width: 560px) {
  .com-fila2 { grid-template-columns: 1fr; }
  .com-persona { grid-template-columns: minmax(0, 1fr) auto; }
  .com-persona .com-estado { grid-column: 1; }
}