@charset "UTF-8";
/* ==========================================================================
   ATRAMIA MATERIALES - EDITOR DE PLANTILLAS
   --------------------------------------------------------------------------
   Tres columnas: elementos, ajustes del seleccionado y vista previa A4 real.
   Capa de aplicacion: densidad y claridad. Movimiento solo de estado.

   Depende de /css/tokens.css. Solo tokens.
   ========================================================================== */

/* ==========================================================================
   1. PAGINAS DE LISTADO
   ========================================================================== */

.pagina {
  max-width: var(--ancho-aplicacion);
  margin-inline: auto;
  padding: var(--espaciado-xl) var(--espaciado-lg) var(--espaciado-4xl);
}

.pagina__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaciado-md);
  margin-bottom: var(--espaciado-xl);
}

.pagina__titulo {
  font-size: var(--texto-seccion);
  font-weight: var(--peso-titular);
  margin: 0;
}

.tarjeta {
  padding: var(--espaciado-lg);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde-tenue);
  border-radius: var(--radio-md);
}

.formulario-nueva {
  margin-bottom: var(--espaciado-xl);
}

.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--espaciado-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tarjeta--plantilla {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-xs);
}

.tarjeta__titulo {
  font-size: var(--texto-lg);
  font-weight: var(--peso-titular);
  line-height: 1.25;
  margin: 0;
}

.tarjeta__titulo a {
  color: var(--color-texto);
  text-decoration: none;
}

.tarjeta__titulo a:hover {
  color: var(--color-texto-acento);
}

.tarjeta__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaciado-2xs);
  font-size: var(--texto-xs);
  color: var(--color-texto-auxiliar);
  margin: 0;
}

.tarjeta__acciones {
  margin-top: auto;
  padding-top: var(--espaciado-sm);
}

.vacio--editor {
  padding: var(--espaciado-lg);
  font-size: var(--texto-sm);
}

/* ==========================================================================
   2. MARCO DEL EDITOR
   ========================================================================== */

.editor {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--color-superficie-hundida);
}

.editor__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaciado-md);
  padding: var(--espaciado-sm) var(--espaciado-lg);
  background-color: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde-tenue);
}

.editor__identidad {
  display: flex;
  align-items: center;
  gap: var(--espaciado-sm);
  min-width: 0;
}

.editor__volver {
  font-size: var(--texto-lg);
  color: var(--color-texto-auxiliar);
  text-decoration: none;
  padding: var(--espaciado-2xs);
}

.editor__volver:hover {
  color: var(--color-texto);
}

.editor__titulo {
  font-size: var(--texto-lg);
  font-weight: var(--peso-titular);
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaciado-2xs);
  font-size: var(--texto-xs);
  color: var(--color-texto-auxiliar);
  margin: 0;
}

.editor__estado {
  color: var(--color-texto-auxiliar);
  font-variant-numeric: tabular-nums;
}

.editor__estado--error {
  color: var(--color-error-texto);
  font-weight: var(--peso-medio);
}

.editor__acciones {
  display: flex;
  align-items: center;
  gap: var(--espaciado-xs);
}

.editor__publicar {
  margin: 0;
}

.editor__ajustes {
  margin: var(--espaciado-md) var(--espaciado-lg) 0;
}

/* ==========================================================================
   3. TRES COLUMNAS
   ========================================================================== */

.editor__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 300px) minmax(0, 1fr);
  gap: 1px;
  flex: 1;
  min-height: 0;
  background-color: var(--color-borde-tenue);
}

.editor__columna {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--espaciado-md);
  background-color: var(--color-superficie);
  overflow-y: auto;
}

.editor__columna--previa {
  background-color: var(--color-superficie-hundida);
}

.editor__cabecera-columna {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaciado-sm);
  margin-bottom: var(--espaciado-sm);
}

.editor__subtitulo {
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-auxiliar);
  margin: 0;
}

.editor__pesos {
  font-size: var(--texto-xs);
  color: var(--color-texto-auxiliar);
  font-variant-numeric: tabular-nums;
}

/* Si los pesos no cuadran con la puntuacion total, se avisa sin bloquear. */
.editor__pesos--descuadre {
  color: var(--color-aviso-texto);
  font-weight: var(--peso-medio);
}

/* ==========================================================================
   4. LISTA DE ELEMENTOS
   ========================================================================== */

.lista-elementos {
  list-style: none;
  margin: 0 0 var(--espaciado-sm);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.elemento-fila {
  display: flex;
  align-items: center;
  gap: var(--espaciado-2xs);
  padding: var(--espaciado-2xs);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde-tenue);
  border-radius: var(--radio-sm);
}

.elemento-fila:hover {
  border-color: var(--color-borde-fuerte);
}

.elemento-fila--activa {
  border-color: var(--color-acento);
  background-color: var(--color-acento-tenue);
}

.elemento-fila--bloqueada {
  opacity: 0.65;
}

.elemento-fila--hueco {
  height: 44px;
  border: 1px dashed var(--color-acento);
  border-radius: var(--radio-sm);
  background-color: var(--color-acento-tenue);
}

.elemento-fila__asa {
  cursor: grab;
  padding: 0 var(--espaciado-2xs);
  color: var(--color-texto-desactivado);
  font-family: var(--fuente-mono);
  font-size: var(--texto-sm);
  letter-spacing: -2px;
  user-select: none;
}

