/* Base */
@import '/css/base/base.css';
@import '/css/base/reset.css';
/* Foundations */
@import '/css/foundations/gradients.css';
@import '/css/foundations/primitives.css';
@import '/css/foundations/system.css';
@import '/css/foundations/theme.css';
/* Layout */
@import '/css/layout/shell.css';
@import '/css/layout/topbar.css';
@import '/css/layout/main.css';
@import '/css/layout/footer.css';
@import '/css/layout/sidebar.css';
/* Components */
@import '/css/components/buttons.css';
@import '/css/components/nav.css';
@import '/css/components/typography.css';
@import '/css/components/brand.css';
@import '/css/components/utility.css';
@import '/css/components/accent.css';
@import '/css/components/section.css';
@import '/css/components/demo.css';
@import '/css/components/grid.css';
@import '/css/components/cards.css';
@import '/css/components/badges.css';
@import '/css/components/dashboard.css';
@import '/css/components/tables.css';

/* =========================================================
   RENTAS — DASHBOARD (MAIN)
   Consume roles sys-* (light/dark listo)
========================================================= */


/* Contenedor dashboard */
.dash{
  padding: 0 var(--sys-space-xl) var(--sys-space-xl);
}

.dash__row{
  gap: var(--sys-space-lg);
}

@media (max-width: 768px){
  .main__header{ padding: var(--sys-space-lg); }
  .dash{ padding: 0 var(--sys-space-lg) var(--sys-space-lg); }
  .main__heading{ flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Pills / Badges (compactos, sobrios)
========================================================= */

.pill{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  border-radius: var(--sys-radius-pill);
  border: 1px solid var(--sys-border-subtle);
  background: hsla(var(--pr-caliza-50) / 0.06);
  color: var(--sys-text-secondary);
  font-size: var(--sys-text-xs);
  letter-spacing: var(--sys-track-wide);
  text-transform: uppercase;
}

.pill--dim{
  background: hsla(var(--pr-caliza-50) / 0.04);
  color: var(--sys-text-tertiary);
}

/* Badges (se usan en Avisos) */
.badge{
  display: inline-flex;
  align-items: center;
  padding: .45rem .9rem;
  border-radius: var(--sys-radius-pill);
  border: 1px solid var(--sys-border-subtle);
  background: hsla(var(--pr-caliza-50) / 0.05);
  color: var(--sys-text-secondary);
  font-size: var(--sys-text-xs);
  letter-spacing: var(--sys-track-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--ok{
  border-color: hsla(var(--pr-selva-400) / .28);
  background:  hsla(var(--pr-success-400) / .10);
  color: hsl(var(--pr-success-400));
}
.badge--warn{
  border-color: hsla(var(--pr-cobre-400) / .30);
  background:  hsla(var(--pr-cobre-400) / .10);
  color: hsl(var(--pr-cobre-400));
}
.badge--dim{
  border-color: var(--sys-border-subtle);
  background:  hsla(var(--pr-caliza-50) / 0.04);
  color: var(--sys-text-tertiary);
}

/* =========================================================
   KPI (top cards)
========================================================= */

.kpi{
  padding: var(--sys-space-md);
  min-height: 12.2rem;
}

.kpi__header,
.kpi__foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sys-space-md);
}

.kpi__title{
  font-size: var(--sys-text-lg);
  font-weight: var(--sys-weight-semibold);
  color: var(--sys-text-primary);
}

.kpi__value{
  margin: var(--sys-space-sm) 0;
  font-family: var(--sys-font-mono);
  font-size: clamp(2.4rem, 2.1vw, 3.2rem);
  font-weight: var(--sys-weight-bold);
  letter-spacing: var(--sys-track-tight);
  line-height: var(--sys-line-tight);
  color: var(--sys-text-accent);
}

/* delta (chip mini) */
.kpi__delta{
  display: inline-flex;
  align-items: center;
  padding: .35rem .8rem;
  border-radius: var(--sys-radius-pill);
  border: 1px solid var(--sys-border-subtle);
  background: hsla(var(--pr-caliza-50) / .05);
  font-size: var(--sys-text-xs);
  letter-spacing: var(--sys-track-wide);
  text-transform: uppercase;
  color: var(--sys-text-tertiary);
  white-space: nowrap;
}

.kpi__delta--up{
  border-color: hsla(var(--pr-selva-500) / .28);
  background:  hsla(var(--pr-selva-500) / .10);
  color: hsl(var(--pr-selva-500));
}

.kpi__delta--flat{
  opacity: .9;
}

/* =========================================================
   Panel (Operaciones / Avisos)
========================================================= */

.panel{
  padding: var(--sys-space-md);
  min-height: 44rem; /* para que se sienta como la imagen */
}

.panel__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sys-space-md);
  padding-bottom: var(--sys-space-sm);
  border-bottom: 1px solid var(--sys-divider);
  margin-bottom: var(--sys-space-sm);
}

