/* ============================================================================
   MATERIAL DE CAMPANA - estilos
   PALABRA DE VERIFICACION DE ESTE ARCHIVO: GUAYACAN
   ============================================================================
   Archivo propio: no toca ninguna clase de los demas. Todo con prefijo `cm-`.

   El molde visual es el mismo de las tarjetas de capacitacion, que es el que
   Damian eligio en octubre: fondo blanco, borde oscuro fino, esquinas de 3px
   y sombra dura desplazada. No se inventa un lenguaje nuevo para este modulo.

   🔴 LAS MEDIDAS ESTAN PENSADAS PARA EL CELULAR PRIMERO. Es donde se va a
   usar: el asesor abre esto parado, antes de subir una historia. En una
   pantalla angosta la grilla pasa a una sola columna y los botones crecen
   hasta 44px de alto, que es el minimo para tocar con el dedo sin errar.
   ============================================================================ */

.cm-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cm-titulo { margin: 0; font-size: 1.3rem; }
.cm-bajada { margin: 4px 0 0; color: var(--color-text-muted, #6b7280); font-size: .92rem; }
.cm-acciones-cab { display: flex; gap: 8px; flex-wrap: wrap; }

.cm-volver {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0 0 8px;
  color: var(--color-primary, #1B5A7D); cursor: pointer; font-size: .9rem;
}

/* ---------- avisos ---------- */
.cm-aviso {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; border-radius: 3px; margin-bottom: 13px;
  border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a);
  box-shadow: 2px 2px 0 rgba(44, 44, 42, .16);
  font-size: .92rem;
}
.cm-aviso-bien { background: var(--color-success-soft, #ECFDF3); }
.cm-aviso-mal { background: #FDECEA; }

/* ---------- la grilla de campanas ---------- */
.cm-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 13px;
}
.cm-tarjeta {
  display: flex; flex-direction: column; text-align: left;
  padding: 0; overflow: hidden; cursor: pointer;
  background: var(--color-surface, #FFFFFF);
  border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(44, 44, 42, .16);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cm-tarjeta:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(44, 44, 42, .18); }
.cm-tarjeta-vencida { opacity: .62; }

.cm-tapa {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-warm, #F5F5F3);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1.5px solid var(--color-borde-tarjeta, #2c2c2a);
}
.cm-tapa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-tapa-vacia { width: 30px; height: 30px; opacity: .35; }
.cm-sello {
  position: absolute; top: 7px; right: 7px;
  background: var(--color-accent, #B5472B); color: #FFFFFF;
  font-size: .72rem; padding: 3px 7px; border-radius: 2px;
}

.cm-tarjeta-cuerpo { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 4px; }
.cm-tarjeta-titulo { font-size: .98rem; line-height: 1.25; }
.cm-tarjeta-desc { font-size: .86rem; color: var(--color-text-muted, #6b7280); }
.cm-tarjeta-pie {
  margin-top: 3px; font-size: .82rem; color: var(--color-text-muted, #6b7280);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.cm-sep { opacity: .5; }

/* ---------- las piezas ---------- */
.cm-piezas { display: flex; flex-direction: column; gap: 14px; }
.cm-pieza {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 15px;
  padding: 14px;
  background: var(--color-surface, #FFFFFF);
  border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(44, 44, 42, .16);
}
.cm-pieza-vista {
  background: var(--color-surface-warm, #F5F5F3);
  border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a);
  border-radius: 3px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 150px;
}
.cm-pieza-vista img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cm-pieza-video {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 18px; text-decoration: none; font-size: .88rem;
  color: var(--color-primary, #1B5A7D);
}
.cm-pieza-video .icon-svg { width: 34px; height: 34px; }

.cm-pieza-datos { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.cm-bloque {
  padding: 10px 12px; border-radius: 3px;
  background: var(--color-surface-warm, #F5F5F3);
  border-left: 3px solid var(--color-primary, #1B5A7D);
}
.cm-bloque-instr {
  background: var(--aviso-info-fondo, #EEF4F8);
  border-left-color: var(--color-accent, #B5472B);
}
.cm-etiqueta {
  display: flex; align-items: center; gap: 5px;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-muted, #6b7280); margin-bottom: 4px;
}
.cm-etiqueta .icon-svg { width: 13px; height: 13px; }
/* 🔴 `pre-wrap` y no `pre`: el texto se escribe con saltos de linea a mano y
   hay que respetarlos, pero sin que una linea larga desborde la tarjeta en el
   celular. `break-word` es lo que evita el desborde. */
.cm-texto { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; font-size: .93rem; line-height: 1.45; }

.cm-pieza-botones { display: flex; gap: 8px; flex-wrap: wrap; }

.cm-editor { margin-top: 2px; }
.cm-editor summary { cursor: pointer; font-size: .88rem; color: var(--color-primary, #1B5A7D); }
.cm-editor[open] summary { margin-bottom: 10px; }

/* ---------- formularios ---------- */
.cm-form { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.cm-campo { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; }
.cm-campo > span { font-weight: 600; }
.cm-campo small { color: var(--color-text-muted, #6b7280); font-size: .82rem; }
/* 🔴 EL PADDING VA ACA, EXPLICITO. En octubre un select y un input quedaron
   con 14px de diferencia de alto porque la clase compartida del sistema no
   trae padding. No se arregla alla para no mover el resto: se pone aca. */
.cm-input, .cm-campo textarea {
  padding: 9px 12px; font-size: .94rem; line-height: 1.3;
  border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a);
  border-radius: 3px;
  background: var(--color-surface, #FFFFFF);
  font-family: inherit;
  width: 100%; box-sizing: border-box;
}
.cm-campo textarea { resize: vertical; }

.cm-soltar {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 18px; text-align: center;
  border: 2px dashed var(--color-borde-tarjeta, #2c2c2a);
  border-radius: 4px;
  background: var(--color-surface-warm, #F5F5F3);
  font-size: .9rem;
}
.cm-soltar-activo { background: var(--color-primary-soft, #E8F1F7); }
.cm-soltar-icono { width: 30px; height: 30px; opacity: .55; }
.cm-soltar small { color: var(--color-text-muted, #6b7280); font-size: .82rem; }
.cm-soltar-link { color: var(--color-primary, #1B5A7D); cursor: pointer; text-decoration: underline; }
.cm-elegidos {
  margin-top: 7px; padding: 6px 11px; border-radius: 2px;
  background: var(--color-success-soft, #ECFDF3);
  border: 1.5px solid var(--color-success, #157F3D);
  font-size: .86rem;
}

.cm-sumar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 12px 13px; margin-bottom: 14px;
  background: var(--color-surface-warm, #F5F5F3);
  border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a);
  border-radius: 3px;
}
.cm-sumar-archivo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; cursor: pointer; font-size: .9rem;
  background: var(--color-surface, #FFFFFF);
  border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a);
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(44, 44, 42, .18);
}
.cm-sumar-video { display: flex; gap: 8px; flex: 1 1 320px; min-width: 240px; }
.cm-sumar-video .cm-input { flex: 1 1 auto; }

.cm-ver-viejas {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 13px; font-size: .88rem;
  color: var(--color-text-muted, #6b7280); cursor: pointer;
}

.cm-vacio {
  text-align: center; padding: 42px 20px;
  color: var(--color-text-muted, #6b7280);
}
.cm-vacio h3 { margin: 10px 0 5px; color: var(--color-text, #1f2937); }
.cm-vacio p { margin: 0; font-size: .92rem; }
.cm-vacio-icono { width: 36px; height: 36px; opacity: .4; }

/* ---------- el celular ---------- */
@media (max-width: 700px) {
  .cm-pieza { grid-template-columns: 1fr; }
  .cm-pieza-vista { min-height: 0; aspect-ratio: 4 / 3; }
  .cm-grilla { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* 44px es el minimo para tocar con el dedo sin errar. Mas chico, el asesor
     toca "Borrar" cuando queria "Compartir". */
  .cm-pieza-botones .btn-primario,
  .cm-pieza-botones .btn-secundario,
  .cm-pieza-botones .btn-peligro { min-height: 44px; flex: 1 1 140px; justify-content: center; }
}
@media (max-width: 420px) {
  .cm-grilla { grid-template-columns: 1fr; }
}