/* =================================================================================================
   signup.css - las pantallas publicas de AsuntosPropios
   Modulo Signup · .NET 10.00

   UN SOLO MUNDO: papel pijama azul. El aterrizaje y la entrada llegaron el 2026-09-11 (D41); el
   alta de organizacion y las paginas legales, el 2026-09-12. Con ellas se retiro lo que quedaba
   del aspecto anterior -- .pub__*, .steps/.step del alta, .plan*, .gateway*, .rows/.row y .legal
   con su forma de entonces --, que ya no lo usaba ninguna pantalla.

   Ninguna de estas pantallas usa Framework1000: cuelgan enteras de la clase raiz .pj. Es a
   proposito y tiene dos motivos. Uno, que .pj pesa una clase mas que el .btn de
   dameti-components.css (que se carga antes) y que .meta y .opt de dossiers.css (que se carga
   despues), asi que gana sin recurrir a !important. Dos, que lo que estas pantallas pintan --
   papel, bandas, taladros, impresos -- no lo cubre el framework, y mezclar los dos mundos en una
   misma pantalla es justo lo que no puede pasar.

   Tres modificadores, uno por familia, con lo poco que cada maqueta escribe distinto (.lh, .act,
   .btn, .lead, .pie):

     pj--landing   el aterrizaje                mockups/propuestas/Landing.html
     pj--login     la entrada                   mockups/propuestas/Login.html
     pj--alta      el alta y las legales        sin maqueta propia; ver el bloque del final

   Sin JavaScript y sin ficheros .js propios (metodo §7.2): la fecha de emision la pinta el
   servidor, y lo que las maquetas hacian con <script> se hace con CSS.
   ================================================================================================= */

/* El armazon de PublicLayout. Se queda debajo de la hoja entera y no se ve: .pj pone su propio
   tablero a pantalla completa. Vive aqui, y no en mainmodule.css, porque ese layout no lo usa
   ninguna pantalla que no sea de este modulo. */
.app-public {
    min-height: 100vh;
    background: var(--dm-bg);
}

/* =================================================================================================
   Papel pijama azul: tronco comun (2026-09-11)

   Copiado de mockups/propuestas/Landing.html y Login.html (metodo §4.5): mismas clases, mismos
   valores, en el formato compacto de la maqueta para que se pueda cotejar regla a regla. Lo que
   cambia es como se cuelga, y cada cambio tiene su motivo:

   - Todo bajo .pj, la raiz de las pantallas. Los tokens de la maqueta (--paper, --band, --ink...)
     se declaran en .pj y no en :root, y cada selector lleva .pj delante. Lo que las reglas de
     dameti-components.css y dossiers.css meten y la maqueta no tiene se anula a mano donde toca,
     con su nota.
   - Las pocas clases que las maquetas escriben distinto se separan con el modificador de cada
     familia, que lleva la raiz de cada pantalla.
   - Sin JavaScript. La maqueta tenia tres <script>: la fecha de emision la pone ahora el servidor;
     el cabezal que imprime la ultima linea del cuaderno es una animacion de CSS (.typed); y la
     tira fija «Hoja n» (.run) desaparece, porque cada pliegue (.fold) se queda pegado arriba
     mientras dura su hoja.
   ================================================================================================= */

.pj{
  --paper:#FBFCFD;
  --band:#DAE6F4;
  --ink:#1D4278;
  --ink-deep:#132F58;
  --ink-rule:rgba(29,66,120,.42);
  --print:#101217;
  --desk:#142C50;
  --hole:#0C1D38;
  --strip:48px;
  --pad:48px;
  --f-prose:"Sofia Sans","Segoe UI",Arial,sans-serif;
  --f-form:"Sofia Sans Condensed","Arial Narrow","Segoe UI",sans-serif;
  --f-data:"Courier Prime","Courier New",monospace;
  --f-dot:"Doto","Courier Prime","Courier New",monospace;
  --ease:cubic-bezier(.16,1,.3,1);

  /* El tablero azul a pantalla completa: lo que en la maqueta era el body. */
  min-height:100vh;
  background:var(--desk);
  color:var(--print);
  font:400 16px/24px var(--f-prose);
  -webkit-font-smoothing:antialiased;
}

/* La entrada vive en EmptyLayout, cuyo .app-plain centra una tarjeta con relleno alrededor. Su hoja
   ocupa la pagina entera, asi que ahi se anula. El layout no es de este modulo y lo siguen usando
   el error y el sin permiso, que no llevan .pj. (.app-public, el del aterrizaje y el alta, no pone
   relleno.) */
.app-plain:has(> .pj){display:block;padding:0}

/* El lienzo de detras de la pagina. Sin esto, el rebote del desplazamiento en el telefono y en el
   trackpad deja ver el gris de dameti.css. Van los valores escritos, y no var(--desk), porque html
   no hereda de .pj. */
