@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 20rem;
    background: var(--canvas);
    font-family: var(--font-sans);
    font-size: 100%;
  }

  body {
    min-width: 20rem;
    margin: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button,
  a,
  input,
  select,
  textarea {
    &:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--brand-700) 28%, transparent);
      outline-offset: 2px;
    }
  }
}

@layer components {
  .btn {
    display: inline-flex;
    min-height: var(--touch-target);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: var(--space-3) var(--space-4);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast),
      box-shadow var(--transition-fast);

    &:disabled {
      cursor: not-allowed;
      opacity: 0.52;
    }
  }

  .btn--primary {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: var(--surface-raised);

    &:hover:not(:disabled) {
      border-color: var(--brand-700);
      background: var(--brand-700);
    }

    &:active:not(:disabled) {
      background: color-mix(in srgb, var(--brand-700) 90%, var(--text));
    }
  }

  .btn--secondary {
    border-color: var(--border);
    background: var(--surface);
    color: var(--brand-700);

    &:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--brand-700) 42%, var(--border));
      background: var(--brand-50);
    }
  }

  .btn--quiet {
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);

    &:hover:not(:disabled) {
      background: var(--surface-muted);
      color: var(--text);
    }
  }

  .btn--icon {
    width: var(--touch-target);
    flex: 0 0 var(--touch-target);
    padding: 0;
  }

  .field {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
  }

  .field__label {
    color: var(--text);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
  }

  .field__control {
    width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-muted);
    color: var(--text);
    font-size: 1rem;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);

    &::placeholder {
      color: color-mix(in srgb, var(--text-secondary) 72%, transparent);
    }

    &:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--brand-700) 40%, var(--border-strong));
    }

    &:focus {
      border-color: var(--brand-700);
      background: var(--surface);
      outline: 3px solid color-mix(in srgb, var(--brand-700) 18%, transparent);
      outline-offset: 1px;
    }
  }

  .surface {
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    background: var(--surface);
    box-shadow: var(--shadow-subtle);
  }

  .badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-2);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
  }

  .notice {
    width: min(var(--content-max), calc(100% - (var(--space-4) * 2)));
    margin: var(--space-3) auto 0;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-secondary-size);
    font-weight: var(--weight-medium);
  }

  #ui-message:empty {
    display: none;
  }

  .notice-success,
  .notice-session {
    border-color: color-mix(in srgb, var(--success) 20%, var(--border));
    background: var(--success-soft);
    color: var(--success);
  }

  .notice-error {
    border-color: color-mix(in srgb, var(--danger) 26%, var(--border));
    background: var(--danger-soft);
    color: var(--danger);
  }

  .notice-info {
    border-color: color-mix(in srgb, var(--brand-600) 22%, var(--border));
    background: var(--brand-50);
    color: var(--brand-700);
  }

  .brand-symbol,
  .icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
  }

  .phosphor-icon,
  .module-phosphor-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    fill: currentColor;
  }

  .brand-mark,
  .login-mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    background: var(--brand-600);
    color: var(--surface-raised);
    box-shadow: none;
  }

  .brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-control);
  }

  .login-mark {
    width: 3.75rem;
    height: 3.75rem;
    margin: 0 0 var(--space-4);
    border-radius: var(--radius-surface);

    & .brand-symbol {
      width: 2rem;
      height: 2rem;
    }
  }

  .app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    min-height: 0;
    padding: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: none;
    backdrop-filter: blur(10px);
  }

  .app-header__inner {
    display: flex;
    width: min(100%, var(--content-max));
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-inline: auto;
    padding: var(--space-2) var(--space-4);
  }

  .brand-lockup {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
  }

  .brand-block {
    min-width: 0;

    & h1,
    & p {
      overflow: hidden;
      margin: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & h1 {
      color: var(--text);
      font-size: 1rem;
      font-weight: var(--weight-semibold);
      letter-spacing: -0.015em;
      line-height: 1.2;
    }
  }

  .brand-installation {
    color: var(--text);
    font-family: var(--font-product);
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    letter-spacing: normal;
    line-height: 1.2;
    text-transform: none;
  }

  .brand-context {
    color: var(--text-secondary);
    font-family: var(--font-product);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    letter-spacing: normal;
    line-height: 1.35;
  }

  .header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-1);

    & .btn {
      width: auto;
    }
  }

  .shell-icon-button {
    width: var(--touch-target);
    min-width: var(--touch-target);
    flex: 0 0 var(--touch-target);
    border-color: transparent;
    border-radius: var(--radius-pill);
    padding: 0;
    background: var(--brand-50);
    color: var(--brand-700);

    &:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--brand-600) 18%, var(--border));
      background: var(--brand-100);
      color: var(--brand-700);
    }

    &:active:not(:disabled) {
      background: color-mix(in srgb, var(--brand-600) 16%, var(--surface));
    }
  }

  .global-logout {
    width: var(--touch-target);
    min-width: var(--touch-target);
    flex: 0 0 var(--touch-target);
    border-color: transparent;
    border-radius: var(--radius-pill);
    padding: 0;
    background: var(--surface-soft);
    color: var(--text-secondary);

    &:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--text-secondary) 20%, var(--border));
      background: var(--surface-muted);
      color: var(--text);
    }

    &:active:not(:disabled) {
      background: color-mix(in srgb, var(--text-secondary) 12%, var(--surface));
    }
  }

  .login-panel {
    width: min(100%, var(--login-max));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-surface);
    padding: var(--space-6) var(--space-5);
    background: var(--surface);
    box-shadow: var(--shadow-subtle);
    font-family: var(--font-login);
  }

  .login-heading {
    margin-bottom: var(--space-5);
    text-align: center;

    & h2 {
      margin: 0;
      color: var(--text);
      font-size: var(--text-page-title);
      font-weight: var(--weight-semibold);
      letter-spacing: -0.025em;
      line-height: 1.15;
    }

    & > p:last-child {
      margin: var(--space-2) 0 0;
      color: var(--text-secondary);
      font-size: var(--text-secondary-size);
      line-height: 1.45;
    }
  }

  .login-brand {
    margin: 0 0 var(--space-1);
    color: var(--brand-700);
    font-size: var(--text-secondary-size);
    font-weight: var(--weight-medium);
    letter-spacing: 0;
  }

  .login-panel .login-mark { margin-inline: auto; }

  .login-field__input-wrap {
    display: block;
    position: relative;
    min-width: 0;

    & .field__control { padding-inline: calc(var(--space-4) + 1.5rem + var(--space-2)); }
    & .field__control:focus ~ .login-field__icon { color: var(--brand-600); }

    &:has(.login-password-toggle) .field__control {
      padding-right: calc(var(--space-2) + var(--touch-target));
    }
  }

  .login-field__icon {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-secondary);
    pointer-events: none;
    transform: translateY(-50%);
    transition: color var(--transition-fast);
  }

  .login-password-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-1);
    display: inline-grid;
    width: var(--touch-target);
    height: var(--touch-target);
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color var(--transition-fast), color var(--transition-fast);

    &:hover { background: var(--brand-50); color: var(--brand-700); }
    & .icon { width: 1.25rem; height: 1.25rem; }
    & .icon--hidden { display: none; }
    &[aria-pressed="true"] { & .icon--visible { display: none; } & .icon--hidden { display: block; } }
  }

  #login-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);

    & .field__control {
      color: var(--text);
      font-style: normal;
      font-weight: 400;
    }

    & .btn {
      width: 100%;
      min-height: var(--control-height);
      margin-top: var(--space-1);
    }

    & .login-submit {
      position: relative;
      & .login-submit__pending { display: none; align-items: center; gap: var(--space-2); }
      &.is-submitting { & .login-submit__label { display: none; } & .login-submit__pending { display: inline-flex; } }
    }
  }

  .login-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in srgb, var(--surface-raised) 42%, transparent);
    border-top-color: var(--surface-raised);
    border-radius: var(--radius-pill);
    animation: login-spin 720ms linear infinite;
  }

  @keyframes login-spin { to { transform: rotate(1turn); } }

  .login-panel > .btn--secondary {
    width: 100%;
    margin-top: var(--space-3);
  }

  .gate-device-onboarding {
    display: none;
    width: min(100%, var(--login-max));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-surface);
    padding: var(--space-6) var(--space-5);
    background: var(--surface);
    box-shadow: var(--shadow-subtle);
    font-family: var(--font-login);
  }

  .gate-device-heading {
    margin-bottom: var(--space-5);
    text-align: center;

    & .login-mark { margin-inline: auto; }
    & h2 { margin: 0; color: var(--text); font-size: var(--text-page-title); font-weight: var(--weight-semibold); letter-spacing: -0.025em; line-height: 1.15; }
    & > p:last-child { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-secondary-size); line-height: 1.45; }
  }

  .gate-device-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
    margin-bottom: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
    border-radius: var(--radius-control);
    padding: var(--space-3);
    background: var(--warning-soft);
    color: var(--warning);

    & .icon { width: 1.25rem; height: 1.25rem; }
    & p { margin: 0; color: var(--text); font-size: var(--text-secondary-size); line-height: 1.45; }
  }

  .gate-device-form {
    display: grid;
    gap: var(--space-4);

    & .field__control { text-align: center; }
    & .btn { width: 100%; min-height: var(--control-height); }
    & .gate-authorize-submit__pending { display: none; align-items: center; gap: var(--space-2); }
    & .gate-authorize-submit.is-submitting { & .gate-authorize-submit__label { display: none; } & .gate-authorize-submit__pending { display: inline-flex; } }
  }

  .gate-device-status {
    min-height: 1.5rem;
    margin: var(--space-3) 0 0;
    color: var(--danger);
    font-size: var(--text-secondary-size);
    text-align: left;
  }

  .gate-back-to-login { width: 100%; margin-top: var(--space-1); }

  #module-catalog {
    inset: auto 0 0;
    width: 100%;
    height: fit-content;
    max-width: none;
    max-height: 85vh;
    max-height: 85dvh;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    background: transparent;
    color: var(--text);

    &::backdrop {
      background: color-mix(in srgb, var(--text) 32%, transparent);
      backdrop-filter: none;
      opacity: 0;
      transition: opacity var(--transition-surface);
    }

    &[open]::backdrop {
      opacity: 1;
    }
  }

  .catalog-surface {
    display: flex;
    min-height: 0;
    max-height: inherit;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    padding: 0;
    background: var(--surface);
    box-shadow: var(--shadow-dialog);
    transform: translateY(100%);
    transition: transform var(--transition-surface);
  }

  #module-catalog[open] .catalog-surface {
    transform: translateY(0);
  }

  .catalog-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border);

    & h2 {
      margin: 0;
      color: var(--text);
      font-size: 1.125rem;
      font-weight: var(--weight-semibold);
      letter-spacing: normal;
    }
  }

  .catalog-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
  }

  .catalog-heading__icon {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    place-items: center;
    color: var(--brand-600);

    & svg { width: 1.25rem; height: 1.25rem; }
  }

  .catalog-header .btn--icon {
    border-color: transparent;
    background: var(--surface-muted);
    color: var(--text-secondary);
    box-shadow: none;

    &:hover:not(:disabled) {
      background: var(--brand-50);
      color: var(--brand-700);
    }
  }

  .eyebrow {
    margin: 0 0 var(--space-1);
    color: var(--brand-700);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .module-grid {
    --launcher-tile-min: 6.5rem;
    display: grid;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: repeat(auto-fit, minmax(max(var(--launcher-tile-min), calc((100% - (var(--space-3) * 2)) / 3)), 1fr));
    gap: var(--space-3);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: var(--space-5) var(--space-5) max(var(--space-8), env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .module-card {
    --module-accent: var(--brand-600);
    position: relative;
    display: grid;
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: 7.5rem;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    padding: var(--space-4) var(--space-3);
    background: var(--surface);
    color: var(--text);
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);
    transform: none;

    &.active {
      border-color: color-mix(in srgb, var(--module-accent) 50%, var(--border));
      background: color-mix(in srgb, var(--surface) 96%, var(--module-accent));
      box-shadow: var(--shadow-subtle);
    }

    &.active {
      border-color: var(--module-accent);
    }

    &:disabled {
      border-style: dashed;
      background: var(--surface-muted);
      color: var(--text-secondary);
      cursor: not-allowed;
      opacity: 0.72;
    }

    &:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--module-accent) 42%, var(--border));
      background: color-mix(in srgb, var(--surface) 97%, var(--module-accent));
      box-shadow: var(--shadow-subtle);
    }

    &.is-pressed:not(:disabled),
    &:active:not(:disabled) {
      border-color: color-mix(in srgb, var(--module-accent) 46%, var(--border));
      background: color-mix(in srgb, var(--surface) 94%, var(--module-accent));
      box-shadow: none;
      transform: translateY(1px);
    }
  }

  .module-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--module-accent) 10%, var(--surface));
    color: var(--module-accent);

    & .module-phosphor-icon {
      width: 1.75rem;
      height: 1.75rem;
    }
  }

  .module-card:disabled .module-icon {
    background: color-mix(in srgb, var(--border) 42%, var(--surface));
    color: var(--text-secondary);
  }

  .module-card:disabled .module-state {
    position: absolute;
    inset-inline: 0;
    bottom: var(--space-2);
  }

  .module-card--finance { --module-accent: var(--module-finance); }
  .module-card--balance { --module-accent: var(--module-balance); }
  .module-card--pergola { --module-accent: var(--module-pergola); }
  .module-card--access { --module-accent: var(--module-access); }
  .module-card--map { --module-accent: var(--module-map); }
  .module-card--tickets { --module-accent: var(--module-tickets); }
  .module-card--polls { --module-accent: var(--module-polls); }
  .module-card--gate { --module-accent: var(--module-gate); }
  .module-card--users { --module-accent: var(--module-users); }
  .module-card--permissions { --module-accent: var(--module-permissions); }
  .module-card--convivencia { --module-accent: var(--module-convivencia); }

  .module-card-copy {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-1);
    min-width: 0;
    text-align: center;

    & strong {
      color: var(--text);
      font-size: var(--text-label);
      font-weight: var(--weight-semibold);
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    & small {
      max-width: 18ch;
      color: var(--text-secondary);
      font-size: var(--text-caption);
      font-weight: 450;
      line-height: 1.35;
      text-align: center;
    }
  }

  .module-state {
    justify-self: center;
    border-radius: var(--radius-pill);
    padding: 0 var(--space-1);
    background: color-mix(in srgb, var(--border) 44%, var(--surface));
    color: var(--text-secondary);
    font-size: 0.625rem;
    font-weight: var(--weight-semibold);
  }

  .catalog-footer {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
}

