/* Kuaderno — el trato.

   Poco CSS a propósito: la tarjeta reusa .barra-fuera/.barra-dentro, .chip,
   .opcion, .mini y .ayuda del resto de la app. Lo único propio es el bloque de
   la tarjeta y el premio, que es la línea que tiene que leerse primero. */

.trato {
  border: 2px solid var(--trazo-suave, #d8d3c6);
  padding: 12px 14px;
  margin: 10px 0;
  background: var(--tarjeta, transparent);
}

/* Cumplido: se destaca sin cambiar de tamaño. Es la única vez que esta tarjeta
   pide atención, así que se la damos entera. */
.trato.listo { border-color: var(--primario, #1d3fbf); }

.tr-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tr-cab b { font-family: var(--fuente-titulo, inherit); }
.tr-cab .ic { flex: none; }
.tr-dias {
  margin-left: auto;
  font-size: .8rem;
  opacity: .7;
}

/* El premio es lo que hay que leer primero: es la razón de que la tarjeta
   exista. Va más grande que el resto y sin abreviar. */
.tr-premio {
  margin: 4px 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
}

.trato .mini {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.trato .campo { margin-top: 10px; }
.trato .principal { margin-top: 10px; }
.trato .enlace { margin-top: 6px; }

/* Los ejemplos de premio: chips que rellenan el campo de arriba. Se ven como
   sugerencias y no como opciones excluyentes, porque no lo son. */
.tr-ejemplos { margin: -4px 0 14px; }
.tr-ejemplos .chip { font-weight: 400; }

.tr-metas .opcion.sel { border-color: var(--primario, #1d3fbf); }