/* Cromo del editor: lo que rodea al flyer, nunca el flyer. Todos los selectores empiezan
   por .cromo para que ninguna regla de aqui pueda alcanzar #lienzo ni su interior; el
   lienzo se estiliza solo desde compartido/css/lienzo.css.

   Los tres elementos que ENVUELVEN al lienzo (.cromo, .escenario, .marco) declaran
   unicamente propiedades no heredables. Un color, un line-height, un font o una variable
   --x en cualquiera de ellos se colaria dentro de #lienzo por herencia, el preview dejaria
   de coincidir con el PNG y esta aplicacion no tendria sentido. La tipografia del cromo
   vive en .panel, que cuelga del lienzo hacia el otro lado.
   pruebas/publico/lienzo-aislado.test.js vigila exactamente eso. */

.cromo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
  padding: 28px;
  min-height: 100vh;
  background: #12141a;
}

/* Toda la tipografia del cromo entra por aqui. .panel NO es padre del lienzo. */
.cromo .panel {
  color: #e8e8ea;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.cromo .encargo {
  flex: 1 1 380px;
  max-width: 460px;
}

.cromo .resultados {
  flex: 3 1 560px;
  min-width: 320px;
}

.cromo h1 {
  font-size: 20px;
  margin: 0 0 4px;
}

.cromo .pie {
  color: #8b8f9a;
  font-size: 13px;
  margin: 0 0 20px;
}

/* ------------------------------------------------------------------ controles */

.cromo input,
.cromo button,
.cromo select,
.cromo textarea {
  font: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #33374a;
  background: #1c1f2a;
  color: #e8e8ea;
}

.cromo textarea {
  width: 100%;
  resize: vertical;
  line-height: 1.45;
}

.cromo select {
  width: 100%;
}

.cromo button,
.cromo .boton {
  cursor: pointer;
}

.cromo button:disabled {
  opacity: 0.5;
  cursor: progress;
}

.cromo .campo {
  display: block;
  margin: 0 0 16px;
  border: 0;
  padding: 0;
}

.cromo .etiqueta {
  display: block;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #8b8f9a;
  margin: 0 0 6px;
  padding: 0;
}

.cromo .casilla {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cromo .casilla .etiqueta {
  margin: 0;
}

.cromo .contador {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #6f7480;
  margin-top: 4px;
}

.cromo .rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.cromo .acceso {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.cromo .acciones {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.cromo #generar {
  flex: 1;
  background: #3d5afe;
  border-color: #3d5afe;
  font-weight: 600;
}

/* ------------------------------------------------------------------ subida de imagenes */

.cromo .soltar {
  border: 1px dashed #3b4055;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  background: #171a23;
}

.cromo .soltar.encima {
  border-color: #3d5afe;
  background: #1b2033;
}

.cromo .pista {
  margin: 0 0 10px;
  color: #8b8f9a;
  font-size: 13px;
}

.cromo .soltar input {
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
}

.cromo .miniaturas {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cromo .miniaturas li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #171a23;
  border-radius: 8px;
  padding: 6px;
}

.cromo .miniaturas img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.cromo .miniaturas .nombre {
  flex: 1;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.cromo .miniaturas .quitar {
  padding: 6px 10px;
  font-size: 12px;
}

.cromo .ia-foto {
  margin-top: 12px;
}

.cromo .ia-controles {
  display: flex;
  gap: 8px;
}

.cromo .ia-controles select {
  flex: 1;
  width: auto;
}

.cromo .ia-controles button {
  flex: 1;
}

.cromo .marca {
  border: 1px solid #2a2e3c;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
}

.cromo summary {
  cursor: pointer;
  color: #b9bfd0;
  margin-bottom: 12px;
}

.cromo .paleta {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
}

.cromo .paleta input {
  flex: 1;
  height: 38px;
  padding: 2px;
}

/* ------------------------------------------------------------------ resultados */

.cromo .paso {
  min-height: 20px;
  margin: 0 0 14px;
  color: #9fb4ff;
  font-size: 13px;
}

.cromo .tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
}

.cromo .tarjeta {
  background: #171a23;
  border: 1px solid #262a38;
  border-radius: 12px;
  padding: 12px;
}

.cromo .tarjeta.elegida {
  border-color: #3d5afe;
}

.cromo .tarjeta.degradada {
  border-color: #6b4a2a;
}

.cromo .cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.cromo .arquetipo {
  font-size: 15px;
  margin: 0;
}

.cromo .puntaje {
  font-size: 12px;
  color: #8b8f9a;
  white-space: nowrap;
}

.cromo .marca-degradada {
  font-size: 12px;
  color: #f0b429;
  margin: 0 0 10px;
}

.cromo .lamina {
  background: #0d0f14;
  border-radius: 8px;
  overflow: hidden;
  min-height: 180px;
}

.cromo .lamina img {
  width: 100%;
  height: auto;
  display: block;
}

.cromo .razonamiento {
  font-size: 13px;
  color: #b9bfd0;
  margin: 10px 0 0;
}

.cromo .reintento {
  font-size: 12px;
  color: #8b8f9a;
  margin: 6px 0 0;
}

.cromo .avisos {
  margin-top: 10px;
}

.cromo .resumen-avisos,
.cromo .sin-avisos {
  font-size: 12px;
  color: #8b8f9a;
  margin: 0;
}

.cromo .avisos-lista {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cromo .aviso {
  border-left: 3px solid #3b4055;
  padding-left: 8px;
  font-size: 12px;
}

.cromo .aviso.grave {
  border-left-color: #ff8a80;
}

.cromo .regla {
  display: block;
  color: #9fb4ff;
}

.cromo .detalle {
  display: block;
  color: #c4c8d2;
}

.cromo .arreglo {
  display: block;
  color: #7d8290;
}

.cromo .acciones-tarjeta {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.cromo .acciones-tarjeta .boton {
  flex: 1;
  text-align: center;
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid #33374a;
  background: #1c1f2a;
  color: #e8e8ea;
  font-size: 13px;
}

.cromo .acciones-tarjeta .principal {
  background: #3d5afe;
  border-color: #3d5afe;
}

.cromo .esqueleto .lamina {
  background: linear-gradient(100deg, #171a23, #232838, #171a23);
}

.cromo .estado {
  font-size: 13px;
  margin: 10px 0 2px;
}

.cromo .paso-tarjeta {
  font-size: 12px;
  color: #8b8f9a;
  margin: 0;
}

.cromo .descartadas {
  margin-top: 18px;
  font-size: 12px;
  color: #8b8f9a;
}

.cromo .titulo-descartadas {
  margin: 0 0 6px;
}

.cromo .lista-descartadas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cromo #aviso {
  white-space: pre-wrap;
  font-size: 13px;
  color: #b9bfd0;
  margin: 16px 0 0;
}

.cromo #aviso.malo {
  color: #ffb4a2;
}

.cromo [hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ el preview */

/* El recorte del preview. El tamanyo lo pone main.js a partir del documento: escribirlo
   aqui obligaria a repetir 1080x1350 en el cromo. */
.cromo .escenario {
  flex: none;
  overflow: hidden;
  border-radius: 12px;
}

/* El zoom se hace con transform en el ENVOLTORIO, no dentro del lienzo: transform no
   cambia el layout, asi que el flyer se maqueta con las mismas medidas que en el PNG y solo
   se dibuja mas pequenyo. El zoom real del editor (25-100 %) sera este mismo mecanismo. */
.cromo .marco {
  transform-origin: 0 0;
}