/* ════════════════════════════════════════════════════════════
   CV Design — Hoja de estilos de la interfaz de la aplicación
   Tema claro por defecto · Tema oscuro opcional · Responsive
   ════════════════════════════════════════════════════════════ */
:root{
  --ap-fondo:#eef1f6; --ap-panel:#ffffff; --ap-panel-2:#f7f9fc;
  --ap-texto:#1d2635; --ap-texto-suave:#5b6b83; --ap-borde:#dde4ee;
  --ap-acento:#3b62d9; --ap-acento-suave:#e8eeff; --ap-acento-texto:#ffffff;
  --ap-verde:#12995c; --ap-verde-suave:#e2f6ec; --ap-rojo:#d64545; --ap-rojo-suave:#fdecec;
  --ap-sombra:0 2px 10px rgba(20,35,70,.08);
  --ap-sombra-fuerte:0 10px 32px rgba(20,35,70,.16);
  --ap-radio:12px; --ap-radio-s:8px;
  --ap-barra-h:60px; --ap-panel-w:392px;
  --ap-fuente:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--ap-fuente); color:var(--ap-texto);
  background:var(--ap-fondo); display:flex; flex-direction:column; overflow:hidden;
}
h2,h3{margin:.2em 0 .5em}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ap-texto)}
a{color:var(--ap-acento)}
.mini{font-size:12px;color:var(--ap-texto-suave);margin:.25em 0}
.ayuda{font-size:13px;color:var(--ap-texto-suave);line-height:1.45;margin:0 0 12px;background:var(--ap-panel-2);border:1px solid var(--ap-borde);border-radius:var(--ap-radio-s);padding:8px 10px}
.oc-movil{}.solo-icono{padding:8px 10px}

/* ───── Barra superior: DOS FILAS ─────
   Fila 1 (.fila-sup): marca + todas las acciones.
   Fila 2 (.pasos): los 6 pasos numerados, a todo lo ancho y completos.
   En móvil (≤1020 px) la fila 2 se oculta y la cabecera vuelve a medir
   exactamente --ap-barra-h (lo usan los inset fijos de la vista). */
