/* AIMAX Partners 3.12.0 · Neon Liquid Glass
 * Capa exclusivamente visual. No modifica permisos, datos, rutas ni acciones.
 */

:root,
html[data-theme="dark"],
html[data-theme="light"] {
  color-scheme: dark;
  --bg: #05030d;
  --panel: rgba(15, 10, 36, .56);
  --panel2: rgba(22, 15, 50, .46);
  --line: rgba(210, 204, 255, .14);
  --text: #f8f6ff;
  --muted: #aaa6c4;
  --cyan: #39d8ff;
  --blue: #3467ff;
  --purple: #9a45ff;
  --pink: #ff2bbd;
  --danger: #ff668e;
  --warning: #ffc15c;
  --ok: #45e6b1;
  --shadow: 0 28px 80px rgba(0, 0, 0, .46);
  --glass: linear-gradient(145deg, rgba(25, 17, 57, .62), rgba(10, 8, 27, .38) 58%, rgba(42, 20, 76, .34));
  --glass-soft: linear-gradient(145deg, rgba(29, 19, 62, .45), rgba(7, 7, 22, .29));
  --glass-line: rgba(225, 219, 255, .16);
  --glass-highlight: rgba(255, 255, 255, .11);
  --neon-gradient: linear-gradient(110deg, #ff2aac 0%, #a43cff 43%, #3672ff 74%, #28cfff 100%);
  --neon-gradient-soft: linear-gradient(110deg, rgba(255,42,172,.25), rgba(143,57,255,.22) 48%, rgba(40,207,255,.18));
}

html,
html[data-theme="dark"],
html[data-theme="light"] {
  background: #05030d;
  color: var(--text);
}

html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
  min-height: 100vh;
  isolation: isolate;
  color: var(--text) !important;
  background-color: #05030d !important;
  background-image:
    radial-gradient(circle at 50% -12%, rgba(51, 29, 126, .46), transparent 33%),
    radial-gradient(circle at 8% 18%, rgba(205, 22, 166, .18), transparent 28%),
    radial-gradient(circle at 93% 75%, rgba(24, 88, 255, .21), transparent 33%),
    linear-gradient(145deg, #030208 0%, #09051a 47%, #05030d 100%) !important;
  background-attachment: fixed !important;
}

html body::before,
html body::after,
html[data-theme="light"] body::before,
html[data-theme="light"] body::after,
html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  border-radius: 50% 42% 58% 46%;
}

html body::before,
html[data-theme="light"] body::before,
html[data-theme="dark"] body::before {
  width: min(1120px, 84vw);
  height: min(1450px, 128vh);
  left: 31%;
  top: -58%;
  transform: rotate(31deg);
  background:
    linear-gradient(92deg, transparent 5%, rgba(255, 25, 188, .03) 14%, rgba(255, 25, 188, .92) 28%, rgba(150, 43, 255, .94) 43%, rgba(39, 93, 255, .91) 58%, rgba(38, 207, 255, .18) 67%, transparent 78%);
  filter: blur(42px) saturate(145%);
  box-shadow: 0 0 130px rgba(123, 47, 255, .38);
}

html body::after,
html[data-theme="light"] body::after,
html[data-theme="dark"] body::after {
  width: min(940px, 76vw);
  height: min(1120px, 112vh);
  right: 48%;
  bottom: -63%;
  transform: rotate(-36deg);
  background:
    linear-gradient(100deg, transparent 5%, rgba(37, 211, 255, .04) 19%, rgba(37, 108, 255, .84) 34%, rgba(130, 48, 255, .9) 49%, rgba(255, 39, 177, .74) 62%, transparent 78%);
  filter: blur(48px) saturate(150%);
  box-shadow: 0 0 120px rgba(34, 104, 255, .32);
}

.app-shell,
.login-shell,
body.login-page > .card {
  position: relative;
  z-index: 1;
}

::selection {
  color: #fff;
  background: rgba(216, 48, 255, .58);
}

*:focus-visible {
  outline: 2px solid rgba(74, 205, 255, .9);
  outline-offset: 2px;
}

/* Cristal base */
.card,
html[data-theme="light"] .card,
html[data-theme="dark"] .card,
.user-mini,
.mini-item,
.note,
.app-dialog,
.pwa-install-cta,
.pwa-install-help-card,
.push-permission-cta,
.push-permission-help-card {
  color: var(--text) !important;
  border-color: var(--glass-line) !important;
  background: var(--glass) !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, .35),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgba(151, 93, 255, .08) !important;
  backdrop-filter: blur(28px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(155%) !important;
}

