/* Nadico - diseno de la tarjeta publica de swiish v0.7.0: direccion D «Pase tecnico» (Albert, 2026-09-26).
   La tarjeta es el mismo pase de Wallet (logo, foto redonda a la derecha, etiquetas lavanda) apoyado sobre
   la pagina, con reticula de papel tecnico y una cota de arquitecto bajo el nombre; las acciones debajo.
   Solo actua sobre elementos con clases nd-* (las pone patch-diseno.js) y con <html class="nd">: el panel
   de administracion no se toca. Las rutas en mayusculas entre dobles guiones bajos las sustituye el
   parche por ficheros con resumen en el nombre. */

@font-face {
  font-family: 'Archivo ND';
  src: url(/static/nadico/archivo-latin.e3a28ead.woff2) format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo ND';
  src: url(/static/nadico/archivo-latin-ext.5717f370.woff2) format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root.nd {
  --nd-navy: #002554;
  --nd-azul: #435cc8;
  --nd-lav: #a9b8e8;
  --nd-pagina: #edf0f6;
  --nd-sup: #ffffff;
  --nd-tinta: #0d1f3c;
  --nd-tinta-2: #4b5a78;
  --nd-linea: #dfe4ee;
  --nd-in: 14px;
  --nd-pad: 22px;
  --nd-radio: 24px;
  --nd-ease: cubic-bezier(.23, 1, .32, 1);
  --nd-reticula:
    linear-gradient(rgba(169, 184, 232, .13) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(90deg, rgba(169, 184, 232, .13) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(rgba(169, 184, 232, .055) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(169, 184, 232, .055) 1px, transparent 1px) 0 0 / 16px 16px;
}
:root.nd.dark {
  --nd-pagina: #030d1f;
  --nd-sup: #0a1d3d;
  --nd-tinta: #e8edf8;
  --nd-tinta-2: #a9b8e8;
  --nd-linea: #183061;
}
:root.nd:has(.nd-fondo, .nd-carga, .nd-404) { color-scheme: light; }
:root.nd.dark:has(.nd-fondo, .nd-carga, .nd-404) { color-scheme: dark; }
:root.nd .nd-marco :is(a, button), :root.nd .nd-qr button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; /* la respuesta al toque es el scale de :active */
}

/* ---------- Pagina: carga, 404 y tarjeta ---------- */
:root.nd:has(.nd-fondo), :root.nd:has(.nd-fondo) body,
:root.nd:has(.nd-carga), :root.nd:has(.nd-carga) body { background: var(--nd-pagina); }
:root.nd .nd-fondo, :root.nd .nd-carga, :root.nd .nd-404 {
  background: var(--nd-pagina) !important;
  font-family: 'Archivo ND', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  :root.nd .nd-fondo { background: var(--nd-reticula), #dde2ec !important; }
  :root.nd.dark .nd-fondo { background: var(--nd-reticula), #01070f !important; }
}
/* swiish pinta una textura granulada en un ::after de .bg-main-texture: fuera */
:root.nd .nd-fondo::after, :root.nd .nd-carga::after, :root.nd .nd-404::after { display: none; }
:root.nd .nd-carga > div { color: var(--nd-tinta-2) !important; font-size: 15px; }
:root.nd .nd-404 h1 { color: var(--nd-navy) !important; font-size: 26px; font-weight: 650; font-stretch: 108%; letter-spacing: -.01em; }
:root.nd.dark .nd-404 h1 { color: var(--nd-tinta) !important; }
:root.nd .nd-404 p { color: var(--nd-tinta-2) !important; }

:root.nd .nd-marco {
  background: var(--nd-pagina) !important;
  font-family: 'Archivo ND', system-ui, sans-serif;
  font-stretch: 100%;
  box-shadow: none !important;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  :root.nd .nd-marco { border-radius: 28px !important; box-shadow: 0 40px 90px -30px rgba(0, 25, 60, .45) !important; }
}
:root.nd .nd-tarjeta { background: transparent !important; }

/* ---------- El pase: banner (arriba) + cabecera (abajo), un solo bloque azul ---------- */
:root.nd .nd-banner {
  width: auto;
  height: 80px;
  margin: var(--nd-in) var(--nd-in) 0;
  border-radius: var(--nd-radio) var(--nd-radio) 0 0;
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(67, 92, 200, .45), transparent 55%),
    var(--nd-reticula),
    var(--nd-navy) !important;
  animation: nd-sube .6s var(--nd-ease) both;
}
/* El banner subido y el degradado de swiish no se usan: la cabecera es de marca e igual para todos */
:root.nd .nd-banner > img, :root.nd .nd-banner > div:not(.nd-acciones) { display: none; }
:root.nd .nd-banner::before {
  content: '';
  position: absolute;
  left: var(--nd-pad);
  top: 24px;
  width: 108px;
  height: 36px;
  background: url(/static/nadico/logo-blanco.c2de636f.png) left center / contain no-repeat;
}
:root.nd .nd-acciones { top: 18px; right: 12px; gap: 2px; }
:root.nd .nd-acciones > :is(button, a) {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--nd-lav);
  transition: background-color .2s ease, transform .16s var(--nd-ease);
}
:root.nd .nd-acciones > :is(button, a):active { transform: scale(.94); }
:root.nd .nd-acciones svg { width: 19px; height: 19px; }
:root.nd .nd-acciones > span { display: none; }

:root.nd .nd-cuerpo {
  margin-top: 0;
  padding: 0 var(--nd-in) 28px;
  isolation: isolate;
}
:root.nd .nd-foto {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: calc(var(--nd-in) + var(--nd-pad));
  width: 82px;
  height: 82px;
  min-height: 82px;
  margin: 0;
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px var(--nd-navy), 0 0 0 4.5px rgba(169, 184, 232, .55) !important;
  animation: nd-sube .6s var(--nd-ease) both;
}
:root.nd .nd-cabecera {
  order: 2;
  position: relative;
  margin: 0 0 26px;
  padding: 12px var(--nd-pad) 26px;
  animation: nd-sube .6s var(--nd-ease) both;
}
:root.nd .nd-cabecera::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 0 0 var(--nd-radio) var(--nd-radio);
  background: var(--nd-reticula), var(--nd-navy);
  box-shadow: 0 26px 50px -24px rgba(0, 25, 60, .55);
}
:root.nd.dark .nd-cabecera::before { box-shadow: 0 0 0 1px rgba(169, 184, 232, .14); }
:root.nd .nd-cabecera > * { margin-top: 0 !important; }
:root.nd .nd-nombre {
  position: relative;
  width: fit-content;
  max-width: calc(100% - 100px);
  padding: 18px 0;
  margin-bottom: 16px !important;
  color: #fff !important;
  font-size: 31px;
  line-height: 1.06;
  font-weight: 640;
  font-stretch: 110%;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* Cota: linea de medida con lineas de referencia y los trazos a 45 grados de los planos de arquitectura */
:root.nd .nd-nombre::after {
  --c: rgba(169, 184, 232, .8);
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 11px;
  background:
    linear-gradient(45deg, transparent calc(50% - .7px), var(--c) calc(50% - .7px), var(--c) calc(50% + .7px), transparent calc(50% + .7px)) left center / 9px 9px no-repeat,
    linear-gradient(45deg, transparent calc(50% - .7px), var(--c) calc(50% - .7px), var(--c) calc(50% + .7px), transparent calc(50% + .7px)) right center / 9px 9px no-repeat,
    linear-gradient(var(--c), var(--c)) 4px center / 1px 100% no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 4px) center / 1px 100% no-repeat,
    linear-gradient(var(--c), var(--c)) center / calc(100% - 8px) 1px no-repeat;
  animation: nd-cota .9s var(--nd-ease) .45s both;
}
:root.nd .nd-cargo {
  margin-bottom: 20px !important;
  color: var(--nd-lav) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  text-wrap: pretty;
}
/* Campos del pase: etiqueta arriba, valor debajo (como en Wallet) */
:root.nd .nd-empresa, :root.nd .nd-sede {
  display: block;
  color: #fff !important;
  font-size: 15px;
  line-height: 1.4;
}
:root.nd .nd-sede { margin-top: 12px !important; }
:root.nd .nd-empresa svg, :root.nd .nd-sede svg { display: none; }
:root.nd .nd-empresa::before, :root.nd .nd-sede::before {
  display: block;
  margin-bottom: 2px;
  color: var(--nd-lav);
  font-size: 11px;
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:root.nd .nd-empresa::before { content: 'Empresa'; }
:root.nd .nd-sede::before { content: 'Sede'; }

/* ---------- Acciones ---------- */
:root.nd .nd-botones { order: 3; display: flex; flex-direction: column; gap: 0; margin: 0 0 22px; padding: 0 4px; }
:root.nd .nd-botones > button {
  height: 54px;
  margin-bottom: 16px;
  border: 0 !important;
  border-radius: 999px;
  background: var(--nd-navy) !important;
  color: #fff !important;
  font-size: 16.5px;
  font-weight: 620;
  gap: 10px;
  box-shadow: none !important;
  transition: transform .16s var(--nd-ease), background-color .2s ease;
}
:root.nd.dark .nd-botones > button { background: var(--nd-azul) !important; }
:root.nd .nd-botones > button svg { color: var(--nd-lav); }
:root.nd.dark .nd-botones > button svg { color: #fff; }
:root.nd .nd-botones > button:active { transform: scale(.97); }
:root.nd .nd-dato {
  justify-content: flex-start;
  min-height: 60px;
  padding: 10px 16px 10px 12px !important;
  gap: 14px;
  border: 0 !important;
  border-radius: 0;
  background: var(--nd-sup) !important;
  color: var(--nd-tinta) !important;
  font-size: 16px;
  font-weight: 540;
  overflow-wrap: anywhere;
  word-break: normal !important;
  transition: background-color .2s ease;
}
:root.nd .nd-dato + .nd-dato { box-shadow: inset 0 1px 0 var(--nd-linea); }
:root.nd .nd-dato:first-of-type { border-radius: 18px 18px 0 0; }
:root.nd .nd-dato:last-of-type { border-radius: 0 0 18px 18px; }
:root.nd .nd-dato:first-of-type:last-of-type { border-radius: 18px; }
:root.nd .nd-dato svg { flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 999px; background: var(--nd-pagina); color: var(--nd-azul); }
:root.nd.dark .nd-dato svg { color: var(--nd-lav); }
:root.nd .nd-telefono { font-variant-numeric: tabular-nums; }

:root.nd .nd-bio { order: 4; margin: 0 4px 22px; }
:root.nd .nd-bio p { color: var(--nd-tinta-2) !important; font-size: 15px; line-height: 1.55; }

:root.nd .nd-dejame { order: 5; margin: 0 4px 24px; }
:root.nd .nd-dejame > button {
  height: 52px;
  border: 0 !important;
  border-radius: 999px;
  background: var(--nd-sup) !important;
  color: var(--nd-tinta) !important;
  box-shadow: none !important;
  font-weight: 600;
  transition: transform .16s var(--nd-ease), background-color .2s ease;
}
:root.nd .nd-dejame > button:active { transform: scale(.97); }
:root.nd .nd-dejame > button svg { color: var(--nd-azul); }
:root.nd.dark .nd-dejame > button svg { color: var(--nd-lav); }
/* Opciones de «Dejame tus datos»: filas como las del correo y el telefono */
:root.nd .nd-dejame > div {
  margin-top: 10px;
  padding: 0;
  border: 0 !important;
  border-radius: 18px;
  background: var(--nd-sup) !important;
  overflow: hidden;
}
:root.nd .nd-dejame > div > * + * { margin-top: 0 !important; }
:root.nd .nd-dejame > div > a {
  justify-content: flex-start;
  min-height: 56px;
  padding: 10px 16px 10px 12px;
  gap: 14px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--nd-tinta) !important;
  font-weight: 540;
}
:root.nd .nd-dejame > div > a + a { box-shadow: inset 0 1px 0 var(--nd-linea); }
:root.nd .nd-dejame > div > a svg { flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 999px; background: var(--nd-pagina); color: var(--nd-azul); }
:root.nd .nd-dejame > div > a[href^="https://wa.me"] svg { color: #1a8f4c; }
:root.nd .nd-dejame > div > p { margin: 0; padding: 10px 16px 14px; color: var(--nd-tinta-2) !important; font-size: 12.5px; box-shadow: inset 0 1px 0 var(--nd-linea); }

:root.nd .nd-enlaces { order: 6; margin: 0 4px 24px; }
:root.nd .nd-enlaces > a { border: 0 !important; border-radius: 18px; background: var(--nd-sup) !important; color: var(--nd-tinta) !important; }

:root.nd .nd-redes { order: 7; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 26px; }
:root.nd .nd-redes > a {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 6px;
  border-radius: 999px;
  background: var(--nd-sup);
  transition: transform .16s var(--nd-ease);
}
:root.nd .nd-redes > a:active { transform: scale(.97); }
:root.nd .nd-redes > a > div {
  width: 32px !important;
  height: 32px;
  aspect-ratio: auto;
  border: 0 !important;
  border-radius: 999px;
  background: var(--nd-pagina) !important;
  color: var(--nd-azul) !important;
}
:root.nd.dark .nd-redes > a > div { color: var(--nd-lav) !important; }
:root.nd .nd-redes > a > div svg { width: 17px; height: 17px; }
:root.nd .nd-redes > a > span { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--nd-tinta) !important; }

:root.nd .nd-pie { order: 8; background: transparent !important; }
:root.nd .nd-pie img, :root.nd .nd-qr img.swiish-logo { display: none; }
:root.nd .nd-pie > div::before, :root.nd .nd-qr-pie > div::before {
  content: '';
  width: 24px;
  height: 24px;
  background: url(/static/nadico/isotipo.709d7d90.png) center / contain no-repeat;
}

/* ---------- Vista del QR (boton compartir) ---------- */
:root.nd .nd-qr {
  background: radial-gradient(90% 60% at 0% 0%, rgba(67, 92, 200, .45), transparent 55%), var(--nd-reticula), var(--nd-navy) !important;
  font-family: 'Archivo ND', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
:root.nd .nd-qr .border-thick { border: 0 !important; border-radius: 22px !important; background: #fff !important; padding: 14px !important; box-shadow: 0 30px 60px -30px rgba(0, 10, 30, .8); }
:root.nd .nd-qr .border-thick img { mix-blend-mode: normal !important; }
:root.nd .nd-qr h2 { color: #fff !important; font-size: 24px; font-weight: 640; font-stretch: 108%; letter-spacing: -.015em; text-wrap: balance; }
:root.nd .nd-qr h2 + div { color: var(--nd-lav) !important; }
:root.nd .nd-qr .font-mono { color: rgba(169, 184, 232, .85) !important; }
:root.nd .nd-qr p { color: rgba(255, 255, 255, .75) !important; }
:root.nd .nd-qr .rounded-full.p-1 { background: rgba(255, 255, 255, .08) !important; font-size: 13px !important; }
:root.nd .nd-qr .rounded-full.p-1 > button { padding: 8px 10px; color: var(--nd-lav) !important; }
:root.nd .nd-qr .rounded-full.p-1 > button.shadow-sm { background: #fff !important; color: var(--nd-navy) !important; }
:root.nd .nd-qr .rounded-input.font-bold { height: 52px; border-radius: 999px !important; background: #fff !important; color: var(--nd-navy) !important; font-size: 16px !important; }
:root.nd .nd-qr-pie { background: transparent !important; }

/* ---------- Estados, foco y movimiento ---------- */
:root.nd .nd-marco :focus-visible, :root.nd .nd-qr :focus-visible { outline: 2px solid var(--nd-azul); outline-offset: 3px; }
:root.nd .nd-banner :focus-visible, :root.nd .nd-qr :focus-visible { outline-color: var(--nd-lav); }
@media (hover: hover) and (pointer: fine) {
  :root.nd .nd-acciones > :is(button, a):hover { background: rgba(255, 255, 255, .1) !important; }
  :root.nd .nd-botones > button:hover { background: #0a3470 !important; }
  :root.nd.dark .nd-botones > button:hover { background: #5068d0 !important; }
  :root.nd .nd-dato:hover, :root.nd .nd-dejame > div > a:hover { background: color-mix(in srgb, var(--nd-sup) 94%, var(--nd-azul)) !important; }
  :root.nd .nd-dejame > button:hover { background: color-mix(in srgb, var(--nd-sup) 94%, var(--nd-azul)) !important; }
}
@keyframes nd-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nd-cota { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nd-fundido { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  :root.nd .nd-banner, :root.nd .nd-foto, :root.nd .nd-cabecera { animation: nd-fundido .3s ease both; }
  :root.nd .nd-nombre::after { animation: none; }
}