/* ══════════════════════════════════════════════════════════════════
   Maquetador de Webs · omibuAI — identidad definitiva (ago-2026)
   Tokens de brand/omibuai_ago2026/tokens.css. Cuatro colores del manual
   (tinta · peri · lima · blanco) + derivados marcados. El cuerpo se lee
   en tinta o en blanco; peri y lima son luz. Cero emojis: Phosphor.
   ══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Fraunces'; src:url('/fonts/fraunces-var.woff2') format('woff2-variations'); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:'Fraunces'; src:url('/fonts/fraunces-italic-var.woff2') format('woff2-variations'); font-weight:100 900; font-style:italic; font-display:swap}

:root{
  --tinta:#3A3A4D; --peri:#7079FF; --lima:#DCFCA3; --blanco:#FFFFFF;
  --bg:#F7F7FA; --panel:#EFEFF5; --tinta-2:#454559; --tinta-alta:#21212C;
  --tx:var(--tinta); --tx-2:#5C5C7A; --tx-3:#70708F;
  --peri-texto:#3944EF; --peri-fuerte:#2E37B8; --peri-velo:rgba(112,121,255,.12);
  --lima-texto:#5E7A1E; --ok:#5E7A1E; --ok-bg:#EEF6DB;
  --warn:#8A5A00; --warn-bg:#F8EFD8; --rojo:#A8253F; --rojo-bg:#F8E8EB;
  --linea:#DCDCE5; --linea-control:#C6C6D2;
  --reticula:rgba(58,58,77,.08); --reticula-inv:rgba(255,255,255,.10);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Neue Haas Grotesk Display Pro','Helvetica Neue',Inter,Arial,sans-serif;
  --radio-t:20px; --radio:8px; --pill:999px;
  --sombra:0 1px 2px rgba(58,58,77,.05); --sombra-alta:0 20px 44px -28px rgba(58,58,77,.5);
  --gutter:clamp(20px,4vw,48px); --ancho:1240px;
  --muelle:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none !important}
html,body{min-height:100%}
body{font-family:var(--sans); color:var(--tx); background:var(--bg); -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--peri-texto)}
h1,h2,h3{font-family:var(--serif); font-weight:300; letter-spacing:-.01em; line-height:1.08}
h1 em,h2 em{font-style:italic; font-weight:300}
.visualmente-oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.etiqueta{font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-2)}

/* ── Puerta ──────────────────────────────────────────────────────── */
.puerta{position:fixed; inset:0; background:var(--tinta); color:var(--blanco); display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden;
  background-image:linear-gradient(var(--reticula-inv) 1px, transparent 1px); background-size:100% 84px}