.card {
  border-radius: 22px !important;
}

.card:hover {
  border-color: rgba(209, 195, 255, .22) !important;
}

.muted,
.sub,
.section-head p,
.card p,
.hint {
  color: var(--muted) !important;
}

/* Navegación */
.app-shell {
  background: transparent !important;
}

.sidebar,
html[data-theme="light"] .sidebar,
html[data-theme="dark"] .sidebar {
  color: var(--text) !important;
  border-right: 1px solid rgba(222, 214, 255, .12) !important;
  background:
    linear-gradient(180deg, rgba(10, 7, 25, .84), rgba(7, 5, 18, .7)) !important;
  box-shadow: 20px 0 55px rgba(0, 0, 0, .26), inset -1px 0 rgba(255, 255, 255, .025) !important;
  backdrop-filter: blur(32px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(145%) !important;
}

.sidebar::before {
  background:
    radial-gradient(circle at 8% 5%, rgba(255, 39, 186, .2), transparent 27%),
    radial-gradient(circle at 100% 46%, rgba(65, 78, 255, .14), transparent 32%) !important;
}

.brand {
  border-color: rgba(218, 210, 255, .11) !important;
}

.brand img,
.logo-large {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .24));
}

.brand strong,
.topbar h1,
.section-head h2,
.card h2,
.card h3,
.card h4 {
  color: #fbf9ff !important;
}

.brand small {
  color: #938ead !important;
}

.nav .label {
  color: #77718f !important;
}

.nav a,
html[data-theme="light"] .nav a {
  color: #aaa5c0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav a:hover,
.nav a.active,
html[data-theme="light"] .nav a:hover,
html[data-theme="light"] .nav a.active {
  color: #fff !important;
  border-color: rgba(230, 218, 255, .16) !important;
  background: linear-gradient(100deg, rgba(255, 40, 174, .15), rgba(135, 53, 255, .16) 51%, rgba(44, 120, 255, .1)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 11px 30px rgba(0, 0, 0, .2) !important;
}

.nav a.active::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(#ff31b8, #8f41ff 52%, #36cfff);
  box-shadow: 0 0 12px rgba(209, 57, 255, .9);
}

.nav .ico {
  color: #d5cbff !important;
  filter: drop-shadow(0 0 8px rgba(175, 75, 255, .32)) !important;
}

.nav-count {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .18) !important;
  background: var(--neon-gradient) !important;
  box-shadow: 0 0 18px rgba(207, 46, 255, .35) !important;
}

.sidebar-foot {
  border-color: rgba(216, 207, 255, .1) !important;
}

.user-mini {
  border-radius: 15px !important;
  background: rgba(21, 14, 46, .42) !important;
}

.logout-link {
  color: #d9a8ff !important;
}

.topbar,
html[data-theme="light"] .topbar,
html[data-theme="dark"] .topbar {
  color: var(--text) !important;
  border-bottom-color: rgba(220, 213, 255, .11) !important;
  background: rgba(7, 5, 18, .61) !important;
  box-shadow: 0 12px 44px rgba(0, 0, 0, .18), inset 0 -1px rgba(255, 255, 255, .025) !important;
  backdrop-filter: blur(28px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(155%) !important;
}

.topbar .sub {
  color: #938daa !important;
}

.theme-toggle {
  display: none !important;
}

.content {
  position: relative;
}

/* Botones y campos */
.btn,
html[data-theme="light"] .btn,
html[data-theme="dark"] .btn {
  color: #f7f4ff !important;
  border-color: rgba(218, 208, 255, .18) !important;
  background: rgba(27, 19, 55, .48) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 9px 24px rgba(0, 0, 0, .17) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.btn:hover,
html[data-theme="light"] .btn:hover {
  transform: translateY(-1px);
  border-color: rgba(229, 216, 255, .34) !important;
  background: rgba(45, 28, 80, .62) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 14px 30px rgba(0, 0, 0, .24), 0 0 20px rgba(135, 62, 255, .1) !important;
}

.btn:active {
  transform: translateY(0) scale(.985);
}

.btn.primary,
.btn.green,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.green {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .23) !important;
  background: var(--neon-gradient) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 12px 32px rgba(125, 48, 255, .31), 0 0 28px rgba(255, 42, 172, .12) !important;
}

.btn.primary:hover,
.btn.green:hover {
  filter: brightness(1.08) saturate(1.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, .34), 0 16px 38px rgba(102, 51, 255, .4), 0 0 34px rgba(255, 42, 172, .18) !important;
}

.btn.danger {
  color: #ff9db9 !important;
  border-color: rgba(255, 92, 137, .35) !important;
  background: rgba(79, 20, 48, .42) !important;
}

.btn.warning {
  color: #ffd78d !important;
  border-color: rgba(255, 189, 76, .32) !important;
  background: rgba(73, 47, 12, .39) !important;
}

.input,
.select,
.textarea,
html[data-theme="light"] .input,
html[data-theme="light"] .select,
html[data-theme="light"] .textarea {
  color: #fbf9ff !important;
  caret-color: #ff49c1;
  border-color: rgba(224, 214, 255, .15) !important;
  background: rgba(5, 4, 16, .46) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), inset 0 12px 28px rgba(0, 0, 0, .12) !important;
  backdrop-filter: blur(13px) !important;
  -webkit-backdrop-filter: blur(13px) !important;
}

.input::placeholder,
.textarea::placeholder {
  color: #736d89 !important;
}

.input:focus,
.select:focus,
.textarea:focus,
html[data-theme="light"] .input:focus,
html[data-theme="light"] .select:focus,
html[data-theme="light"] .textarea:focus {
  border-color: rgba(216, 70, 255, .72) !important;
  box-shadow: 0 0 0 3px rgba(180, 49, 255, .13), 0 0 25px rgba(66, 116, 255, .1), inset 0 1px rgba(255,255,255,.05) !important;
}

.field > span,
html[data-theme="light"] .field > span {
  color: #c0b9d5 !important;
  letter-spacing: .08em;
}

select option {
  color: #f7f4ff;
  background: #100b25;
}

/* Héroes y métricas */
.hero,
.premium-hero,
.catalog-hero,
.storage-hero,
.activity-hero,
.notifications-hero,
.renewals-hero,
.settings-hero {
  color: var(--text) !important;
  border-color: rgba(221, 207, 255, .17) !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(41, 119, 255, .21), transparent 28%),
    radial-gradient(circle at 13% 110%, rgba(255, 35, 179, .18), transparent 37%),
    linear-gradient(125deg, rgba(22, 13, 49, .63), rgba(7, 7, 22, .35)) !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.11) !important;
  backdrop-filter: blur(29px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(29px) saturate(150%) !important;
}