html:has(.pj){background-color:#142C50;scrollbar-color:#1D4278 #DAE6F4;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html:has(.pj--landing){scroll-behavior:smooth}}

.pj ::selection{background:var(--ink);color:var(--paper)}
.pj :is(h1,h2,h3,p,ol,ul,dl,dd,figure){margin:0;padding:0}
.pj :is(ol,ul){list-style:none}
/* dameti.css quita el subrayado a todo enlace; la maqueta cuenta con el del navegador (pie,
   enlaces del login). Los que no lo llevan (.skip, .brand, .navlink, .btn) lo quitan ellos. */
.pj a{color:inherit;text-decoration:underline}
.pj :focus-visible{outline:2px solid var(--print);outline-offset:3px}
.pj .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pj .skip{position:absolute;z-index:20;left:16px;top:-64px;height:48px;padding:0 16px;display:flex;align-items:center;background:var(--print);color:var(--paper);font:600 16px/24px var(--f-form);text-decoration:none}
.pj .skip:focus{top:12px}

/* Hoja continua: margenes de arrastre, bandas cada tres lineas */
.pj .sheet{position:relative;display:grid;grid-template-columns:var(--strip) minmax(0,1fr) var(--strip);max-width:1296px;margin:0 auto;box-shadow:0 40px 80px -32px rgba(4,12,26,.6),0 2px 6px rgba(4,12,26,.28)}
.pj .strip{background-color:var(--paper);background-repeat:repeat-y;background-image:radial-gradient(circle at 50% 36px,var(--hole) 0 6px,rgba(12,29,56,.35) 6.6px,transparent 7.6px),linear-gradient(to bottom,var(--ink-rule) 0 6px,transparent 6px 12px);background-size:100% 72px,1px 12px}
.pj .strip--l{background-position:0 0,100% 0}
.pj .strip--r{background-position:0 0,0 0}
.pj .paper{position:relative;min-width:0;background-color:var(--paper);background-image:repeating-linear-gradient(to bottom,var(--band) 0 72px,transparent 72px 144px)}

/* Cabecera de listado. .act va acotado a la cabecera: en la maqueta del aterrizaje la regla
   suelta alcanzaba tambien a la celda td.act de los precios y la volvia flex, con lo que su raya
   inferior dejaba de llegar al fondo de la fila en cuanto un plan traia mas lineas que otro. */
.pj--landing .lh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:48px 24px;grid-template-areas:"brand nav act" "meta meta meta";column-gap:32px;align-items:center;padding-inline:var(--pad)}
.pj--login .lh{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:48px 24px;grid-template-areas:"brand act" "meta meta";column-gap:32px;align-items:center;padding-inline:var(--pad)}
.pj .brand{grid-area:brand;display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 26px/24px var(--f-form);letter-spacing:-.015em}
.pj .brand svg{flex:none}
.pj .nav{grid-area:nav;display:flex;justify-content:flex-end;gap:28px}
.pj--landing .lh .act{grid-area:act;display:flex;align-items:center;gap:24px}
.pj--login .lh .act{grid-area:act;display:flex;justify-content:flex-end}
.pj .navlink{color:var(--ink);text-decoration:none;font:600 18px/24px var(--f-form);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
.pj .navlink:hover{background-size:100% 1px}
.pj .only-narrow{display:none}
/* flex-wrap y margin-top: los mete el .meta de dossiers.css (la cabecera de un expediente), y
   aqui empujarian la linea de cabecera fuera de su renglon. */
.pj .meta{grid-area:meta;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:24px;height:24px;margin-top:0;white-space:nowrap;box-shadow:inset 0 1px 0 var(--ink)}
/* .opt tambien es de dossiers.css (una casilla con borde): aqui es solo un trozo de texto que se
   retira a 420 px. */
.pj .opt{display:inline;flex:initial;gap:0;padding:0;border:0;border-radius:0;cursor:inherit}
.pj .lbl{font:700 12px/24px var(--f-form);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);vertical-align:top}
.pj .dat{font:400 13px/24px var(--f-data);color:var(--print);font-variant-numeric:tabular-nums}

/* Casillas de accion. border y border-radius los pone el .btn de Framework1000; la maqueta no. */
.pj--landing .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 22px;border:0;border-radius:0;background:var(--ink);color:var(--paper);font:700 18px/24px var(--f-form);letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease)}
.pj--landing .btn svg{flex:none;transition:transform .3s var(--ease)}
.pj--landing .btn:hover{background:var(--ink-deep)}
.pj--landing .btn:hover svg{transform:translateX(4px)}
.pj--landing .btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pj--landing .btn--line:hover{background:var(--ink);color:var(--paper)}

