/* «¿Qué trámites necesito?» (src/assets/tramites.js). Dentro de Atalaya, pero con lienzo propio de herramienta:
   fondo verde noche con rejilla de plano, tarjeta de pregunta clara y panel en vivo. Misma letra y mismo radio que atalaya.css. */
.trx{
  --x-fondo:#0B1F1A;--x-panel:#11302A;--x-hilo:rgba(207,229,220,.16);--x-texto:#EAF4F0;--x-texto-2:#A7C6BB;--x-acento:#6EDDB4;
  position:relative;background:var(--x-fondo);color:var(--x-texto);padding:28px 0 72px;overflow:hidden;isolation:isolate}
.trx::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--x-hilo) 1px,transparent 1px),linear-gradient(90deg,var(--x-hilo) 1px,transparent 1px);background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 90% 70% at 70% 30%,#000 20%,transparent 75%);opacity:.55}
.trx::after{content:"";position:absolute;width:620px;height:620px;right:-160px;top:-220px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(110,221,180,.16),transparent);pointer-events:none}
.trx .trx-cab a{color:var(--x-acento)}
.trx .migas,.trx .migas a{color:var(--x-texto-2)} .trx .migas a:hover{color:var(--x-texto)}

.trx-cab{max-width:760px;padding:8px 0 32px}
.trx-eti{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:6px 12px;border:1px solid var(--x-hilo);border-radius:999px;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--x-acento);background:rgba(110,221,180,.06)}
.trx h1{margin:16px 0 0;font-size:clamp(2.1rem,4.2vw,3.25rem);line-height:1.05;font-weight:800;letter-spacing:-.03em;color:var(--x-texto);max-width:18ch}
.trx-sub{margin:16px 0 0;font-size:1.1875rem;line-height:1.5;color:var(--x-texto-2);max-width:56ch}
.trx-promesas{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:22px 0 0;padding:0;font-size:.9375rem;color:var(--x-texto-2)}
.trx-promesas li{display:flex;align-items:center;gap:6px} .trx-promesas .ico{color:var(--x-acento)}

/* Rejilla: pregunta + panel en vivo; en el resultado, una sola columna */
.trx-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.trx-grid.es-resultado{grid-template-columns:minmax(0,1fr)}