.hero::before,
.hero::after {
  opacity: .2 !important;
  filter: blur(90px) !important;
}

.hero::before {
  background: #ff2aac !important;
}

.hero::after {
  background: #285dff !important;
}

.hero .tag,
.pill,
.catalog-count {
  color: #d9d2ef !important;
  border-color: rgba(220, 208, 255, .18) !important;
  background: rgba(32, 21, 66, .5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.pill.active,
.pill.sent {
  color: #73f1c8 !important;
  border-color: rgba(68, 225, 176, .28) !important;
  background: rgba(12, 65, 52, .38) !important;
}

.pill.pending,
.pill.prepared {
  color: #ffd485 !important;
  border-color: rgba(255, 191, 77, .3) !important;
  background: rgba(76, 48, 11, .4) !important;
}

.metric strong,
.kpi-accent {
  background: linear-gradient(92deg, #fff 5%, #e2c3ff 42%, #8edfff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.mini-item,
.note {
  background: rgba(16, 11, 38, .38) !important;
}

.brand-preview,
.empty,
.code {
  color: #aaa5bf !important;
  border-color: rgba(211, 202, 255, .15) !important;
  background: rgba(7, 5, 20, .38) !important;
}

/* Tablas */
.table-wrap {
  border: 1px solid rgba(215, 207, 255, .11) !important;
  background: rgba(10, 7, 26, .25) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}

.table th {
  color: #8f89a7 !important;
  border-color: rgba(216, 207, 255, .1) !important;
  background: rgba(28, 17, 58, .28) !important;
}

.table td {
  color: #eae6f5 !important;
  border-color: rgba(215, 206, 255, .075) !important;
}

.table tr:hover td {
  background: rgba(133, 56, 255, .08) !important;
}

/* Alertas y modales */
.flash,
.catalog-alert,
.catalog-inline-error {
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.flash.success {
  color: #8af1d0 !important;
  border-color: rgba(57, 222, 168, .3) !important;
  background: rgba(9, 65, 50, .46) !important;
}

.flash.error,
.catalog-alert.is-error,
.catalog-inline-error {
  color: #ffb0c5 !important;
  border-color: rgba(255, 91, 137, .32) !important;
  background: rgba(76, 18, 44, .53) !important;
}

.flash.info,
.catalog-alert.is-info {
  color: #b8d9ff !important;
  border-color: rgba(75, 139, 255, .31) !important;
  background: rgba(15, 39, 88, .47) !important;
}

.app-dialog-backdrop,
.pwa-install-help,
.push-permission-help {
  background: rgba(2, 1, 8, .76) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.app-dialog,
.pwa-install-help-card,
.push-permission-help-card {
  border-radius: 25px !important;
}

.app-dialog .eyebrow,
.pwa-install-copy .eyebrow {
  color: #f687db !important;
}

.pwa-install-cta {
  background: linear-gradient(145deg, rgba(28, 17, 59, .82), rgba(7, 6, 22, .72)) !important;
}

.push-permission-cta,
.push-permission-help-card {
  color: #f8f6ff !important;
  background: linear-gradient(145deg, rgba(29, 17, 61, .86), rgba(7, 6, 22, .82)) !important;
}

.push-permission-copy small,
.push-permission-help-card .eyebrow,
.pwa-install-help-card .eyebrow {
  color: #62f2dc !important;
}

.push-permission-copy span,
.push-permission-help-card p {
  color: #beb8ce !important;
}

.push-permission-help-card li {
  color: #eeeaff;
  border-color: rgba(222, 212, 255, .16) !important;
  background: rgba(14, 9, 35, .53) !important;
}

.push-permission-cta .push-enable {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  background: var(--neon-gradient) !important;
  box-shadow: 0 12px 30px rgba(151, 65, 255, .23) !important;
}

.pwa-install-now {
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
  background: var(--neon-gradient) !important;
}

.pwa-install-icon,
.help-icon {
  border-color: rgba(223, 211, 255, .16) !important;
  background: rgba(8, 6, 21, .4) !important;
}

/* Catálogo e integraciones: misma lógica, nueva piel */
.catalog-page {
  position: relative;
}

.catalog-engine,
.catalog-controller,
.catalog-source-access,
.catalog-config-card,
.catalog-telegram-setup,
.catalog-draft,
.catalog-kpis article {
  border-color: rgba(217, 207, 255, .15) !important;
  background: var(--glass-soft) !important;
  box-shadow: 0 24px 65px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.075) !important;
  backdrop-filter: blur(25px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(145%) !important;
}

.catalog-engine.is-ready,
.catalog-toggle.is-main,
.catalog-saved-value,
.catalog-current-destination,
.catalog-telegram-health.is-ready,
.catalog-telegram-runtime.is-ready {
  border-color: rgba(65, 224, 175, .26) !important;
  background: rgba(8, 58, 47, .34) !important;
}

.catalog-engine-timing > span,
.catalog-controller-steps article,
.catalog-telegram-runtime,
.catalog-caption,
.catalog-advanced,
.catalog-toggle,
.catalog-candidate,
.catalog-source-migration {
  border-color: rgba(215, 205, 255, .13) !important;
  background: rgba(7, 5, 21, .38) !important;
}

.catalog-engine-timing b,
.catalog-controller-steps b,
.catalog-caption p,
.catalog-candidate,
.catalog-source-foot p {
  color: #d7d1e5 !important;
}

.catalog-config-card header > span,
.catalog-telegram-copy > span,
.catalog-source-access > header > span,
.catalog-controller-steps article > span {
  color: #f0c9ff !important;
  border-color: rgba(200, 82, 255, .27) !important;
  background: rgba(122, 38, 176, .25) !important;
}

.catalog-metadata,
.catalog-episode-label,
.catalog-steps b,
.catalog-telegram-copy code,
.catalog-source-foot code {
  color: #c9c0e0 !important;
  border-color: rgba(212, 198, 255, .15) !important;
  background: rgba(14, 9, 37, .44) !important;
}

.catalog-countdown.is-due,
[data-catalog-countdown].is-due {
  color: #ffc86f !important;
}

/* Acceso: composición inspirada en la referencia, optimizada para AIMAX */
.login-page,
html[data-theme="light"] body.login-page {
  min-height: 100svh;
  padding: clamp(20px, 4vw, 56px) !important;
  overflow-x: hidden;
}

.login-page::before {
  left: 36% !important;
  top: -38% !important;
  width: min(1100px, 108vw) !important;
  height: min(1380px, 150vh) !important;
  opacity: .94 !important;
  filter: blur(34px) saturate(160%) !important;
}

.login-page::after {
  right: 45% !important;
  bottom: -62% !important;
  opacity: .78 !important;
}

.login-shell {
  width: min(1120px, 96vw) !important;
  min-height: min(720px, 88svh);
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr) !important;
  gap: clamp(38px, 6vw, 86px) !important;
  align-items: center;
  overflow: hidden;
  padding: clamp(38px, 5vw, 72px) !important;
  border: 1px solid rgba(230, 221, 255, .2);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(24, 15, 53, .46), rgba(8, 6, 23, .28) 58%, rgba(38, 18, 73, .25));
  box-shadow: 0 45px 130px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.14), inset 0 -1px rgba(155,87,255,.1);
  backdrop-filter: blur(31px) saturate(158%);
  -webkit-backdrop-filter: blur(31px) saturate(158%);
}

.login-shell::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: 33px;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.1), transparent 23%),
    radial-gradient(circle at 100% 100%, rgba(88,51,255,.16), transparent 31%);
}