.puerta::before{content:''; position:absolute; left:18%; top:-20%; width:180px; height:140%; background:linear-gradient(180deg,transparent,var(--peri) 60%,transparent); filter:blur(48px); opacity:.55; pointer-events:none}
.puerta::after{content:''; position:absolute; right:10%; bottom:-10%; width:420px; height:420px; background:radial-gradient(closest-side, rgba(220,252,163,.35), transparent); pointer-events:none}
.puerta-centro{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px; max-width:560px}
.puerta .etiqueta{color:rgba(255,255,255,.62); margin-bottom:28px}
.puerta-logo{width:min(220px,58vw); height:auto; display:block}
.puerta-sub{margin-top:22px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.82); max-width:44ch}
.puerta-sub em{font-family:var(--serif); font-style:italic; color:var(--lima)}
.form-entrar{margin-top:36px; width:min(360px,84vw); display:flex; flex-direction:column; gap:12px}
.campo{display:flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.18); border-radius:var(--radio); padding:4px 6px 4px 16px; background:rgba(255,255,255,.05); transition:border-color .25s, background .25s}
.campo:focus-within{border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.08)}
.campo > i{color:rgba(255,255,255,.5); font-size:18px}
.campo input{flex:1; min-width:0; background:none; border:0; outline:0; font-size:16px; color:var(--blanco); padding:12px 0}
.campo input::placeholder{color:rgba(255,255,255,.42)}
.btn-entrar{margin-top:4px; border:0; cursor:pointer; border-radius:var(--pill); padding:14px 18px; background:var(--lima); color:var(--tinta); font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; transition:opacity .15s, transform .15s; text-decoration:none}
.btn-entrar:hover{opacity:.92}
.btn-entrar:active{transform:scale(.98)}
.btn-entrar:focus-visible{outline:2px solid var(--lima); outline-offset:3px}
.error-entrar{min-height:18px; font-size:13px; text-align:center; color:#F0B9C4}
.olvido{margin-top:2px; align-self:center; background:none; border:0; cursor:pointer; padding:6px 8px; font-size:13px; color:rgba(255,255,255,.72); text-decoration:underline; text-underline-offset:3px}
.olvido:hover{color:var(--blanco)}
.olvido-nota{margin-top:6px; font-size:13px; line-height:1.55; text-align:center; color:rgba(255,255,255,.82); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:var(--radio); padding:12px 16px}
.olvido-nota strong{color:var(--blanco); font-weight:600}
.puerta-pie{position:absolute; bottom:28px; left:0; right:0; display:flex; justify-content:center; z-index:1}
.pie-nota{font-size:11px; color:rgba(255,255,255,.5); letter-spacing:.04em}

/* ── Barra ───────────────────────────────────────────────────────── */
.barra{background:var(--blanco); color:var(--tx); border-bottom:1px solid var(--linea); display:flex; align-items:center; gap:18px; padding:0 var(--gutter); height:58px; position:sticky; top:0; z-index:20}
.barra-logo{display:flex; align-items:center; text-decoration:none}
.barra-logo img{height:20px; width:auto; display:block}
.barra-seccion{font-size:12px; color:var(--tx-2); letter-spacing:.06em; border-left:1px solid var(--linea); padding-left:18px; white-space:nowrap}
.barra-seccion strong{font-weight:600; color:var(--tx)}
.barra-hueco{flex:1}
.barra-reloj{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--tx-2); font-variant-numeric:tabular-nums}
.barra-reloj i{font-size:15px; color:var(--tx-3)}
.barra-volver{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--tx-2); text-decoration:none; padding:6px 10px; border-radius:var(--radio)}
.barra-volver:hover{background:var(--panel); color:var(--tx)}
.menu-usuario{position:relative}
.menu-boton{display:flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; font-size:13px; font-weight:500; padding:8px 10px; border-radius:var(--radio); transition:background .15s}
.menu-boton:hover{background:var(--panel)}
.menu-boton:focus-visible{outline:2px solid var(--peri-texto); outline-offset:2px}
.menu-boton .ph-user-circle{font-size:20px; color:var(--peri-texto)}
.menu-boton .ph-caret-down{font-size:12px; color:var(--tx-3)}
.menu-lista{position:absolute; right:0; top:calc(100% + 8px); min-width:240px; background:var(--blanco); border:1px solid var(--linea); border-radius:12px; box-shadow:0 8px 24px rgba(58,58,77,.12); padding:6px; z-index:30}
.menu-cab{padding:10px 12px 8px; border-bottom:1px solid var(--linea); margin-bottom:6px}
.menu-nombre{font-size:14px; font-weight:600}
.menu-correo{font-size:12px; color:var(--tx-2); margin-top:2px; overflow-wrap:anywhere}
.menu-org{font-size:11px; color:var(--tx-2); margin-top:6px; display:flex; align-items:center; gap:5px}
.menu-item{display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; cursor:pointer; text-decoration:none; font-size:14px; color:var(--tx); padding:10px 12px; border-radius:var(--radio); transition:background .12s; text-align:left}
.menu-item:hover{background:var(--panel)}
.menu-item i{font-size:16px; color:var(--tx-2)}
.menu-item.peligro, .menu-item.peligro i{color:var(--rojo)}