@layer layout {
  body.catalog-open {
    overflow: hidden;
  }

  #app-shell {
    min-height: 100vh;
    min-height: 100dvh;
  }

  #module-stage {
    width: min(100%, var(--content-max));
    margin-inline: auto;
    padding: var(--space-5) var(--space-4) var(--space-12);
  }

  .ui-module {
    display: none;
    margin: 0;
  }

  .ui-module.ui-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-surface), transform var(--transition-surface);
  }

  .ui-module.ui-module--task {
    width: min(100%, var(--content-task));
    margin-inline: auto;
  }

  .ui-module.ui-active.ui-surface-enter {
    opacity: 0;
    transform: translateY(5px);
  }

  .ui-home.ui-active {
    display: grid;
    gap: var(--space-5);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .screen-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);

    & h2 {
      margin: 0;
      color: var(--text);
      font-size: var(--text-page-title);
      font-weight: var(--weight-semibold);
      letter-spacing: -0.025em;
      line-height: 1.15;
    }

    & p:not(.eyebrow) {
      margin: var(--space-2) 0 0;
      color: var(--text-secondary);
    }
  }

  .session-context {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-surface);
    background: color-mix(in srgb, var(--surface) 72%, var(--canvas));
  }

  .session-context__item {
    min-width: 0;
    padding: var(--space-4);

    &:nth-child(odd) {
      border-right: 1px solid var(--border);
    }

    &:nth-child(n + 3) {
      border-top: 1px solid var(--border);
    }

    & span,
    & strong {
      display: block;
      overflow-wrap: anywhere;
    }

    & span {
      color: var(--text-secondary);
      font-size: var(--text-caption);
    }

    & strong {
      margin-top: var(--space-1);
      color: var(--text);
      font-weight: var(--weight-medium);
    }
  }

  .unauthenticated {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--canvas);

    & .app-header,
    & .ui-home > .screen-heading,
    & #home-context,
    & #session-panel {
      display: none;
    }

    & #module-stage {
      display: grid;
      min-height: 100vh;
      min-height: 100dvh;
      align-content: center;
      place-items: center;
      gap: var(--space-3);
      padding: var(--space-6) var(--space-5);
    }

    & #ui-message {
      width: min(100%, var(--login-max));
      margin: 0;

      &:not(:empty) {
        display: block;
      }
    }

    & .ui-home.ui-active {
      display: block;
      width: min(100%, var(--login-max));
    }

    & #login-panel {
      display: block;
      margin: 0;
    }
  }

  .gate-onboarding {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--canvas);

    & .app-header,
    & #ui-message,
    & .ui-home {
      display: none !important;
    }

    & #module-stage {
      display: grid;
      min-height: 100vh;
      min-height: 100dvh;
      align-content: center;
      place-items: center;
      padding: var(--space-6) var(--space-5);
    }

    & #gate-panel.ui-active { display: block !important; width: min(100%, var(--login-max)); }
    & #gate-panel > :not(#gate-device-onboarding) { display: none !important; }
    & #gate-device-onboarding { display: block; }
  }

  #module-catalog.catalog-fallback-open {
    position: fixed;
    inset: var(--space-4);
    z-index: 40;
    display: block;
    margin: auto;
  }
}

