/* TuWebLocal · generadores gratuitos (a1, 2026-10-05)
   QR de reseñas, carta de alérgenos y carta de porte: formulario + vista previa en vivo,
   diseños del cartel, bloque de oferta, pasos y avisos. Todo con prefijo twl-gen / twl-sign / twl-oferta. */
.twl-gen{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:1.6rem;align-items:start;color:#41545f}
.twl-gen *{box-sizing:border-box}
.twl-gen__panel{background:#fff;border:1px solid #dbe8f1;border-radius:18px;padding:1.6rem 1.5rem;box-shadow:0 6px 22px rgba(16,42,67,.06);min-width:0}
.twl-gen__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 1.1rem}
.twl-gen__tag{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1f7a4d;background:#e5f5ec;border-radius:999px;padding:.3rem .75rem}
.twl-gen__h2{font-size:1.35rem;line-height:1.25;color:#102a43;font-weight:800;margin:0 0 .3rem}
.twl-gen__sub{font-size:.93rem;line-height:1.5;color:#5c6f7b;margin:0 0 1.2rem}
.twl-gen__paso{border:0;border-top:1px solid #e6eef4;margin:0;padding:1.15rem 0 .3rem;min-width:0}
.twl-gen__paso:first-of-type{border-top:0;padding-top:0}
.twl-gen__paso legend{float:left;width:100%;display:flex;align-items:center;gap:.55rem;font-weight:800;color:#102a43;font-size:1rem;padding:0;margin:0 0 .8rem}
.twl-gen__paso legend+*{clear:both}
.twl-gen__paso+.twl-gen__paso{margin-top:.9rem}
.twl-gen__n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#176be0;color:#fff;font-size:.85rem;font-weight:800;flex:none}
.twl-gen__f{display:block;margin:0 0 .95rem}
.twl-gen__f>span{display:block;font-size:.88rem;font-weight:700;color:#102a43;margin:0 0 .35rem}
.twl-gen__f>span em{font-style:normal;font-weight:500;color:#7a8b96}
.twl-gen input[type=text],.twl-gen input[type=url],.twl-gen input[type=number],.twl-gen input[type=date],.twl-gen input[type=time],.twl-gen select,.twl-gen textarea{width:100%;font:inherit;font-size:16px;color:#102a43;background:#fff;border:1.5px solid #cfdde8;border-radius:11px;padding:.7rem .8rem;min-height:48px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.twl-gen select{background-image:linear-gradient(45deg,transparent 50%,#5c6f7b 50%),linear-gradient(135deg,#5c6f7b 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.twl-gen textarea{min-height:88px;resize:vertical;line-height:1.45}
.twl-gen input:focus,.twl-gen select:focus,.twl-gen textarea:focus{outline:0;border-color:#176be0;box-shadow:0 0 0 3px rgba(23,107,224,.16)}
.twl-gen input[aria-invalid=true],.twl-gen select[aria-invalid=true],.twl-gen textarea[aria-invalid=true]{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.twl-gen__hint{display:block;font-size:.82rem;line-height:1.45;color:#5c6f7b;margin:.4rem 0 0}
.twl-gen__hint a{color:#176be0;font-weight:700}
.twl-gen__msg{font-size:.86rem;line-height:1.45;border-radius:10px;padding:.6rem .75rem;margin:.5rem 0 0}
.twl-gen__msg:empty{display:none}
.twl-gen__msg--ok{background:#e5f5ec;color:#14532d}
.twl-gen__msg--warn{background:#fff6e0;color:#6b4a00}
.twl-gen__msg--err{background:#fdecea;color:#8a1f12}
.twl-gen__grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
.twl-gen__full{grid-column:1/-1}
/* Opciones en pastilla (diseños, formatos) */
.twl-gen__ops{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1rem}
.twl-gen__op{position:relative;cursor:pointer}
.twl-gen__op input{position:absolute;opacity:0;width:1px;height:1px}
.twl-gen__op>span{display:inline-flex;align-items:center;gap:.5rem;border:1.5px solid #cfdde8;border-radius:12px;padding:.55rem .8rem;min-height:44px;font-size:.92rem;font-weight:700;color:#102a43;background:#fff;transition:border-color .15s,background .15s}
.twl-gen__op>span small{font-weight:500;color:#7a8b96;font-size:.8rem}
.twl-gen__op input:checked+span{border-color:#176be0;background:#eef6fe;box-shadow:inset 0 0 0 1px #176be0}
.twl-gen__op input:focus-visible+span{box-shadow:0 0 0 3px rgba(23,107,224,.3)}
.twl-gen__sw{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex:none}
/* Acciones */
.twl-gen__acts{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1.1rem 0 0}
.twl-gen__acts .twl-gen__btn--main{grid-column:1/-1}
.twl-gen__btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:12px;padding:.75rem 1rem;min-height:48px;font:inherit;font-weight:800;font-size:.95rem;line-height:1.2;text-align:center;cursor:pointer;border:2px solid #cfe1f3;background:#fff;color:#0d4ba0;text-decoration:none!important;transition:background .15s,border-color .15s}
.twl-gen__btn:hover{border-color:#176be0}
.twl-gen__btn--main{background:#176be0;border-color:#176be0;color:#fff}
.twl-gen__btn--main:hover{background:#0d4ba0;border-color:#0d4ba0}
.twl-gen__btn[disabled],.twl-gen__btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.twl-gen__btn[aria-disabled=true]{pointer-events:none}
.twl-gen__priv{display:flex;gap:.45rem;align-items:flex-start;font-size:.8rem;line-height:1.45;color:#5c6f7b;margin:.9rem 0 0}
/* Vista previa */
.twl-gen__prev{position:sticky;top:96px;min-width:0}
.twl-gen__prevbox{background:linear-gradient(160deg,#e9f3fa,#f7fbfe);border:1px solid #dbe8f1;border-radius:18px;padding:1.3rem;display:flex;flex-direction:column;align-items:center}
.twl-gen__prevt{align-self:stretch;display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#5c6f7b;margin:0 0 .9rem}
.twl-gen__prevt span{font-weight:600;letter-spacing:0;text-transform:none}
/* Cartel (misma composición que el PDF) */
.twl-sign{--bg:#fff;--ink:#102a43;--acc:#176be0;--sub:#5c6f7b;--qrbg:#fff;width:100%;max-width:330px;aspect-ratio:1/1.414;background:var(--bg);color:var(--ink);border-radius:10px;box-shadow:0 18px 40px rgba(16,42,67,.18);padding:9% 9% 7%;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden;font-family:inherit}
.twl-sign::before{content:"";position:absolute;left:0;right:0;top:0;height:3.2%;background:var(--acc)}
.twl-sign--azul{--bg:#176be0;--ink:#fff;--acc:#ffd166;--sub:#dce9fb}
.twl-sign--oscuro{--bg:#102a43;--ink:#fff;--acc:#fbbc04;--sub:#b8c9d8}
.twl-sign--crema{--bg:#fbf6ec;--ink:#3b2a1a;--acc:#b5651d;--sub:#7a6450}
/* Tamaños en cqi (ancho del propio cartel) con las mismas proporciones que el PDF */
.twl-sign{container-type:inline-size}
.twl-sign__stars{color:#fbbc04;font-size:7.4cqi;letter-spacing:.1em;line-height:1;margin:5cqi 0 3.5cqi}
.twl-sign__h{font-size:5.6cqi;font-weight:800;line-height:1.15;margin:0;color:var(--ink);word-break:break-word}
.twl-sign__name{font-size:max(.7rem,2.9cqi);font-weight:700;color:var(--sub);margin:2cqi 0 0;line-height:1.3;word-break:break-word}
.twl-sign__qr{background:#fff;border-radius:3cqi;padding:3.5cqi;width:66cqi;aspect-ratio:1;flex:none;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 max(2px,.8cqi) var(--acc);margin:auto 0}
.twl-sign__qr img,.twl-sign__qr canvas{width:100%!important;height:auto!important;display:block}
.twl-sign__qr--vacio{color:#9fb0bc;font-size:max(.75rem,3.4cqi);font-weight:700;line-height:1.35;padding:10%}
.twl-sign__cta{margin:0;font-size:max(.72rem,3.4cqi);font-weight:700;color:var(--ink);line-height:1.3}
.twl-sign__foot{font-size:max(.55rem,2cqi);color:var(--sub);margin:3cqi 0 0}
/* Formato tarjeta (4 por hoja) */
.twl-sign--tarjeta{aspect-ratio:1.414/1;max-width:380px;flex-direction:row;text-align:left;padding:6% 6% 6% 7.5%;gap:5%;align-items:center}
.twl-sign--tarjeta::before{top:0;bottom:0;right:auto;width:2.4%;height:auto}
.twl-sign--tarjeta .twl-sign__txt{flex:1;min-width:0;display:flex;flex-direction:column}
.twl-sign--tarjeta .twl-sign__stars{margin:0 0 2.5cqi;font-size:4.2cqi}
.twl-sign--tarjeta .twl-sign__h{font-size:max(.8rem,4.6cqi)}
.twl-sign--tarjeta .twl-sign__name{font-size:max(.62rem,2.8cqi);margin:1.5cqi 0 0}
.twl-sign--tarjeta .twl-sign__cta{margin:4cqi 0 0;font-size:max(.6rem,2.6cqi);font-weight:600}
.twl-sign--tarjeta .twl-sign__foot{display:none}
.twl-sign--tarjeta .twl-sign__qr{width:42cqi;margin:0;padding:2.5cqi;border-radius:2.5cqi}
.twl-gen__link{align-self:stretch;margin:1rem 0 0;font-size:.8rem;color:#5c6f7b;line-height:1.45;word-break:break-all;text-align:center}
.twl-gen__link a{color:#176be0;font-weight:700}
/* Oferta (placa NFC, carta QR…) */
.twl-oferta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:center;background:#fff;border:2px solid #176be0;border-radius:20px;padding:1.6rem 1.7rem;box-shadow:0 16px 38px rgba(23,107,224,.14);color:#41545f}
.twl-oferta__vis{width:150px;display:flex;justify-content:center}
.twl-oferta__placa{width:132px;height:132px;border-radius:22px;background:linear-gradient(145deg,#1d2f44,#0b1a2a);box-shadow:0 14px 26px rgba(16,42,67,.35),inset 0 1px 0 rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#fff;position:relative}
.twl-oferta__placa b{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#fbbc04}
.twl-oferta__placa i{display:block;width:60px;height:60px;border-radius:6px;background:#fff;background-image:linear-gradient(90deg,#102a43 50%,transparent 50%),linear-gradient(#102a43 50%,transparent 50%);background-size:10px 10px;opacity:.95}
.twl-oferta__placa small{font-size:.58rem;color:#b8c9d8;display:flex;align-items:center;gap:4px}
.twl-oferta__placa::after{content:"";position:absolute;top:10px;right:12px;width:16px;height:16px;border:2px solid rgba(255,255,255,.55);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg)}
.twl-oferta__k{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#176be0;background:#e6f1fd;border-radius:999px;padding:.3rem .75rem;margin:0 0 .6rem}
.twl-oferta h2,.twl-oferta h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);line-height:1.2;color:#102a43;margin:0 0 .5rem;font-weight:800}
.twl-oferta p{margin:0 0 .8rem;line-height:1.55;font-size:.97rem}
.twl-oferta__precios{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1rem}
.twl-oferta__pr{background:#f4f9fc;border:1px solid #dbe8f1;border-radius:12px;padding:.6rem .85rem;min-width:0}
.twl-oferta__pr strong{display:block;font-size:1.3rem;color:#176be0;line-height:1.15;font-weight:800}
.twl-oferta__pr span{font-size:.8rem;color:#5c6f7b;line-height:1.35;display:block}
.twl-oferta__pr--rec{background:#e5f5ec;border-color:#bfe3cf}
.twl-oferta__pr--rec strong{color:#1f7a4d}
.twl-oferta__btns{display:flex;flex-wrap:wrap;gap:.6rem}
.twl-oferta__btns a{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:12px;padding:.8rem 1.1rem;min-height:48px;font-weight:800;font-size:.95rem;text-decoration:none!important;line-height:1.2;text-align:center}
.twl-oferta__btns .wa{background:#25D366;color:#08361b!important}
.twl-oferta__btns .wa:hover{background:#1fb457}
.twl-oferta__btns .sec{background:#fff;color:#0d4ba0!important;border:2px solid #cfe1f3}
.twl-oferta__btns .sec:hover{border-color:#176be0}
.twl-oferta__nota{font-size:.82rem!important;color:#7a8b96;margin:.8rem 0 0!important}
/* Pasos numerados */
.twl-gen-steps{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:1rem;counter-reset:p}
.twl-gen-steps>li{counter-increment:p;position:relative;background:#fff;border:1px solid #dbe8f1;border-radius:16px;padding:1.1rem 1.2rem 1.1rem 4rem;line-height:1.55;font-size:.97rem;color:#41545f}
.twl-gen-steps>li::before{content:counter(p);position:absolute;left:1.1rem;top:1rem;width:34px;height:34px;border-radius:50%;background:#176be0;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.twl-gen-steps>li strong{color:#102a43}
.twl-gen-steps>li a{color:#176be0;font-weight:700}
/* Avisos */
.twl-gen-aviso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;background:#fff8e6;border:1px solid #f3dfa6;border-radius:16px;padding:1.1rem 1.2rem;margin:1.4rem 0 0;color:#5a4300;line-height:1.55;font-size:.95rem}
.twl-gen-aviso__i{font-size:1.4rem;line-height:1}
.twl-gen-aviso strong{color:#3d2d00}
.twl-gen-aviso p{margin:0 0 .5rem}
.twl-gen-aviso p:last-child{margin:0}
.twl-gen-aviso a{color:#0d4ba0;font-weight:700}
.twl-gen-aviso--info{background:#eef6fe;border-color:#cfe1f3;color:#1f3a56}
.twl-gen-aviso--info strong{color:#102a43}
/* Tarjetas de ideas / usos */
.twl-gen-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.4rem 0 0}
.twl-gen-card{background:#fff;border:1px solid #dbe8f1;border-radius:16px;padding:1.2rem;min-width:0}
.twl-gen-card__i{font-size:1.5rem;line-height:1;display:block;margin:0 0 .6rem}
.twl-gen-card h3{font-size:1.02rem;color:#102a43;margin:0 0 .35rem;font-weight:800;line-height:1.3}
.twl-gen-card p{font-size:.92rem;line-height:1.5;margin:0;color:#5c6f7b}
.twl-gen-rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.2rem 0 0;padding:0;list-style:none}
.twl-gen-rel li{margin:0}
.twl-gen-rel a{display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:#fff;border:1px solid #dbe8f1;border-radius:14px;padding:.9rem 1rem;min-height:56px;color:#102a43!important;font-weight:700;text-decoration:none!important;line-height:1.35;font-size:.95rem;transition:border-color .15s}
.twl-gen-rel a::after{content:"→";color:#176be0;font-weight:800}
.twl-gen-rel a:hover{border-color:#176be0}
@media (max-width:960px){
  .twl-gen{grid-template-columns:1fr}
  .twl-gen__prev{position:static;order:-1}
  .twl-gen__prev--after{order:0}
  .twl-gen-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .twl-gen__panel{padding:1.25rem 1.05rem}
  .twl-gen__grid2{grid-template-columns:1fr}
  .twl-gen__acts{grid-template-columns:1fr}
  .twl-oferta{grid-template-columns:1fr;padding:1.4rem 1.15rem;text-align:left}
  .twl-oferta__vis{width:auto;justify-content:flex-start}
  .twl-oferta__btns a{width:100%}
  .twl-gen-cards,.twl-gen-rel{grid-template-columns:1fr}
  .twl-gen-steps>li{padding:1rem 1rem 1rem 3.6rem}
  .twl-gen-steps>li::before{left:.9rem}
}
@media (max-width:380px){
  .twl-gen__prevbox{padding:1rem .8rem}
}