/* ── Contenido ───────────────────────────────────────────────────── */
.contenido{max-width:var(--ancho); margin:0 auto; padding:clamp(24px,4vw,44px) var(--gutter) 96px}
.aviso{display:flex; align-items:center; gap:10px; background:var(--warn-bg); color:var(--warn); border:1px solid rgba(138,90,0,.18); border-radius:var(--radio); padding:12px 16px; font-size:14px; margin-bottom:24px}
.aviso i{font-size:17px}
.aviso a{color:inherit; font-weight:600}
.cabecera{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px}
.cabecera h1{font-size:clamp(30px,4vw,42px)}
.cabecera .etiqueta{display:block; margin-bottom:10px}
.cabecera p{margin-top:10px; color:var(--tx-2); font-size:15px; max-width:60ch}
.cab-acciones{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* Botones: primario peri de texto sobre claro; sobre tinta, lima. Píldora. */
.btn{border:0; cursor:pointer; border-radius:var(--pill); font-size:14px; font-weight:600; padding:11px 18px; display:inline-flex; align-items:center; gap:8px; background:var(--peri-texto); color:var(--blanco); text-decoration:none; transition:background .15s, opacity .15s, transform .15s; white-space:nowrap}
.btn:hover{background:var(--peri-fuerte)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--peri-texto); outline-offset:2px}
.btn[disabled]{opacity:.45; cursor:default; transform:none}
.btn i{font-size:16px}
.btn-sec{background:var(--blanco); color:var(--tx); border:1px solid var(--linea-control)}
.btn-sec:hover{background:var(--panel)}
.btn-tinta{background:var(--tinta); color:var(--blanco)}
.btn-tinta:hover{background:var(--tinta-alta)}
.btn-lima{background:var(--lima); color:var(--tinta)}
.btn-lima:hover{background:#D0F58A}
.btn-suave{background:var(--peri-velo); color:var(--peri-texto)}
.btn-suave:hover{background:rgba(112,121,255,.2)}
.btn-mini{padding:7px 12px; font-size:12.5px}
.btn-peligro{background:var(--blanco); color:var(--rojo); border:1px solid var(--linea-control)}
.btn-peligro:hover{background:var(--rojo-bg)}
.btn-icono{background:none; border:1px solid var(--linea); color:var(--tx-2); width:34px; height:34px; border-radius:var(--pill); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s, color .15s}
.btn-icono:hover{border-color:var(--tx-3); color:var(--tx)}
.btn-icono i{font-size:16px}

.nota-form{font-size:13px; min-height:17px}
.nota-form.ok{color:var(--ok)}
.nota-form.mal{color:var(--rojo)}
@keyframes girar{to{transform:rotate(360deg)}}
.girando{display:inline-block; animation:girar 1s linear infinite}

/* Chips */
.chip{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--panel); color:var(--tx-2); border-radius:var(--pill); padding:4px 10px; white-space:nowrap}
.chip.ok{background:var(--ok-bg); color:var(--ok)}
.chip.activo{background:var(--peri-velo); color:var(--peri-texto)}
.chip.candado{background:var(--panel); color:var(--tx-3)}
.chip.peri{background:var(--peri-velo); color:var(--peri-texto)}
.chip-f{font-size:11.5px; font-weight:500; letter-spacing:0; text-transform:none; background:var(--blanco); border:1px solid var(--linea); color:var(--tx); padding:5px 10px; cursor:pointer; transition:border-color .15s, background .15s}
.chip-f:hover{border-color:var(--tx-3)}
.chip-f.on{background:var(--tinta); color:var(--blanco); border-color:var(--tinta)}