.barra-sup{
  display:flex; flex-direction:column; flex:0 0 auto;
  background:var(--ap-panel); border-bottom:1px solid var(--ap-borde); z-index:40; position:relative;
}
.fila-sup{
  height:var(--ap-barra-h); flex:0 0 var(--ap-barra-h);
  display:flex; align-items:center; gap:14px; padding:0 14px;
}
.marca{display:flex;align-items:center;gap:10px;min-width:185px}
.marca-logo{width:36px;height:36px;object-fit:contain}
.marca-texto{display:flex;flex-direction:column;line-height:1.1}
.marca-texto strong{font-size:17px;letter-spacing:.2px}
.marca-texto span{font-size:11px;color:var(--ap-texto-suave)}
.anuncio-fcv{
  min-width:0;flex:1;display:flex;align-items:center;gap:9px;
  padding:5px 12px 5px 7px;border:1px solid color-mix(in srgb,var(--ap-acento) 24%,var(--ap-borde));
  border-radius:13px;background:linear-gradient(105deg,var(--ap-acento-suave),var(--ap-panel));
  box-shadow:0 3px 12px rgba(40,70,140,.08);
}
.anuncio-fcv-imagen{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:9px;background:#fff;overflow:hidden}
.anuncio-fcv-imagen img{display:block;width:40px;height:40px;object-fit:cover}
.anuncio-fcv p{margin:0;color:var(--ap-texto);font-size:12px;line-height:1.2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anuncio-fcv p a{color:var(--ap-acento);text-decoration:underline;text-underline-offset:2px}
.pasos{
  display:flex; gap:6px; padding:8px 14px 10px; justify-content:center;
  border-top:1px solid var(--ap-borde); overflow:visible;
}
.paso{
  border:1px solid transparent;background:transparent;color:var(--ap-texto-suave);
  padding:7px 11px;border-radius:999px;font-size:12.5px;white-space:nowrap;display:flex;align-items:center;gap:6px;
  flex:1; justify-content:center; max-width:230px;   /* los 6 pasos se reparten el ancho y se ven completos */
}
.paso b{background:var(--ap-acento-suave);color:var(--ap-acento);border-radius:999px;width:19px;height:19px;display:inline-grid;place-items:center;font-size:11px;flex:0 0 auto}
.paso:hover{background:var(--ap-panel-2);color:var(--ap-texto)}
.paso.activo{background:var(--ap-acento-suave);color:var(--ap-acento);font-weight:600}
/* v05.00 — «7 Quiero este CV»: debe destacar claramente sobre el resto de
   pasos (es el botón de conversión hacia Fábrica de Currículums). */
.paso.paso-destacado{
  background:linear-gradient(135deg,#ff8a3d,#ff5f6d); color:#ffffff; font-weight:800;
  box-shadow:0 3px 12px rgba(255,95,109,.4); flex:1.15; animation:pasoDestacadoPulso 2.4s ease-in-out infinite;
}
.paso.paso-destacado b{background:rgba(255,255,255,.28);color:#ffffff}
.paso.paso-destacado:hover{filter:brightness(1.05); background:linear-gradient(135deg,#ff8a3d,#ff5f6d)}
@keyframes pasoDestacadoPulso{
  0%,100%{box-shadow:0 3px 12px rgba(255,95,109,.4)}
  50%{box-shadow:0 3px 20px rgba(255,95,109,.75)}
}
@media (prefers-reduced-motion:reduce){ .paso.paso-destacado{animation:none} }
.acciones-sup{display:flex;align-items:center;gap:8px;margin-left:auto}
.marca-enlace{display:flex;align-items:center}.marca-texto a{color:inherit;text-decoration:none}
.demo-badge{font-size:9px;letter-spacing:1px;color:var(--ap-acento);background:var(--ap-acento-suave);padding:2px 5px;border-radius:4px}
.demo-sin-descarga{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--ap-texto-suave);border:1px solid var(--ap-borde);border-radius:999px;padding:6px 9px;white-space:nowrap}
/* v05.02 — ahora es el botón «Manual de usuario» (antes era un indicador
   informativo sin acción): se le da aspecto de botón clicable. */
a.demo-sin-descarga{color:var(--ap-acento);border-color:var(--ap-acento-suave);background:var(--ap-acento-suave);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:filter .15s}
a.demo-sin-descarga:hover{filter:brightness(0.97)}

/* ───── Botones ───── */
.btn{
  border:1px solid var(--ap-borde);background:var(--ap-panel);color:var(--ap-texto);
  border-radius:var(--ap-radio-s);padding:8px 14px;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;
  transition:filter .12s, transform .05s; text-decoration:none;
}
.btn:hover{filter:brightness(.97)} .btn:active{transform:scale(.98)}
.btn-primario{background:var(--ap-acento);border-color:var(--ap-acento);color:var(--ap-acento-texto);font-weight:600}
.btn-secundario{background:var(--ap-acento-suave);border-color:transparent;color:var(--ap-acento);font-weight:600}
.btn-suave{background:transparent}.btn-suave:hover{background:var(--ap-panel-2)}
.btn-icono{width:32px;height:32px;padding:0;justify-content:center;font-size:16px}
.btn-icono.ancho{width:auto;padding:0 10px;font-size:12.5px}
.btn-mini{padding:3px 9px;font-size:12px;border-radius:6px}
.btn-peligro{color:var(--ap-rojo);border-color:var(--ap-rojo-suave);background:var(--ap-rojo-suave)}
.btn-whatsapp{background:#25d366;border-color:#25d366;color:#ffffff;font-weight:700}
.btn-whatsapp:hover{filter:brightness(1.05)}

/* v05.00 — modal «Quiero este CV» */
.modal-quiero-cv{max-width:480px}
.modal-quiero-cv .qcv-auto{color:var(--ap-verde);font-weight:600}
.modal-quiero-cv .qcv-error{color:var(--ap-rojo);font-weight:600}
.modal-quiero-cv .qcv-botones{flex-wrap:wrap;margin-top:14px}

/* ───── Desplegable ───── */
.desplegable{position:relative}
.desplegable-caja{
  position:absolute;right:0;top:calc(100% + 6px);min-width:250px;background:var(--ap-panel);
  border:1px solid var(--ap-borde);border-radius:var(--ap-radio);box-shadow:var(--ap-sombra-fuerte);
  padding:6px;display:none;z-index:60;flex-direction:column;
}
.desplegable.abierto .desplegable-caja{display:flex}
.desplegable-caja button{
  display:flex;gap:8px;align-items:center;width:100%;text-align:left;background:none;border:0;
  padding:9px 10px;border-radius:8px;font-size:13px;color:var(--ap-texto);
}
.desplegable-caja button:hover{background:var(--ap-panel-2)}
.desplegable-caja button.peligro{color:var(--ap-rojo)}

/* ───── Indicador permanente de autoguardado ───── */
.indicador-guardado{
  font-size:11px; font-weight:600; color:var(--ap-verde); background:var(--ap-verde-suave);
  padding:4px 10px; border-radius:999px; white-space:nowrap; transition:background .2s,color .2s;
}
.indicador-guardado[data-estado="guardando"]{color:var(--ap-acento);background:var(--ap-acento-suave)}
.indicador-guardado[data-estado="error"]{color:var(--ap-rojo);background:var(--ap-rojo-suave)}
.indicador-guardado .puntos{display:inline-flex;gap:2px;font-style:normal;vertical-align:middle}
.indicador-guardado .puntos i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:parpadeo 1s infinite}
.indicador-guardado .puntos i:nth-child(2){animation-delay:.18s}
.indicador-guardado .puntos i:nth-child(3){animation-delay:.36s}
@keyframes parpadeo{0%,100%{opacity:.25}50%{opacity:1}}

/* ───── Historial Deshacer / Rehacer ───── */
.grupo-historial{display:flex;gap:2px;margin-right:2px}
.grupo-historial .btn{font-size:16px;line-height:1}
.btn:disabled{opacity:.38;cursor:default;filter:none!important;transform:none!important}

/* ───── Botón PDF ───── */
.btn-pdf{background:#b34444;border-color:#b34444;color:#fff;font-weight:700;letter-spacing:.3px;box-shadow:var(--ap-sombra)}
.btn-pdf:hover{filter:brightness(1.07)}
#btnImprimirSup{font-size:14px}

/* ───── Enlace de salto (accesibilidad) ───── */
.skip-link{
  position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ap-acento);color:#fff;
  padding:8px 14px;border-radius:8px;font-size:13px;
}
.skip-link:focus{left:8px}

/* ───── Pie de la aplicación ───── */
.pie-app{
  flex:0 0 auto;display:flex;justify-content:center;align-items:center;gap:6px;
  padding:7px 12px;font-size:11.5px;color:var(--ap-texto-suave);text-align:center;
  background:var(--ap-panel);border-top:1px solid var(--ap-borde);z-index:40;
}
.pie-app b{font-weight:700}
.pie-enlace{
  color:var(--ap-acento);font-weight:700;text-decoration:none;letter-spacing:.2px;
  background:linear-gradient(90deg,var(--ap-acento),#7b5cf0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-left:2px;
}
.pie-enlace:hover{text-decoration:underline;-webkit-text-fill-color:var(--ap-acento)}
.demo-nota{margin-top:12px}
.bm-demo{font-size:11px;font-weight:700;color:var(--ap-texto-suave);padding:8px}

/* Ayudas contextuales de CV Design Studio */
.cds-tooltip{position:fixed;z-index:300;max-width:min(320px,calc(100vw - 24px));padding:9px 12px;border:1px solid rgba(59,98,217,.25);border-radius:10px;background:var(--ap-texto);color:var(--ap-panel);box-shadow:var(--ap-sombra-fuerte);font-size:12px;line-height:1.4;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s}
.cds-tooltip.visible{opacity:1;transform:translateY(0)}
.cds-tooltip strong{display:block;color:#9db5ff;font-size:10px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:2px}
.bienvenida-demo{z-index:250}.demo-modal{max-width:520px;position:relative}.demo-modal h2{color:var(--ap-acento);margin-top:4px}.demo-kicker{font-size:11px;letter-spacing:1.4px;color:var(--ap-texto-suave);font-weight:700}.demo-kicker b{color:var(--ap-acento)}
.demo-fabrica{display:block;text-align:center;border-radius:10px;margin:16px 0 8px;transition:transform .15s}.demo-fabrica:hover{transform:scale(1.015)}.demo-fabrica img{display:block;max-width:100%;height:auto;margin:auto}
.demo-cerrar{position:absolute;right:12px;top:8px;border:0;background:transparent;color:var(--ap-texto-suave);font-size:26px;line-height:1;padding:2px 7px;border-radius:6px}.demo-cerrar:hover{background:var(--ap-panel-2);color:var(--ap-texto)}

/* ───── Foco visible (teclado / accesibilidad) ───── */
.btn:focus-visible,.paso:focus-visible,.nav-btn:focus-visible,.tarjeta-plantilla:focus-visible,
.zoom-valor:focus-visible,.desplegable-caja button:focus-visible,a:focus-visible{
  outline:2.5px solid var(--ap-acento);outline-offset:2px;
}
.btn-mini:focus-visible{outline:2px solid var(--ap-acento)}

/* ───── Mini-check de los colores automáticos ───── */
.mini-check{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ap-texto-suave);white-space:nowrap}
.mini-check input{accent-color:var(--ap-acento)}
.ctl-color input[disabled]{opacity:.45}

/* ───── Estructura principal ───── */
.lienzo{flex:1;display:flex;min-height:0}
.panel-lat{
  width:var(--ap-panel-w);flex:0 0 var(--ap-panel-w);background:var(--ap-panel);
  border-right:1px solid var(--ap-borde);display:flex;min-height:0;
}
.nav-lat{
  width:66px;flex:0 0 66px;overflow-y:auto;border-right:1px solid var(--ap-borde);
  padding:8px 5px;display:flex;flex-direction:column;gap:3px;background:var(--ap-panel-2);
}
.nav-lat hr{border:0;border-top:1px solid var(--ap-borde);margin:6px 4px}
.gutter-v{width:6px;flex:0 0 6px;background:var(--ap-borde);cursor:col-resize;position:relative;z-index:5;transition:background .15s}
.gutter-v:hover,.gutter-v.arrastrando{background:var(--ap-acento);opacity:0.7}
.gutter-v::after{content:"⋮";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ap-texto-suave);font-size:10px;pointer-events:none}
.gutter-main{background:var(--ap-fondo);border-left:1px solid var(--ap-borde);border-right:1px solid var(--ap-borde)}
.nav-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border:0;border-radius:10px;
  background:transparent;color:var(--ap-texto-suave);font-size:9.5px;line-height:1.15;text-align:center;
}
.nav-btn i{font-style:normal;font-size:17px}
.nav-btn:hover{background:var(--ap-acento-suave);color:var(--ap-acento)}
.nav-btn.activo{background:var(--ap-acento);color:var(--ap-acento-texto)}
.paneles{flex:1;overflow-y:auto;padding:16px 16px 90px;min-width:0}
.panel{display:none;animation:aparecer .18s ease}
.panel.visible{display:block}
@keyframes aparecer{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.panel-titulo{font-size:15px;letter-spacing:.4px;text-transform:uppercase;color:var(--ap-acento);border-bottom:2px solid var(--ap-acento-suave);padding-bottom:8px}

/* ───── Importación ───── */
.bloque-importar{border:1px solid var(--ap-borde);border-radius:var(--ap-radio);padding:14px;background:var(--ap-panel-2);margin-bottom:18px}
.bloque-importar h3{font-size:14px}
.zona-soltar{
  border:2px dashed var(--ap-borde);border-radius:var(--ap-radio);padding:18px 12px;text-align:center;
  background:var(--ap-panel);transition:border-color .15s,background .15s;margin-bottom:10px;
}
.zona-soltar:hover,.zona-soltar.arrastrando{border-color:var(--ap-acento);background:var(--ap-acento-suave)}
.zona-soltar p{margin:.3em 0;font-size:13px}
.zona-soltar-icono{font-size:26px}
.fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.fila.der{justify-content:flex-end}
.estado-importa{font-size:12.5px;color:var(--ap-texto-suave)}
.estado-importa.ok{color:var(--ap-verde)} .estado-importa.error{color:var(--ap-rojo)}
.detalles{border:1px solid var(--ap-borde);border-radius:var(--ap-radio-s);padding:10px 12px;margin:10px 0;background:var(--ap-panel)}
.detalles summary{cursor:pointer;font-size:13px;font-weight:600}
.detalles textarea{width:100%;margin-top:10px;border:1px solid var(--ap-borde);border-radius:var(--ap-radio-s);padding:9px;background:var(--ap-panel-2);resize:vertical}
.lista-ayuda{font-size:12.5px;color:var(--ap-texto-suave);padding-left:18px;line-height:1.5}

/* ───── Formularios del editor ───── */
.campo{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.campo>span{font-size:11.5px;font-weight:700;color:var(--ap-texto-suave);text-transform:uppercase;letter-spacing:.5px}
.campo input,.campo select,.campo textarea{
  border:1px solid var(--ap-borde);border-radius:var(--ap-radio-s);padding:8px 10px;background:var(--ap-panel);width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--ap-acento-suave);border-color:var(--ap-acento)}
.campo textarea{resize:vertical;line-height:1.45}
.campo-check{flex-direction:row;align-items:center;gap:8px}
.campo-check input{width:auto}
.campo-check>span{text-transform:none;font-size:13px;font-weight:500;color:var(--ap-texto)}
.rejilla-2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.rejilla-2 .ancho-2{grid-column:1/-1}
.caja{border:1px solid var(--ap-borde);border-radius:var(--ap-radio);padding:12px;background:var(--ap-panel);margin-bottom:14px}
.caja>h4{margin:0 0 10px;font-size:13px;display:flex;align-items:center;gap:8px}

.item-editor{
  border:1px solid var(--ap-borde);border-radius:var(--ap-radio);background:var(--ap-panel);
  margin-bottom:12px;overflow:hidden;transition:box-shadow .15s, opacity .15s;
}
.item-editor.arrastrando{opacity:.45}
.item-editor.soltar-encima{box-shadow:0 -3px 0 var(--ap-acento)}
.item-cab{
  display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--ap-panel-2);border-bottom:1px solid var(--ap-borde);
}
.item-cab .asa{cursor:grab;color:var(--ap-texto-suave);font-size:14px;padding:2px 4px;touch-action:none}
.item-cab .tit-item{flex:1;font-size:12.5px;font-weight:700;color:var(--ap-texto-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-cab .btn-mini{border:0;background:transparent;font-size:14px;padding:2px 5px}
.item-cab .btn-mini:hover{background:var(--ap-acento-suave);border-radius:6px}
.item-cab .btn-mini.peligro:hover{background:var(--ap-rojo-suave)}
.item-cuerpo{padding:12px}
.btn-anadir{width:100%;border:1.5px dashed var(--ap-borde);background:transparent;color:var(--ap-acento);font-weight:600;padding:10px;border-radius:var(--ap-radio);margin-bottom:8px}
.btn-anadir:hover{background:var(--ap-acento-suave);border-color:var(--ap-acento)}
.titulo-seccion-ed{display:flex;gap:8px;align-items:flex-end;margin-bottom:6px}
.titulo-seccion-ed .campo{flex:1;margin-bottom:0}
.visible-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ap-texto-suave);margin-bottom:12px}

/* ───── Fotografía ───── */
.foto-editor{display:flex;gap:14px;align-items:center}
.foto-marco{
  width:96px;height:96px;border-radius:12px;border:1px solid var(--ap-borde);background:var(--ap-panel-2);
  display:grid;place-items:center;overflow:hidden;flex:0 0 96px;font-size:30px;color:var(--ap-texto-suave);
}
.foto-marco img{width:100%;height:100%;object-fit:cover}
.foto-acciones{display:flex;flex-direction:column;gap:6px}
.foto-acciones .btn{justify-content:flex-start;font-size:12.5px;padding:6px 10px}

/* ───── Plantillas ───── */
.rejilla-plantillas{display:block}
.tp-grupo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.chips-cat{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.chip-cat{
  border:1px solid var(--ap-borde);background:var(--ap-tarjeta,#fff);color:var(--ap-texto);
  padding:5px 11px;border-radius:999px;font-size:12.5px;cursor:pointer;transition:all .15s;
}
.chip-cat:hover{border-color:var(--ap-acento);color:var(--ap-acento)}
.chip-cat.activo{background:var(--ap-acento);border-color:var(--ap-acento);color:#fff;font-weight:600}
.chip-cat:focus-visible{outline:2px solid var(--ap-acento);outline-offset:2px}
.cat-tit{font-size:13px;font-weight:700;color:var(--ap-texto-suave);margin:2px 0 8px;text-transform:uppercase;letter-spacing:.04em}
.cat-tit span{font-weight:400}
.tp-acciones{display:flex;gap:6px;margin-top:5px}
.tp-acciones .btn-mini{flex:1;border:1px solid var(--ap-borde);background:var(--ap-tarjeta,#fff);cursor:pointer;color:var(--ap-texto)}
.tp-acciones .btn-mini:hover{background:var(--ap-acento-suave);border-color:var(--ap-acento)}
.tp-cat{display:block;font-size:10.5px;color:var(--ap-acento);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.03em}
.tarjeta-plantilla{
  position:relative;
  border:2px solid var(--ap-borde);border-radius:var(--ap-radio);overflow:hidden;background:var(--ap-panel);
  text-align:left;padding:10px 10px 6px;transition:border-color .15s;
}
.tarjeta-plantilla.activa{border-color:var(--ap-acento);box-shadow:0 0 0 3px var(--ap-acento-suave)}
.tarjeta-plantilla .tp-nombre{font-size:12.5px;font-weight:700;display:flex;flex-direction:column;gap:2px}
.tarjeta-plantilla .tp-nombre span{font-weight:400;color:var(--ap-texto-suave);font-size:10.5px}
.tp-celda{position:relative}

/* ───── Diseño ───── */
.grupo-diseno{border:1px solid var(--ap-borde);border-radius:var(--ap-radio);margin-bottom:12px;overflow:hidden;transition:box-shadow .25s, border-color .25s}
.grupo-diseno.grupo-resaltado{border-color:var(--ap-acento);box-shadow:0 0 0 3px var(--ap-acento-suave)}
.grupo-diseno>summary{
  padding:11px 14px;font-size:13px;font-weight:700;cursor:pointer;background:var(--ap-panel-2);list-style:none;
}
.grupo-diseno>summary::before{content:"▸ ";color:var(--ap-acento)}
.grupo-diseno[open]>summary::before{content:"▾ "}
.grupo-diseno .grupo-cuerpo{padding:14px;display:grid;gap:4px}
.ctl{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-bottom:8px}
.ctl>span{font-size:12.5px;color:var(--ap-texto)}
.ctl-color{display:flex;gap:6px;align-items:center}
.ctl-color input[type=color]{width:38px;height:28px;border:1px solid var(--ap-borde);border-radius:7px;padding:2px;background:var(--ap-panel);cursor:pointer}
.ctl-color input[type=text]{width:76px;font-size:12px;padding:5px 7px;border:1px solid var(--ap-borde);border-radius:7px;background:var(--ap-panel)}
.ctl-rango{display:flex;gap:8px;align-items:center}
.ctl-rango input[type=range]{width:110px;accent-color:var(--ap-acento)}
.ctl-rango b{font-size:11.5px;min-width:44px;text-align:right;color:var(--ap-texto-suave)}
.ctl select{font-size:12.5px;padding:6px 8px;border:1px solid var(--ap-borde);border-radius:7px;background:var(--ap-panel);max-width:190px}
.ctl-check input{width:17px;height:17px;accent-color:var(--ap-acento)}
.lista-orden-secciones{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.orden-sec-fila{
  display:flex;align-items:center;gap:8px;border:1px solid var(--ap-borde);border-radius:8px;
  padding:6px 10px;font-size:12.5px;background:var(--ap-panel);
}
.orden-sec-fila b{flex:1}
.orden-sec-fila button{border:0;background:transparent;font-size:13px;padding:1px 5px;border-radius:5px}
.orden-sec-fila button:hover{background:var(--ap-acento-suave)}

/* ── v04.24: ESTRUCTURA y EPÍGRAFES (panel Diseño) ── */
.grupo-radios{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.radio{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ap-texto);cursor:pointer}
.radio input{width:auto;margin:0}
.zona-estruct{border:1px solid var(--ap-borde-suave,#dde4ee);border-radius:10px;padding:8px 10px;margin:8px 0;background:var(--ap-fondo-alt,#f7f9fc)}
.zona-estruct h4{margin:0 0 6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ap-acento)}
.zona-vacia{color:var(--ap-texto-suave);font-style:italic;margin:4px 0}
.zona-estruct .orden-sec-fila{border-bottom:1px dashed var(--ap-borde-suave,#dde4ee);border-radius:0;border-left:0;border-right:0;border-top:0;background:transparent;padding:4px 2px}
.zona-estruct .orden-sec-fila:last-child{border-bottom:0}
.zona-estruct .orden-sec-fila select{max-width:160px;font-size:11.5px;padding:2px 4px;border:1px solid var(--ap-borde-suave,#dde4ee);border-radius:6px;background:#fff}
.zona-estruct .orden-sec-fila .mini{color:var(--ap-texto-suave);font-size:11px}
.lista-epigrafes{margin-top:8px}
.fila-epi button{font-size:13px}

/* ── v04.24: modal de epígrafe ── */
.modal-epi{max-width:640px;width:min(94vw,640px)}
.epi-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;margin:10px 0}
.epi-ancho{grid-column:1/-1}
.epi-checks{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
.epi-checks>span{width:100%}
.campo-ubicacion{border:0;padding:0;margin:0 0 10px}
.epi-zonas{flex-direction:row;flex-wrap:wrap;gap:4px 16px}
.mini-check{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ap-texto-suave)}
.mini-check input{width:auto}
@media (max-width:560px){ .epi-rejilla{grid-template-columns:1fr} }

/* ───── Zona de vista previa ───── */
.zona-vista{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--ap-fondo)}
.barra-vista{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;
  background:var(--ap-panel);border-bottom:1px solid var(--ap-borde);flex-wrap:wrap;
}
.grupo-vista{display:flex;align-items:center;gap:10px}
.etiqueta-vista{font-size:12px;font-weight:800;letter-spacing:.6px;color:var(--ap-verde)}
.chip-paginas{background:var(--ap-verde-suave);color:var(--ap-verde);font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px}
.controles-zoom{align-items:center}
.zoom-valor{
  font-size:12px;min-width:46px;text-align:center;color:var(--ap-texto-suave);
  border:1px solid transparent;background:transparent;border-radius:7px;padding:6px 4px;
}
.zoom-valor:hover{background:var(--ap-panel-2);color:var(--ap-acento);border-color:var(--ap-borde)}
.vista-ayuda{margin:8px 16px 0;font-size:12px;padding:6px 10px}
.cv-visor{flex:1;overflow:auto;padding:22px 16px 120px;min-height:0}
.cv-paginas{display:flex;flex-direction:column;align-items:center;gap:26px;transform-origin:top center;width:max-content;margin:0 auto}
.cv-medidor-oculto{position:absolute;left:-10000px;top:0;visibility:hidden;pointer-events:none}
.barra-fina{position:fixed;z-index:50;background:var(--ap-panel);border:1px solid var(--ap-borde);border-radius:999px;box-shadow:var(--ap-sombra-fuerte);padding:6px 8px;display:flex;gap:6px;align-items:center}
.barra-fina--en-vista{position:fixed;top:110px;left:50%;transform:translateX(-50%);z-index:60;box-shadow:var(--ap-sombra-fuerte);cursor:default}
.barra-fina[hidden]{display:none}
.drag-handle{cursor:grab;padding:2px 6px;font-size:14px;user-select:none;color:var(--ap-texto-suave)}
.drag-handle:active{cursor:grabbing}
.zona-vista{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--ap-fondo);position:relative}
.barra-fina button{border:1px solid var(--ap-borde);background:var(--ap-panel);border-radius:8px;padding:4px 8px;cursor:pointer;font-size:12px}
.barra-fina button:hover{background:var(--ap-acento-suave)}
.barra-fina input[type=color]{width:28px;height:28px;border:1px solid var(--ap-borde);border-radius:6px;padding:1px}
.modo-fino .cv-pagina [data-bind]{outline:1px dashed rgba(59,98,217,0.35)}
.modo-fino .cv-pagina .cv-item:hover{outline:2px solid var(--ap-acento) !important}

/* ───── Modales y avisos ───── */
.modal-fondo{
  position:fixed;inset:0;background:rgba(15,22,38,.55);display:grid;place-items:center;z-index:100;padding:16px;
}
.modal-fondo[hidden]{display:none}
.modal{
  background:var(--ap-panel);border-radius:16px;padding:20px;width:min(440px,96vw);box-shadow:var(--ap-sombra-fuerte);
  max-height:92vh;overflow:auto;
}
.modal h3{margin-top:0}
.modal-texto{font-size:13.5px;line-height:1.55;color:var(--ap-texto)}
.modal-texto ul{padding-left:18px}
.recorte-lienzo{
  width:300px;height:300px;margin:10px auto;border-radius:12px;overflow:hidden;position:relative;
  background:#0c1220 repeating-conic-gradient(#1a2338 0 25%, #10182b 0 50%) 50%/24px 24px;
  touch-action:none;user-select:none;
}
.recorte-lienzo img{position:absolute;transform-origin:top left;max-width:none;cursor:grab}
#raizToasts{position:fixed;bottom:76px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:120;align-items:center}
.toast{
  background:var(--ap-texto);color:var(--ap-panel);padding:10px 18px;border-radius:999px;font-size:13px;
  box-shadow:var(--ap-sombra-fuerte);animation:subir .25s ease;max-width:92vw;text-align:center;
}
@keyframes subir{from{opacity:0;transform:translateY(10px)}}
.toast.ok{background:var(--ap-verde);color:#fff}
.toast.error{background:var(--ap-rojo);color:#fff}

/* ───── Barra inferior móvil ───── */
.barra-movil{display:none}

/* ════════════ RESPONSIVE ════════════ */
.solo-tablet{display:none}
@media (max-width:1240px){
  .paso{font-size:11.5px;padding:6px 8px}
  :root{--ap-panel-w:352px}
  .oc-tablet{display:none}
  .solo-tablet{display:inline}
  .indicador-guardado{display:none}
  .anuncio-fcv{padding-right:8px}
  .anuncio-fcv p{font-size:11px}
}
@media (max-width:1020px){
  .pasos{display:none}
  .marca-texto span{display:none}
  .lienzo{flex-direction:column}
  .panel-lat{
    width:100%;flex:1;border-right:0;min-height:0;
  }
  .zona-vista{display:none;position:fixed;inset:var(--ap-barra-h) 0 58px;z-index:35}
  body[data-movil="vista"] .zona-vista{display:flex}
  body[data-movil="vista"] .panel-lat{display:none}
  .barra-movil{
    display:flex;position:fixed;bottom:0;left:0;right:0;height:58px;z-index:80;
    background:var(--ap-panel);border-top:1px solid var(--ap-borde);
  }
  .bm-btn{flex:1;border:0;background:transparent;font-size:12.5px;font-weight:600;color:var(--ap-texto-suave)}
  .bm-btn.activo{color:var(--ap-acento);box-shadow:inset 0 2px 0 var(--ap-acento)}
  .paneles{padding-bottom:70px}
  .oc-movil{display:none}
  .pie-app{padding-bottom:64px}              /* hueco para la barra inferior fija */
  .grupo-historial{margin-right:0}
  .anuncio-fcv{display:none}
  /* En móvil la fila de pasos se oculta: la cabecera vuelve a ser una única fila de 60 px */
  .fila-sup{gap:8px}
}
@media (max-width:520px){
  .rejilla-plantillas{grid-template-columns:1fr 1fr;gap:8px}
  .rejilla-2{grid-template-columns:1fr}
  /* Cabecera compacta: todos los controles siguen presentes, sin scroll horizontal */
  .barra-sup{overflow:hidden}
  .fila-sup{gap:6px;padding:0 8px}
  .marca{min-width:0;gap:0}
  .marca-texto{display:none}
  .acciones-sup{gap:4px}
  .acciones-sup .btn{padding:7px 8px;gap:4px}
  .acciones-sup .solo-icono{width:30px;height:30px;padding:0;font-size:14px}
  .grupo-historial{gap:3px}
  .btn-pdf{font-size:11px;padding:7px 8px!important}
}
/* Scrollbars discretas */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--ap-borde);border-radius:99px;border:2px solid var(--ap-fondo)}
::-webkit-scrollbar-track{background:transparent}

/* ════════════ IMPRESIÓN — SOLO EL CV, A TAMAÑO A4 REAL ════════════ */
@media print{
  *{ -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html,body{height:auto;overflow:visible}
  body{background:#fff}
  /* Se oculta TODA la interfaz de la aplicación */
  .barra-sup,.panel-lat,.barra-vista,.vista-ayuda,.barra-movil,.pie-app,
  #raizToasts,.modal-fondo,.skip-link,.cv-medidor-oculto,#barraFina{display:none!important}
  .lienzo{display:block;overflow:visible;min-height:0}
  .zona-vista{display:block!important;position:static;inset:auto;min-width:0}
  .cv-visor{overflow:visible;padding:0;min-height:0}
  .cv-paginas{
    transform:none!important;width:auto!important;margin:0!important;
    display:block;gap:0;
  }
  .cv-pagina{
    margin:0!important;box-shadow:none!important;border-radius:0;
    page-break-after:always;break-after:page;
    width:210mm;height:297mm;overflow:hidden;
  }
  .cv-pagina:last-child{page-break-after:auto;break-after:auto}
  @page{size:A4 portrait;margin:0}
}

/* ════════════════════════════════════════════════════════════
   v05.04 — MIS CV · PRESETS · QR · PNG
   ════════════════════════════════════════════════════════════ */

/* ── 📁 Mis CV ── */
.miscv-guardar{display:flex;gap:8px;margin:6px 0 14px;align-items:stretch}
.miscv-guardar input{
  flex:1;min-width:0;padding:9px 12px;border:1.5px solid var(--ap-borde);border-radius:var(--ap-radio);
  font-size:13.5px;background:var(--ap-tarjeta,#fff);color:var(--ap-texto);
}
.miscv-guardar input:focus{outline:none;border-color:var(--ap-acento)}
.miscv-vacio{font-size:13px;line-height:1.6}
.miscv-item{
  border:1px solid var(--ap-borde);border-radius:var(--ap-radio);padding:10px 12px;margin-bottom:8px;
  background:var(--ap-tarjeta,#fff);
}
.miscv-info{display:flex;flex-direction:column;gap:1px;margin-bottom:7px}
.miscv-nombre{font-size:14px;word-break:break-word}
.miscv-input-renombrar{
  width:100%;padding:5px 8px;font-size:13.5px;border:1.5px solid var(--ap-acento);
  border-radius:7px;background:var(--ap-tarjeta,#fff);color:var(--ap-texto);
}
.miscv-acciones{display:flex;flex-wrap:wrap;gap:5px}
.miscv-acciones .btn-mini{border:1px solid var(--ap-borde);background:transparent;cursor:pointer;color:var(--ap-texto)}
.miscv-acciones .btn-mini:hover{background:var(--ap-acento-suave);border-color:var(--ap-acento)}
.miscv-acciones .btn-mini.peligro:hover{background:var(--ap-rojo-suave);border-color:var(--ap-rojo,#c0392b)}

.sep-panel{border:0;border-top:1px dashed var(--ap-borde);margin:18px 0}

/* ── ✨ Presets (Generar diseño) ── */
.presets-caja{
  border:1px solid var(--ap-borde);border-radius:var(--ap-radio);padding:12px;margin:4px 0 14px;
  background:var(--ap-tarjeta,#fff);
}
.presets-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preset{
  display:flex;align-items:center;gap:9px;padding:9px 10px;cursor:pointer;text-align:left;
  border:1.5px solid var(--ap-borde);border-radius:10px;background:transparent;color:var(--ap-texto);
  font-size:12.8px;font-weight:600;transition:all .15s;
}
.preset:hover{border-color:var(--ap-acento);transform:translateY(-1px);box-shadow:0 3px 10px rgba(20,30,60,.10)}
.preset:focus-visible{outline:2px solid var(--ap-acento)}
.preset-muestras{display:inline-flex;flex:none}
.preset-muestras i{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--ap-borde)}
.preset-muestras i+i{margin-left:-6px}

/* ── 🔳 QR en el panel Diseño ── */
.qr-vista{display:flex;gap:10px;align-items:center;margin-top:6px}
.qr-vista img{border:1px solid var(--ap-borde);border-radius:6px;background:#fff}
.qr-vista .mini{margin:0}
.mini.aviso{color:#9c5a10}

/* ── Zona de captura PNG (fuera de pantalla) ── */
.zona-png{position:fixed;left:-12000px;top:0;z-index:-10;pointer-events:none}
.zona-png .cv-pagina{box-shadow:none!important;margin:0!important}

@media (max-width:560px){
  .miscv-guardar{flex-direction:column}
  .presets-rejilla{grid-template-columns:1fr}
}

/* ── v05.04: pasos con desplegable (▾) y sus 4 supergrupos ── */
.paso-con-menu{display:flex;align-items:stretch;gap:2px;flex:1;max-width:230px}
.paso-con-menu .paso{flex:1;max-width:none}
.paso-caret{border:1px solid transparent;background:transparent;color:var(--ap-texto-suave);border-radius:8px;padding:0 6px;cursor:pointer;font-size:11px;flex:0 0 auto}
.paso-caret:hover{background:var(--ap-panel-2);color:var(--ap-texto)}
.menu-supergrupos{position:fixed;z-index:200;background:#fff;border:1px solid var(--ap-borde);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:6px;min-width:220px;display:flex;flex-direction:column;gap:2px}
.menu-supergrupos button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;background:none;border:none;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--ap-texto);font-size:13px;width:100%}
.menu-supergrupos button:hover{background:var(--ap-acento-suave);color:var(--ap-acento)}
.menu-supergrupos button .sub{font-size:11px;color:var(--ap-texto-suave);font-weight:400}

.supergrupo-diseno{margin-bottom:22px}
.supergrupo-diseno + .supergrupo-diseno{padding-top:18px;border-top:2px solid var(--ap-borde)}
.supergrupo-diseno>summary{list-style:none;cursor:pointer;user-select:none}
.supergrupo-diseno>summary::-webkit-details-marker{display:none}
.supergrupo-titulo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.supergrupo-titulo::before{content:"▸ ";color:var(--ap-acento);font-size:14px}
.supergrupo-diseno[open]>.supergrupo-titulo::before{content:"▾ "}
.supergrupo-titulo b{font-size:15px;letter-spacing:.02em;color:var(--ap-acento)}
.supergrupo-sub{font-size:12px;color:var(--ap-texto-suave,#6b7686);font-weight:400}
.supergrupo-cuerpo{padding-top:2px}

/* ── v05.04: panel «6 Detalle» (Apartados) ── */
.apt-campos--off{opacity:.45}
.apt-campos--off .ctl{pointer-events:none}
.apt-item summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.apt-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
.apt-badge--gris{background:var(--ap-panel-2);color:var(--ap-texto-suave)}
.apt-badge--acento{background:var(--ap-acento-suave);color:var(--ap-acento)}
.apt-acordeon{border:1px solid var(--ap-borde);border-radius:8px;margin-top:8px;overflow:hidden}
.apt-acordeon>summary{padding:8px 10px;font-size:12.5px;font-weight:700;cursor:pointer;background:var(--ap-panel-2);list-style:none}
.apt-acordeon>summary::-webkit-details-marker{display:none}
.apt-acordeon>summary::before{content:"▸ ";color:var(--ap-acento)}
.apt-acordeon[open]>summary::before{content:"▾ "}
.apt-acordeon-cuerpo{padding:10px}
.apt-efectos{display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:6px}
.apt-campos-contacto-tam-lista{display:flex;flex-direction:column;gap:10px}
.apt-campo-contacto-tam{padding:8px 10px;border:1px solid var(--ap-borde);border-radius:8px;background:var(--ap-panel-2);margin-bottom:8px}
.apt-campo-contacto-tit{font-weight:600;margin-bottom:4px}
.apt-campo-contacto-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.apt-campo-contacto-orden{display:flex;gap:4px}
.apt-campo-contacto-orden .btn{padding:3px 7px;font-size:12px}
.apt-campo-contacto-oculto{opacity:.55}
.ctl-check-inline{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ap-texto);cursor:pointer;white-space:nowrap}
.ctl-check-inline input{margin:0}
.visible-toggle{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}