/* =====================================================================
   Norwell Partners — Twenty auth theme (Claret + Bronce)
   Alcance: SOLO la vista de acceso, via body:has(.sdtdivd). El interior de
   la app queda 100% Twenty nativo (decision del operador 2026-09-06:
   «cuando ya estas adentro, la misma metodologia que en pdd: todo Twenty»).
   Los matchers por subcadena [class*="_x_"] sobreviven al cambio de hashes
   de Twenty entre versiones. Revert: apunta Caddy a :3050 y borra esto.
   Kit: claret #692122 · bronce #BD8B5E · pergamino #F6F3EE · tinta #231915
   Profundidades del 3D: bg #270B0A · surface #3C1212 · metal-hi #E5C6A2
   ===================================================================== */
@font-face{font-family:'Newsreader NW';src:url('/nw-brand/newsreader.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken NW';src:url('/nw-brand/hanken.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --nw-bg:#270B0A; --nw-surface:#3C1212; --nw-claret:#692122; --nw-claret-950:#1B0706;
  --nw-ink:#F6F3EE; --nw-inksoft:#C4B3A6;
  --nw-bronze:#BD8B5E; --nw-bronze-hi:#E5C6A2; --nw-bronze-deep:#855C3A;
  --nw-line:rgba(189,139,94,.22);
  --nw-field:rgba(189,139,94,.07);
}
/* campo claret en todo el viewport de acceso (pinta aunque Twenty renombre el backdrop) */
body:has(.sdtdivd){
  background:
    radial-gradient(1100px 760px at 50% -14%, var(--nw-claret) 0%, rgba(39,11,10,0) 60%),
    linear-gradient(180deg, var(--nw-bg) 0%, #1F0808 55%, var(--nw-claret-950) 100%) !important;
  font-family:'Hanken NW', ui-sans-serif, system-ui, sans-serif !important;
}
body:has(.sdtdivd) [class*="_backdrop_"]{
  background:
    radial-gradient(1100px 760px at 50% -14%, var(--nw-claret) 0%, rgba(39,11,10,0) 60%),
    linear-gradient(180deg, var(--nw-bg) 0%, #1F0808 55%, var(--nw-claret-950) 100%) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* ---------- TARJETA ---------- */
body:has(.sdtdivd) [class*="_modal_"]{
  position:relative !important;
  /* Twenty fija ~539px de alto y deja hueco muerto bajo los enlaces: manda el contenido */
  height:auto !important; min-height:0 !important;
  width:min(500px,92vw) !important; max-width:500px !important;
  padding:44px 48px 40px !important;
  background:linear-gradient(180deg, rgba(60,18,18,.86), rgba(27,7,6,.90)) !important;
  border:1px solid var(--nw-line) !important;
  border-radius:3px !important;
  box-shadow:0 26px 74px -26px rgba(0,0,0,.76), inset 0 1px 0 rgba(255,255,255,.045) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08); backdrop-filter:blur(16px) saturate(1.08);
  color:var(--nw-ink) !important;
  overflow:visible !important;
}
/* el _content_ trae su propio padding:40px DENTRO del de la tarjeta (doble acolchado) */
body:has(.sdtdivd) [class*="_content_"]{ padding:0 !important; }
/* filo de bronce en el borde superior: brillante al centro, se apaga en las esquinas */
body:has(.sdtdivd) [class*="_modal_"]::after{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(229,198,162,.88) 50%, transparent);
  pointer-events:none;
}
body:has(.sdtdivd) [class*="_modal_"] :where(h1,h2,h3,h4,p,span,label,a,div,li){ color:var(--nw-ink) !important; }
body:has(.sdtdivd) [class*="_modal_"] :where(h1,h2,h3){
  font-family:'Newsreader NW', ui-serif, Georgia, serif !important;
  font-weight:400 !important; letter-spacing:-.01em !important;
}

/* oculta el bloque del logo de Twenty (marca "20" + avatar del espacio). Se ataca el div
   cuyo hijo DIRECTO es el unico enlace del logo: cae con los hashes cambiados. */
body:has(.sdtdivd) [class*="_content_"] div:has(> a[class*="_undecoratedLink_"]){ display:none !important; }

/* ---------- MARCA SOBRE EL FORMULARIO ----------
   Fallback CSS: la dovela en foil de bronce, enmascarada sobre un gradiente vivo.
   Es lo que se ve mientras el sello 3D carga, y lo que QUEDA si WebGL falla. */
body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd){ position:relative !important; }
body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before{
  content:""; display:block; width:120px; height:120px; margin:6px auto 34px;
  background:linear-gradient(125deg,#4A3120 0%,#855C3A 16%,#BD8B5E 32%,#E5C6A2 46%,#D8B48B 58%,#9A6C44 74%,#E5C6A2 88%,#4A3120 100%);
  background-size:220% 220%;
  -webkit-mask:url('/nw-brand/mark.svg') center/contain no-repeat;
          mask:url('/nw-brand/mark.svg') center/contain no-repeat;
  filter:drop-shadow(0 8px 26px rgba(189,139,94,.30));
  animation:nwFoil 6.5s ease-in-out infinite;
}
@keyframes nwFoil{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

@media (max-width:600px){
  body:has(.sdtdivd) [class*="_modal_"]{ padding:30px 24px 28px !important; }
  body:has(.sdtdivd) [class*="_modal_"]::after{ display:none !important; }
  body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before{ width:96px; height:96px; margin:6px auto 28px; }
}

/* ---------- SELLO 3D (plato) ----------
   Montado por /nw-brand/nw-login.js como capa position:fixed sobre <body>, FUERA del
   arbol de React, sincronizada con la tarjeta cada frame. El 3D vive en un iframe
   (seal.html) porque el bundle instancia Lenis + su RAF y en la pagina secuestraria
   la rueda del raton. Fondo opaco: el renderer es alpha:false, asi que la dovela se
   presenta como PLATO montado — que es literalmente lo que es una dovela. */
#nw-3d-layer{
  position:fixed; z-index:2147483000; display:none;
  pointer-events:none; contain:layout style size;
  overflow:hidden;
  /* SIN borde ni sombra: eran lo que dibujaba el plato como un parche pegado.
     El iframe iguala el color MEDIDO de la tarjeta (#330101), y encima se difumina
     el borde con una mascara radial: asi el plato no depende de acertar un color
     exacto, que cambia con el gradiente y el viewport. Dos capas contra una costura. */
  /* La mascara se ajusta al contorno REAL del sello (ocupa ~65% del alto del marco),
     no al marco: opaca hasta el 46%, disuelta del todo al 82%. Asi la superficie de
     fondo visible es minima y deja de importar acertar el color exacto de la tarjeta,
     que cambia con el gradiente y el viewport. Probado y descartado antes:
     mix-blend-mode:screen — el bloom cubre TODO el marco y levanta el rectangulo entero. */
  -webkit-mask:radial-gradient(closest-side, #000 46%, rgba(0,0,0,.42) 66%, transparent 82%);
          mask:radial-gradient(closest-side, #000 46%, rgba(0,0,0,.42) 66%, transparent 82%);
  opacity:0; transition:opacity .6s ease;
}
html.nw-3d-ready #nw-3d-layer{ opacity:1; }
#nw-3d-layer iframe{ width:100%; height:100%; border:0; display:block; background:#330101; }
/* halo de bronce detras del plato */
#nw-3d-layer::before{
  content:""; position:absolute; inset:-30% -30% -34%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(189,139,94,.14), rgba(189,139,94,.03) 56%, transparent 74%);
  filter:blur(4px);
}
/* con el sello vivo: apaga el foil CSS pero CONSERVA (y agranda) su caja reservada,
   para que el plato nunca colisione con el formulario de abajo */
html.nw-3d-ready body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before{
  opacity:0 !important; animation:none !important;
  width:190px !important; height:168px !important; margin:2px auto 6px !important;
}
@media (max-width:600px){
  html.nw-3d-ready body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before{
    width:150px !important; height:134px !important; margin:2px auto 4px !important;
  }
}

/* el acceso muestra SOLO la marca: se oculta el texto de bienvenida. Sigue en el DOM
   (display:none, no removido) para que el scope body:has(.sdtdivd) siga disparando. */
body:has(.sdtdivd) .sdtdivd{ display:none !important; }

/* ---------- CAMPOS ---------- */
body:has(.sdtdivd) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]){
  background:var(--nw-field) !important;
  border:1px solid rgba(189,139,94,.26) !important;
  border-radius:3px !important; color:var(--nw-ink) !important;
  caret-color:var(--nw-bronze) !important;
}
body:has(.sdtdivd) input::placeholder{ color:var(--nw-inksoft) !important; opacity:.85; }
body:has(.sdtdivd) input:focus{
  border-color:var(--nw-bronze) !important;
  box-shadow:0 0 0 3px rgba(229,198,162,.15) !important; outline:none !important;
}

/* ---------- BOTON PRIMARIO — foil de bronce del kit ---------- */
body:has(.sdtdivd) button[data-variant="primary"],
body:has(.sdtdivd) [class*="_button_y8rpu"]{
  background:linear-gradient(100deg,#4A3120 0%,#6E4B2E 9%,#9A6C44 19%,#D8B48B 29%,#E5C6A2 37%,#C79A6C 45%,#855C3A 57%,#E5C6A2 69%,#6E4B2E 84%,#4A3120 100%) !important;
  background-size:230% 100% !important;
  border:1px solid rgba(74,49,32,.55) !important;
  color:#231915 !important; border-radius:3px !important; font-weight:700 !important;
  box-shadow:0 12px 28px -12px rgba(189,139,94,.52), inset 0 1px 0 rgba(246,243,238,.55), inset 0 -1px 0 rgba(45,29,16,.5) !important;
  animation:nwFoilBtn 7s ease-in-out infinite;
}
@keyframes nwFoilBtn{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
body:has(.sdtdivd) button[data-variant="primary"] *,
body:has(.sdtdivd) [class*="_button_y8rpu"] *{ color:#231915 !important; }
body:has(.sdtdivd) button[data-variant="primary"]:hover,
body:has(.sdtdivd) [class*="_button_y8rpu"]:hover{ filter:brightness(1.05); }

/* ---------- BOTONES SSO (secundarios) ---------- */
body:has(.sdtdivd) [class*="_button_15sm2"]{
  background:rgba(105,33,34,.20) !important;
  border:1px solid rgba(189,139,94,.20) !important;
  color:var(--nw-ink) !important; border-radius:3px !important;
}
body:has(.sdtdivd) [class*="_button_15sm2"]:hover{ background:rgba(105,33,34,.30) !important; }

body:has(.sdtdivd) a{ color:var(--nw-bronze) !important; text-decoration:none !important; }
body:has(.sdtdivd) ::selection{ background:rgba(229,198,162,.30); color:#231915; }

/* movimiento reducido: se apagan los foils. El sello 3D lo apaga nw-login.js
   (no se monta el iframe siquiera). */
@media (prefers-reduced-motion: reduce){
  body:has(.sdtdivd) [class*="_content_"]:has(.sdtdivd)::before,
  body:has(.sdtdivd) button[data-variant="primary"],
  body:has(.sdtdivd) [class*="_button_y8rpu"]{ animation:none !important; }
}

/* =====================================================================
   INTERIOR — sin una sola regla. Twenty nativo, y el logo del espacio se
   sube por Ajustes (subida nativa), no se parchea con CSS.
   ===================================================================== */