/* Formularios */
.formulario{display:grid; gap:14px}
.fila-doble{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media (max-width:640px){.fila-doble{grid-template-columns:1fr}}
.grupo{display:flex; flex-direction:column; gap:6px}
.grupo label{font-size:12px; font-weight:600; color:var(--tx-2)}
.grupo small{font-size:12px; color:var(--tx-3); line-height:1.4}
.grupo input,.grupo select,.grupo textarea{font-size:15px; color:var(--tx); background:var(--blanco); border:1px solid var(--linea-control); border-radius:var(--radio); padding:11px 12px; outline:none; width:100%; transition:border-color .15s, box-shadow .15s}
.grupo textarea{resize:vertical; min-height:88px; line-height:1.5}
.grupo input:focus,.grupo select:focus,.grupo textarea:focus{border-color:var(--peri); box-shadow:0 0 0 3px var(--peri-velo)}
.grupo input[readonly]{color:var(--tx-2); background:var(--bg); cursor:default}
.acciones{display:flex; align-items:center; gap:14px; margin-top:4px; flex-wrap:wrap}

/* Bloques y tarjetas */
.bloque{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-t); box-shadow:var(--sombra); padding:24px}
.bloque > h2{font-size:21px; display:flex; align-items:center; gap:10px; margin-bottom:4px}
.bloque > h2 i{font-size:18px; color:var(--tx-3)}
.bloque-sub{font-size:13.5px; color:var(--tx-2); margin-bottom:18px; line-height:1.5; max-width:70ch}
.ajustes{display:flex; flex-direction:column; gap:22px; max-width:820px}
.vacio{border:1px dashed var(--linea-control); border-radius:var(--radio-t); padding:40px 24px; text-align:center; color:var(--tx-2); font-size:14px; display:flex; flex-direction:column; align-items:center; gap:12px}
.vacio i{font-size:30px; color:var(--tx-3)}
.vacio strong{font-family:var(--serif); font-weight:300; font-size:20px; color:var(--tx)}