/* Hoja 0001 */
.pj .hero{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);column-gap:56px;align-items:start;padding:72px var(--pad)}
.pj .h1{font:800 64px/72px var(--f-form);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.pj .lead{margin-top:24px;font-size:18px;line-height:24px;text-wrap:pretty}
.pj--landing .lead{max-width:36em}
.pj .cta{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;column-gap:28px}
.pj .cta .navlink{line-height:48px;background-position:0 calc(100% - 11px)}
.pj .note{margin-top:24px;font:600 15px/24px var(--f-form);letter-spacing:.01em;color:var(--ink)}

/* El expediente impreso */
.pj .exp{padding:24px;box-shadow:inset 0 0 0 1px var(--ink);font:400 14px/24px var(--f-data);font-variant-numeric:tabular-nums}
.pj .exp-row{display:flex;justify-content:space-between;align-items:center;gap:16px;height:24px}
.pj .chk{display:inline-flex;align-items:center;gap:8px}
.pj .exp-title{font:700 28px/48px var(--f-form);letter-spacing:-.01em}
.pj .docs{width:100%;margin-top:24px;border-collapse:collapse;table-layout:fixed}
.pj .docs th{padding:0;text-align:left;box-shadow:inset 0 -1px 0 var(--ink)}
.pj .docs td{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj .docs .c-size{width:9ch;text-align:right}
.pj .docs .c-date{width:12ch;text-align:right}
.pj .log-head{margin-top:24px;box-shadow:inset 0 -1px 0 var(--ink)}
.pj .log li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:8px}
.pj .log time{font:700 20px/24px var(--f-dot);letter-spacing:.02em}
.pj .log-next .head{display:inline-block;width:.62em;height:1.15em;vertical-align:-.22em;background:var(--ink)}

/* El cabezal de impresion, sin JavaScript (2026-09-11). La maqueta partia la linea en un span por
   caracter y los encendia con setTimeout. Aqui la linea se destapa con un ancho en ch que crece a
   saltos: en letra de maquina todos los caracteres miden 1ch, asi que cada salto es una letra.
   21 = los caracteres de «Llega el visto bueno.» (ver LandingHero.razor). El bloque del cabezal va
   delante del texto mientras imprime (::after) y, al acabar, el cursor pasa a la linea siguiente
   (.log-next) y parpadea. Tiempos: 1,2 s de espera + 1,6 s de impresion = 2,8 s.
   Con prefers-reduced-motion no se anima nada: la linea sale entera y el cursor, quieto. */
.pj .typed{white-space:nowrap}
@keyframes pj-print{from{width:0}}
@keyframes pj-hold{from,to{opacity:0}}
@keyframes pj-lit{from,to{opacity:1}}
@keyframes pj-blink{50%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .pj .typed{position:relative;box-sizing:content-box;width:21ch;padding-right:1ch;overflow:hidden;animation:pj-print 1.6s steps(21,end) 1.2s backwards}
  .pj .typed::after{content:"";position:absolute;top:calc(50% - .6em);right:0;width:1ch;height:1.15em;background:var(--ink);opacity:0;animation:pj-lit 2.8s}
  .pj .log-next{animation:pj-hold 2.8s}
  .pj .log-next .head{animation:pj-blink 1.06s steps(1,end) 2.8s infinite}
}

/* Hojas: pliegue perforado y cuerpo.
   El pliegue se queda pegado arriba (sticky) mientras dura su hoja, con fondo de papel para leerse
   encima de lo que pasa por debajo: asi el numero de la hoja en curso esta siempre a la vista.
   Sustituye a la tira fija «Hoja n» de la maqueta (.run), que movia un IntersectionObserver. Sticky
   deja de funcionar si algun antecesor recorta el desbordamiento: no poner overflow en .pj, .sheet
   ni .paper. */
.pj .hoja{position:relative}
.pj .fold{position:sticky;top:0;z-index:1;height:24px;margin-inline:calc(var(--strip) * -1);padding-inline:calc(var(--strip) + var(--pad));display:flex;align-items:center;justify-content:flex-end;background:linear-gradient(90deg,var(--ink-rule) 0 10px,transparent 10px 16px) 0 50%/16px 1px repeat-x,linear-gradient(to bottom,rgba(10,28,55,0),rgba(10,28,55,.07) 50%,rgba(10,28,55,0));background-color:var(--paper)}
.pj .fold span{padding:0 10px;background:var(--paper);font:700 12px/24px var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.pj .body{padding:48px var(--pad) 72px}
.pj .h2{font:800 44px/48px var(--f-form);letter-spacing:-.018em;color:var(--ink);max-width:20em;text-wrap:balance}
.pj .intro{margin-top:24px;font-size:18px;line-height:24px;max-width:40em;text-wrap:pretty}

/* Hoja 0002: hoy frente a como queda */
.pj .cmp{width:100%;margin-top:48px;border-collapse:collapse;table-layout:fixed}
.pj .cmp th{padding:0 24px 0 0;text-align:left;box-shadow:inset 0 -2px 0 var(--ink)}
.pj .cmp th+th{padding:0 0 0 24px}
.pj .cmp td{padding:12px 24px 12px 0;vertical-align:top;font-size:17px;line-height:24px;box-shadow:inset 0 -1px 0 var(--ink-rule);text-wrap:pretty}
.pj .cmp td+td{padding:12px 0 12px 24px;font-weight:600;box-shadow:inset 1px 0 0 var(--ink-rule),inset 0 -1px 0 var(--ink-rule)}

/* Hoja 0003: pasos. Hasta el 2026-09-12 estas dos reglas traian ademas media docena de
   declaraciones que solo servian para apagar las del alta -- que tambien se llamaban .steps y
   .step, con otro sentido --. El alta pasó a este mundo y sus clases se retiraron, asi que las
   anulaciones se fueron con ellas: aqui queda solo lo que la maqueta escribe. */
.pj .steps{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
.pj .step-n{display:block;font:900 96px/96px var(--f-dot);color:var(--ink)}
.pj .step h3{margin-top:24px;font:700 24px/48px var(--f-form)}
.pj .step p{max-width:30em;text-wrap:pretty}

/* Hoja 0004: garantias */
.pj .split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:48px;align-items:start}
.pj .gar-i{padding-block:24px;box-shadow:inset 0 1px 0 var(--ink-rule)}
.pj .gar-i:first-child{padding-top:0;box-shadow:none}
.pj .gar dt{font:800 32px/48px var(--f-form);letter-spacing:-.012em;color:var(--ink)}
.pj .gar dd{font-size:18px;line-height:24px;max-width:36em;text-wrap:pretty}

/* Hoja 0005: ficha preimpresa */
.pj .ficha{margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));box-shadow:inset 0 0 0 1px var(--ink)}
.pj .campo{padding:12px 24px;box-shadow:inset -1px -1px 0 var(--ink-rule)}
/* Sin «Ubicacion del servidor» hasta tener el dato (2026-09-11) quedan cinco campos: el ultimo, si
   se queda solo en su fila, ocupa las dos columnas en vez de dejar una casilla vacia al lado. */