.login-copy {
  position: relative;
  z-index: 1;
}

.login-copy .pill {
  color: #f7b6e8 !important;
  background: rgba(126, 35, 128, .25) !important;
}

.login-copy h1 {
  max-width: 610px;
  margin: 22px 0 20px !important;
  color: #fff;
  font-size: clamp(44px, 5.2vw, 70px) !important;
  font-weight: 760;
  line-height: .96 !important;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.login-copy h1 em {
  display: block;
  color: transparent;
  font-style: normal;
  background: linear-gradient(90deg, #ff66c9, #bb74ff 43%, #72d9ff);
  -webkit-background-clip: text;
  background-clip: text;
}

.login-copy > p {
  max-width: 560px;
  color: #b7b1c9 !important;
  font-size: 13px !important;
  line-height: 1.72 !important;
}

.login-copy .grid {
  gap: 10px !important;
}

.login-copy .note {
  min-height: 96px;
  padding: 14px !important;
  color: #aaa4bd !important;
  border-radius: 15px !important;
  line-height: 1.55;
}

.login-copy .note b {
  display: inline-block;
  margin-bottom: 4px;
  color: #f5f1ff;
  font-size: 10px;
}

.login-card,
html[data-theme="light"] .login-card {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 3.3vw, 43px) !important;
  border: 1px solid rgba(235, 224, 255, .18) !important;
  border-radius: 27px !important;
  background: linear-gradient(145deg, rgba(18, 13, 38, .72), rgba(7, 6, 20, .52)) !important;
  box-shadow: 0 32px 75px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.12), inset 0 -1px rgba(119,59,255,.1) !important;
  backdrop-filter: blur(28px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(155%) !important;
}

.login-card::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 100, 211, .7), rgba(107, 139, 255, .65), transparent);
  box-shadow: 0 0 16px rgba(210, 73, 255, .38);
}