/* ── Lista de proyectos ──────────────────────────────────────────── */
.buscador{display:flex; align-items:center; gap:10px; background:var(--blanco); border:1px solid var(--linea-control); border-radius:var(--pill); padding:6px 8px 6px 16px; width:min(380px,100%)}
.buscador i{color:var(--tx-3); font-size:17px}
.buscador input{border:0; outline:0; background:none; flex:1; min-width:0; font-size:14px; padding:6px 0}
.filtros{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:22px}
.lista-proy{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))}
.proy{display:flex; flex-direction:column; gap:12px; text-align:left; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-t); box-shadow:var(--sombra); padding:20px; cursor:pointer; color:var(--tx); transition:transform .35s var(--muelle), box-shadow .35s var(--muelle), border-color .35s}
.proy:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:var(--tx-3)}
.proy:focus-visible{outline:2px solid var(--peri-texto); outline-offset:3px}
.proy h2{font-size:21px; font-weight:300}
.proy .sub{font-size:13px; color:var(--tx-2); margin-top:2px}
.proy .fila{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.proy .fecha{font-size:12px; color:var(--tx-3)}
.proy .sig{font-size:13px; color:var(--tx); display:flex; align-items:center; gap:6px}
.proy .sig i{color:var(--peri-texto)}
.prog{display:flex; gap:4px}
.prog span{flex:1; height:5px; border-radius:3px; background:var(--linea)}
.prog span.hecho{background:var(--peri)}
.prog span.activo{background:var(--tinta)}
.proy.elegido .prog span.hecho{background:var(--lima-texto)}

/* ── Proyecto: carril + contenido ────────────────────────────────── */
.proyecto{display:grid; grid-template-columns:290px 1fr; gap:clamp(20px,3vw,40px); align-items:start}
@media (max-width:900px){.proyecto{grid-template-columns:1fr}}
.carril{position:sticky; top:78px; display:flex; flex-direction:column; gap:14px}
@media (max-width:900px){.carril{position:static}}
.pasos{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-t); padding:10px; display:flex; flex-direction:column; gap:2px}
@media (max-width:900px){.pasos{flex-direction:row; overflow-x:auto}}
.paso{display:flex; align-items:center; gap:12px; text-align:left; background:none; border:0; cursor:pointer; padding:11px 12px; border-radius:12px; color:var(--tx); transition:background .15s; width:100%}
.paso:hover{background:var(--panel)}
.paso.actual{background:var(--peri-velo)}
.paso[disabled]{cursor:default; color:var(--tx-3)}
.paso[disabled]:hover{background:none}
.paso .n{width:28px; height:28px; border-radius:50%; border:1.5px solid var(--linea-control); display:grid; place-items:center; font-size:12px; font-weight:600; flex:none; color:var(--tx-2)}
.paso.hecho .n{background:var(--tinta); border-color:var(--tinta); color:var(--lima)}
.paso.actual .n{border-color:var(--peri-texto); color:var(--peri-texto)}
.paso .t{display:flex; flex-direction:column; min-width:0}
.paso .t b{font-weight:600; font-size:14px; white-space:nowrap}
.paso .t small{font-size:11.5px; color:var(--tx-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.paso.hecho .t small{color:var(--ok)}
.siguiente{background:var(--tinta); color:var(--blanco); border-radius:var(--radio-t); padding:20px; position:relative; overflow:hidden;
  background-image:linear-gradient(var(--reticula-inv) 1px, transparent 1px); background-size:100% 42px}
.siguiente::after{content:''; position:absolute; right:-40px; bottom:-60px; width:180px; height:180px; background:radial-gradient(closest-side, rgba(220,252,163,.4), transparent); pointer-events:none}
.siguiente .etiqueta{color:rgba(255,255,255,.62); margin-bottom:8px}
.siguiente h3{font-size:22px; color:var(--blanco); margin-bottom:14px; position:relative; z-index:1}
.siguiente h3 em{font-style:italic; color:var(--lima)}
.siguiente .btn{position:relative; z-index:1}
.siguiente p{font-size:12.5px; color:rgba(255,255,255,.82); margin-top:12px; position:relative; z-index:1}
.cuota-mini{font-size:12px; color:var(--tx-3); padding:0 6px; display:flex; gap:12px; flex-wrap:wrap}
.cuota-mini b{color:var(--tx-2); font-weight:600}

.pantalla{display:flex; flex-direction:column; gap:18px; min-width:0}
.pantalla-cab{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap}
.pantalla-cab h2{font-size:clamp(26px,3vw,34px)}
.pantalla-cab p{color:var(--tx-2); font-size:14px; margin-top:6px; max-width:64ch}
.barra-acciones{position:sticky; bottom:16px; z-index:8; display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--linea); border-radius:var(--pill); padding:10px 12px 10px 18px; box-shadow:var(--sombra-alta)}
.barra-acciones .nota-form{flex:1; min-width:120px}
.sello{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ok)}
.sello i{font-size:17px}
details.avanzado{border-top:1px dashed var(--linea); padding-top:12px; margin-top:4px}
details.avanzado summary{cursor:pointer; font-size:12.5px; color:var(--tx-2); list-style:none; display:flex; align-items:center; gap:6px}
details.avanzado summary::-webkit-details-marker{display:none}
.json-editor{width:100%; min-height:260px; resize:vertical; margin-top:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.5; background:var(--bg); border:1px solid var(--linea-control); border-radius:var(--radio); padding:12px; outline:none}
.json-editor:focus{border-color:var(--peri)}