.elemento-fila__asa:active {
  cursor: grabbing;
}

.elemento-fila__cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--espaciado-2xs);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.elemento-fila__tipo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto);
}

.elemento-fila__resumen {
  font-size: var(--texto-xs);
  color: var(--color-texto-auxiliar);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.elemento-fila__peso {
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-auxiliar);
  padding: 0 var(--espaciado-2xs);
}

.elemento-fila__acciones {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dur-rapida) var(--curva-salida);
}

.elemento-fila:hover .elemento-fila__acciones,
.elemento-fila--activa .elemento-fila__acciones,
.elemento-fila__acciones:focus-within {
  opacity: 1;
}

.icono {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  color: var(--color-texto-auxiliar);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radio-xs);
  cursor: pointer;
}

.icono:hover {
  border-color: var(--color-borde);
  color: var(--color-texto);
}

.icono--peligro:hover {
  border-color: var(--color-error-borde);
  color: var(--color-error-texto);
  background-color: var(--color-error-fondo);
}

/* ==========================================================================
   5. CATALOGO DE TIPOS
   ========================================================================== */

.anadir-elemento {
  margin-top: auto;
  padding-top: var(--espaciado-sm);
}

.anadir-elemento__boton {
  width: 100%;
}

.catalogo {
  margin-top: var(--espaciado-sm);
  padding: var(--espaciado-sm);
  background-color: var(--color-superficie-tenue);
  border-radius: var(--radio-sm);
  max-height: 340px;
  overflow-y: auto;
}

.catalogo__categoria {
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-auxiliar);
  margin: var(--espaciado-sm) 0 var(--espaciado-2xs);
}

.catalogo__categoria:first-child {
  margin-top: 0;
}

.catalogo__tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.catalogo__tipo {
  padding: var(--espaciado-2xs) var(--espaciado-xs);
  font-size: var(--texto-xs);
  color: var(--color-texto-secundario);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde-tenue);
  border-radius: var(--radio-xs);
  cursor: pointer;
}

.catalogo__tipo:hover {
  border-color: var(--color-acento);
  color: var(--color-texto-acento);
  background-color: var(--color-acento-tenue);
}

/* ==========================================================================
   6. PANEL DE CONFIGURACION
   ========================================================================== */

.panel-elemento__titulo {
  font-size: var(--texto-base);
  font-weight: var(--peso-titular);
  margin: 0 0 var(--espaciado-md);
  padding-bottom: var(--espaciado-2xs);
  border-bottom: 1px solid var(--color-borde-tenue);
}

.panel-elemento .campo {
  margin-bottom: var(--espaciado-md);
}

/* ==========================================================================
   7. VISTA PREVIA A4
   ========================================================================== */

.previa {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: var(--espaciado-sm) 0;
}

/* Proporcion A4 real: el maestro ve exactamente lo que va a imprimir. */
.previa__marco {
  width: 100%;
  max-width: 620px;
  height: 100%;
  min-height: 480px;
  background-color: #ffffff;
  border: 0;
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-2);
}

.conmutador {
  display: inline-flex;
  padding: 2px;
  background-color: var(--color-superficie-tenue);
  border-radius: var(--radio-sm);
}

.conmutador__opcion {
  padding: 2px var(--espaciado-xs);
  font-size: var(--texto-xs);
  color: var(--color-texto-auxiliar);
  background: none;
  border: 0;
  border-radius: var(--radio-xs);
  cursor: pointer;
}

.conmutador__opcion--activa {
  background-color: var(--color-superficie);
  color: var(--color-texto);
  font-weight: var(--peso-medio);
  box-shadow: var(--sombra-1);
}

/* ==========================================================================
   8. AVISO DE ATENCION
   ========================================================================== */

.aviso--atencion {
  margin: var(--espaciado-sm) var(--espaciado-lg) 0;
  background-color: var(--color-aviso-fondo);
  border-left-color: var(--color-aviso-marca);
  color: var(--color-aviso-texto);
}

/* ==========================================================================
   9. PANTALLAS ESTRECHAS
   El editor esta pensado para escritorio, pero no debe romperse en tableta.
   ========================================================================== */

@media (max-width: 1100px) {
  .editor {
    height: auto;
    min-height: 100vh;
  }

  .editor__cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor__columna {
    overflow-y: visible;
  }

  .previa__marco {
    height: 620px;
  }
}

@media (max-width: 600px) {
  .editor__barra {
    padding: var(--espaciado-sm) var(--espaciado-md);
  }

  .editor__ajustes,
  .aviso--atencion {
    margin-inline: var(--espaciado-md);
  }
}

/* ==========================================================================
   10. MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .elemento-fila__acciones {
    transition: none;
    opacity: 1;
  }
}

/* ==========================================================================
   11. DESCARGA EN PDF
   ========================================================================== */

.descargas {
  position: relative;
}

.descargas__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 4px;
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-3);
}

.descargas__opcion {
  padding: var(--espaciado-2xs) var(--espaciado-xs);
  text-align: left;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
  background: none;
  border: 0;
  border-radius: var(--radio-xs);
  cursor: pointer;
}

.descargas__opcion:hover {
  background-color: var(--color-acento-tenue);
  color: var(--color-texto-acento);
}