/* Tarjeta de la herramienta (clara sobre el lienzo) */
.tr-app{background:var(--papel);color:var(--tinta);border-radius:var(--r);padding:40px;min-height:420px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.tr-app a:not(.boton){color:var(--marca)}
.tr-app h2{font-size:1.75rem;line-height:1.18;font-weight:800;letter-spacing:-.015em;max-width:30ch}
.tr-app h2:focus{outline:none}
.tr-intro p{margin:12px 0 0;color:var(--tinta-2);max-width:54ch}
.tr-empezar{margin-top:28px;min-height:56px;padding:0 28px;font-size:1.0625rem}
.tr-aviso-corto{display:flex;gap:8px;align-items:flex-start;margin:28px 0 0!important;padding-top:16px;border-top:1px solid var(--hilo);font-size:.875rem}
.tr-aviso-corto .ico{color:var(--marca);margin-top:2px}

/* Pregunta */
.tr-prog{height:4px;background:var(--marca-suave);border-radius:2px;overflow:hidden;margin:0 0 20px}
.tr-prog span{display:block;height:100%;background:var(--marca);transition:width .35s var(--ease)}
.tr-cuenta{margin:0 0 8px;font-size:.8125rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--marca)}
.tr-ayuda{margin:10px 0 0;color:var(--tinta-2);max-width:60ch}
.tr-ops{display:grid;gap:10px;margin:24px 0 0}
.tr-ops-dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.tr-ops-peq{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.tr-op{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:60px;width:100%;padding:15px 44px 15px 16px;text-align:left;
  background:var(--papel);color:var(--tinta);border:1px solid var(--hilo);border-radius:var(--r);font:inherit;cursor:pointer;
  transition:border-color .15s,background-color .15s,transform .1s var(--ease)}
.tr-op::after{content:"";position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;border:1.5px solid var(--hilo);border-radius:50%;transition:all .15s}
.tr-op b{font-weight:700;line-height:1.3} .tr-op span{font-size:.9375rem;line-height:1.4;color:var(--tinta-2)}
.tr-op:hover{border-color:var(--marca);background:var(--marca-suave)} .tr-op:hover::after{border-color:var(--marca)}
.tr-op:active{transform:scale(.99)}
.tr-op[aria-pressed=true]{border-color:var(--marca);background:var(--marca-suave);box-shadow:inset 0 0 0 1px var(--marca)}
.tr-op[aria-pressed=true]::after{border-color:var(--marca);background:var(--marca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.tr-ops-peq .tr-op{min-height:44px;padding:10px 36px 10px 12px} .tr-ops-peq .tr-op::after{right:10px;width:14px;height:14px;margin-top:-7px}
.tr-grupo{border:0;margin:22px 0 0;padding:0} .tr-grupo legend{padding:0;font-size:.8125rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3)}
.tr-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 0}
.tr-atras{background:none;border:0;padding:10px 0;font:600 .9375rem var(--letra);color:var(--tinta-2);cursor:pointer;min-height:44px}
.tr-atras:hover{color:var(--marca);text-decoration:underline}
.tr-q{animation:tr-entra .3s var(--ease)}
@keyframes tr-entra{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

/* Panel en vivo */
.trx-vivo{position:sticky;top:20px;background:var(--x-panel);border:1px solid var(--x-hilo);border-radius:var(--r);padding:22px 22px 18px;max-height:calc(100vh - 40px);overflow:auto;scrollbar-width:thin}
.trx-vivo-et{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--x-texto-2)}
.trx-num{display:flex;align-items:center;gap:14px;margin:10px 0 0}
.trx-num b{font-size:3.5rem;line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--x-acento);font-variant-numeric:tabular-nums;min-width:2ch}
.trx-num span{font-size:.875rem;line-height:1.35;color:var(--x-texto-2)}
.trx-num.cambia b{animation:trx-late .45s var(--ease)}
@keyframes trx-late{0%{transform:scale(1.18);opacity:.6}100%{transform:none;opacity:1}}
.trx-seguros{height:4px;margin:16px 0 0;background:rgba(207,229,220,.12);border-radius:2px;overflow:hidden}
.trx-seguros span{display:block;height:100%;background:var(--x-acento);transition:width .4s var(--ease)}
.trx-seguros-txt{margin:6px 0 0;font-size:.8125rem;color:var(--x-texto-2)}
.trx-vivo-lista{list-style:none;margin:16px 0 0;padding:0}
.trx-vivo-lista>li{padding:10px 0 0;margin:10px 0 0;border-top:1px solid var(--x-hilo)}
.trx-fase{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--x-texto-2)}
.trx-vivo-lista ul{list-style:none;margin:6px 0 0;padding:0}
.trx-vivo-lista ul li{position:relative;padding:3px 0 3px 18px;font-size:.875rem;line-height:1.35;transition:color .3s,opacity .3s}
.trx-vivo-lista ul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--x-texto-2)}
.trx-vivo-lista .es-seguro{color:var(--x-texto)} .trx-vivo-lista .es-seguro::before{background:var(--x-acento);border-color:var(--x-acento)}
.trx-vivo-lista .es-posible{color:var(--x-texto-2);opacity:.75}
.trx-vivo-pie{margin:14px 0 0;font-size:.8125rem;color:var(--x-texto-2)}