.pj .campo:last-child:nth-child(odd){grid-column:1 / -1}
.pj .campo .lbl{display:block}
.pj .campo .val{display:block;font-size:17px;line-height:24px;text-wrap:pretty}

/* Hoja 0006: precios. La misma tabla la usa la eleccion de plan del alta, que es la otra pantalla
   que pinta el catalogo. */
.pj .planes{width:100%;margin-top:48px;border-collapse:collapse}
.pj .planes thead th{padding:0 24px 0 0;text-align:left;box-shadow:inset 0 -2px 0 var(--ink)}
.pj .planes thead th.num{text-align:right}
.pj .planes tbody th,.pj .planes td{padding:24px 24px 24px 0;vertical-align:top;text-align:left;box-shadow:inset 0 -1px 0 var(--ink-rule)}
.pj .planes tbody th{font:800 32px/48px var(--f-form);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.pj .planes .users{font:600 18px/48px var(--f-form);white-space:nowrap}
.pj .planes .inc{line-height:24px}
.pj .planes .num{text-align:right;white-space:nowrap}
.pj .price{display:inline-flex;align-items:baseline;height:48px;vertical-align:top}
.pj .price b{font:900 44px/48px var(--f-dot);letter-spacing:.01em}
.pj .price small{font:700 20px/48px var(--f-form);margin-left:6px}
.pj .planes .act{padding-right:0;text-align:right}
.pj .planes .act .btn{vertical-align:top}
.pj .planes-note{margin-top:24px;max-width:40em}

/* Hoja 0007: consultas */
.pj .faq{margin-top:48px}
.pj .faq-i{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;padding-block:12px;box-shadow:inset 0 1px 0 var(--ink-rule)}
.pj .faq dt{font:700 19px/24px var(--f-form);color:var(--ink)}
.pj .faq dd{max-width:40em;text-wrap:pretty}

/* Fin de listado y talon de alta */
.pj .fin{margin-top:72px;text-align:center;font:700 13px/24px var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.pj .stub{margin-top:48px;padding:48px;outline:2px dashed var(--ink);outline-offset:-2px}
.pj .stub-steps{margin-top:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
.pj .stub-steps li{display:flex;flex-direction:column}
.pj .stub-steps .n{font:900 32px/48px var(--f-dot);color:var(--ink)}
.pj .stub-steps span+span{font:600 17px/24px var(--f-form)}
.pj .stub .btn{display:flex;width:fit-content;margin-top:48px;height:72px;padding:0 32px;font-size:22px}

/* El impreso: el recuadro con su cabecera y sus campos. Lo escribio la entrada y lo reusa el alta,
   que tiene cuatro. */
.pj .form{padding:24px;box-shadow:inset 0 0 0 1px var(--ink)}
.pj .form-head{display:flex;justify-content:space-between;align-items:center;height:24px;box-shadow:inset 0 -1px 0 var(--ink)}
.pj .field{display:block;margin-top:24px}
.pj .field .lbl{display:block}
.pj .input{display:block;width:100%;height:48px;margin:0;padding:0 14px;border:0;border-radius:0;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink);font:400 17px/24px var(--f-data);color:var(--print);caret-color:var(--ink);-webkit-appearance:none;appearance:none}
.pj .input:hover{box-shadow:inset 0 0 0 1px var(--ink),inset 0 -3px 0 var(--ink)}
.pj .input:focus{outline:2px solid var(--ink);outline-offset:2px;box-shadow:inset 0 0 0 1px var(--ink)}
.pj .err{display:flex;align-items:center;gap:12px;margin-top:24px;padding:12px 14px;background:var(--print);color:var(--paper);font:600 17px/24px var(--f-form)}
.pj .err svg{flex:none}

/* Entrada (/login) */
.pj--login .h1{max-width:10em}
.pj--login .lead{max-width:30em}
.pj .entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,456px);column-gap:96px;align-items:start;padding:72px var(--pad) 96px}
.pj--login .btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:48px;margin-top:24px;padding:0 22px;border:0;border-radius:0;background:var(--ink);color:var(--paper);font:700 19px/24px var(--f-form);letter-spacing:.01em;cursor:pointer;transition:background-color .2s var(--ease)}
.pj--login .btn svg{flex:none;transition:transform .3s var(--ease)}
.pj--login .btn:hover{background:var(--ink-deep)}
.pj--login .btn:hover svg{transform:translateX(4px)}
.pj--login .btn:focus-visible{outline-offset:2px}
.pj .help{margin-top:24px}
.pj .help summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;color:var(--ink);font:600 16px/24px var(--f-form)}
.pj .help summary::-webkit-details-marker{display:none}
.pj .help summary svg{transition:transform .25s var(--ease)}
.pj .help[open] summary svg{transform:rotate(90deg)}
.pj .help p{margin-top:0;font-size:15px;line-height:24px;text-wrap:pretty}
.pj .foot{display:flex;justify-content:space-between;gap:16px;margin-top:24px;padding-block:12px;box-shadow:inset 0 1px 0 var(--ink-rule)}
.pj .foot a{color:var(--ink);font:600 16px/24px var(--f-form);text-underline-offset:4px;text-decoration-thickness:1px}
.pj .foot a:hover{text-decoration-thickness:2px}