/* Estructura */
.pag{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-t); padding:18px 20px; display:flex; flex-direction:column; gap:12px}
.pag-cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pag-cab h3{font-size:19px; flex:1; min-width:160px}
.pag-cab code{font-size:12px; font-weight:600; color:var(--peri-texto); background:var(--peri-velo); border-radius:6px; padding:2px 8px}
.pag-meta{font-size:13px; color:var(--tx-2); line-height:1.55; display:grid; gap:4px}
.pag-meta b{color:var(--tx); font-weight:600}
.secciones{display:flex; flex-direction:column; gap:6px}
.sec{display:flex; gap:10px; align-items:baseline; background:var(--bg); border:1px solid var(--linea); border-radius:var(--radio); padding:9px 12px; font-size:13.5px; line-height:1.5}
.sec .tipo{flex:none; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--peri-texto); min-width:82px}
.sec .txt{color:var(--tx-2); flex:1}
.pag.editando .pag-cab h3, .pag.editando .pag-meta{display:none}
.editor-pag{display:grid; gap:10px}
.editor-pag .grupo input, .editor-pag .grupo textarea{padding:8px 10px; font-size:14px}
.sec-edit{display:grid; grid-template-columns:130px 1fr 34px; gap:8px; align-items:center}
.sec-edit input{padding:8px 10px; font-size:13.5px; border:1px solid var(--linea-control); border-radius:var(--radio); width:100%}
.nav-orden{display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--tx-2)}
.nav-orden span{font-size:12px; font-weight:600; color:var(--tx); background:var(--panel); border-radius:6px; padding:4px 9px}
.notas-seo{font-size:13px; color:var(--tx-2); background:var(--bg); border-radius:var(--radio); padding:12px 14px; line-height:1.55}
.notas-seo b{color:var(--tx)}

/* Copy: editable en línea */
.bloque-copy{display:grid; gap:6px; padding:12px 0; border-top:1px solid var(--linea)}
.bloque-copy:first-of-type{border-top:0}
.bloque-copy .tipo{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--peri-texto)}
.bloque-copy input{font-family:var(--serif); font-weight:300; font-size:19px; border:1px solid transparent; border-radius:var(--radio); padding:6px 8px; margin-left:-8px; width:calc(100% + 8px); background:none; transition:border-color .15s, background .15s}
.bloque-copy textarea{font-size:14px; line-height:1.6; border:1px solid transparent; border-radius:var(--radio); padding:6px 8px; margin-left:-8px; width:calc(100% + 8px); background:none; resize:none; overflow:hidden; min-height:40px; transition:border-color .15s, background .15s}
.bloque-copy input:hover, .bloque-copy textarea:hover{border-color:var(--linea)}
.bloque-copy input:focus, .bloque-copy textarea:focus{outline:none; border-color:var(--peri); background:var(--blanco)}
.sucio{font-size:12.5px; color:var(--warn); display:inline-flex; align-items:center; gap:6px}