/* Hoja de ruta: cifras en franja oscura (el lienzo de la herramienta) y línea de tiempo */
.tr-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;list-style:none;margin:20px 0 0;padding:0;background:var(--x-hilo);border-radius:var(--r);overflow:hidden}
.tr-stats li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--x-fondo)}
.tr-stats b{font-size:2.25rem;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--x-acento);font-variant-numeric:tabular-nums}
.tr-stats span{font-size:.8125rem;line-height:1.3;color:var(--x-texto-2)}
@media (max-width:760px){.tr-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.tr-stats b{font-size:1.75rem}}
@media print{.tr-stats{display:none}}
.trx-grid.es-resultado .tr-app{padding:36px 40px 40px}
.tr-res-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--hilo)}
.tr-res-sub{margin:6px 0 0;color:var(--tinta-2)}
.tr-respuestas{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.tr-resp{min-height:34px;padding:0 12px;border:1px solid var(--hilo);border-radius:999px;background:var(--fondo);color:var(--tinta);font:600 .875rem var(--letra);cursor:pointer}
.tr-resp:hover{border-color:var(--marca);color:var(--marca)}
.tr-acciones{display:flex;flex-wrap:wrap;gap:8px}
.tr-gracias{grid-column:1/-1;margin:0;padding:16px 20px;border-radius:var(--r);background:var(--x-acento);color:var(--x-fondo);font-weight:700}
.tr-venta{margin:20px 0 0;padding:22px;border:1.5px solid var(--marca);border-radius:var(--r);background:var(--marca-suave)}
.tr-venta h3{font-size:1.25rem;font-weight:800;margin:0} .tr-venta-txt p{margin:6px 0 0;color:var(--tinta-2);max-width:62ch}
.tr-venta-campos{display:grid;grid-template-columns:2fr 1.4fr .7fr .7fr;gap:10px;margin:16px 0 8px}
.tr-venta-campos label{display:flex;flex-direction:column;gap:4px;font-size:.8125rem;font-weight:700;color:var(--tinta-2)}
.tr-venta-campos input{min-height:44px;padding:0 10px;border:1px solid var(--hilo);border-radius:var(--r);font:inherit;font-weight:400;color:var(--tinta);background:var(--papel)}
.tr-venta-check{display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;font-size:.9063rem;line-height:1.45;cursor:pointer}
.tr-venta-check input{width:20px;height:20px;margin-top:1px;accent-color:var(--marca);flex:none}
.tr-venta-pie{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0 0} .tr-venta-pie span{font-size:.8125rem;color:var(--tinta-3);max-width:44ch}
.tr-venta-error{margin:10px 0 0;color:var(--aviso);font-weight:600}
@media (max-width:760px){.tr-venta-campos{grid-template-columns:1fr 1fr}.tr-venta-campos label:first-child,.tr-venta-campos label:nth-child(2){grid-column:1/-1}}
@media print{.tr-venta{display:none}}
.tr-pista{margin:16px 0 0;font-size:.9375rem;color:var(--tinta-3)}
.tr-fases{list-style:none;margin:8px 0 0;padding:0}
.tr-fase{margin:32px 0 0}
.tr-fase h3{display:flex;align-items:center;gap:10px;font-size:1.1875rem;font-weight:800;margin:0}
.tr-fase h3::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--marca);transform:rotate(45deg)}
.tr-fase-d{margin:4px 0 0 22px;font-size:.9375rem;color:var(--tinta-2)}
.tr-lista{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;position:relative}
.tr-res .tr-lista::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:2px;background:var(--hilo)}
.tr-item{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;border:1px solid var(--hilo);border-radius:var(--r);background:var(--papel)}
.tr-check{display:flex;align-items:center;justify-content:center;min-height:58px;cursor:pointer;background:var(--papel);border-radius:var(--r) 0 0 var(--r)}
.tr-check input{width:22px;height:22px;accent-color:var(--marca);cursor:pointer;margin:0}
.tr-item details{min-width:0}
.tr-item>details>summary{display:grid;grid-template-columns:28px minmax(0,1fr) 20px;gap:10px;align-items:start;padding:16px 16px 16px 0;cursor:pointer;list-style:none}
.tr-item>details>summary::-webkit-details-marker{display:none}
.tr-item>details>summary::after{content:"";width:10px;height:10px;margin-top:6px;border-right:2px solid var(--tinta-3);border-bottom:2px solid var(--tinta-3);transform:rotate(45deg);transition:transform .2s var(--ease)}
.tr-item>details[open]>summary::after{transform:rotate(225deg);margin-top:10px}
.tr-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--fondo);border:1px solid var(--hilo);font-size:.8125rem;font-weight:700;color:var(--tinta-2)}
.tr-t{display:flex;flex-direction:column;gap:3px} .tr-t b{font-weight:700;line-height:1.3}
.tr-que{font-size:.9375rem;color:var(--tinta-2);line-height:1.45}
.tr-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tr-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;font-size:.8125rem;font-weight:600;background:var(--fondo);color:var(--tinta-2);border:1px solid var(--hilo)}
.tr-plazo{background:var(--aviso-suave);color:var(--aviso);border-color:transparent}
.tr-dif-gestoria{border-style:dashed}
.tr-det{padding:0 16px 18px 38px;font-size:.9375rem;line-height:1.55}
.tr-det dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px}
.tr-det dt{font-weight:700;color:var(--tinta-2)} .tr-det dd{margin:0}
.tr-det ul{margin:0;padding-left:18px} .tr-det li{margin:0 0 4px}
.tr-botones{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.tr-btn{white-space:normal;text-align:left;line-height:1.25;min-height:44px}
.tr-btn::after{content:"↗";font-weight:400;opacity:.7;margin-left:2px}
.tr-ayudas{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0 0}
.tr-ayudas-t{flex-basis:100%;margin:0 0 2px;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3)}
.tr-ayuda{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px 0 8px;border:1px solid var(--hilo);border-radius:999px;background:var(--marca-suave);color:var(--marca-fuerte);font:600 .875rem var(--letra);cursor:pointer;text-align:left;transition:border-color .15s,background-color .15s}
.tr-ayuda::before{content:"?";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--marca);color:var(--sobre-marca);font-size:.75rem;font-weight:800;flex:none}
.tr-ayuda:hover{border-color:var(--marca)}
.tr-mas{flex-direction:row!important;flex-wrap:wrap;gap:8px!important}
.tr-mini{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--hilo);border-radius:var(--r);font-size:.875rem;font-weight:600;text-decoration:none;color:var(--tinta)}
.tr-mini:hover{border-color:var(--marca);color:var(--marca)}
.tr-fuentes{margin:14px 0 0;border-top:1px solid var(--hilo);padding-top:6px}
.tr-fuentes summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;cursor:pointer;font-size:.875rem;font-weight:600;color:var(--tinta-2);list-style:none}
.tr-fuentes summary::-webkit-details-marker{display:none}
.tr-fuentes summary::before{content:"+";display:inline-flex;width:18px;justify-content:center;font-weight:800}
.tr-fuentes[open] summary::before{content:"−"}
.tr-fuentes ul,.tr-dlg-fuentes{list-style:none;margin:4px 0 0;padding:0;font-size:.875rem}
.tr-fuentes li,.tr-dlg-fuentes li{display:flex;flex-direction:column;padding:6px 0;border-bottom:1px solid var(--hilo)}
.tr-fuentes li span,.tr-dlg-fuentes li span{font-size:.8125rem;color:var(--tinta-3)}
/* Panel de ayuda (dialog): sale por la derecha; en móvil, desde abajo */
.tr-dlg{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);height:100dvh;max-height:none;max-width:none;border:0;padding:28px 28px 32px;background:var(--papel);color:var(--tinta);box-shadow:-20px 0 50px -20px rgba(5,30,24,.45);overflow:auto}
.tr-dlg[open]{animation:tr-dlg-entra .32s var(--ease)}
@keyframes tr-dlg-entra{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.tr-dlg::backdrop{background:rgba(11,31,26,.45);backdrop-filter:blur(3px)}
.tr-dlg h2{font-size:1.375rem;font-weight:800;line-height:1.2;margin:0 0 14px;padding-right:36px}
.tr-dlg-cerrar{position:absolute;top:14px;right:14px;width:44px;height:44px;border:1px solid var(--hilo);border-radius:50%;background:var(--papel);font-size:1.5rem;line-height:1;cursor:pointer;color:var(--tinta-2)}
.tr-dlg-cerrar:hover{border-color:var(--marca);color:var(--marca)}
.tr-dlg-pasos{margin:0;padding-left:20px;font-size:.9688rem;line-height:1.55} .tr-dlg-pasos li{margin:0 0 10px}
.tr-dlg-clave{margin:16px 0;padding:12px 14px;background:var(--marca-suave);border-radius:var(--r);font-size:.9375rem}
.tr-dlg-fuentes-t{margin:20px 0 0;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3)}
@media (max-width:760px){.tr-dlg{inset:auto 0 0 0;width:100vw;height:auto;max-height:86dvh;border-radius:16px 16px 0 0}@keyframes tr-dlg-entra{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}}
@media (prefers-reduced-motion:reduce){.tr-dlg[open]{animation:none}}
.tr-nota{margin:12px 0 0;padding:10px 12px;background:var(--fondo);border-radius:var(--r);color:var(--tinta-2)}
.tr-enlaces,.tr-mas{display:flex;flex-direction:column;gap:6px;margin:12px 0 0}
.tr-mas a{font-weight:600}
.es-hecho{background:var(--marca-suave);border-color:var(--sobre-marca-2)} .es-hecho .tr-check{background:var(--marca-suave)}
.es-hecho .tr-t b{text-decoration:line-through;text-decoration-color:var(--marca)}
.es-hecho .tr-n{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}

