/* Personalización del perfil público (fase cliente, 2026-10-11).
   Lo cargan Configuración de perfil, la ficha de gestión y el perfil público, para que
   la muestra y el resultado salgan de la misma definición. Las claves son las de
   apps/access/personalizacion.py (lista cerrada): nada de esto lo escribe la persona.

   1. Tipografías (solo Gold vigente). Fuentes que el sitio ya carga (Roboto del perfil,
      Inter) o pilas del sistema: no se descarga ningún archivo nuevo. */
@font-face{font-family:'Roboto Perfil';src:url("../fonts/perfil/roboto-700.696b0cbde3a2.woff") format('woff');font-weight:700;font-display:swap}
:root{
  --fuente-perfil-predeterminada:'Roboto Perfil',Arial,sans-serif;
  --fuente-perfil-moderna:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fuente-perfil-elegante:Georgia,Cambria,'Times New Roman',serif;
  --fuente-perfil-clasica:'Times New Roman',Times,'Liberation Serif',serif;
  --fuente-perfil-profesional:'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.fuente-perfil--predeterminada{font-family:var(--fuente-perfil-predeterminada)}
.fuente-perfil--moderna{font-family:var(--fuente-perfil-moderna)}
.fuente-perfil--elegante{font-family:var(--fuente-perfil-elegante)}
.fuente-perfil--clasica{font-family:var(--fuente-perfil-clasica)}
.fuente-perfil--profesional{font-family:var(--fuente-perfil-profesional)}

/* Selector de Configuración: una tarjeta por estilo, con su muestra. */
.perfil-fuentes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.perfil-fuente{display:flex;align-items:center;gap:10px;min-width:0;margin:0;padding:10px 12px;border:1px solid #d7e2ef;border-radius:12px;background:#fcfdff;cursor:pointer}
.perfil-fuente:hover{border-color:#a9c4ee}
.perfil-fuente input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--fc-primario)}
.perfil-fuente:has(input:checked){border-color:var(--fc-primario);background:#f2f7ff;box-shadow:0 0 0 2px rgba(var(--fc-primario-rgb),.14)}
.perfil-fuente:has(input:focus-visible){outline:2px solid var(--fc-primario);outline-offset:2px}
.perfil-fuente__muestra{display:grid;flex:none;place-items:center;width:44px;height:44px;border-radius:10px;background:#eef4ff;color:#0f172a;font-size:22px;font-weight:700;line-height:1}
.perfil-fuente__texto{display:grid;min-width:0}
.perfil-fuente__texto b{color:#17233a;font-size:14px;font-weight:700}
.perfil-fuente__texto small{color:#64748b;font-size:12px;line-height:1.35}
.perfil-plan-bloqueo{display:block;padding:10px 12px;border:1px dashed #d7e2ef;border-radius:10px;background:#f8fafc}
.perfil-plan-bloqueo i{color:#b7791f}
.perfil-plan-bloqueo a{font-weight:700}

/* 2. Banners predefinidos (todos los freelancers). Seis fondos internos: van de un tono
      oscuro, donde se lee el nombre en blanco, a uno más vivo. La clase banner-<clave>
      solo define la variable; quien la pinta es .banner-muestra o el hero del perfil. */
.banner-preset_1{--banner:linear-gradient(110deg,#052144 0%,#0b3a6b 52%,#1668e3 100%);--banner-base:#1668e3}
.banner-preset_2{--banner:linear-gradient(110deg,#4a1705 0%,#9a3412 52%,#f97316 100%);--banner-base:#f97316}
.banner-preset_3{--banner:linear-gradient(110deg,#03241c 0%,#0f5132 52%,#22a35a 100%);--banner-base:#22a35a}
.banner-preset_4{--banner:linear-gradient(110deg,#1c1647 0%,#4c1d95 52%,#8b5cf6 100%);--banner-base:#8b5cf6}
.banner-preset_5{--banner:linear-gradient(110deg,#0b1220 0%,#1f2937 52%,#64748b 100%);--banner-base:#64748b}
.banner-preset_6{--banner:linear-gradient(110deg,#032a2c 0%,#0f766e 52%,#06b6d4 100%);--banner-base:#06b6d4}
.banner-muestra{background:var(--banner)}

/* Selector de Configuración: un círculo por banner, con marca de selección. */
.perfil-banners{min-width:0;margin:14px 0 0;padding:0;border:0}
.perfil-banners legend{float:none;width:auto;margin-bottom:8px}
.perfil-banners__opciones{display:flex;flex-wrap:wrap;gap:10px}
.perfil-banner-opcion{position:relative;display:block;margin:0;cursor:pointer}
.perfil-banner-opcion input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.perfil-banner-opcion__muestra{display:block;width:42px;height:42px;overflow:hidden;border:2px solid #fff;border-radius:50%;background:var(--banner-base,#e2e8f0);box-shadow:0 0 0 1px #cbd5e1}
.perfil-banner-opcion__muestra img{display:block;width:100%;height:100%;object-fit:cover}
.perfil-banner-opcion input:checked + .perfil-banner-opcion__muestra{box-shadow:0 0 0 3px var(--fc-primario)}
.perfil-banner-opcion input:checked + .perfil-banner-opcion__muestra::after{content:"\2713";position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:17px;height:17px;
  border:2px solid #fff;border-radius:50%;background:var(--fc-primario);color:#fff;font-size:10px;font-weight:700;line-height:1}
.perfil-banner-opcion input:focus-visible + .perfil-banner-opcion__muestra{outline:2px solid var(--fc-primario);outline-offset:3px}
.perfil-banners__nombre{margin:8px 0 0}
/* Vista previa de Configuración y portadas de la ficha con un banner predefinido. */
.perfil-banner-editor__vista.banner-muestra,.perfil-portada.banner-muestra,.pe-vista__banner.banner-muestra{background:var(--banner)}
.perfil-banner-editor__vista.banner-muestra::after{display:none}

/* Vista previa del encabezado con el banner elegido (2026-10-27, js/vista-previa-banner.js).
   Cada marco es la página real de «Previsualizar perfil» a su ancho de verdad (1280, 768 y
   390 px), reducida con transform para caber aquí. */
.perfil-banner-previa[hidden]{display:none}
.perfil-banner-previa__cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.perfil-banner-previa__cerrar{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#eef3fb;color:#334155;font-size:20px;cursor:pointer}
.perfil-banner-previa__cerrar:hover{background:#e2e8f0}
.perfil-banner-previa__marcos{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1.4fr);gap:14px;margin-top:14px;align-items:start}
.perfil-banner-previa__marco{min-width:0;margin:0}
.perfil-banner-previa__marco--escritorio{grid-column:1/-1}
.perfil-banner-previa__marco--movil{max-width:260px}
.perfil-banner-previa__lienzo{position:relative;overflow:hidden;border:1px solid #d8e2f0;border-radius:12px;background:#f8fafc}
.perfil-banner-previa__lienzo iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#fff}
.perfil-banner-previa__marco figcaption{margin-top:6px;color:var(--fc-texto-suave,#64748b);font-size:12px;font-weight:600}
.perfil-banner-previa__estado{margin:12px 0 0}
/* Editor del encuadre (2026-10-27, js/vista-previa-banner.js). La capa va sobre el hero de
   cada marco y es la que recibe el arrastre; touch-action:none para que el dedo mueva la
   imagen y no la página. No pinta nada: lo que se ve debajo es el perfil real. */
.perfil-encuadre[hidden],.perfil-encuadre__capa[hidden]{display:none}
.perfil-encuadre__capa{position:absolute;z-index:2;cursor:grab;touch-action:none;border-radius:2px}
.perfil-encuadre__capa.is-arrastrando{cursor:grabbing}
.perfil-encuadre__capa:focus-visible{outline:3px solid #0b4fd6;outline-offset:-3px}
.perfil-encuadre{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:14px;padding:12px 14px;
  border:1px solid #d8e2f0;border-radius:12px;background:#f8fafc}
.perfil-encuadre__ayuda{flex:1 1 100%;display:flex;align-items:center;gap:8px;margin:0;color:#334155;font-size:13px;line-height:18px}
.perfil-encuadre__ayuda i{flex:none;font-size:18px;color:#0b4fd6}
.perfil-encuadre__zoom{display:flex;align-items:center;gap:8px;flex:1 1 280px;min-width:0}
.perfil-encuadre__zoom label{margin:0;font-weight:600;font-size:13px;color:#1e293b}
.perfil-encuadre__zoom input[type=range]{flex:1 1 auto;min-width:0;accent-color:#0b4fd6}
.perfil-encuadre__zoom output{min-width:48px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;color:#334155}
.perfil-encuadre__paso{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #cbd5e1;
  border-radius:50%;background:#fff;color:#1e293b;font-size:18px;cursor:pointer}
.perfil-encuadre__paso:hover{background:#eef3fb}
.perfil-encuadre__paso:focus-visible{outline:3px solid #0b4fd6;outline-offset:2px}
.perfil-encuadre__acciones{display:flex;flex-wrap:wrap;gap:10px}
/* Vista que se edita (2026-10-28): escritorio, tablet y móvil tienen cada una su encuadre.
   La activa lleva el borde azul del editor; los botones permiten elegirla con el teclado. */
.perfil-banner-previa__marco.is-activo .perfil-banner-previa__lienzo{border-color:#0b4fd6;box-shadow:0 0 0 2px #0b4fd6}
.perfil-banner-previa__marco.is-activo figcaption{color:#0b4fd6}
.perfil-encuadre__vista{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.perfil-encuadre__activo{margin:0;font-size:13px;color:#1e293b}
.perfil-encuadre__activo strong{color:#0b4fd6}
.perfil-encuadre__vistas{display:inline-flex;gap:6px}
.perfil-encuadre__vistas button{min-height:32px;padding:0 12px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;
  color:#1e293b;font-size:13px;font-weight:600;cursor:pointer}
.perfil-encuadre__vistas button:hover{background:#eef3fb}
.perfil-encuadre__vistas button[aria-pressed="true"]{border-color:#0b4fd6;background:#0b4fd6;color:#fff}
.perfil-encuadre__vistas button:focus-visible{outline:3px solid #0b4fd6;outline-offset:2px}
.perfil-banner-previa__acciones{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:12px}
@media (max-width:575.98px){
  .perfil-banner-previa__marcos{grid-template-columns:minmax(0,1fr)}
  .perfil-banner-previa__marco--movil{max-width:none}
  .perfil-banner-previa__acciones .fc-boton{flex:1 1 100%}
}