/* Referencias */
.dos-col{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
@media (max-width:1000px){.dos-col{grid-template-columns:1fr}}
.catalogo{display:flex; flex-direction:column; gap:6px; max-height:560px; overflow:auto; padding-right:4px}
.sitio{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--linea); border-radius:12px; background:var(--blanco)}
.sitio .t{flex:1; min-width:0}
.sitio .t b{font-weight:600; font-size:14px; display:block}
.sitio .t small{font-size:11.5px; color:var(--tx-3); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sitio .plugs{display:flex; gap:4px; flex-wrap:wrap; margin-top:4px}
.sitio .plugs span{font-size:10px; background:var(--panel); border-radius:4px; padding:1px 6px; color:var(--tx-2)}
.sitio.puesto{opacity:.5}
.ref{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-t); overflow:hidden; display:grid; grid-template-columns:120px 1fr; gap:0}
@media (max-width:560px){.ref{grid-template-columns:1fr}}
.ref .img{background:var(--panel); min-height:120px; display:grid; place-items:center; color:var(--tx-3); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.ref .img img{width:100%; height:100%; object-fit:cover; display:block}
.ref .cuerpo{padding:14px 16px; display:grid; gap:8px; min-width:0}
.ref .cab{display:flex; align-items:center; gap:8px; justify-content:space-between}
.ref .cab b{font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ref .url{font-size:11.5px; color:var(--tx-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none}
.ref .paleta{display:flex; gap:4px}
.ref .paleta span{width:22px; height:22px; border-radius:6px; border:1px solid rgba(58,58,77,.12)}
.ref .linea-d{font-size:12.5px; color:var(--tx-2); line-height:1.5}
.ref .linea-d b{color:var(--tx); font-weight:600}
.ref .rec{display:flex; gap:4px; flex-wrap:wrap}
.ref .rec span{font-size:10.5px; background:var(--peri-velo); color:var(--peri-texto); border-radius:4px; padding:2px 7px}
.ref textarea{font-size:12.5px; border:1px solid var(--linea); border-radius:var(--radio); padding:6px 8px; resize:none; min-height:34px; overflow:hidden; background:var(--bg)}
.captura{display:flex; gap:8px; align-items:center}
.captura input{flex:1; min-width:0; font-size:14px; border:1px solid var(--linea-control); border-radius:var(--pill); padding:10px 16px; outline:none}
.captura input:focus{border-color:var(--peri)}

/* Imágenes (Pexels) */
.fotos-elegidas{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px}
.fotos-elegidas .vacio{grid-column:1 / -1; padding:24px}
.fotos-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin-top:14px}
.foto{position:relative; border-radius:12px; overflow:hidden; background:var(--panel); aspect-ratio:4/3; margin:0}
.foto img{width:100%; height:100%; object-fit:cover; display:block}
.foto figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 10px 8px; font-size:11px; color:#fff; background:linear-gradient(180deg, transparent, rgba(58,58,77,.75)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.foto figcaption a{color:#fff; text-decoration:none}
.foto .anadir{position:absolute; right:8px; top:8px; opacity:0; transition:opacity .2s}
.foto:hover .anadir, .foto .anadir[disabled]{opacity:1}
.foto .quitar{position:absolute; right:8px; top:8px; background:rgba(255,255,255,.9)}
.foto.hero{grid-column:span 2; grid-row:span 2}
.foto.hero figcaption{font-weight:600}
.sel-ori{font-size:13px; border:1px solid var(--linea-control); border-radius:var(--pill); padding:9px 12px; background:var(--blanco)}
@media (max-width:560px){.foto.hero{grid-column:span 1; grid-row:span 1}}

/* Borradores */
.direcciones{display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr))}
.dir{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-t); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, box-shadow .35s var(--muelle)}
.dir.elegido{border:2px solid var(--lima-texto); box-shadow:0 0 0 4px rgba(94,122,30,.1)}
.dir .vista{position:relative; height:220px; background:var(--panel); overflow:hidden; border-bottom:1px solid var(--linea)}
.dir .vista iframe{width:1280px; height:880px; border:0; transform:scale(.2656); transform-origin:0 0; pointer-events:none; background:#fff}
.dir .vista .abrir{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; padding:10px; background:linear-gradient(180deg, transparent 55%, rgba(58,58,77,.45)); opacity:0; transition:opacity .25s; text-decoration:none}
.dir .vista:hover .abrir{opacity:1}
.dir .cuerpo{padding:16px 18px; display:flex; flex-direction:column; gap:10px; flex:1}
.dir .cab{display:flex; align-items:center; gap:10px}
.dir .cab .num{width:28px; height:28px; border-radius:50%; background:var(--tinta); color:var(--lima); display:grid; place-items:center; font-size:12px; font-weight:700; flex:none}
.dir .cab h3{font-size:19px; flex:1; min-width:0}
.dir .racional{font-size:13px; color:var(--tx-2); line-height:1.5}
.dir .ref-de{font-size:12px; color:var(--tx-3)}
.dir .fuentes{font-size:12.5px; color:var(--tx-2)}
.dir .fuentes b{color:var(--tx); font-weight:600}
.franja{display:flex; height:26px; border-radius:var(--radio); overflow:hidden; border:1px solid var(--linea)}
.mov{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.mov label{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-3); display:flex; flex-direction:column; gap:3px}
.mov select{font-size:12.5px; border:1px solid var(--linea-control); border-radius:var(--radio); padding:6px 8px; background:var(--blanco)}
.mov .tog{grid-column:span 2; display:flex; gap:12px; flex-wrap:wrap}
.mov .tog label{flex-direction:row; align-items:center; gap:6px; cursor:pointer; text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:500; color:var(--tx)}
.dir .pie{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px}
.compartir{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-t); padding:16px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.compartir .t{flex:1; min-width:200px}
.compartir .t b{display:block; font-weight:600; font-size:14px}
.compartir .t small{font-size:12.5px; color:var(--tx-2)}
.compartir code{font-size:12px; background:var(--bg); border:1px solid var(--linea); border-radius:6px; padding:6px 10px; overflow-wrap:anywhere; flex-basis:100%}

/* Comparador (dos borradores lado a lado) */
.comparador{position:fixed; inset:0; z-index:40; background:rgba(58,58,77,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; flex-direction:column; padding:18px}
.comparador .marco{background:var(--blanco); border-radius:var(--radio-t); flex:1; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--sombra-alta)}
.comparador .cab{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--linea); flex-wrap:wrap}
.comparador .cab b{font-family:var(--serif); font-weight:300; font-size:19px; flex:1}
.comparador .cab select{font-size:13px; border:1px solid var(--linea-control); border-radius:var(--radio); padding:6px 8px}
.comparador .paneles{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--linea)}
.comparador iframe{width:100%; height:100%; border:0; background:#fff}
@media (max-width:800px){.comparador .paneles{grid-template-columns:1fr}}

/* Cuota (ajustes) */
.medidor{display:grid; gap:8px}
.medidor .fila{display:flex; align-items:center; gap:12px; font-size:13.5px}
.medidor .fila b{min-width:120px; font-weight:600}
.medidor .barra-m{flex:1; height:8px; background:var(--panel); border-radius:4px; overflow:hidden}
.medidor .barra-m span{display:block; height:100%; background:var(--peri); border-radius:4px}
.medidor small{color:var(--tx-3); min-width:90px; text-align:right}
.lista-usuarios{list-style:none; display:flex; flex-direction:column}
.lista-usuarios li{display:flex; align-items:center; gap:12px; padding:12px 2px; border-top:1px solid var(--panel)}
.lista-usuarios li:first-child{border-top:0}
.usuario-avatar{width:34px; height:34px; border-radius:50%; flex:none; background:var(--tinta); color:var(--lima); display:grid; place-items:center; font-size:12px; font-weight:700}
.usuario-datos{flex:1; min-width:0}
.usuario-nombre{font-size:14px; font-weight:600}
.usuario-correo{font-size:12px; color:var(--tx-2); overflow-wrap:anywhere}
.clave-temporal{display:none; margin-top:14px; background:var(--ok-bg); border:1px solid rgba(94,122,30,.25); border-radius:var(--radio); padding:14px 16px; font-size:14px; color:var(--ok); line-height:1.5}
.clave-temporal.visible{display:block}
.clave-temporal code{font-size:15px; font-weight:700; letter-spacing:.05em; background:var(--blanco); border-radius:4px; padding:2px 8px; overflow-wrap:anywhere}

/* Toasts */
.toasts{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; pointer-events:none}
.toast{background:var(--tinta); color:var(--blanco); border-radius:var(--pill); padding:10px 18px; font-size:13.5px; display:flex; align-items:center; gap:8px; box-shadow:var(--sombra-alta); animation:toastEntra .35s var(--muelle)}
.toast.mal{background:var(--rojo)}
.toast i{font-size:16px; color:var(--lima)}
.toast.mal i{color:#fff}
@keyframes toastEntra{from{opacity:0; transform:translateY(10px)}}
.pie{max-width:var(--ancho); margin:0 auto; padding:0 var(--gutter) 28px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--tx-3)}
.pantalla-entra{animation:entra .35s var(--muelle)}
@keyframes entra{from{opacity:0; transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){
  .pantalla-entra,.toast{animation:none}
  .proy,.dir,.btn,.paso{transition:none}
  .proy:hover{transform:none}
}