/* Sin JavaScript y para buscadores: todos los trámites (sobre fondo normal de la web) */
.tr-todos h2{font-size:1.5625rem;font-weight:800;margin:0}
.tr-todos>.envoltura>p{color:var(--tinta-2);max-width:68ch;margin:8px 0 0}
.tr-todos .tr-item{grid-template-columns:minmax(0,1fr)}
.tr-todos .tr-item>details>summary{padding-left:16px}
.tr-todos .tr-det{padding-left:54px}
.tr-ayudas-est{margin:12px 0 0;display:grid;gap:6px}
.tr-ayudas-est details{border:1px solid var(--hilo);border-radius:var(--r);padding:0 12px;background:var(--fondo)}
.tr-ayudas-est summary{min-height:42px;display:flex;align-items:center;cursor:pointer;font-weight:600;font-size:.9375rem}
.tr-ayudas-est ol{margin:0 0 12px;padding-left:20px;font-size:.9375rem}
.tr-quien{margin:0 0 10px;color:var(--tinta-2)}

@media (prefers-reduced-motion:reduce){.tr-q,.trx-num.cambia b{animation:none}.tr-prog span,.trx-seguros span{transition:none}}
@media (max-width:980px){
  .trx-grid{grid-template-columns:minmax(0,1fr)}
  /* En pantallas estrechas el panel en vivo pasa a una franja fija abajo, solo con el número */
  .trx-vivo{position:fixed;left:12px;right:12px;bottom:12px;top:auto;z-index:20;max-height:none;overflow:hidden;padding:10px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
  .trx-vivo-et,.trx-vivo-lista,.trx-vivo-pie,.trx-seguros{display:none}
  .trx-num{margin:0} .trx-num b{font-size:1.75rem;min-width:0} .trx-num span br{display:none}
  .trx-seguros-txt{margin:0 0 0 auto}
  .trx{padding-bottom:96px}
}
@media (max-width:760px){
  .trx h1{font-size:2rem} .trx-sub{font-size:1.0625rem}
  .tr-app,.trx-grid.es-resultado .tr-app{padding:24px 18px;min-height:0}
  .tr-ops-dos{grid-template-columns:minmax(0,1fr)}
  .tr-det,.tr-todos .tr-det{padding-left:16px}
  .tr-det dl{grid-template-columns:minmax(0,1fr);gap:2px} .tr-det dd{margin-bottom:8px}
  .tr-res .tr-lista::before{display:none}
}
@media print{
  .trx{background:#fff;color:#000;padding:0} .trx::before,.trx::after,.trx-cab,.trx-vivo{display:none!important}
  .tr-acciones,.tr-pista,.tr-respuestas,.tr-todos,.guias-rel{display:none!important}
  .tr-app{box-shadow:none;padding:0} .tr-item{break-inside:avoid} .tr-item summary::after{display:none}
}