/* Pie (todas las pantallas) y borde de corte. Sin la fila «Titular del servicio» de las maquetas
   hasta tener el dato, asi que tampoco van .pie-row+.pie-row ni .blank. */
.pj--landing .pie{padding:24px var(--pad) 48px}
.pj--login .pie{padding:0 var(--pad) 24px}
.pj .pie-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:32px;box-shadow:inset 0 1px 0 var(--ink);padding-top:24px}
.pj .brand--s{font-size:20px}
.pj .pie-what{font-size:15px}
.pj .pie-links{display:flex;flex-wrap:wrap;column-gap:24px;margin-left:auto}
.pj .pie-links a{color:var(--ink);font:600 16px/24px var(--f-form);text-underline-offset:4px;text-decoration-thickness:1px}
.pj .pie-links a:hover{text-decoration-thickness:2px}
.pj .cut{position:relative;z-index:1;height:24px;margin-inline:calc(var(--strip) * -1);padding-inline:calc(var(--strip) + var(--pad));display:flex;align-items:center;justify-content:flex-end;background:linear-gradient(90deg,var(--ink-rule) 0 10px,transparent 10px 16px) 0 100%/16px 1px repeat-x}
.pj .cut span{font:700 12px/24px var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

@media (max-width:1180px){
  .pj{--pad:36px}
  .pj .h1{font-size:56px}
  .pj .hero{column-gap:40px}
  .pj .entry{column-gap:56px}
}
@media (max-width:960px){
  .pj{--pad:28px}
  .pj .sheet{grid-template-columns:minmax(0,1fr);box-shadow:none}
  .pj .strip{display:none}
  .pj .fold,.pj .cut{margin-inline:0;padding-inline:var(--pad)}
  .pj--landing .lh{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"brand act" "nav nav";column-gap:16px}
  .pj--landing .lh .act{justify-content:flex-end}
  .pj--landing .lh .act .navlink{display:none}
  .pj--login .lh{grid-template-rows:48px}
  .pj .meta{display:none}
  .pj .nav{justify-content:flex-start;gap:20px;overflow-x:auto;scrollbar-width:none}
  .pj .nav .navlink{font-size:16px;white-space:nowrap}
  .pj .only-narrow{display:inline}
  .pj .hero{grid-template-columns:minmax(0,1fr);padding-top:48px}
  .pj .exp{margin-top:48px}
  .pj .split{grid-template-columns:minmax(0,1fr)}
  .pj .gar{margin-top:48px}
  .pj .entry{grid-template-columns:minmax(0,1fr);row-gap:48px;padding-top:48px;padding-bottom:72px}
  .pj .form{max-width:520px}
}
@media (max-width:640px){
  .pj{--pad:16px}
  .pj .brand{font-size:22px}
  .pj--login .lh .act .navlink{font-size:16px}
  .pj .h1{font-size:40px;line-height:48px;letter-spacing:-.015em}
  .pj .lead,.pj .intro{font-size:17px}
  .pj .h2{font-size:34px;line-height:48px}
  .pj .cta .btn{flex:1 1 100%}
  .pj .exp{padding:24px 16px}
  .pj .exp-title{font-size:24px}
  .pj .docs .c-date{display:none}
  .pj .cmp thead{display:none}
  .pj .cmp,.pj .cmp tbody,.pj .cmp tr,.pj .cmp td{display:block;width:100%}
  .pj .cmp tr{padding-block:12px;box-shadow:inset 0 -1px 0 var(--ink-rule)}
  .pj .cmp td,.pj .cmp td+td{padding:0;box-shadow:none}
  .pj .cmp td::before{content:attr(data-label);display:block;font:700 12px/24px var(--f-form);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
  .pj .steps{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .pj .step-n{font-size:72px;line-height:72px}
  .pj .ficha{grid-template-columns:minmax(0,1fr)}
  .pj .campo{box-shadow:inset 0 -1px 0 var(--ink-rule)}
  .pj .planes thead{display:none}
  .pj .planes,.pj .planes tbody,.pj .planes tr,.pj .planes tbody th,.pj .planes td{display:block;width:100%}
  .pj .planes tr{padding-block:24px;box-shadow:inset 0 -1px 0 var(--ink-rule)}
  .pj .planes tbody th,.pj .planes td{padding:0;box-shadow:none;text-align:left}
  .pj .planes td[data-label]::before{content:attr(data-label);display:block;font:700 12px/24px var(--f-form);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
  .pj .planes .users{line-height:24px}
  .pj .planes .num{text-align:left}
  .pj .planes .act{margin-top:24px}
  .pj .planes .act .btn{width:100%}
  .pj .faq-i{grid-template-columns:minmax(0,1fr)}
  .pj .stub{padding:24px 16px}
  .pj .stub-steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:24px}
  .pj .stub .btn{width:100%;height:64px;font-size:20px}
  .pj .pie-links{margin-left:0}
  .pj .form{padding:24px 16px}
}
@media (max-width:420px){
  .pj .lh .opt{display:none}
  .pj .lh .btn{padding:0 14px;font-size:16px}
}

/* =================================================================================================
   El alta de organizacion y las paginas legales (2026-09-12)

   Mismo mundo, con lo suyo propio bajo pj--alta. No hay maqueta aparte para estas siete pantallas:
   se componen con las piezas que ya escribieron Landing.html y Login.html -- la hoja continua, la
   cabecera de listado, el impreso (.form), la tabla de planes (.planes), el recuadro (.exp), el
   talon de puntos y el pie --, y aqui va solo lo que ninguna de las dos tenia: la tira de hojas
   del alta, el resguardo del pago y la prosa larga de las legales.

   Las legales van tambien bajo pj--alta, y no bajo un cuarto modificador, porque de la cabecera al
   pie son la misma pantalla que el alta; lo unico que no llevan es la tira de hojas.

   Dos tintas y papel, tambien para los avisos: aqui no hay cuatro colores de Banner. Lo que impide
   seguir va en tinta llena (.err, el de la entrada) y lo que solo hay que saber va en recuadro
   (.nota). Un nivel de aviso que se distinga solo por el color no se distinguiria en esta hoja.
   ================================================================================================= */

/* Cabecera y pie: los de la entrada. Sin anclas de seccion -- no hay secciones a las que ir -- y
   con el hueco de la derecha a lo que traiga cada pantalla. */
.pj--alta .lh{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:48px 24px;grid-template-areas:"brand act" "meta meta";column-gap:32px;align-items:center;padding-inline:var(--pad)}
.pj--alta .lh .act{grid-area:act;display:flex;justify-content:flex-end;align-items:center;gap:24px;min-width:0}
/* De quien es el alta que se esta haciendo. Se recorta antes que empujar el boton fuera de la
   fila: un nombre de organizacion puede ser tan largo como quiera su dueño. */
.pj--alta .who{font:700 16px/24px var(--f-form);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj--alta .pie{padding:0 var(--pad) 24px}

/* Casillas de accion. Las del aterrizaje, mas lo que aqui hace falta y alli no: estas son botones
   de verdad -- se pulsan y esperan --, no solo enlaces. */
.pj--alta .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 22px;border:0;border-radius:0;background:var(--ink);color:var(--paper);font:700 18px/24px var(--f-form);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.pj--alta .btn svg{flex:none;transition:transform .3s var(--ease)}
.pj--alta .btn:hover{background:var(--ink-deep)}
.pj--alta .btn:hover svg{transform:translateX(4px)}
.pj--alta .btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pj--alta .btn--line:hover{background:var(--ink);color:var(--paper)}
.pj--alta .btn[disabled]{background:var(--band);color:var(--ink);cursor:default}
.pj--alta .btn[disabled]:hover{background:var(--band)}
.pj--alta .btn[disabled]:hover svg{transform:none}
.pj--alta .btn--line[disabled]{background:transparent;color:var(--ink-rule);box-shadow:inset 0 0 0 2px var(--ink-rule)}
/* Ocupado: el cabezal de impresion, el mismo bloque parpadeante del cuaderno del aterrizaje. Con
   prefers-reduced-motion se queda encendido y quieto, que sigue diciendo «esto esta en marcha». */
.pj--alta .btn--busy::after{content:"";width:.62em;height:1.15em;background:currentColor}
@media (prefers-reduced-motion:no-preference){
  .pj--alta .btn--busy::after{animation:pj-blink 1.06s steps(1,end) infinite}
}

/* La tira de hojas: en que paso del alta se esta.

   El alta son cuatro pantallas y cada una es una hoja del listado, asi que el paso se dice como lo
   dice el listado: por el numero de hoja, en matricial, con la casilla de las hojas ya pasadas
   cruzada. La hoja en curso lleva ademas la raya gruesa arriba y el rotulo en negrita; las que
   faltan van en tinta clara. Es la misma informacion que la cabecera («Hoja 0002»), dicha donde se
   ve el recorrido entero. */
.pj--alta .pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;padding:24px var(--pad) 0}
.pj--alta .paso{padding-top:12px;box-shadow:inset 0 1px 0 var(--ink-rule);color:var(--ink-rule)}
/* color:inherit y no el azul de .pj .lbl: el rotulo de una hoja que todavia no toca va en tinta
   clara, como el resto de su casilla. */
.pj--alta .paso .lbl{display:block;color:inherit}
.pj--alta .paso .n{display:block;font:900 28px/32px var(--f-dot);letter-spacing:.02em}
.pj--alta .paso .t{display:flex;align-items:center;gap:8px;font:600 15px/24px var(--f-form)}
.pj--alta .paso .t svg{flex:none}
.pj--alta .paso--done{color:var(--ink)}
.pj--alta .paso--on{color:var(--ink);box-shadow:inset 0 3px 0 var(--ink)}
.pj--alta .paso--on .t{font-weight:700}

/* El cuerpo. Dos columnas como la entrada -- a la izquierda lo que se esta haciendo, a la derecha
   el impreso --, salvo la eleccion de plan y las legales, que son de una sola. */
.pj--alta .doble{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,620px);column-gap:96px;align-items:start;padding:48px var(--pad) 96px}
.pj--alta .simple{padding:48px var(--pad) 96px}
/* El titular de estas pantallas es el de una hoja interior, no el de la portada: 44px, como los
   .h2 del aterrizaje. Con los 64px de .pj .h1 se comia el impreso de al lado. */
.pj--alta .h1{font-size:44px;line-height:48px;max-width:14em}
.pj--alta .lead{max-width:34em}

/* Los bloques de campos del impreso, uno detras de otro. */
.pj--alta .form+.form{margin-top:24px}
.pj--alta .hint{margin-top:4px;font-size:15px;line-height:24px;text-wrap:pretty}
.pj--alta .form-head+.hint{margin-top:12px}
.pj--alta .acciones+.hint{margin-top:24px}
.pj--alta .req{color:var(--ink)}
/* Los campos que la pasarela rellena sola: se leen, no se escriben, y se ve. */
.pj--alta .input[readonly]{background:var(--band);color:var(--ink)}
.pj--alta .input[readonly]:hover{box-shadow:inset 0 0 0 1px var(--ink)}

/* Validacion de EditForm. Las clases las pone Blazor, no la maqueta: el resumen arriba del impreso
   y el aviso pegado a su campo. Van en tinta invertida, como .err, porque el rojo de
   dameti-components.css no existe en esta hoja. */
.pj--alta .validation-errors{margin:0 0 24px;padding:12px 14px;list-style:none;background:var(--print);color:var(--paper);border:0;border-radius:0;font:600 16px/24px var(--f-form)}
.pj--alta .validation-errors li{color:inherit;font-size:inherit}
.pj--alta .validation-message{display:block;margin-top:4px;color:var(--print);font:600 15px/24px var(--f-form)}
.pj--alta .input.invalid{box-shadow:inset 0 0 0 2px var(--print)}

/* Avisos en recuadro: lo que hay que saber pero no impide seguir. */
.pj--alta .nota{margin-top:24px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--ink)}
.pj--alta .nota .lbl{display:block}
.pj--alta .nota p{font-size:15px;line-height:24px;text-wrap:pretty}
/* .err viene de la entrada, donde el mensaje es siempre de una linea. Aqui alguno ocupa dos, y
   entonces el icono tiene que quedarse arriba y no centrado en el bloque. */
.pj--alta .err{align-items:flex-start}
.pj--alta .err svg{margin-top:4px}

/* «Acepto las condiciones»: casilla de impreso. La cruz son dos gradientes sobre la casilla vacia,
   la misma que lleva el expediente del aterrizaje, y asi no hace falta ni un icono aparte ni una
   linea de JavaScript. */
.pj--alta .check{display:flex;align-items:flex-start;gap:12px;margin-top:24px}
.pj--alta .check input{flex:none;width:18px;height:18px;margin:3px 0 0;padding:0;border:0;border-radius:0;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer}
.pj--alta .check input:checked{background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--print) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(-45deg,transparent calc(50% - 1px),var(--print) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
.pj--alta .check span{font-size:15px;line-height:24px}
.pj--alta .check a{color:var(--ink)}
.pj--alta .acepto .validation-message{margin-top:8px}

/* La fila de botones de cada pantalla. */
.pj--alta .acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.pj--alta .acciones--entre{justify-content:space-between}

/* La eleccion de plan. Es la tabla de precios del aterrizaje con una casilla delante del nombre:
   la del plan elegido va cruzada. Nada mas se mueve al cambiar de plan, que es lo que evita que la
   tabla baile bajo el raton. */
.pj--alta .pick{display:inline-flex;align-items:center;gap:12px}
.pj--alta .pick svg{flex:none}
.pj--alta .tot{margin-top:48px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:24px;padding-top:24px;box-shadow:inset 0 2px 0 var(--ink)}
.pj--alta .tot .lbl{display:block}

/* La pasarela simulada. El recuadro de puntos es el talon del aterrizaje a menor tamaño, y dentro
   van los dos botones que fuerzan cada desenlace con lo que hace cada uno escrito debajo. */
.pj--alta .cobro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;margin-top:24px}
.pj--alta .cobro .lbl{display:block}
.pj--alta .importe{font:900 32px/48px var(--f-dot);color:var(--print);font-variant-numeric:tabular-nums}
.pj--alta .sim{margin-top:24px;padding:24px;outline:2px dashed var(--ink);outline-offset:-2px}
.pj--alta .sim-b{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pj--alta .sim-b .btn{width:100%}
.pj--alta .sim-h{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;font:400 14px/24px var(--f-data)}

/* El resguardo del pago: el recuadro del expediente (.exp) con las filas a la altura que pida el
   dato. La altura fija de .exp-row vale para el aterrizaje, donde todo es texto inventado y corto;
   aqui una referencia de pago o el nombre de una organizacion se salen del renglon. */
.pj--alta .res-i{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;padding-block:6px;box-shadow:inset 0 1px 0 var(--ink-rule)}
.pj--alta .res-i:first-child{padding-top:0;box-shadow:none}
.pj--alta .res-i dd{text-align:right;overflow-wrap:anywhere}

/* Las paginas legales: prosa larga en el mismo papel, con el renglon de 24px de todo lo demas. */
.pj--alta .legal{margin-top:48px;max-width:44em}
.pj--alta .legal h2{margin-top:48px;font:800 26px/48px var(--f-form);letter-spacing:-.01em;color:var(--ink)}
.pj--alta .legal h2:first-child{margin-top:0}
.pj--alta .legal p{margin-top:12px;font-size:17px;line-height:24px;text-wrap:pretty}
.pj--alta .legal a{color:var(--ink)}

@media (max-width:960px){
  .pj--alta .lh{grid-template-rows:48px}
  .pj--alta .doble{grid-template-columns:minmax(0,1fr);row-gap:48px;padding-top:48px;padding-bottom:72px}
  .pj--alta .simple{padding-top:48px;padding-bottom:72px}
  /* Lo mismo que .pj .form en este tramo: el talon va debajo del impreso de cobro y no puede
     quedarse mas ancho que el. */
  .pj--alta .sim{max-width:520px}
  /* El margen que .pj .exp toma aqui es el del aterrizaje, donde el expediente cae bajo el titular.
     En el alta el hueco ya lo pone el row-gap de la rejilla, y sumado quedaba el doble. */
  .pj--alta .exp{margin-top:0;max-width:520px}
  .pj--alta .who{max-width:40vw}
}
@media (max-width:640px){
  .pj--alta .h1{font-size:34px;line-height:48px}
  .pj--alta .pasos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .pj--alta .sim{padding:24px 16px}
  .pj--alta .sim-b,.pj--alta .sim-h{grid-template-columns:minmax(0,1fr)}
  .pj--alta .acciones{flex-direction:column-reverse;align-items:stretch}
  .pj--alta .acciones .btn{width:100%}
  .pj--alta .legal h2{font-size:24px}
}
@media (max-width:420px){
  .pj--alta .pasos{grid-template-columns:minmax(0,1fr)}
  .pj--alta .who{display:none}
}

/* Al final a proposito: tiene que pesar lo mismo que las reglas que apaga y venir detras. */
@media (prefers-reduced-motion:reduce){
  .pj .btn,.pj .btn svg,.pj .navlink,.pj .help summary svg{transition:none}
}