.panel__head-left{
  display: inline-flex;
  align-items: baseline;
  gap: var(--sys-space-sm);
  min-width: 0;
}

.panel__title{
  margin: 0;
  font-size: var(--sys-text-xl);
  font-weight: var(--sys-weight-semibold);
  color: var(--sys-text-primary);
  letter-spacing: var(--sys-track-tight);
}

.panel__meta{
  font-size: var(--sys-text-xs);
  color: var(--sys-text-tertiary);
  letter-spacing: var(--sys-track-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.panel__count{
  font-family: var(--sys-font-mono);
  font-size: clamp(2.2rem, 1.8vw, 3.0rem);
  font-weight: var(--sys-weight-bold);
  color: var(--sys-text);
}

.panel__body{
  padding-top: var(--sys-space-sm);
}

.panel__foot{
  display: flex;
  justify-content: space-between;
  gap: var(--sys-space-md);
  padding-top: var(--sys-space-sm);
  margin-top: var(--sys-space-sm);
  border-top: 1px solid var(--sys-divider);
}

/* =========================================================
   OPERACIONES (compact list)
   Nota: reutiliza tu idea op/op__*
========================================================= */

.opsList{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.op{
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border-radius: var(--sys-radius-lg);
  border: 1px solid var(--sys-border-subtle);
  background: hsla(var(--pr-caliza-50) / 0.04);
  min-width: 0;
}

.op:hover{
  border-color: var(--sys-border);
  background: hsla(var(--pr-caliza-50) / 0.06);
}

.op__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  --dot: hsl(var(--pr-mineral-300) / .95);
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.70), transparent 55%),
    var(--dot);
  box-shadow:
    0 0 0 6px hsla(var(--pr-mineral-300) / 0.12),
    0 0 18px hsla(var(--pr-mineral-300) / 0.22);
}

.op--ok   .op__dot{ --dot: hsl(var(--pr-success-400) / .95); box-shadow: 0 0 0 6px hsla(var(--pr-success-400)/.12), 0 0 18px hsla(var(--pr-success-400)/.22); }
.op--warn .op__dot{ --dot: hsl(var(--pr-cobre-400) / .95);   box-shadow: 0 0 0 6px hsla(var(--pr-cobre-400)/.12),   0 0 18px hsla(var(--pr-cobre-400)/.24); }
.op--info .op__dot{ --dot: hsl(var(--pr-mineral-300) / .95); }

.op__main{
  display: grid;
  gap: 2px;
  min-width: 0;
}

.op__title{
  font-weight: var(--sys-weight-medium);
  color: var(--sys-text-primary);
  font-size: var(--sys-text-sm);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.op__meta{
  font-size: var(--sys-text-xs);
  color: var(--sys-text-tertiary);
  letter-spacing: var(--sys-track-wide);
  text-transform: uppercase;
}

.op__aux{
  display: grid;
  justify-items: end;
  gap: 2px;
  color: var(--sys-text-tertiary);
  font-size: var(--sys-text-xs);
}

.op__kind{
  font-family: var(--sys-font-mono);
  color: var(--sys-text-secondary);
}

.op__time{
  letter-spacing: var(--sys-track-wide);
}

/* =========================================================
   AVISOS (notice list)
========================================================= */

.noticeList{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.notice{
  --notice-accent: hsla(var(--pr-mineral-300) / 0.95);

  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;

  padding: 14px 14px;
  border-radius: var(--sys-radius-lg);
  border: 1px solid var(--sys-border-subtle);
  background: hsla(var(--pr-caliza-50) / 0.04);

  position: relative;
  overflow: hidden;
}

.notice:hover{
  border-color: var(--sys-border);
  background: hsla(var(--pr-caliza-50) / 0.06);
}

/* carril vertical */
.notice::before{
  content:"";
  position:absolute;
  left: 21px; /* alineado al dot */
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, var(--notice-accent), transparent);
  opacity: .55;
  box-shadow:
    0 0 12px color-mix(in oklab, var(--notice-accent) 22%, transparent),
    0 0 26px color-mix(in oklab, var(--notice-accent) 14%, transparent);
}

.notice:hover::before{ opacity: .85; }

.notice__dot{
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;

  --dot: hsla(var(--pr-mineral-300) / 0.95);
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.70), transparent 55%),
    var(--dot);

  box-shadow:
    0 0 0 6px hsla(var(--pr-mineral-300) / 0.12),
    0 0 18px hsla(var(--pr-mineral-300) / 0.22);
}

