/* Molde · estilos de la herramienta.
   Los colores y tipografías vienen de la marca (config.js): comun.js los pone en estas variables. */
:root {
  --principal: #333333;
  --linea: #BBBBBB;
  --texto: #222222;
  --fondo: #F2F0EB;
  --papel: #FFFFFF;
  --blanco: #FFFFFF;
  --fuente-interfaz: 'Helvetica Neue', Arial, sans-serif;
  --fuente-texto: 'Helvetica Neue', Arial, sans-serif;
  --fuente-titulo: var(--fuente-interfaz);
  --fuente-etiqueta: var(--fuente-interfaz);
  --fuente-pie: var(--fuente-interfaz);
  --peso-titulo: 900;
  --peso-etiqueta: 700;
  --peso-pie: 300;
  --borde: color-mix(in srgb, var(--principal) 18%, transparent);
  --borde-fuerte: color-mix(in srgb, var(--principal) 45%, transparent);
  --tinte: color-mix(in srgb, var(--principal) 8%, transparent);
  --tinte-fuerte: color-mix(in srgb, var(--principal) 16%, transparent);
  --texto-suave: color-mix(in srgb, var(--texto) 60%, transparent);
  --texto-tenue: color-mix(in srgb, var(--texto) 40%, transparent);
  --sombra: color-mix(in srgb, var(--texto) 14%, transparent);
  --radio: 24px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-interfaz);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Barra superior */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 32px;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}
.barra__marca { display: flex; align-items: center; gap: 18px; }
.barra__logo { height: 40px; width: auto; display: block; }
.barra__titulo {
  font-weight: 900;
  font-size: 22px;
  color: var(--principal);
  padding-left: 18px;
  border-left: 1.5px solid var(--linea);
  line-height: 1;
}
.barra__acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.boton {
  border: 1.5px solid var(--principal);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  color: var(--principal);
  transition: background-color .15s, color .15s, opacity .15s;
}
.boton--primario { background: var(--principal); color: var(--fondo); }
.boton--primario:hover { background: var(--texto); border-color: var(--texto); }
.boton--secundario:hover, .boton--fantasma:hover { background: var(--tinte); }
.boton--fantasma { border-color: transparent; }
.boton[aria-busy="true"] { opacity: .6; cursor: progress; }
.boton:focus-visible, .icono:focus-visible, .anadir:focus-visible, .menu__lista > *:focus-visible, .selector select:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; }