.login-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 25px;
}

.login-card-head .logo-large {
  width: 146px !important;
  height: 58px !important;
  margin: 0 !important;
  object-position: left center;
}

.login-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #beb7d0;
  border: 1px solid rgba(221, 211, 255, .14);
  border-radius: 999px;
  background: rgba(12, 8, 31, .36);
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.login-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff45bb;
  box-shadow: 0 0 0 5px rgba(255,69,187,.09), 0 0 13px rgba(255,69,187,.62);
}

.login-kicker {
  display: block;
  margin-bottom: 7px;
  color: #9d94b5;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

.login-card h2 {
  margin: 0 0 7px !important;
  text-align: left !important;
  font-size: 27px;
  letter-spacing: -.025em;
}

.login-card .hint {
  margin: 0 0 25px !important;
  text-align: left !important;
  font-size: 10px !important;
  line-height: 1.5;
}

.login-card .field + .field {
  margin-top: 15px !important;
}

.login-card .input {
  min-height: 49px !important;
  border-radius: 13px !important;
  padding: 12px 14px !important;
}

.login-card .btn {
  min-height: 49px;
  border-radius: 13px !important;
}

.login-card .btn.green {
  margin-top: 20px !important;
}

body.login-page > .card {
  width: min(540px, 92vw) !important;
  padding: 42px !important;
  border-radius: 28px !important;
}

/* Renovaciones conservan su semántica sin romper la paleta */
.renewal-alert {
  border-color: rgba(255, 185, 78, .48) !important;
  background:
    radial-gradient(circle at 12% 110%, rgba(255, 157, 40, .24), transparent 38%),
    linear-gradient(125deg, rgba(70, 40, 15, .56), rgba(24, 11, 51, .48)) !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .login-shell {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr) !important;
    gap: 34px !important;
    padding: 42px !important;
  }
  .login-copy h1 {
    font-size: clamp(39px, 5vw, 54px) !important;
  }
  .login-copy .grid {
    grid-template-columns: 1fr !important;
  }
  .login-copy .note {
    min-height: 0;
  }
}