.notice--ok{
  --notice-accent: hsla(var(--pr-success-400) / 0.95);
}
.notice--warn{
  --notice-accent: hsla(var(--pr-cobre-400) / 0.95);
}
.notice--info{
  --notice-accent: hsla(var(--pr-mineral-300) / 0.95);
}

.notice--ok   .notice__dot{ --dot: hsla(var(--pr-success-400) / .95); box-shadow: 0 0 0 6px hsla(var(--pr-success-400)/.12), 0 0 18px hsla(var(--pr-success-400)/.22); }
.notice--warn .notice__dot{ --dot: hsla(var(--pr-cobre-400) / .95);   box-shadow: 0 0 0 6px hsla(var(--pr-cobre-400)/.12),   0 0 18px hsla(var(--pr-cobre-400)/.24); }
.notice--info .notice__dot{ --dot: hsla(var(--pr-mineral-300) / .95); }

.notice__main{
  display: grid;
  gap: 6px;
  min-width: 0;
}

.notice__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.notice__title{
  font-weight: var(--sys-weight-semibold);
  color: var(--sys-text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice__desc{
  margin: 0;
  color: var(--sys-text-secondary);
  font-size: var(--sys-text-sm);
  line-height: 1.35;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notice__meta{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sys-text-tertiary);
  font-size: var(--sys-text-xs);
  letter-spacing: var(--sys-track-wide);
  text-transform: uppercase;
}

.notice__sep{ opacity: .6; }

@media (max-width: 760px){
  .panel{ min-height: unset; }
  .notice__title{
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .op{ grid-template-columns: 12px 1fr; }
  .op__aux{ display: none; }
}

/* =========================================================
   LAYOUT: MAIN (Landing)
   Consume roles sys-* (light/dark listo)
========================================================= */
@layer layout {

  /* MAIN container */
  .main{
    position: relative;
    min-width: 0;
    background: var(--sys-bg-main-atmo, none);
  }

  /* =========================================
      CANVAS (fondo absoluto dentro de main)
     (tu system ya define z tokens; aquí solo usamos el rol)
  ========================================= */
  .canvas-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--sys-z-hide);
    pointer-events: none;

    /* Si ya tienes atmósfera desde system (gradients), úsala.
       Si no, queda transparente sin romper. */
    background: var(--sys-bg-main-atmo, transparent);
  }

  /* =========================================
      HERO
  ========================================= */
  .hero{
    min-height: 100svh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--sys-space-3xs) 0;
    text-align: center;
    padding: var(--sys-space-4xl) var(--sys-space-lg);
  }

  .hero__logo{
    height: 20rem;
    margin-top: -15rem;
  }

  .hero__title{
    font-weight: var(--sys-weight-medium);
    color: var(--sys-text-primary);
  }

  .hero__subtitle{
    font-family: var(--sys-font-base);
    font-weight: var(--sys-weight-regular);
    letter-spacing: var(--sys-track-wide);
    color: var(--sys-text-secondary);
  }

  .hero .brand__text{
    display: flex;
    flex-direction: row;
    gap: var(--sys-space-xs);
    margin-top: -4rem;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero__actions{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--sys-space-2xs);
    gap: var(--sys-space-sm);
  }

  .hero__scroll-line{
    width: 2px;
    height: 4rem;
    background: var(--sys-text-tertiary);
    margin: var(--sys-space-md) 0;
    opacity: .65;
    animation: heroScrollDown 1.5s ease-in-out infinite;
  }

  @keyframes heroScrollDown{
    0%   { transform: translateY(-10px); opacity: 0.20; }
    45%  { transform: translateY(0px);   opacity: 0.80; }
    85%  { transform: translateY(12px);  opacity: 0.08; }
    100% { transform: translateY(12px);  opacity: 0.08; }
  }

  @media (prefers-reduced-motion: reduce){
    .hero__scroll-line{ animation: none; }
  }

  /* =========================================
      SECTIONS (layout base)
  ========================================= */
  .section{
    display: flex;
    flex-direction: column;
    gap: var(--sys-space-2xs);
    padding: 0 0 var(--sys-space-4xl);
  }

  .section__header{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--sys-space-2xs);
    padding-left: var(--sys-space-2xl);
    padding-right: var(--sys-space-lg);
  }

  .section__header p{
    font-style: italic;
    margin-left: var(--sys-space-sm);
    font-size: var(--sys-text-xl);
    color: var(--sys-text-secondary);
  }

  /* Si ya tienes line-deco en tu system/components, esto solo la “aterriza” */
  .line-deco{
    width: 20rem;
    height: 2px;
    background: var(--sys-text-accent);
    opacity: .75;
    position: relative;
    border-radius: 999px;
    overflow: visible;
    box-shadow:
      0 0 14px hsla(var(--pr-cobre-500) / .18),
      0 0 30px hsla(var(--pr-cobre-500) / .10);
  }

  .line-deco::before{
    content:"";
    position:absolute;
    left: -8%;
    right: -8%;
    top: 50%;
    height: 10px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: radial-gradient(closest-side, hsla(var(--pr-cobre-500) / .22), transparent 70%);
    filter: blur(2px);
    opacity: .55;
    pointer-events: none;
  }

  .line-deco::after{
    content:"";
    position:absolute;
    top: 50%;
    left: 0;
    width: 160px;
    height: 3px;
    transform: translate(-140%, -50%);
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      hsla(var(--pr-cobre-500) / .12) 18%,
      hsla(var(--pr-caliza-50) / .70) 45%,
      hsla(var(--pr-caliza-50) / 1.00) 55%,
      hsla(var(--pr-caliza-50) / .70) 65%,
      hsla(var(--pr-cobre-500) / .12) 85%,
      transparent 100%
    );
    box-shadow:
      0 0 10px hsla(var(--pr-caliza-50) / .70),
      0 0 24px hsla(var(--pr-cobre-500) / .28),
      0 0 52px hsla(var(--pr-cobre-500) / .20);
    filter: blur(.15px);
    opacity: 1;
    pointer-events: none;
    animation: starFlow 2.8s ease-in-out infinite;
  }

  @keyframes starFlow{
    0%   { transform: translate(-160%, -50%); opacity: 0; }
    12%  { opacity: 1; }
    55%  { transform: translate(0%, -50%);   opacity: 1; }
    92%  { opacity: .10; }
    100% { transform: translate(160%, -50%); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce){
    .line-deco::after{ animation: none; opacity: 0; }
  }

  /* =========================================
      PROJECT (card editorial con imagen)
  ========================================= */
  .project{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sys-space-md);
    margin-bottom: var(--sys-space-xl);
  }

  .project__link{
    display: block;
    position: relative;
    width: 100%;
    min-height: 90svh;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--sys-radius-xl);
  }

  .project__media{ position:absolute; inset:0; margin:0; z-index:0; }
  .project__img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* overlay “apagado” que se va al hover */
  .project__overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(900px 520px at 50% 35%,
        hsla(var(--pr-mineral-900) / .62) 0%,
        hsla(var(--pr-mineral-900) / .28) 52%,
        hsla(var(--pr-mineral-900) / .10) 75%,
        transparent 100%
      );
    transition: opacity 600ms cubic-bezier(.2,.8,.2,1);
  }

  .project__link:hover .project__overlay{ opacity: 0; }

  /* sombra inferior para legibilidad */
  .project__link::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      180deg,
      transparent 25%,
      hsla(var(--pr-mineral-900) / .35) 70%,
      hsla(var(--pr-mineral-900) / .60) 100%
    );
    pointer-events: none;
  }

  .project__plate{
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 2;

    display: grid;
    gap: 10px;

    padding: clamp(14px, 2vw, 22px);
    max-width: min(560px, 88vw);

    background: hsla(var(--pr-mineral-900) / .62);
    border: 1px solid hsla(var(--pr-caliza-50) / .14);
    backdrop-filter: blur(10px);
    border-radius: var(--sys-radius-xl);
  }

  .project__meta{ opacity: .95; }
  .project__title{
    margin: 0;
    color: var(--sys-text-inverse);
    letter-spacing: var(--sys-track-tight);
  }

  .project__tag{
    display: inline-flex;
    width: max-content;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid hsla(var(--pr-caliza-50) / .14);
    background: hsla(var(--pr-caliza-50) / .06);
    color: hsla(var(--pr-caliza-50) / .88);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: var(--sys-text-xs);
  }

  .project__summary{
    margin: 0;
    color: hsla(var(--pr-caliza-50) / .78);
    font-size: var(--sys-text-sm);
    line-height: 1.35;
  }

  .project__row{
    display: flex;
    align-items: baseline;
    gap: clamp(18px, 3vw, 42px);
  }

  .project__place{
    margin: 0;
    opacity: .9;
    color: hsla(var(--pr-caliza-50) / .86);
  }

  .project__cta{
    margin-left: auto;
    white-space: nowrap;
    opacity: .95;
    color: hsla(var(--pr-caliza-50) / .90);
  }

  .project__cta span[aria-hidden="true"]{
    display: inline-block;
    transition: transform 200ms ease;
  }

  .project__link:hover .project__cta span[aria-hidden="true"]{
    transform: translateX(4px);
  }

  /* =========================================
      OS cards (solo layout base aquí)
      Nota: los backgrounds con imágenes puedes dejarlos en tu css existente
  ========================================= */
  .os__cards{
    padding: 0 var(--sys-space-md);
    margin-bottom: var(--sys-space-lg);
  }

  .os__hub{
    padding: var(--sys-space-md);
    gap: var(--sys-space-lg);
    text-decoration: none;
    cursor: pointer;
    user-select: none;

    border-radius: var(--sys-radius-xl);
    border: 1px solid var(--sys-border);
    background: var(--sys-surface-glass);
    backdrop-filter: blur(12px);

    transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease;
  }

  .os__hub:hover{
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -5px var(--sys-shadow-strong);
    border-color: var(--sys-border-strong);
  }

  .os__brand{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .os__logo{
    width: auto;
    height: 15rem;
  }

  .os__title{
    display: inline-flex;
    align-items: center;
    gap: var(--sys-space-xs);
    margin-top: -2rem;
  }

  .os__meta{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sys-space-3xs);
    text-align: center;
    padding: 0 var(--sys-space-lg);
  }

  .os__meta-title{
    font-size: var(--sys-text-xl);
    font-weight: var(--sys-weight-bold);
    color: var(--sys-text-primary);
  }

  .os__meta-sub{
    font-style: italic;
    color: var(--sys-text-secondary);
    font-weight: var(--sys-weight-medium);
  }

  /* =========================================
      OFICIOS (layout responsive mínimo)
  ========================================= */
  @media (max-width: 760px){
    .oficios .col-span-4{ grid-column: 1 / -1; }
    .section__header{ padding-left: var(--sys-space-lg); }
    .hero__logo{ margin-top: -10rem; height: 16rem; }
    .project__plate{ left: 1.2rem; right: 1.2rem; bottom: 1.2rem; max-width: none; }
  }
}