/* Selectores de marca y de documento (solo si hay más de uno) */
.selector { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.selector__etiqueta { font-weight: 700; color: var(--principal); }
.selector select {
  appearance: none;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  background: var(--blanco);
  padding: 8px 34px 8px 14px;
  font-size: 15px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--principal) 50%), linear-gradient(135deg, var(--principal) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.selector select:hover { border-color: var(--borde-fuerte); }

.menu { position: relative; }
.menu__lista {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 290px;
  padding: 8px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: 0 12px 32px var(--sombra);
  display: flex;
  flex-direction: column;
}
.menu__lista > * {
  text-align: left;
  background: none;
  border: 0;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: var(--texto);
  font-size: 15px;
}
.menu__lista > *:hover { background: var(--tinte); }

/* Zona de trabajo */
.taller {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 32px;
  padding: 28px 32px 64px;
  max-width: 1480px;
  margin: 0 auto;
  align-items: start;
}

.editor { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.tarjeta {
  background: var(--papel);
  border-radius: var(--radio);
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tarjeta__titulo {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--principal);
}

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo--ancho { flex: 1; }
.campo--fecha { flex: 0 0 180px; }
.campo__etiqueta { font-weight: 700; font-size: 14px; color: var(--principal); }
.campo__ayuda { margin: 0; font-size: 13px; font-weight: 300; color: var(--texto); }
.fila { display: flex; gap: 14px; flex-wrap: wrap; }
.fila:empty { display: none; }

input[type="text"], input[type="date"], textarea {
  width: 100%;
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 16px;
  color: var(--texto);
  transition: border-color .15s;
}
input:hover, textarea:hover { border-color: var(--borde-fuerte); }
input:focus, textarea:focus { outline: none; border-color: var(--principal); }
::placeholder { color: var(--texto-tenue); }

/* Buscador del logo secundario */
.buscador { position: relative; }
.buscador input { padding-left: 42px; padding-right: 44px; }
.buscador::before {
  content: '';
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; pointer-events: none;
  background: var(--principal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.buscador--elegido::before { display: none; }
.buscador--elegido input { padding-left: 72px; font-weight: 700; color: var(--principal); }
.buscador__logo {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 50px; height: 30px; object-fit: contain; pointer-events: none;
}
.buscador__quitar {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--principal);
}
.buscador__quitar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.buscador__quitar:hover { background: var(--tinte); }
.buscador__quitar:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; }
.buscador__lista {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--blanco); border: 1.5px solid var(--borde); border-radius: 14px;
  box-shadow: 0 12px 32px var(--sombra);
}
.buscador__opcion {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px; border-radius: 10px; cursor: pointer; font-size: 15px;
}
.buscador__opcion img { width: 56px; height: 32px; object-fit: contain; flex: none; }
.buscador__opcion small { margin-left: auto; font-size: 12px; font-weight: 300; color: var(--texto-suave); }
.buscador__opcion--accion { color: var(--principal); font-weight: 700; }
.buscador__separador { height: 1px; margin: 6px 4px; background: var(--borde); }
.buscador__opcion[aria-selected="true"] { background: var(--tinte); }
.buscador__opcion mark { background: none; color: var(--principal); font-weight: 700; }
.buscador__vacio { padding: 10px; font-size: 14px; font-weight: 300; }

/* Interruptor del logo principal */
.interruptor { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 700; color: var(--principal); width: fit-content; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor__pista {
  width: 44px; height: 26px; border-radius: 999px; background: var(--borde-fuerte);
  position: relative; transition: background-color .15s; flex: none;
}
.interruptor__pista::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--blanco); transition: transform .15s;
}
.interruptor input:checked + .interruptor__pista { background: var(--principal); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(18px); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--principal); outline-offset: 2px; }

/* Secciones */
.secciones { display: flex; flex-direction: column; gap: 16px; }

/* Texto enriquecido de las secciones */
.texto-rico {
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  transition: border-color .15s;
}
.texto-rico:hover { border-color: var(--borde-fuerte); }
.texto-rico:focus-within { border-color: var(--principal); }
.texto-rico__barra {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 1px solid var(--borde);
}
.texto-rico__barra button {
  min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 8px;
  background: transparent; color: var(--principal); cursor: pointer;
  display: grid; place-items: center; font-family: var(--fuente-texto); font-size: 15px;
}
.texto-rico__barra button:hover { background: var(--tinte); }
.texto-rico__barra button[aria-pressed="true"] { background: var(--tinte-fuerte); }
.texto-rico__barra button:focus-visible { outline: 2px solid var(--principal); outline-offset: 1px; }
.texto-rico__barra svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.texto-rico__barra svg circle { fill: currentColor; stroke: none; }
.texto-rico__barra svg .fino { stroke-width: 1.4; }
.texto-rico__separador { width: 1px; height: 20px; background: var(--borde); margin: 0 4px; }

.seccion__texto {
  min-height: 104px;
  padding: 11px 14px;
  font-family: var(--fuente-texto);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  outline: none;
  overflow-wrap: anywhere;
  cursor: text;
}
.seccion__texto:empty::before { content: attr(data-placeholder); color: var(--texto-tenue); pointer-events: none; }
.seccion__texto p, .seccion__texto div { margin: 0 0 4px; }
.seccion__texto ul, .seccion__texto ol { margin: 0 0 4px; padding-left: 22px; }
.seccion__texto li::marker { color: var(--principal); font-weight: 700; }
.seccion { gap: 12px; }
.seccion__cabecera { display: flex; align-items: center; gap: 10px; }
.seccion__num { font-weight: 700; color: var(--principal); font-size: 15px; min-width: 22px; }
.seccion__titulo[type="text"] {
  flex: 1;
  border-color: transparent;
  background: transparent;
  padding: 6px 8px;
  margin-left: -8px;
  font-weight: 900;
  font-size: 20px;
  color: var(--principal);
}
.seccion__titulo[type="text"]:hover { border-color: var(--borde); }
.seccion__titulo[type="text"]:focus { border-color: var(--principal); background: var(--blanco); }
.seccion__herramientas { display: flex; gap: 2px; }
.icono {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--principal);
}
.icono svg, .anadir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icono:hover { background: var(--tinte); }
.icono:disabled { opacity: .25; cursor: default; background: none; }
.icono--peligro:hover { background: var(--tinte-fuerte); }