@layer utilities {
  .ui-legacy-message,
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (min-width: 48rem) {
  @layer components {
    .app-header__inner {
      min-height: 4.75rem;
      padding-inline: var(--space-6);
    }

    .brand-block h1 {
      font-size: 1.125rem;
    }

    .brand-context {
      font-size: var(--text-caption);
    }

    .header-actions {
      gap: var(--space-2);
    }

    #module-catalog {
      inset: 0;
      width: calc(100% - (var(--space-8) * 2));
      max-width: var(--launcher-max);
      max-height: calc(100vh - (var(--space-8) * 2));
      max-height: calc(100dvh - (var(--space-8) * 2));
      margin: auto;
      border-radius: var(--radius-launcher);

      & .catalog-surface {
        transform: translateY(2rem) scale(0.98);
      }

      &[open] .catalog-surface {
        transform: translateY(0) scale(1);
      }
    }

    .catalog-surface {
      border-radius: var(--radius-launcher);
    }

    .catalog-header {
      padding: var(--space-5) var(--space-8);
    }

    .module-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-5);
      padding: calc(var(--space-6) + var(--space-1)) var(--space-8) max(var(--space-8), env(safe-area-inset-bottom));
    }

    .module-card {
      min-height: 9rem;
      gap: var(--space-3);
      padding: var(--space-5) var(--space-4);
    }

    .module-icon {
      width: 3.5rem;
      height: 3.5rem;

      & .module-phosphor-icon {
        width: 2rem;
        height: 2rem;
      }
    }

  }

  @layer layout {
    #module-stage {
      padding: var(--space-8) var(--space-6) var(--space-12);
    }

    .ui-home.ui-active {
      max-width: 62rem;
      margin-inline: auto;
      gap: var(--space-6);
    }

    .unauthenticated #login-panel {
      border-radius: var(--radius-dialog);
      padding: var(--space-6);
      box-shadow: var(--shadow-surface);
    }

    .session-context {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .session-context__item {
      &:not(:last-child) {
        border-right: 1px solid var(--border);
      }

      &:nth-child(n) {
        border-top: 0;
      }
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  @layer components {
    .module-card:hover:not(:disabled) {
      box-shadow: var(--shadow-surface);
      transform: translateY(-3px);
    }

    .module-card.is-pressed:not(:disabled),
    .module-card:active:not(:disabled) {
      box-shadow: var(--shadow-subtle);
      transform: translateY(-1px);
    }
  }
}

@media (max-width: 35rem) {
  @layer components {
    .app-header__inner {
      align-items: flex-start;
      gap: var(--space-2);
      padding-inline: var(--space-2);
    }

    .brand-mark {
      display: none;
    }

    .brand-lockup {
      gap: var(--space-2);
    }

    .brand-context {
      max-width: clamp(7.5rem, 31vw, 10rem);
    }

    .header-actions {
      align-items: stretch;
      flex-direction: row;
      gap: var(--space-1);
    }

    .header-actions .btn {
      min-height: var(--touch-target);
      padding: var(--space-2) var(--space-3);
      font-size: var(--text-secondary-size);
    }

    .header-actions .shell-icon-button {
      width: var(--touch-target);
      min-width: var(--touch-target);
      padding: 0;
    }

    .global-logout {
      width: var(--touch-target) !important;
      min-width: var(--touch-target);
      flex: 0 0 var(--touch-target);
      min-height: var(--touch-target);
      padding: 0 !important;
    }

    #module-catalog.catalog-fallback-open {
      inset: auto 0 0;
    }
  }

  @layer layout {
    #module-stage {
      padding: var(--space-5) var(--space-3) var(--space-12);
    }

    .unauthenticated #module-stage {
      align-items: center;
      padding: var(--space-6) var(--space-5);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer base {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* CASETA: superficie operativa móvil/kiosk. Mantiene la lógica en el módulo nativo. */
body:has(#gate-panel.ui-active) { height:100vh; height:100dvh; min-height:0; overflow:hidden; background:#eef2f6; }
body:has(#gate-panel.ui-active) .app-header { display:none; }
body:has(#gate-panel.ui-active) #app-shell,body:has(#gate-panel.ui-active) #module-stage { width:100%; max-width:none; height:100%; min-height:0; margin:0; padding:0; overflow:hidden; }
#gate-panel.module-gate.ui-active { display:block; width:100%; max-width:none; height:100%; min-height:0; margin:0; padding:0; overflow:hidden; border:0; border-radius:0; background:#eef2f6; box-shadow:none; }
#gate-panel.module-gate.ui-active > #gate-device-onboarding.hidden,#gate-panel.module-gate.ui-active > #gate-lab-ui[hidden] { display:none!important; }
.module-gate .gate-kiosk { --gate-navy:#123761; --gate-bottom-nav-height:calc(4.75rem + env(safe-area-inset-bottom)); display:grid; width:100%; height:100%; min-height:0; margin:0; padding:0; overflow:hidden; border:0; border-radius:0; grid-template-rows:auto minmax(0,1fr) var(--gate-bottom-nav-height); background:#eef2f6; color:#17202a; }
.module-gate .gate-kiosk-clock { position:sticky; top:0; z-index:5; padding:.75rem clamp(.75rem,3vw,1.5rem) .5rem; background:#eef2f6; }
.module-gate .gate-kiosk-clock-face { position:relative; width:100%; min-height:4.75rem; border:1px solid #29322e; border-radius:1rem; background:#060807; }
.module-gate .gate-kiosk-clock time { display:grid; width:100%; min-height:4.75rem; place-items:center; color:#b8c0c8; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(2.15rem,8vw,3.75rem); font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:.075em; line-height:1; text-shadow:none; }
.module-gate .gate-kiosk-clock-face[data-connection="connected"] time { color:#80ef80; text-shadow:0 0 14px rgb(128 239 128 / .4); }
.module-gate .gate-kiosk-clock-face[data-connection="offline"] time { color:#ff7373; text-shadow:0 0 14px rgb(255 115 115 / .35); }
.module-gate .gate-kiosk-clock-face #gate-server-status { position:absolute; top:.45rem; right:.75rem; color:#b8c0c8; font-size:.65rem; font-weight:750; letter-spacing:.03em; }
.module-gate .gate-kiosk-clock-face[data-connection="connected"] #gate-server-status { color:#80ef80; }
.module-gate .gate-kiosk-clock-face[data-connection="offline"] #gate-server-status { color:#ff9292; }
.module-gate .gate-kiosk-main { display:grid; width:100%; max-width:none; height:100%; min-width:0; min-height:0; margin:0; align-content:start; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:.5rem clamp(.75rem,3vw,1.5rem); }
.module-gate .gate-home { display:grid; min-height:100%; align-content:center; gap:clamp(.65rem,2vh,1rem); }
.module-gate .gate-kiosk-notice,.module-gate .gate-kiosk-error { margin:0; padding:.75rem 1rem; border:1px solid #f5b5b5; border-radius:.75rem; background:#fff1f1; color:#9b1c1c; font-weight:650; }
.module-gate .gate-scan-action,.module-gate .gate-home-action { display:flex; width:100%; min-height:clamp(7rem,22vh,12rem); align-items:center; justify-content:center; gap:1rem; border:0; border-radius:1.25rem; color:#fff; box-shadow:0 10px 24px rgb(18 55 97 / .14); touch-action:manipulation; }
.module-gate .gate-scan-action { flex-direction:column; background:var(--gate-navy); }
.module-gate .gate-scan-action strong { font-size:clamp(1.45rem,5vw,2rem); letter-spacing:.04em; }
.module-gate .gate-scan-icon { width:clamp(4rem,15vw,6.5rem); height:clamp(4rem,15vw,6.5rem); flex:0 0 auto; fill:currentColor; }
.module-gate .gate-home-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.module-gate .gate-home-action { min-height:clamp(5rem,14vh,8rem); flex-direction:column; font-size:clamp(1rem,3.5vw,1.25rem); }
.module-gate .gate-exit-results { display:grid; gap:.6rem; margin-top:1rem; }
.module-gate .gate-exit-results .gate-home-action { min-height:3.5rem; padding:.7rem 1rem; text-align:left; }
.module-gate .gate-manual-step { display:grid; gap:.75rem; }
.module-gate .gate-manual-step[hidden],.module-gate .gate-manual-controls > [hidden] { display:none; }
.module-gate .gate-manual-controls { display:flex; flex-wrap:wrap; gap:.65rem; }
.module-access #access-checkpoints-field { display:grid; gap:.5rem; border:1px solid #d9e1ec; border-radius:.75rem; padding:.75rem; }
.module-access #access-checkpoints-field[hidden] { display:none; }
.module-access #access-admin-qr-section[hidden],.module-access #access-admin-qr-form[hidden],.module-access #access-admin-qr-policy-form[hidden],.module-access #access-admin-amenity-label[hidden] { display:none!important; }
.module-access #access-checkpoints { display:flex; flex-wrap:wrap; gap:.55rem 1rem; }
.module-access #access-checkpoints label { display:flex; align-items:center; gap:.4rem; }
.module-gate .gate-home-action--package,.module-gate .gate-kiosk-package { border-color:#9449ea!important; background:#9449ea!important; color:#fff!important; }
.module-gate .gate-home-action--courier,.module-gate .gate-kiosk-courier { border-color:#f07238!important; background:#f07238!important; color:#fff!important; }
.module-gate .gate-home-action-icon { width:2.4rem; height:2.4rem; flex:0 0 2.4rem; fill:currentColor; }
.module-gate .gate-bottom-nav { position:relative; z-index:30; display:grid; grid-row:3; grid-template-columns:repeat(3,minmax(0,1fr)); width:min(100%,64rem); height:100%; min-height:0; margin:0 auto; padding:.375rem .35rem calc(.375rem + env(safe-area-inset-bottom)); border-top:1px solid #ccd4de; background:rgb(255 255 255 / .97); box-shadow:0 -8px 22px rgb(15 23 42 / .1); backdrop-filter:blur(12px); }
.module-gate .gate-bottom-nav button { display:grid; min-width:0; min-height:4rem; place-items:center; align-content:center; gap:.2rem; padding:.3rem .15rem; border:0!important; border-radius:.75rem; background:transparent!important; color:#526172!important; box-shadow:none!important; touch-action:manipulation; }
.module-gate .gate-bottom-nav button.active { background:#e7eff9!important; color:var(--gate-navy)!important; }
.module-gate .gate-bottom-nav button:focus-visible { outline:3px solid #5b9ceb; outline-offset:-3px; }
.module-gate .gate-bottom-nav small { overflow:hidden; width:100%; font-size:.65rem; font-weight:750; text-align:center; line-height:1.15; }
.module-gate .gate-nav-icon { display:block; width:1.55rem; height:1.55rem; fill:currentColor; }
.module-gate .gate-camera,.module-gate .gate-flow,.module-gate .gate-result-view { display:grid; width:min(100%,46rem); min-height:0; margin:0 auto; padding:0; border:0; border-radius:0; align-content:start; gap:1rem; }
.module-gate .gate-camera video { width:100%; max-height:62dvh; object-fit:cover; border:3px solid var(--gate-navy); border-radius:1rem; background:#0a0a0a; }
.module-gate .gate-view-heading { display:grid; gap:.25rem; padding:.25rem 0; }
.module-gate .gate-view-heading :is(h2,p) { margin:0; }
.module-gate .gate-view-heading h2 { color:#17202a; font-size:clamp(1.55rem,5vw,2rem); }
.module-gate .gate-view-heading p:not(.eyebrow) { color:#526172; font-size:1rem; line-height:1.45; }
.module-gate .gate-kiosk-form { display:grid; gap:1rem; padding:1rem; border:1px solid #d4dbe4; border-radius:1rem; background:#fff; box-shadow:0 5px 16px rgb(15 23 42 / .05); }
.module-gate .gate-kiosk-form label { display:grid; gap:.45rem; color:#263444; font-size:.9rem; font-weight:700; }
.module-gate .gate-kiosk-form :is(input,select) { width:100%; min-height:3.5rem; border:1px solid #aeb9c6; border-radius:.75rem; background:#fff; color:#17202a; font-size:1.05rem; }
.module-gate .gate-kiosk-form button,.module-gate .gate-result-view > button,.module-gate .gate-result-actions button,.module-gate .gate-camera > button,.module-gate .gate-flow--unavailable > button { width:100%; min-height:3.75rem; border-radius:.8rem; font-size:1rem; font-weight:800; }
.module-gate .gate-kiosk-primary { border-color:var(--gate-navy)!important; background:var(--gate-navy)!important; color:#fff!important; }
.module-gate .gate-kiosk-allow { border-color:#25d366!important; background:#25d366!important; color:#fff!important; }
.module-gate .gate-kiosk-danger { border-color:#b42318!important; background:#fff!important; color:#b42318!important; }
.module-gate .gate-package-flow { width:min(100%,42.5rem); margin-inline:auto; }
.module-gate .gate-package-form { padding:0; border:0; background:transparent; box-shadow:none; overflow:visible; }
.module-gate .gate-package-stage { width:100%; min-width:0; overflow:visible; }
.module-gate .gate-package-panel { width:100%; min-width:0; }
.module-gate .gate-package-panel[hidden] { display:none; }
.module-gate .gate-package-panel--forward { animation:gate-package-enter-forward .22s ease-out both; }
.module-gate .gate-package-panel--back { animation:gate-package-enter-back .22s ease-out both; }
@keyframes gate-package-enter-forward { from { opacity:0; transform:translateX(1.5rem); } to { opacity:1; transform:translateX(0); } }
@keyframes gate-package-enter-back { from { opacity:0; transform:translateX(-1.5rem); } to { opacity:1; transform:translateX(0); } }
.module-gate .gate-package-progress { display:flex; width:100%; align-items:center; justify-content:center; gap:.35rem; margin:0; padding:0; list-style:none; color:#64748b; font-size:.72rem; font-weight:800; }
.module-gate .gate-package-progress li { padding:.35rem .55rem; border-radius:999px; white-space:nowrap; }
.module-gate .gate-package-progress li.active { background:#e7eff9; color:var(--gate-navy); }
.module-gate .gate-package-progress li.complete { color:#16803c; }
.module-gate .gate-package-step,.module-gate .gate-package-notice { display:grid; gap:.8rem; padding:.9rem; border:1px solid #d4dbe4; border-radius:1rem; background:#fff; box-shadow:0 5px 16px rgb(15 23 42 / .05); }
.module-gate .gate-package-step > header { display:grid; grid-template-columns:2rem 1.35rem minmax(0,1fr); align-items:start; gap:.65rem; }
.module-gate .gate-package-step__number { display:grid; width:2rem; height:2rem; place-items:center; border-radius:50%; background:var(--gate-navy); color:#fff; font-size:.85rem; font-weight:850; }
.module-gate .gate-package-step__icon svg,.module-gate .gate-package-button-icon { display:block; width:1.25rem; height:1.25rem; flex:0 0 1.25rem; fill:currentColor; }
.module-gate .gate-package-step__icon { padding-top:.35rem; color:#64748b; }
.module-gate .gate-package-step h3,.module-gate .gate-package-step p { margin:0; }
.module-gate .gate-package-step h3 { color:#17202a; font-size:1.08rem; }
.module-gate .gate-package-step header p { margin-top:.15rem; color:#64748b; font-size:.85rem; font-weight:500; line-height:1.4; }
.module-gate .gate-package-back { justify-self:start; width:auto!important; min-height:2.5rem!important; margin:-.35rem 0 -.25rem; padding:.25rem .4rem!important; border:0!important; border-radius:.55rem!important; background:transparent!important; box-shadow:none!important; color:#f97316!important; font-size:.85rem!important; font-weight:750!important; }
.module-gate .gate-package-back:hover { background:#fff7ed!important; color:#c2410c!important; }
.module-gate .gate-package-back:focus-visible { outline:2px solid #fb923c; outline-offset:2px; }
.module-gate .gate-package-caption { color:#475569; font-size:.75rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.module-gate .gate-package-recipients { display:grid; gap:.5rem; }
.module-gate .gate-package-recipient { display:flex; min-width:0; min-height:4.1rem; align-items:center; gap:.7rem; padding:.7rem; border:1px solid #cbd5e1; border-radius:.9rem; background:#fff; cursor:pointer; }
.module-gate .gate-package-recipient.selected { border-color:#9449ea; background:#faf5ff; box-shadow:0 0 0 2px rgb(148 73 234 / .15); }
.module-gate .gate-package-recipient input { width:1.25rem; min-height:1.25rem; flex:0 0 1.25rem; accent-color:#9449ea; }
.module-gate .gate-package-recipient > span { display:grid; min-width:0; gap:.12rem; }
.module-gate .gate-package-recipient strong { overflow:hidden; color:#17202a; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
.module-gate .gate-package-recipient small { overflow:hidden; color:#64748b; font-size:.78rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.module-gate .gate-package-role { color:#6d28d9!important; }
.module-gate .gate-package-manual.hidden,.module-gate .gate-package-photo__preview.hidden { display:none; }
.module-gate .gate-package-notice { gap:.25rem; border-color:#bfdbfe; background:#eff6ff; color:#1e3a5f; }
.module-gate .gate-package-notice strong { font-size:.82rem; letter-spacing:.03em; }
.module-gate .gate-package-notice p { margin:0; font-size:.9rem; font-weight:650; line-height:1.4; }
.module-gate .gate-package-notice--warning { border-color:#f4c264; background:#fff8e6; color:#854d0e; }
.module-gate .gate-package-photo { display:grid; gap:.65rem; }
.module-gate .gate-package-photo__preview { width:100%; max-height:15rem; border:1px solid #cbd5e1; border-radius:.85rem; object-fit:cover; }
.module-gate .gate-package-photo button { display:flex; align-items:center; justify-content:center; gap:.55rem; }
.module-gate .gate-package-photo p { color:#64748b; font-size:.78rem; text-align:center; }
.module-gate .gate-package-summary { display:grid; gap:0; margin:0; overflow:hidden; border:1px solid #e2e8f0; border-radius:.8rem; }
.module-gate .gate-package-summary > div { display:grid; grid-template-columns:7rem minmax(0,1fr); gap:.5rem; padding:.65rem .75rem; border-bottom:1px solid #e2e8f0; }
.module-gate .gate-package-summary > div:last-child { border-bottom:0; }
.module-gate .gate-package-summary dt { color:#64748b; font-size:.75rem; font-weight:750; }
.module-gate .gate-package-summary dd { margin:0; overflow-wrap:anywhere; color:#17202a; font-size:.85rem; font-weight:750; }
.module-gate .gate-package-empty { padding:.8rem; border:1px dashed #cbd5e1; border-radius:.8rem; color:#64748b; font-size:.88rem; text-align:center; }
.module-gate .gate-package-success .gate-result-details { grid-template-columns:minmax(0,1fr); }
.module-gate #gate-package-submit:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width:32rem) { .module-gate .gate-package-progress { justify-content:flex-start; overflow:hidden; font-size:.68rem; } .module-gate .gate-package-progress li { display:none; } .module-gate .gate-package-progress li.active { display:block; } }
.module-gate .gate-result { overflow:hidden; border:3px solid; border-radius:1.1rem; background:#fff; box-shadow:0 8px 22px rgb(15 23 42 / .07); }
.module-gate .gate-result > header { display:grid; gap:.15rem; padding:1rem 1.15rem; border-bottom:1px solid currentColor; }
.module-gate .gate-result > header span { font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.module-gate .gate-result > header h2 { margin:0; font-size:clamp(1.75rem,7vw,2.6rem); letter-spacing:.015em; }
.module-gate .gate-result > header p { margin:.2rem 0 0; font-weight:650; }
.module-gate .gate-result--authorized { border-color:#16803c; }.module-gate .gate-result--authorized > header { background:#e9f8ee; color:#12632f; }
.module-gate .gate-result--denied { border-color:#b42318; }.module-gate .gate-result--denied > header { background:#fff0ef; color:#991b1b; }
.module-gate .gate-result--review { border-color:#d97706; }.module-gate .gate-result--review > header { background:#fff7e6; color:#92400e; }
.module-gate .gate-result--technical { border-color:#64748b; }.module-gate .gate-result--technical > header { background:#f1f5f9; color:#334155; }
.module-gate .gate-result-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0; }
.module-gate .gate-result-details > div { min-width:0; padding:.85rem 1rem; border-bottom:1px solid #e3e8ef; }
.module-gate .gate-result-details dt { color:#667586; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.module-gate .gate-result-details dd { margin:.2rem 0 0; overflow-wrap:anywhere; color:#17202a; font-size:1rem; font-weight:700; }
.module-gate .gate-result-details .gate-result-borrowed { grid-column:1/-1; background:#f5f1ff; border:1px solid #e5dafa; border-radius:1rem; margin:.55rem; }
.module-gate .gate-result-details .gate-result-borrowed dd { color:#58398b; }
.module-gate .gate-result-details .gate-result-loading { grid-column:1/-1; background:#edf7fb; border:1px solid #c9e6f0; border-radius:1rem; margin:.55rem; }
.module-gate .gate-result-details .gate-result-loading dd { color:#235e76; }
.module-gate .gate-result-loading .gate-parking-location { border-color:#a8d5e5; color:#235e76; }
.module-gate .gate-result-loading .gate-parking-feedback { color:#235e76; }
.module-gate .gate-parking-location { display:inline-flex; margin-top:.6rem; padding:.45rem .75rem; border:1px solid #c6b3e8; border-radius:.7rem; color:#58398b; background:#fff; font-weight:700; }
.module-gate .gate-parking-feedback { display:block; margin-top:.4rem; color:#58398b; }
.module-gate .gate-result-details .gate-result-destination,.module-gate .gate-result-details .gate-result-vehicle { grid-column:1/-1; padding:1rem 1.15rem; }
.module-gate .gate-result-details .gate-result-destination dd { color:var(--gate-navy); font-size:clamp(1.8rem,8vw,3rem); line-height:1.05; }
.module-gate .gate-result-details .gate-result-vehicle dd { font-size:clamp(1.25rem,5vw,1.75rem); line-height:1.1; }
.module-gate .gate-result-actions { display:grid; gap:.65rem; }
.module-gate .gate-result-actions--decision { position:static; padding:.7rem 0 .3rem; background:linear-gradient(to bottom,transparent 0,#eef2f6 .7rem); }
.module-gate .gate-result-actions--plate { gap:.45rem; }
.module-gate .gate-plate-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.module-gate .gate-plate-options input { display:none; }
.module-gate .gate-plate-decision { position:static; padding:.45rem 0 .3rem; background:#eef2f6; }
.module-gate .gate-result-view--plate { height:100%; min-height:0; grid-template-rows:minmax(0,1fr) max-content; overflow:hidden; }
.module-gate .gate-result-view--plate > .gate-result { min-height:0; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.module-gate .gate-result-view:not(.gate-result-view--plate) > .gate-result { overflow:visible; }
@media (max-width:20rem) { .module-gate .gate-plate-options { grid-template-columns:minmax(0,1fr); } }
.module-gate .gate-flow--unavailable { align-self:center; padding:1.25rem; border:1px solid #d4dbe4; border-radius:1rem; background:#fff; text-align:center; }
.module-gate .gate-calendar-view { width:min(100%,46rem); overflow:auto; padding-bottom:1rem; }
.module-gate .gate-calendar-content { display:grid; gap:1rem; min-width:0; }
.module-gate .gate-calendar-group { display:grid; gap:.65rem; margin:0; padding:0; border:0; border-radius:0; background:transparent; }
.module-gate .gate-calendar-group h3 { margin:0; color:#17202a; font-size:.78rem; letter-spacing:.08em; }
.module-gate .gate-calendar-card { display:grid; gap:.55rem; margin:0; padding:.85rem 1rem; border:1px solid #d4dbe4; border-left:3px solid #16803c; border-radius:.8rem; background:#fff; box-shadow:0 4px 14px rgb(15 23 42 / .05); }
.module-gate .gate-calendar-card__top,.module-gate .gate-calendar-card__details { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:.65rem; }
.module-gate .gate-calendar-card__top strong { color:var(--gate-navy); font-size:1.05rem; }
.module-gate .gate-calendar-card__details { flex-wrap:wrap; justify-content:flex-start; color:#526172; font-size:.85rem; }
.module-gate .gate-calendar-card__details b { color:#17202a; }
.module-gate .gate-calendar-status { border-radius:999px; padding:.2rem .5rem; background:#e9f8ee; color:#12632f; font-size:.68rem; font-weight:800; }
.module-gate .gate-calendar-empty,.module-gate .gate-calendar-loading { margin:0; padding:.75rem; color:#667586; font-size:.9rem; }
@media (min-width:48rem) { .module-gate .gate-kiosk-main { padding-inline:max(1.5rem,calc((100vw - 64rem)/2)); }.module-gate .gate-home { width:min(100%,52rem); margin-inline:auto; }.module-gate .gate-home-actions { gap:1rem; } }
@media (max-width:25rem) { .module-gate .gate-bottom-nav small { font-size:.58rem; }.module-gate .gate-nav-icon { width:1.35rem; height:1.35rem; }.module-gate .gate-home-actions { grid-template-columns:minmax(0,1fr); }.module-gate .gate-home { min-height:auto; }.module-gate .gate-result-details { grid-template-columns:minmax(0,1fr); }.module-gate .gate-result-details > div { grid-column:1!important; } }

.module-gate .gate-logout { display:block; margin:.35rem 0 0 auto; min-height:44px; font-size:.85rem; }
.gate-logout-dialog { width:min(28rem,calc(100vw - 2rem)); box-sizing:border-box; border:0; border-radius:1rem; padding:1.25rem; color:#24364b; background:#fff; }
.gate-logout-dialog::backdrop { background:rgb(15 25 40 / .55); }
.gate-logout-dialog h2 { margin-top:0; font-size:1.25rem; }
.gate-logout-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.gate-logout-actions button { flex:1; min-height:44px; }

/* CASETA final: scope limited to the operational module. */
.module-gate .gate-kiosk--final { --gate-blue:#1d4ed8; display:block; height:auto; min-height:100%; overflow:visible; background:#f1f5f9; color:#0f172a; font-family:var(--font-product); font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
.module-gate .gate-kiosk--final .gate-kiosk-header { position:static; display:flex; width:100%; min-height:4.75rem; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(1rem,3vw,2rem); border-bottom:1px solid #e2e8f0; background:#fff; }
.module-gate .gate-kiosk-brand { display:flex; min-width:0; align-items:center; gap:.75rem; }
.module-gate .gate-kiosk-brand-icon { display:grid; width:2.5rem; height:2.5rem; flex:0 0 2.5rem; place-items:center; border-radius:.75rem; background:var(--gate-blue); color:#fff; }
.module-gate .gate-kiosk-brand-icon svg { width:1.35rem; height:1.35rem; fill:currentColor; }
.module-gate .gate-kiosk-brand strong,.module-gate .gate-kiosk-brand small { display:block; }
.module-gate .gate-kiosk-brand strong { font-size:.84rem; letter-spacing:.04em; }.module-gate .gate-kiosk-brand strong span { color:#cbd5e1; }.module-gate .gate-kiosk-brand strong span + * { color:var(--gate-blue); }
.module-gate .gate-kiosk-brand small { margin-top:.12rem; overflow:hidden; color:#64748b; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.module-gate .gate-kiosk-shift { display:flex; align-items:center; gap:.65rem; color:#64748b; font-size:.75rem; font-weight:700; white-space:nowrap; }.module-gate .gate-kiosk-shift #gate-server-status { padding:.35rem .55rem; border-radius:999px; background:#ecfdf5; color:#047857; }.module-gate .gate-kiosk-shift time { font-variant-numeric:tabular-nums; }.module-gate .gate-kiosk-shift .gate-logout { display:inline-flex; width:auto; min-height:auto; margin:0; padding:.3rem .45rem; border:0; border-radius:.45rem; background:transparent; color:#64748b; font:inherit; font-size:.72rem; }.module-gate .gate-kiosk-shift .gate-logout:hover { background:#f1f5f9; color:#0f172a; }
.module-gate .gate-kiosk--final .gate-kiosk-clock-face { display:none; }
.module-gate .gate-kiosk-intro,.module-gate .gate-primary-actions,.module-gate .gate-workspace,.module-gate .gate-auxiliary { width:min(100% - 2rem,80rem); margin-inline:auto; }
.module-gate .gate-kiosk-intro { display:flex; align-items:end; justify-content:space-between; padding:1.8rem 0 1rem; border:0; border-radius:0; background:transparent; box-shadow:none; }.module-gate .gate-kiosk-intro h1,.module-gate .gate-kiosk-intro p { margin:0; }.module-gate .gate-kiosk-intro h1 { font-size:clamp(1.5rem,3vw,2rem); font-weight:720; letter-spacing:-.035em; line-height:1.12; }.module-gate .gate-kiosk-intro p { margin-top:.35rem; color:#526172; font-size:1rem; font-weight:540; line-height:1.45; }
.module-gate .gate-primary-actions { display:grid; width:min(100% - 2rem,52rem); grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1.25rem; }
.module-gate .gate-primary-actions.gate-primary-actions--hidden { display:none; }
.module-gate .gate-primary-action { display:grid; min-height:6.4rem; align-content:center; gap:.45rem; padding:1rem; border:1px solid #e2e8f0!important; border-radius:1rem; background:#fff!important; box-shadow:0 1px 2px rgb(15 23 42 / .04),0 4px 16px rgb(15 23 42 / .06)!important; color:#0f172a!important; text-align:center; }.module-gate .gate-primary-action > span[aria-hidden] { display:grid; width:2.25rem; height:2.25rem; margin:0 auto .15rem; place-items:center; border-radius:.6rem; background:#eff6ff; color:var(--gate-blue); }.module-gate .gate-primary-action .gate-nav-icon { display:block; width:1.45rem; height:1.45rem; margin:0; padding:0; fill:currentColor; shape-rendering:geometricPrecision; transform:none; }.module-gate .gate-primary-action--qr { grid-column:1/-1; min-height:7.5rem; }.module-gate .gate-primary-action--qr > span[aria-hidden] { width:3rem; height:3rem; border-radius:.75rem; }.module-gate .gate-primary-action--qr .gate-nav-icon { width:2rem; height:2rem; }.module-gate .gate-primary-action strong { font-size:1.06rem; font-weight:680; letter-spacing:-.012em; line-height:1.25; }.module-gate .gate-primary-action small { color:#526172; font-size:.84rem; font-weight:540; line-height:1.4; }.module-gate .gate-primary-action:hover { border-color:#93c5fd!important; background:#f8fbff!important; }.module-gate .gate-primary-action.active,.module-gate .gate-primary-action--qr { border-color:var(--gate-blue)!important; background:var(--gate-blue)!important; color:#fff!important; }.module-gate .gate-primary-action.active > span[aria-hidden],.module-gate .gate-primary-action--qr > span[aria-hidden] { background:rgb(255 255 255 / .15); color:#fff; }.module-gate .gate-primary-action.active small,.module-gate .gate-primary-action--qr small { color:#dbeafe; }
.module-gate .gate-primary-action--package { border-color:#FFCC00!important; background:#FFCC00!important; color:#111827!important; }.module-gate .gate-primary-action--package > span[aria-hidden] { background:rgb(255 255 255 / .5); color:#111827; }.module-gate .gate-primary-action--package:hover { border-color:#e6b800!important; background:#e6b800!important; }
.module-gate .gate-primary-action--courier { border-color:#06C167!important; background:#06C167!important; color:#fff!important; }.module-gate .gate-primary-action--courier > span[aria-hidden] { background:rgb(255 255 255 / .18); color:#fff; }.module-gate .gate-primary-action--courier:hover { border-color:#05a957!important; background:#05a957!important; }
.module-gate .gate-workspace { display:grid; grid-template-columns:minmax(0,65fr) minmax(17rem,35fr); gap:1.25rem; padding-bottom:1.5rem; }.module-gate .gate-operation-card,.module-gate .gate-shift-attention { min-width:0; border:1px solid #e2e8f0; border-radius:1rem; background:#fff; box-shadow:0 1px 2px rgb(15 23 42 / .04),0 4px 16px rgb(15 23 42 / .06); }.module-gate .gate-operation-card > header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid #f1f5f9; }.module-gate .gate-operation-card > header h2,.module-gate .gate-shift-attention h2 { margin:0; font-size:1rem; font-weight:680; letter-spacing:-.012em; }.module-gate #gate-operation-state { padding:.3rem .55rem; border-radius:999px; background:#f1f5f9; color:#526172; font-size:.72rem; font-weight:650; }
.module-gate .gate-kiosk--final .gate-kiosk-main { display:block; width:auto; max-width:none; height:auto; min-height:24rem; margin:0; overflow:visible; padding:1.25rem; background:transparent; }.module-gate .gate-kiosk--final .gate-home { display:grid; grid-template-columns:minmax(0,1fr); min-height:22rem; align-content:center; justify-content:stretch; gap:1rem; }.module-gate .gate-home .gate-scan-action { min-height:10rem; border-radius:1rem; background:var(--gate-blue); }.module-gate .gate-home .gate-scan-action strong { font-size:1.3rem; letter-spacing:0; }.module-gate .gate-home .gate-scan-action small { max-width:30rem; color:#dbeafe; font-size:.88rem; font-weight:500; }.module-gate .gate-home .gate-scan-icon { width:3.4rem; height:3.4rem; }.module-gate .gate-home-actions { gap:1rem; }.module-gate .gate-home .gate-home-action { min-height:6.5rem; align-items:flex-start; padding:1rem; border:1px solid #e2e8f0!important; border-radius:1rem; background:#fff!important; box-shadow:0 1px 2px rgb(15 23 42 / .04); color:#0f172a!important; font-size:1rem; }.module-gate .gate-home-auxiliary { display:flex; justify-content:center; gap:.7rem; }.module-gate .gate-home-auxiliary .gate-home-action { display:inline-flex; width:auto; min-height:auto; padding:.45rem .7rem; border:0!important; background:transparent!important; color:#64748b!important; box-shadow:none!important; font-size:.8rem; }.module-gate .gate-home-auxiliary .gate-home-action svg { display:none; }
.module-gate .gate-shift-attention { padding:1.25rem; }.module-gate .gate-shift-attention section { margin-top:1.35rem; }.module-gate .gate-shift-attention h3 { margin:0 0 .65rem; color:#64748b; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }.module-gate .gate-empty-state { margin:0; padding:.9rem; border-radius:.75rem; background:#f8fafc; color:#64748b; font-size:.85rem; line-height:1.4; }
.module-gate .gate-kiosk--final .gate-flow,.module-gate .gate-kiosk--final .gate-camera,.module-gate .gate-kiosk--final .gate-result-view { width:min(100%,46rem); }.module-gate .gate-kiosk--final .gate-view-heading { padding:0 0 .4rem; }.module-gate .gate-kiosk--final .gate-kiosk-form { border-color:#e2e8f0; box-shadow:none; }.module-gate .gate-kiosk--final .gate-kiosk-primary { border-color:var(--gate-blue)!important; background:var(--gate-blue)!important; }.module-gate .gate-kiosk--final .gate-camera video { border-color:var(--gate-blue); }.module-gate .gate-kiosk--final .gate-exit-results .gate-home-action { min-height:auto; border:1px solid #e2e8f0!important; background:#fff!important; color:#0f172a!important; }
.module-gate .gate-claim-timer { display:inline-flex; align-items:center; min-height:1.8rem; margin:.15rem 0 .85rem; padding:.25rem .55rem; border:1px solid #dbe4ef; border-radius:.45rem; background:#f8fafc; color:#475569; font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.01em; }.module-gate .gate-claim-timer--urgent { border-color:#f5c2c7; background:#fff7ed; color:#b45309; }
.module-gate .gate-camera-preview { display:grid; width:min(100%,46rem); gap:1rem; }.module-gate .gate-camera-preview__header { display:flex; align-items:center; gap:.75rem; padding-bottom:.75rem; border-bottom:1px solid #f1f5f9; }.module-gate .gate-camera-preview__header h3 { margin:0; padding-left:.75rem; border-left:1px solid #e2e8f0; color:#0f172a; font-size:.82rem; font-weight:760; letter-spacing:.08em; }.module-gate .gate-camera-preview__frame { position:relative; display:grid; width:100%; aspect-ratio:16/9; place-items:center; overflow:hidden; border:0; border-radius:1rem; background:#0f172a; color:#e2e8f0; cursor:pointer; }.module-gate .gate-camera-preview__frame::before { position:absolute; inset:0; background:linear-gradient(135deg,#1e293b,#0f172a 55%,#020617); content:""; }.module-gate .gate-camera-preview__frame:focus-visible { outline:4px solid #93c5fd; outline-offset:3px; }.module-gate .gate-camera-preview__overlay { position:relative; display:grid; justify-items:center; gap:1rem; }.module-gate .gate-camera-preview__guide { position:relative; width:9rem; height:9rem; }.module-gate .gate-camera-preview__corner { position:absolute; width:2rem; height:2rem; border-color:rgb(255 255 255 / .8); border-style:solid; border-width:0; border-radius:0; }.module-gate .gate-camera-preview__corner--top-left { top:0; left:0; border-top-width:4px; border-left-width:4px; }.module-gate .gate-camera-preview__corner--top-right { top:0; right:0; border-top-width:4px; border-right-width:4px; }.module-gate .gate-camera-preview__corner--bottom-left { bottom:0; left:0; border-bottom-width:4px; border-left-width:4px; }.module-gate .gate-camera-preview__corner--bottom-right { right:0; bottom:0; border-right-width:4px; border-bottom-width:4px; }.module-gate .gate-camera-preview__line { position:absolute; top:50%; right:1rem; left:1rem; height:2px; transform:translateY(-50%); border-radius:999px; background:#60a5fa; box-shadow:0 0 12px rgb(96 165 250 / .9); }.module-gate .gate-camera-preview__icon { position:absolute; inset:0; display:grid; place-items:center; color:rgb(255 255 255 / .42); }.module-gate .gate-camera-preview__icon svg { width:3rem; height:3rem; fill:none; stroke:currentColor; stroke-width:1.5; }.module-gate .gate-camera-preview__copy { font-size:.9rem; font-weight:650; }.module-gate .gate-camera-preview__manual { justify-self:center; width:auto!important; min-height:2.6rem!important; border:0!important; border-radius:.55rem!important; background:transparent!important; color:var(--gate-blue)!important; font-size:.9rem!important; font-weight:650!important; }.module-gate .gate-camera-preview__manual:hover { background:#eff6ff!important; }
@media (min-width:40rem) { .module-gate .gate-camera-preview__overlay { gap:1.25rem; }.module-gate .gate-camera-preview__guide { width:11rem; height:11rem; } }
.module-gate .gate-auxiliary { display:flex; justify-content:center; gap:.55rem; padding:0 0 2rem; color:#cbd5e1; }.module-gate .gate-auxiliary button { padding:.25rem; border:0; background:transparent; color:#64748b; font:inherit; font-size:.85rem; }.module-gate .gate-auxiliary button:hover { color:var(--gate-blue); text-decoration:underline; }
@media (max-width:48rem) { .module-gate .gate-workspace { grid-template-columns:minmax(0,1fr); }.module-gate .gate-shift-attention { display:none; }.module-gate .gate-primary-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }.module-gate .gate-primary-action--qr { grid-column:1/-1; min-height:7.5rem; }.module-gate .gate-primary-action:not(.gate-primary-action--qr) { min-height:6.4rem; padding:1rem; }.module-gate .gate-primary-action:not(.gate-primary-action--qr) .gate-nav-icon { width:1.65rem; height:1.65rem; }.module-gate .gate-primary-action:not(.gate-primary-action--qr) small { display:none; } }
@media (max-width:32rem) { .module-gate .gate-kiosk--final .gate-kiosk-header { padding-inline:1rem; }.module-gate .gate-kiosk-brand small,.module-gate .gate-kiosk-shift time { display:none; }.module-gate .gate-kiosk-intro,.module-gate .gate-primary-actions,.module-gate .gate-workspace,.module-gate .gate-auxiliary { width:min(100% - 1.25rem,80rem); }.module-gate .gate-kiosk-intro { padding-top:1.2rem; }.module-gate .gate-primary-actions { gap:.7rem; }.module-gate .gate-primary-action { min-height:5.6rem!important; padding:.85rem; }.module-gate .gate-primary-action--qr { align-content:center; grid-template-columns:3rem minmax(0,1fr); column-gap:.7rem; }.module-gate .gate-primary-action--qr > span[aria-hidden] { width:2.75rem; height:2.75rem; }.module-gate .gate-primary-action--qr .gate-nav-icon { width:1.85rem; height:1.85rem; grid-row:span 2; margin:0; }.module-gate .gate-primary-action--qr small { grid-column:2; }.module-gate .gate-kiosk--final .gate-kiosk-main { min-height:19rem; padding:1rem; }.module-gate .gate-operation-card > header { padding:.9rem 1rem; }.module-gate .gate-home-actions { gap:.7rem; }.module-gate .gate-home .gate-home-action { min-height:5.25rem; }.module-gate .gate-auxiliary { padding-bottom:1.2rem; } }

/* Ingreso sin QR: trasplante de la tarjeta interior aprobada, sin alterar la tarjeta compartida. */
.module-gate .gate-manual-faithful { width:min(100%,46rem); }
.module-gate .gate-manual-form { gap:1.35rem; padding:1.5rem; border-color:#e2e8f0; box-shadow:none; }
.module-gate .gate-manual-form > .gate-manual-field,.module-gate .gate-manual-section { display:grid; gap:.55rem; }
.module-gate .gate-manual-label,.module-gate .gate-manual-section legend { color:#334155; font-size:.88rem; font-weight:650; }
.module-gate .gate-manual-field small,.module-gate .gate-manual-help { color:#64748b; font-size:.78rem; font-weight:450; line-height:1.4; }
.module-gate .gate-manual-form :is(input,select,textarea) { min-height:2.9rem; border:1px solid #cbd5e1; border-radius:.55rem; padding:.65rem .8rem; background:#fff; color:#0f172a; font:inherit; font-size:.92rem; }
.module-gate .gate-manual-form textarea { min-height:5.2rem; resize:vertical; }
.module-gate .gate-minor-card { display:flex; align-items:flex-start; gap:.7rem; padding:.85rem .9rem; border:1px solid #f1d18a; border-radius:.55rem; background:#fffbeb; cursor:pointer; }
.module-gate .gate-minor-card input,.module-gate .gate-manual-check input,.module-gate .gate-manual-minor-doc input,.module-gate .gate-manual-choice-grid input { min-height:auto; width:1rem; height:1rem; margin-top:.15rem; accent-color:#1d4ed8; }
.module-gate .gate-minor-card span { display:grid; gap:.2rem; }.module-gate .gate-minor-card strong { color:#1e293b; font-size:.88rem; }.module-gate .gate-minor-card small { color:#64748b; font-size:.76rem; }
.module-gate .gate-minor-review { display:grid; gap:1rem; }.module-gate .gate-minor-review__header { display:grid; gap:.35rem; }.module-gate .gate-minor-review__header h3,.module-gate .gate-minor-review__header p { margin:0; }.module-gate .gate-minor-review__header h3 { color:#1e293b; font-size:1.05rem; }.module-gate .gate-minor-review__header p { color:#64748b; font-size:.86rem; line-height:1.4; }
.module-gate .gate-manual-section { margin:0; padding:1.2rem 0 0; border:0; border-top:1px solid #e2e8f0; }.module-gate .gate-manual-section legend { width:100%; padding:0; text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; color:#64748b; }
.module-gate .gate-manual-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }.module-gate .gate-manual-choice-grid label { display:flex; align-items:center; gap:.55rem; min-height:2.75rem; padding:.7rem .75rem; border:1px solid #cbd5e1; border-radius:.55rem; color:#334155; font-size:.82rem; font-weight:600; cursor:pointer; }.module-gate .gate-manual-choice-grid label:has(:checked) { border-color:#2563eb; background:#eff6ff; color:#1d4ed8; }
.module-gate .gate-manual-capture { display:grid; gap:.6rem; }.module-gate .gate-manual-capture button { width:100%; min-height:3rem; }.module-gate .gate-manual-preview { width:100%; max-height:15rem; object-fit:contain; border:1px solid #cbd5e1; border-radius:.65rem; background:#f8fafc; }.module-gate .gate-manual-check,.module-gate .gate-manual-minor-doc { display:flex!important; align-items:center; gap:.6rem; color:#334155; font-size:.86rem; font-weight:600; }.module-gate .gate-manual-submit { padding-top:.35rem; border-top:1px solid #e2e8f0; }.module-gate .gate-manual-submit button { width:100%; min-height:3.5rem; }.module-gate .gate-manual-faithful [hidden] { display:none!important; }
@media (max-width:32rem) { .module-gate .gate-manual-form { padding:1rem; }.module-gate .gate-manual-choice-grid { grid-template-columns:minmax(0,1fr); } }

/* The final CASETA layout is document-scrolled. The former kiosk lock hid long forms. */
body:has(#gate-panel.ui-active .gate-kiosk--final) { height:auto; min-height:100vh; min-height:100dvh; overflow-x:hidden; overflow-y:auto; }
body:has(#gate-panel.ui-active .gate-kiosk--final) #app-shell,
body:has(#gate-panel.ui-active .gate-kiosk--final) #module-stage,
#gate-panel.module-gate.ui-active:has(.gate-kiosk--final) { height:auto; min-height:100vh; min-height:100dvh; overflow:visible; }

/* Registrar salida: listado operativo por prioridad, sin cambiar la estructura compartida de CASETA. */
.module-gate .gate-exit-flow { gap:1rem; }
.module-gate .gate-exit-search { display:grid; gap:.45rem; color:#334155; font-size:.88rem; font-weight:650; }
.module-gate .gate-exit-search input { min-height:2.8rem; border:1px solid #cbd5e1; border-radius:.6rem; padding:.6rem .75rem; color:#0f172a; font:inherit; }
.module-gate .gate-exit-results { display:grid; gap:1rem; }
.module-gate .gate-exit-group { display:grid; gap:.55rem; }
.module-gate .gate-exit-group h3 { margin:0; color:#475569; font-size:.76rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.module-gate .gate-exit-group--minor h3 { color:#a16207; }
.module-gate .gate-exit-card { position:relative; display:grid; min-width:0; gap:.2rem; padding:.85rem 1rem; border:1px solid #e2e8f0; border-radius:.8rem; background:#fff; color:#0f172a; text-align:left; box-shadow:0 1px 2px rgb(15 23 42 / .04); }
.module-gate .gate-exit-card:hover { border-color:#93c5fd; background:#f8fbff; }
.module-gate .gate-exit-card strong { padding-right:7rem; font-size:.96rem; }
.module-gate .gate-exit-card span { color:#64748b; font-size:.8rem; line-height:1.35; }
.module-gate .gate-exit-card em { position:absolute; top:.75rem; right:.75rem; border-radius:999px; padding:.2rem .45rem; background:#fffbeb; color:#a16207; font-size:.66rem; font-style:normal; font-weight:750; }
.module-gate .gate-exit-minor-departure { display:grid; gap:.6rem; margin:0; padding:.85rem; border:1px solid #f1d18a; border-radius:.65rem; background:#fffbeb; }
.module-gate .gate-exit-minor-departure legend { padding:0 .2rem; color:#854d0e; font-size:.88rem; font-weight:700; }
.module-gate .gate-exit-minor-departure label { display:flex; align-items:center; gap:.35rem; color:#334155; font-size:.9rem; font-weight:600; }
.module-gate .gate-exit-minor-departure input[type="radio"] { width:1rem; min-width:1rem; height:1rem; min-height:1rem; flex:0 0 1rem; margin:0; padding:0; border:0; border-radius:50%; accent-color:#1d4ed8; }
.module-gate .gate-exit-group-note { margin:0; color:#64748b; font-size:.8rem; line-height:1.4; }
@media (max-width:32rem) { .module-gate .gate-exit-card strong { padding-right:0; }.module-gate .gate-exit-card em { position:static; justify-self:start; order:-1; } }

.module-convivencia #conv-evidence-status.is-error { color:#b42318; font-weight:700; }
.module-convivencia .conv-upload-preview { display:grid; grid-template-rows:auto auto auto; }
.module-convivencia .conv-upload-preview img { object-fit:contain; background:#e8edf3; }
.module-convivencia .conv-upload-preview button { justify-self:start; margin:0 .5rem .5rem; padding:.3rem .55rem; border:1px solid var(--border); border-radius:.45rem; background:var(--surface); color:var(--text); font:inherit; font-size:.75rem; cursor:pointer; }
.module-convivencia .conv-upload-preview button:focus-visible { outline:2px solid var(--conv-accent); outline-offset:2px; }