@media (max-width: 900px) {
  html body::before,
  html[data-theme="light"] body::before,
  html[data-theme="dark"] body::before {
    left: 22%;
    top: -34%;
    width: 118vw;
    height: 125vh;
    filter: blur(35px) saturate(145%);
  }

  .sidebar {
    border-right: 1px solid rgba(225, 216, 255, .16) !important;
    box-shadow: 26px 0 65px rgba(0,0,0,.48) !important;
  }

  .mobile-backdrop {
    background: rgba(3, 1, 10, .72) !important;
    backdrop-filter: blur(11px) !important;
  }

  .table-wrap {
    border: 0 !important;
    background: transparent !important;
  }

  .table tr {
    border-color: rgba(218, 208, 255, .15) !important;
    background: var(--glass-soft) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.29), inset 0 1px rgba(255,255,255,.06) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .login-page {
    display: grid !important;
    align-items: center !important;
    padding: 18px !important;
  }

  .login-shell {
    width: min(620px, 100%) !important;
    min-height: auto;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: clamp(24px, 6vw, 40px) !important;
    border-radius: 28px;
  }

  .login-copy {
    display: block !important;
  }

  .login-copy .pill,
  .login-copy > p,
  .login-copy .grid {
    display: none !important;
  }

  .login-copy h1 {
    margin: 0 !important;
    font-size: clamp(32px, 9vw, 46px) !important;
    line-height: 1 !important;
  }

  .login-card {
    padding: clamp(24px, 7vw, 34px) !important;
  }
}

@media (max-width: 540px) {
  html body::after,
  html[data-theme="light"] body::after,
  html[data-theme="dark"] body::after {
    right: 18%;
    bottom: -45%;
    width: 108vw;
  }

  .card {
    border-radius: 18px !important;
  }

  .content {
    padding: 11px !important;
  }

  .login-page {
    padding: 11px !important;
  }

  .login-shell {
    padding: 20px !important;
    border-radius: 24px;
  }

  .login-shell::before {
    border-radius: 23px;
  }

  .login-copy h1 {
    font-size: clamp(28px, 8vw, 33px) !important;
  }

  .login-card-head {
    margin-bottom: 20px;
  }

  .login-card-head .logo-large {
    width: 119px !important;
    height: 48px !important;
  }

  .login-status {
    padding: 6px 8px;
    font-size: 7px;
  }

  .login-card h2 {
    font-size: 23px;
  }

  body.login-page > .card {
    padding: 28px 22px !important;
  }
}

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

@media (prefers-contrast: more) {
  .card,
  .sidebar,
  .topbar,
  .login-shell,
  .login-card {
    border-color: rgba(255,255,255,.34) !important;
  }
  .muted,
  .sub,
  .hint {
    color: #cbc5da !important;
  }
}

@media print {
  html body {
    color: #111 !important;
    background: #fff !important;
  }
  html body::before,
  html body::after,
  .sidebar,
  .topbar,
  .pwa-install-cta,
  .push-permission-cta,
  .push-permission-help {
    display: none !important;
  }
  .app-shell {
    display: block !important;
  }
  .card {
    color: #111 !important;
    border: 1px solid #bbb !important;
    background: #fff !important;
    box-shadow: none !important;
  }
}