.anadir {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; border-radius: var(--radio);
  border: 2px dashed var(--linea); background: transparent;
  color: var(--principal); font-weight: 700; font-size: 16px; cursor: pointer;
  transition: background-color .15s;
}
.anadir:hover { background: color-mix(in srgb, var(--linea) 16%, transparent); }
.nota { margin: 0; font-size: 13px; font-weight: 300; padding: 0 8px; }

/* Vista previa */
.previa { position: sticky; top: 96px; min-width: 0; }
.previa__marco { width: 100%; overflow: hidden; }
.previa__nota { font-size: 13px; font-weight: 300; text-align: center; margin: 12px 0 0; }

.hoja {
  --mm: 3.7795px;
  width: calc(210 * var(--mm));
  min-height: calc(297 * var(--mm));
  background: var(--blanco);
  padding: calc(12 * var(--mm)) calc(15 * var(--mm)) calc(18 * var(--mm));
  border-radius: 6px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--texto) 8%, transparent), 0 18px 44px var(--sombra);
  transform-origin: top left;
  font-size: 14px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
}
.hoja__cabecera { display: flex; justify-content: space-between; align-items: center; height: calc(14 * var(--mm)); margin-bottom: calc(10 * var(--mm)); }
.hoja__cabecera img { display: block; }
.hoja__logo { height: calc(14 * var(--mm)); }
.hoja__logo2 { max-height: calc(14 * var(--mm)); max-width: calc(50 * var(--mm)); }
.hoja__hueco {
  width: calc(50 * var(--mm)); height: calc(14 * var(--mm));
  border: 1.5px dashed var(--linea); border-radius: 4px;
  display: grid; place-items: center; text-align: center;
  font-size: 10px; font-weight: 300; color: color-mix(in srgb, var(--linea) 65%, black); line-height: 1.2; padding: 4px;
}
.hoja__etiqueta { font-family: var(--fuente-etiqueta); font-weight: var(--peso-etiqueta); font-size: 10.7px; letter-spacing: .12em; color: var(--principal); margin: 0 0 8px; }
.hoja__titulo { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: 34.7px; line-height: .95; color: var(--principal); margin: 0 0 24px; overflow-wrap: anywhere; }
.hoja__titulo--vacio { opacity: .35; }
.hoja__datos { display: flex; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 11px 0; margin: 0 0 8px; }
.hoja__datos > div { flex: 1; padding-right: 13px; min-width: 0; }
.hoja__datos dt { font-family: var(--fuente-etiqueta); font-weight: var(--peso-etiqueta); font-size: 10.7px; letter-spacing: .12em; color: var(--principal); margin-bottom: 4px; }
.hoja__datos dd { margin: 0; font-size: 14px; font-family: var(--fuente-texto); overflow-wrap: anywhere; }
.hoja__seccion h3 {
  font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: 18.7px; color: var(--principal); margin: 27px 0 11px;
  padding-bottom: 5px; border-bottom: 1px solid var(--linea);
}
.hoja__seccion h3 span { font-family: var(--fuente-etiqueta); font-weight: var(--peso-etiqueta); margin-right: .5em; }
.hoja__seccion p, .hoja__seccion ul, .hoja__seccion ol { font-family: var(--fuente-texto); font-size: 13.3px; line-height: 1.3; }
.hoja__seccion p { margin: 0 0 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
.hoja__seccion ul, .hoja__seccion ol { margin: 0 0 7px; padding-left: 18px; }
.hoja__seccion li { margin-bottom: 4px; overflow-wrap: anywhere; }
.hoja__seccion li::marker { color: var(--principal); font-weight: 700; }
.hoja__cuerpo { flex: 1; }
.hoja__pie { display: flex; justify-content: space-between; font-family: var(--fuente-pie); font-weight: var(--peso-pie); font-size: 10.7px; padding-top: 24px; }

/* Aviso fijo (demo) */
.aviso-demo {
  margin: 0; padding: 14px 18px; border-radius: 16px;
  background: var(--papel); border: 1.5px dashed var(--linea);
  font-size: 14px; line-height: 1.45;
}
.aviso-demo a { color: var(--principal); font-weight: 700; text-underline-offset: 2px; }

/* Botones de añadir sección */
.anadir-fila { display: flex; gap: 12px; flex-wrap: wrap; }
.anadir-fila .anadir { flex: 1 1 220px; }
.boton--peque { padding: 8px 14px; font-size: 14px; }

/* Campo de imagen (portada) */
.campo--imagen { margin-top: 2px; }
.imagen { display: flex; align-items: center; gap: 16px; }
.imagen__muestra {
  width: 150px; aspect-ratio: 3 / 2; flex: none; border-radius: 12px; overflow: hidden;
  background: var(--tinte); display: grid; place-items: center;
  font-size: 13px; font-weight: 300; color: var(--texto-suave);
}
.imagen__muestra img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imagen__acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* Sección de fotos en el editor */
.fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fotos__foto { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fotos__marco { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--tinte); }
.fotos__marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotos__quitar {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: color-mix(in srgb, var(--blanco) 88%, transparent); color: var(--principal);
  display: grid; place-items: center; cursor: pointer;
}
.fotos__quitar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.fotos__quitar:hover { background: var(--blanco); }
input.fotos__pie[type="text"] { padding: 8px 10px; font-size: 14px; border-radius: 10px; font-family: var(--fuente-texto); }
.fotos__anadir {
  aspect-ratio: 4 / 3; border-radius: 12px; border: 2px dashed var(--linea); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--principal); font-weight: 700; font-size: 14px; cursor: pointer;
}
.fotos__anadir svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fotos__anadir:hover { background: color-mix(in srgb, var(--linea) 16%, transparent); }
.fotos__anadir:focus-visible, .fotos__quitar:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; }
.anadir svg rect, .anadir svg circle { fill: none; }