/* =========================================================
   COMPONENT: LOGIN (os-gate)
   Consume roles sys-* (system.css)
========================================================= */
@layer components {

  .os-gate{
    min-height: 100svh;
    position: relative;
    padding: var(--sys-space-3xl) var(--sys-space-lg);

    /* Canvas light/dark */
    background:
      radial-gradient(900px 520px at 50% 18%,
        hsla(var(--pr-mineral-700) / .10) 0%,
        transparent 60%
      ),
      linear-gradient(180deg,
        hsla(var(--pr-caliza-50) / .04) 0%,
        transparent 55%
      ),
      var(--sys-bg-app);
  }

  .os-gate__shell{
    width: min(520px, calc(100vw - 2 * var(--sys-space-lg)));
    border-radius: var(--sys-radius-xl);

    /* Glass editorial */
    background: var(--sys-surface-glass);
    border: 1px solid var(--sys-border);
    box-shadow: 0 24px 70px hsla(var(--pr-grafito-900) / .18);
    backdrop-filter: blur(14px);

    padding: var(--sys-space-xl);
    position: relative;
    isolation: isolate;
  }

  /* “halo” sutil */
  .os-gate__shell::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius: inherit;
    pointer-events:none;
    background:
      radial-gradient(520px 280px at 50% 0%,
        hsla(var(--pr-cobre-500) / .12) 0%,
        transparent 60%
      );
    opacity: .9;
  }

  .os-gate__head{
    display: grid;
    gap: var(--sys-space-sm);
  }

  .os-gate__mark img{
    width: 78px;
    height: 78px;
    object-fit: contain;
    filter: saturate(1.02);
    opacity: .96;
  }

  .os-gate__titles{
    display: grid;
    gap: var(--sys-space-2xs);
  }

  .os-gate__brand-text{
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sys-space-xs);
    justify-content: center;
    align-items: baseline;
  }

  .os-gate__badge{
    margin-top: var(--sys-space-xs);
    gap: var(--sys-space-xs);
    width: max-content;
    padding: .55rem 1rem;
    border-radius: var(--sys-radius-pill);

    background: hsla(var(--pr-caliza-50) / .06);
    border: 1px solid var(--sys-border-subtle);
    color: var(--sys-text-secondary);
  }

  .os-gate__form{
    margin-top: var(--sys-space-sm);
  }

  /* Field */
  .os-gate__field label{
    color: var(--sys-text-secondary);
    letter-spacing: var(--sys-track-wide);
    text-transform: uppercase;
  }

  .os-gate__input{
    width: 100%;
    padding: 1.2rem 4.2rem 1.2rem 1.2rem;
    border-radius: var(--sys-radius-lg);

    background: hsla(var(--pr-caliza-50) / .06);
    border: 1px solid var(--sys-border);
    color: var(--sys-text-primary);

    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }

  .os-gate__input::placeholder{
    color: var(--sys-text-tertiary);
    opacity: .85;
  }

  .os-gate__input:focus-visible{
    border-color: hsla(var(--pr-selva-500) / .45);
    box-shadow: 0 0 0 4px hsla(var(--pr-selva-500) / .16);
  }

  /* reveal button */
  .os-gate__reveal{
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 999px;

    border: 1px solid var(--sys-border-subtle);
    background: hsla(var(--pr-caliza-50) / .06);
    color: var(--sys-text-secondary);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .10s ease;
  }

  .os-gate__reveal:hover{
    background: hsla(var(--pr-caliza-50) / .10);
    border-color: var(--sys-border);
  }

  .os-gate__reveal:active{
    transform: translateY(-50%) translateY(1px);
  }

  .os-gate__reveal.is-active{
    color: var(--sys-text-accent);
    border-color: hsla(var(--pr-cobre-500) / .35);
    box-shadow: 0 0 0 4px hsla(var(--pr-cobre-500) / .14);
  }

  /* message + caps */
  .os-gate__caps{
    margin-top: .8rem;
    color: var(--sys-text-tertiary);
    letter-spacing: var(--sys-track-wide);
    text-transform: uppercase;
  }

  .os-gate__caps.is-on{
    color: var(--sys-text-accent);
  }

  .os-gate__msg{
    min-height: 2.2rem;
    color: var(--sys-text-tertiary);
  }

  .os-gate__msg.is-error{
    color: hsl(var(--pr-danger-400));
  }

  .os-gate__msg.is-ok{
    color: hsl(var(--pr-success-400));
  }

  /* states from JS */
  .os-gate__input.is-error{
    border-color: hsla(var(--pr-danger-400) / .55);
    box-shadow: 0 0 0 4px hsla(var(--pr-danger-400) / .14);
  }

  .os-gate__input.is-ok{
    border-color: hsla(var(--pr-success-400) / .55);
    box-shadow: 0 0 0 4px hsla(var(--pr-success-400) / .14);
  }

  .os-gate__field.is-shake{
    animation: gateShake .35s ease;
  }

  @keyframes gateShake{
    0%{ transform: translateX(0); }
    25%{ transform: translateX(-6px); }
    50%{ transform: translateX(6px); }
    75%{ transform: translateX(-4px); }
    100%{ transform: translateX(0); }
  }

  .os-gate__shell.is-ok{
    animation: gatePulse .55s ease;
  }

  @keyframes gatePulse{
    0%{ transform: translateY(0); }
    40%{ transform: translateY(-2px); }
    100%{ transform: translateY(0); }
  }

  .os-gate__actions{
    display: grid;
    gap: var(--sys-space-sm);
  }

  .os-gate__meta{
    color: var(--sys-text-tertiary);
  }

  /* Mobile tuning */
  @media (max-width: 520px){
    .os-gate{
      padding: var(--sys-space-2xl) var(--sys-space-lg);
    }
    .os-gate__shell{
      padding: var(--sys-space-lg);
    }
  }
}