.seccion__salto { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); cursor: pointer; width: fit-content; }
.seccion__salto input { accent-color: var(--principal); width: 16px; height: 16px; }

/* Portada, fotos y saltos en la vista previa */
.hoja__portada {
  width: 100%; aspect-ratio: 3 / 2; margin-bottom: calc(10 * var(--mm)); border-radius: 2px; overflow: hidden;
  background: var(--tinte); display: grid; place-items: center; color: var(--texto-tenue); font-size: 14px;
}
.hoja__portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hoja__titulo--portada { font-size: 44px; }
.hoja__salto { margin: 30px calc(-15 * var(--mm)); border-top: 2px dashed var(--borde); }
.hoja__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 13px; }
.hoja__fotos figure { margin: 0; }
.hoja__fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.hoja__fotos figcaption { font-family: var(--fuente-texto); font-size: 11px; color: var(--texto-suave); margin-top: 5px; }

/* Aviso flotante */
.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--principal); color: var(--fondo);
  padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 30px var(--sombra); z-index: 20; max-width: calc(100% - 32px);
}

@media (max-width: 1020px) {
  .taller { grid-template-columns: 1fr; padding: 20px 16px 48px; }
  .previa { position: static; }
  .barra { padding: 12px 16px; }
}
@media (max-width: 560px) {
  .barra { position: static; }
  .barra__titulo { font-size: 18px; padding-left: 12px; }
  .barra__logo { height: 32px; }
  .barra__acciones { width: 100%; }
  .barra__acciones .boton--primario, .barra__acciones .boton--secundario { flex: 1; }
  .tarjeta { padding: 18px 16px 20px; }
  .campo--fecha { flex: 1 1 100%; }
}