/*
 * AIMAX Ultra Glass
 * Capa visual clara inspirada en la referencia azul, violeta, lavanda, cian y rosa.
 * No modifica estructura, navegación ni comportamiento de la plataforma.
 */

:root,
html[data-theme="dark"],
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7ff;
  --panel: rgba(255, 255, 255, .58);
  --panel2: rgba(246, 249, 255, .56);
  --line: rgba(255, 255, 255, .76);
  --text: #17245a;
  --muted: #64729a;
  --cyan: #67ccfa;
  --blue: #3151ea;
  --purple: #7369f4;
  --lavender: #b09ff4;
  --pearl: #f3cff8;
  --danger: #e84e85;
  --warning: #e59a32;
  --ok: #21a997;
  --glass: rgba(255, 255, 255, .52);
  --glass-strong: rgba(255, 255, 255, .70);
  --glass-edge: rgba(255, 255, 255, .88);
  --glass-shadow: 0 26px 70px rgba(57, 70, 165, .18),
                  0 8px 24px rgba(67, 92, 236, .10),
                  inset 0 1px 0 rgba(255, 255, 255, .98),
                  inset 0 -1px 0 rgba(106, 124, 229, .10);
  --glass-shadow-hover: 0 32px 84px rgba(57, 70, 165, .24),
                        0 12px 34px rgba(49, 81, 234, .16),
                        inset 0 1px 0 rgba(255, 255, 255, 1),
                        inset 0 -1px 0 rgba(106, 124, 229, .12);
  --hero-gradient: linear-gradient(128deg, #3151ea 0%, #435cec 26%, #7369f4 51%, #8b8bf4 68%, #67ccfa 87%, #f3cff8 118%);
  --shadow: var(--glass-shadow);
}

html {
  background: #eef3ff;
}

html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  color: var(--text);
  background-color: #f4f7ff;
  background-image:
    radial-gradient(circle at 9% 12%, rgba(176, 159, 244, .78) 0, rgba(176, 159, 244, .24) 18%, transparent 39%),
    radial-gradient(circle at 88% 8%, rgba(103, 204, 250, .72) 0, rgba(103, 204, 250, .20) 18%, transparent 38%),
    radial-gradient(circle at 82% 86%, rgba(243, 207, 248, .88) 0, rgba(243, 207, 248, .23) 21%, transparent 43%),
    radial-gradient(circle at 26% 92%, rgba(49, 81, 234, .28) 0, rgba(139, 139, 244, .13) 24%, transparent 45%),
    linear-gradient(145deg, #f9fbff 0%, #edf3ff 40%, #f8f1ff 74%, #eefaff 100%);
  background-attachment: fixed;
}

html body::before,
html body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  opacity: 1;
  filter: none;
}

html body::before {
  width: clamp(250px, 31vw, 520px);
  height: clamp(250px, 31vw, 520px);
  left: -9vw;
  top: 16vh;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.98) 0 8%, rgba(156,199,245,.88) 22%, rgba(139,139,244,.64) 48%, rgba(67,92,236,.16) 69%, transparent 72%);
  box-shadow: inset -38px -44px 70px rgba(49,81,234,.24), inset 22px 18px 42px rgba(255,255,255,.72), 0 42px 90px rgba(67,92,236,.20);
  transform: translateZ(0);
}

html body::after {
  width: clamp(210px, 27vw, 440px);
  height: clamp(210px, 27vw, 440px);
  right: -7vw;
  bottom: -7vh;
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0 8%, rgba(243,207,248,.94) 26%, rgba(176,159,244,.68) 50%, rgba(103,204,250,.23) 70%, transparent 73%);
  box-shadow: inset -32px -38px 62px rgba(115,105,244,.20), inset 20px 18px 36px rgba(255,255,255,.75), 0 38px 90px rgba(115,105,244,.18);
}

.app-shell,
.login-shell {
  position: relative;
  z-index: 1;
}

/* Navegación de vidrio */
.sidebar {
  background: linear-gradient(155deg, rgba(255,255,255,.74), rgba(242,246,255,.48)) !important;
  border-right: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: 18px 0 55px rgba(66,82,174,.13), inset -1px 0 rgba(100,118,220,.08) !important;
  -webkit-backdrop-filter: blur(34px) saturate(185%);
  backdrop-filter: blur(34px) saturate(185%);
}

.sidebar::before {
  background:
    radial-gradient(circle at 16% 8%, rgba(103,204,250,.24), transparent 32%),
    radial-gradient(circle at 90% 44%, rgba(176,159,244,.22), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.32), transparent 45%) !important;
}

.brand {
  border-color: rgba(116,105,244,.13) !important;
}

.brand img,
.logo-large {
  padding: 5px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(49,81,234,.88), rgba(115,105,244,.76), rgba(103,204,250,.70));
  box-shadow: 0 10px 25px rgba(49,81,234,.20), inset 0 1px rgba(255,255,255,.64);
  filter: drop-shadow(0 4px 10px rgba(74,67,170,.12));
}

.brand strong,
.topbar h1,
.section-head h2,
.card h2,
.card h3 {
  color: #18265b;
}

.brand small,
.topbar .sub,
.muted,
.metric span,
.section-head p {
  color: var(--muted) !important;
}

.nav .label {
  color: #6f75a5 !important;
}

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

.nav a:hover,
.nav a.active,
html[data-theme="light"] .nav a:hover,
html[data-theme="light"] .nav a.active,
html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .nav a.active {
  color: #243382;
  border-color: rgba(255,255,255,.92);
  background: linear-gradient(132deg, rgba(255,255,255,.80), rgba(156,199,245,.34) 48%, rgba(176,159,244,.34));
  box-shadow: 0 13px 28px rgba(67,92,236,.15), inset 0 1px rgba(255,255,255,1), inset 0 -1px rgba(115,105,244,.10);
}

.nav .ico {
  color: #435cec;
  filter: drop-shadow(0 5px 8px rgba(49,81,234,.22));
}

.sidebar-foot {
  border-color: rgba(116,105,244,.15);
}

.user-mini,
html[data-theme="light"] .user-mini,
html[data-theme="dark"] .user-mini {
  color: #17245a;
  border-color: rgba(255,255,255,.88);
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(208,196,248,.30));
  box-shadow: 0 14px 28px rgba(67,92,236,.10), inset 0 1px rgba(255,255,255,.96);
}

.logout-link,
html[data-theme="light"] .logout-link,
html[data-theme="dark"] .logout-link {
  color: #435cec !important;
}

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

.topbar,
html[data-theme="light"] .topbar,
html[data-theme="dark"] .topbar {
  color: #17245a;
  border-color: rgba(255,255,255,.84);
  background: linear-gradient(120deg, rgba(255,255,255,.74), rgba(246,248,255,.44));
  box-shadow: 0 14px 38px rgba(66,82,174,.10), inset 0 -1px rgba(115,105,244,.08);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  backdrop-filter: blur(28px) saturate(185%);
}

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

/* Superficies Ultra Glass */
.card,
.metric-grid > .metric,
html[data-theme="light"] .card,
html[data-theme="dark"] .card,
html[data-theme="light"] .metric-grid > .metric,
html[data-theme="dark"] .metric-grid > .metric {
  color: #17245a;
  border: 1px solid var(--glass-edge);
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.34) 56%, rgba(208,196,248,.18)),
    radial-gradient(circle at 90% 10%, rgba(103,204,250,.16), transparent 38%);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(30px) saturate(185%);
  backdrop-filter: blur(30px) saturate(185%);
}

.metric,
.template-card,
.mini-item,
.note,
.renewal-client-card,
.storage-metric,
.notify-kpi,
.push-admin-metric,
.manual-readiness-item {
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
  transform: translateZ(0);
}

.metric:hover,
.template-card:hover,
.mini-item:hover,
.note:hover,
.renewal-client-card:hover,
.storage-metric:hover,
.notify-kpi:hover,
.push-admin-metric:hover,
.manual-readiness-item:hover {
  transform: translateY(-5px) scale(1.008);
  border-color: rgba(255,255,255,1) !important;
  box-shadow: var(--glass-shadow-hover) !important;
}

.metric strong,
html[data-theme="light"] .metric strong,
html[data-theme="dark"] .metric strong {
  color: #243ba8;
  background: linear-gradient(110deg, #253fbf, #7369f4 54%, #338dd6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric strong.kpi-accent,
.kpi-accent {
  color: #197f98 !important;
  -webkit-text-fill-color: currentColor !important;
}

.metric strong.due,
.due {
  color: #a96a18 !important;
  -webkit-text-fill-color: currentColor !important;
}

.metric strong.late,
.late {
  color: #c83a6c !important;
  -webkit-text-fill-color: currentColor !important;
}

.mini-item,
.note,
.mobile-template-shortcut,
.notify-status,
.push-admin-health,
.notify-checks > div,
.notify-cron,
.renewal-smart-strip,
.manual-notify-toggle,
.manual-schedule-block,
.manual-readiness-item,
.storage-activity-grid div,
.storage-inventory-grid div,
.storage-cost-breakdown span,
.storage-checklist li {
  color: #263568 !important;
  border-color: rgba(255,255,255,.86) !important;
  background: linear-gradient(140deg, rgba(255,255,255,.62), rgba(219,237,249,.30), rgba(208,196,248,.20)) !important;
  box-shadow: 0 13px 30px rgba(67,92,236,.10), inset 0 1px rgba(255,255,255,.96) !important;
}

/* Hero central: misma mezcla viva de la referencia */
.hero,
.notify-hero,
.push-admin-hero,
.storage-hero,
.renewal-center-hero,
.manual-settings-hero {
  color: #fff;
  border: 1px solid rgba(255,255,255,.72) !important;
  background:
    radial-gradient(circle at 87% 20%, rgba(255,255,255,.50) 0 3%, rgba(103,204,250,.34) 10%, transparent 27%),
    radial-gradient(circle at 74% 86%, rgba(243,207,248,.45), transparent 31%),
    var(--hero-gradient) !important;
  box-shadow: 0 30px 78px rgba(49,81,234,.28), 0 10px 28px rgba(115,105,244,.18), inset 0 1px rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

.hero::before,
.storage-hero::before {
  background: #f3cff8 !important;
  opacity: .34 !important;
  filter: blur(86px) !important;
}

.hero::after,
.notify-hero::after,
.push-admin-hero::after {
  background: radial-gradient(circle, rgba(255,255,255,.72), rgba(103,204,250,.34) 30%, rgba(176,159,244,.18) 57%, transparent 72%) !important;
  opacity: 1 !important;
}

.hero h2,
.hero h3,
.notify-hero h2,
.push-admin-hero h2,
.storage-hero h2,
.renewal-center-hero h2,
.manual-settings-hero h2 {
  color: #fff !important;
  text-shadow: 0 4px 22px rgba(31,41,130,.22);
}

.hero p,
.hero:not(.renewal-alert) p,
.notify-hero p,
.push-admin-hero p,
.storage-hero p,
.renewal-center-hero p,
.manual-settings-hero p {
  color: rgba(255,255,255,.88) !important;
}

.hero .tag,
.notify-kicker,
.push-admin-eyebrow,
.storage-eyebrow,
.renewal-center-eyebrow,
.manual-settings-eyebrow {
  color: #fff !important;
  border-color: rgba(255,255,255,.62) !important;
  background: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 8px 22px rgba(31,41,130,.10);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
}

.hero .mini-item,
.notify-status,
.push-admin-health,
.storage-state,
.storage-orbit {
  color: #fff !important;
  border-color: rgba(255,255,255,.48) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.12)) !important;
  box-shadow: 0 16px 34px rgba(35,44,131,.15), inset 0 1px rgba(255,255,255,.54) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

.hero .mini-item span,
.notify-status small,
.push-admin-health small,
.push-admin-health p,
.storage-orbit small,
.storage-sync {
  color: rgba(255,255,255,.78) !important;
}

.renewal-alert {
  border: 1px solid rgba(255,255,255,.75) !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.52), transparent 22%),
    linear-gradient(125deg, #435cec, #7369f4 48%, #b09ff4 74%, #f0bce9) !important;
  box-shadow: 0 28px 74px rgba(115,105,244,.27), inset 0 1px rgba(255,255,255,.8) !important;
}

.renewal-alert .tag {
  color: #fff !important;
  border-color: rgba(255,255,255,.62) !important;
  background: rgba(255,255,255,.20) !important;
}

/* Botones: vidrio, reflejo y respuesta 3D */
.btn,
html[data-theme="light"] .btn,
html[data-theme="dark"] .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #26377e;
  border: 1px solid rgba(255,255,255,.90);
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(208,196,248,.30));
  box-shadow: 0 11px 25px rgba(67,92,236,.14), inset 0 1px rgba(255,255,255,1), inset 0 -1px rgba(115,105,244,.12);
  -webkit-backdrop-filter: blur(17px) saturate(185%);
  backdrop-filter: blur(17px) saturate(185%);
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, border-color .24s ease, filter .24s ease;
}

.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  background: linear-gradient(108deg, transparent 16%, rgba(255,255,255,.78) 42%, rgba(255,255,255,.16) 56%, transparent 76%);
  transform: translateX(-145%) skewX(-18deg);
  transition: transform .58s cubic-bezier(.2,.75,.25,1);
  pointer-events: none;
}

.btn:hover {
  color: #1c2f86;
  border-color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(176,159,244,.34));
  transform: translateY(-3px) scale(1.018);
  box-shadow: 0 18px 34px rgba(67,92,236,.21), inset 0 1px rgba(255,255,255,1), inset 0 -1px rgba(115,105,244,.15);
}

.btn:hover::before {
  transform: translateX(145%) skewX(-18deg);
}

.btn:active {
  transform: translateY(1px) scale(.982);
  box-shadow: 0 6px 15px rgba(67,92,236,.14), inset 0 2px 5px rgba(68,77,160,.12);
  transition-duration: .08s;
}

.btn.primary,
.btn.green,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.green,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn.green {
  color: #fff;
  -webkit-text-fill-color: currentColor;
  border-color: rgba(255,255,255,.62);
  background: linear-gradient(125deg, rgba(49,81,234,.94), rgba(115,105,244,.90) 54%, rgba(103,204,250,.88));
  box-shadow: 0 16px 34px rgba(49,81,234,.27), inset 0 1px rgba(255,255,255,.57), inset 0 -1px rgba(31,41,130,.14);
}

.btn.primary:hover,
.btn.green:hover {
  color: #fff;
  filter: saturate(1.08) brightness(1.05);
  box-shadow: 0 22px 44px rgba(49,81,234,.34), 0 0 26px rgba(103,204,250,.22), inset 0 1px rgba(255,255,255,.72);
}

.btn.warning {
  color: #86520e !important;
  border-color: rgba(255,255,255,.9) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,224,174,.60)) !important;
}

.btn.danger {
  color: #b32d60 !important;
  border-color: rgba(255,255,255,.9) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(247,198,220,.62)) !important;
}

/* Formularios, tablas y estados */
.input,
.select,
.textarea,
html[data-theme="light"] .input,
html[data-theme="light"] .select,
html[data-theme="light"] .textarea,
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea {
  color: #1d2c68;
  border: 1px solid rgba(255,255,255,.92);
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(237,242,255,.44));
  box-shadow: inset 0 1px 3px rgba(67,92,236,.08), 0 9px 20px rgba(67,92,236,.08);
  -webkit-backdrop-filter: blur(15px) saturate(170%);
  backdrop-filter: blur(15px) saturate(170%);
}

.input::placeholder,
.textarea::placeholder {
  color: #8b95b6;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: rgba(67,92,236,.58);
  box-shadow: 0 0 0 4px rgba(139,139,244,.18), 0 12px 28px rgba(67,92,236,.12);
}

.field span,
.table th,
html[data-theme="light"] .field span,
html[data-theme="dark"] .field span,
html[data-theme="light"] .table th,
html[data-theme="dark"] .table th {
  color: #65719b;
}

.table,
.table tr,
.table td,
html[data-theme="light"] .table tr,
html[data-theme="dark"] .table tr {
  color: #263568;
}

.table th {
  border-color: rgba(115,105,244,.13);
}

.table td,
html[data-theme="light"] .table td,
html[data-theme="dark"] .table td {
  border-color: rgba(115,105,244,.11);
}

.table tr:hover td,
html[data-theme="light"] .table tr:hover td,
html[data-theme="dark"] .table tr:hover td {
  background: rgba(208,196,248,.18);
}

.pill,
html[data-theme="light"] .pill,
html[data-theme="dark"] .pill {
  color: #4d5c8a;
  border-color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.52);
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 6px 15px rgba(67,92,236,.08);
}

.pill.active,
.pill.sent,
html[data-theme="light"] .pill.active,
html[data-theme="dark"] .pill.active {
  color: #176f85;
  border-color: rgba(103,204,250,.54);
  background: rgba(219,244,255,.72);
}

.pill.pending,
.pill.prepared {
  color: #8a5d17;
  border-color: rgba(239,188,98,.52);
  background: rgba(255,243,213,.72);
}

.pill.suspended,
.pill.failed,
.pill.expired {
  color: #b42f62;
  border-color: rgba(232,78,133,.36);
  background: rgba(255,231,241,.76);
}

.flash,
.storage-alert,
.push-admin-alert {
  box-shadow: 0 12px 28px rgba(67,92,236,.10), inset 0 1px rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
}

.flash.success,
.storage-alert.healthy {
  color: #166e74 !important;
  border-color: rgba(103,204,250,.55) !important;
  background: rgba(221,247,255,.72) !important;
}

.flash.error,
.storage-alert.critical {
  color: #a92d5c !important;
  border-color: rgba(232,78,133,.38) !important;
  background: rgba(255,228,240,.76) !important;
}

.flash.info,
.storage-alert.warning {
  color: #5c4da2 !important;
  border-color: rgba(176,159,244,.48) !important;
  background: rgba(237,232,255,.76) !important;
}

.empty,
html[data-theme="light"] .empty,
html[data-theme="dark"] .empty {
  color: #69769d;
  border-color: rgba(115,105,244,.25);
  background: rgba(255,255,255,.26);
}

/* Accesos */
.login-page {
  overflow-x: hidden;
}

.login-copy h1 {
  color: #17245a;
  text-shadow: 0 7px 26px rgba(67,92,236,.12);
}

.login-copy p {
  color: #58688f;
}

.login-card {
  position: relative;
  transform: perspective(1100px) rotateY(-1.4deg) translateZ(0);
  border-radius: 28px;
  box-shadow: 0 38px 95px rgba(49,81,234,.24), 0 14px 34px rgba(115,105,244,.14), inset 0 1px rgba(255,255,255,1) !important;
}

.login-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -24px;
  top: -25px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(103,204,250,.26), rgba(176,159,244,.34));
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: 0 22px 48px rgba(67,92,236,.16), inset 0 1px rgba(255,255,255,.94);
  transform: rotate(18deg);
  pointer-events: none;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.login-card > * {
  position: relative;
  z-index: 1;
}

.login-card .hint {
  color: #727da4;
}

/* Componentes especiales y ventanas */
.template-card img,
.project-thumb {
  background: rgba(238,243,255,.74) !important;
}

.brand-preview {
  border-color: rgba(115,105,244,.28) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.58), rgba(208,196,248,.28), rgba(103,204,250,.20)) !important;
}

.storage-progress {
  border-color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.48) !important;
  box-shadow: inset 0 2px 6px rgba(67,92,236,.10);
}

.storage-progress i {
  background: linear-gradient(90deg, #3151ea, #7369f4 54%, #67ccfa) !important;
  box-shadow: 0 0 16px rgba(103,204,250,.42);
}

.storage-migration-card,
.manual-scheduler-notice,
.push-admin-alert,
.notify-guide {
  color: #263568 !important;
  border-color: rgba(255,255,255,.88) !important;
  background: linear-gradient(130deg, rgba(255,255,255,.68), rgba(208,196,248,.30), rgba(103,204,250,.18)) !important;
  box-shadow: var(--glass-shadow) !important;
}

.storage-migration-card p,
.manual-scheduler-notice p,
.push-admin-alert p,
.notify-guide,
.notify-guide b {
  color: #5e6d95 !important;
}

.storage-card-head small,
.storage-eyebrow:not(.storage-hero .storage-eyebrow) {
  color: #5266c5;
}

.notify-kpi,
.push-admin-metric,
.renewal-client-card,
.manual-settings-card {
  color: #263568 !important;
  border-color: rgba(255,255,255,.90) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(232,237,255,.36)) !important;
  box-shadow: var(--glass-shadow) !important;
}

.notify-kpi-icon,
.push-admin-metric-icon,
.push-admin-panel-icon,
.manual-settings-number,
.renewal-client-avatar {
  color: #435cec !important;
  border-color: rgba(255,255,255,.9) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(156,199,245,.34), rgba(176,159,244,.28)) !important;
  box-shadow: 0 10px 23px rgba(67,92,236,.13), inset 0 1px #fff;
}

.pwa-install-cta,
.push-permission-cta,
html[data-theme="light"] .pwa-install-cta,
html[data-theme="dark"] .pwa-install-cta {
  color: #17245a;
  border-color: rgba(255,255,255,.90);
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(226,233,255,.62), rgba(243,207,248,.34));
  box-shadow: 0 28px 74px rgba(49,81,234,.24), inset 0 1px #fff;
  -webkit-backdrop-filter: blur(30px) saturate(185%);
  backdrop-filter: blur(30px) saturate(185%);
}

.pwa-install-copy .eyebrow,
.pwa-install-copy b,
.push-permission-cta b {
  color: #243ba8;
}

.pwa-install-copy .description,
.push-permission-cta span {
  color: #627198;
}

.pwa-install-icon {
  border-color: rgba(255,255,255,.88);
  background: linear-gradient(135deg, #3151ea, #7369f4, #67ccfa);
}

.pwa-install-help,
.app-dialog-backdrop {
  background: rgba(48,56,116,.22);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

.pwa-install-help-card,
.app-dialog,
html[data-theme="light"] .pwa-install-help-card,
html[data-theme="dark"] .pwa-install-help-card,
html[data-theme="light"] .app-dialog,
html[data-theme="dark"] .app-dialog {
  color: #17245a;
  border-color: rgba(255,255,255,.92);
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(235,240,255,.70), rgba(243,207,248,.30));
  box-shadow: 0 38px 100px rgba(49,81,234,.28), inset 0 1px #fff;
  -webkit-backdrop-filter: blur(34px) saturate(185%);
  backdrop-filter: blur(34px) saturate(185%);
}

.pwa-install-help-card p,
.app-dialog p,
.app-dialog ul {
  color: #58688f !important;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(67,92,236,.42);
  outline-offset: 3px;
}

@keyframes aimax-glass-enter {
  from { opacity: 0; transform: translateY(12px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.content > .hero,
.content > .grid,
.content > .card,
.content > .section-head,
.storage-page > * {
  animation: aimax-glass-enter .52s cubic-bezier(.2,.8,.2,1) both;
}

.content > :nth-child(2) { animation-delay: .05s; }
.content > :nth-child(3) { animation-delay: .10s; }
.content > :nth-child(4) { animation-delay: .15s; }

@media (max-width: 900px) {
  html body::before {
    left: -44vw;
    top: 18vh;
  }

  html body::after {
    right: -37vw;
    bottom: 2vh;
  }

  .sidebar {
    border-right: 1px solid rgba(255,255,255,.92) !important;
    box-shadow: 24px 0 70px rgba(49,81,234,.22) !important;
  }

  .mobile-backdrop,
  .mobile-backdrop.show {
    background: rgba(47,55,118,.24) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
  }

  .table tr,
  html[data-theme="light"] .table tr,
  html[data-theme="dark"] .table tr {
    border-color: rgba(255,255,255,.90);
    background: linear-gradient(145deg, rgba(255,255,255,.70), rgba(232,237,255,.42));
    box-shadow: 0 15px 34px rgba(67,92,236,.12), inset 0 1px #fff;
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
  }

  .table td::before {
    color: #6976a0 !important;
  }

  .login-card {
    transform: none;
  }

  .card,
  .metric-grid > .metric {
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    backdrop-filter: blur(22px) saturate(165%);
  }
}

@media (max-width: 520px) {
  .login-page {
    padding: 14px;
  }

  .login-card {
    border-radius: 24px;
  }

  .login-card::after {
    width: 68px;
    height: 68px;
    right: -18px;
    top: -19px;
  }
}

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

/*
 * AIMAX Liquid Glass 3.5
 * Vidrio realmente transparente: el color vive detrás de la superficie y no
 * dentro de una tarjeta blanca. Esta capa final sustituye el acabado lechoso
 * sin tocar la estructura ni la lógica existente.
 */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --liquid-fill: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 54%, rgba(176,159,244,.07));
  --liquid-fill-soft: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.025) 58%, rgba(103,204,250,.05));
  --liquid-fill-strong: linear-gradient(145deg, rgba(255,255,255,.27), rgba(255,255,255,.075) 56%, rgba(176,159,244,.09));
  --liquid-edge: rgba(255,255,255,.52);
  --liquid-edge-soft: rgba(255,255,255,.34);
  --liquid-shadow: 0 22px 58px rgba(48,61,151,.16),
                   0 7px 20px rgba(49,81,234,.08),
                   inset 0 1px 0 rgba(255,255,255,.72),
                   inset 1px 0 0 rgba(255,255,255,.30),
                   inset 0 -1px 0 rgba(75,86,175,.12);
  --liquid-shadow-hover: 0 28px 68px rgba(48,61,151,.22),
                         0 10px 28px rgba(49,81,234,.12),
                         inset 0 1px 0 rgba(255,255,255,.86),
                         inset 1px 0 0 rgba(255,255,255,.38),
                         inset 0 -1px 0 rgba(75,86,175,.14);
}

html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
  background-color: #eef3ff;
  background-image:
    radial-gradient(circle at 7% 9%, rgba(142,126,246,.72) 0, rgba(176,159,244,.31) 18%, transparent 42%),
    radial-gradient(circle at 91% 10%, rgba(55,185,247,.68) 0, rgba(103,204,250,.27) 19%, transparent 41%),
    radial-gradient(circle at 78% 82%, rgba(245,151,224,.46) 0, rgba(243,207,248,.30) 22%, transparent 46%),
    radial-gradient(circle at 22% 86%, rgba(49,81,234,.31) 0, rgba(115,105,244,.16) 25%, transparent 48%),
    linear-gradient(145deg, #f8fbff 0%, #e8f0ff 39%, #f6edff 73%, #eafaff 100%);
  background-attachment: scroll !important;
  overflow-x: clip;
}

html,
html[data-theme="light"],
html[data-theme="dark"] {
  overflow-x: clip;
}

html body::before,
html body::after {
  position: absolute;
}

/* El logo conserva exclusivamente sus píxeles transparentes originales. */
html body .brand img,
html body .logo-large,
html[data-theme="light"] body .brand img,
html[data-theme="dark"] body .brand img {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: saturate(1.18) contrast(1.12) !important;
  opacity: 1 !important;
}

html body .sidebar {
  background: linear-gradient(155deg, rgba(255,255,255,.18), rgba(236,243,255,.045)) !important;
  border-right-color: rgba(255,255,255,.50) !important;
  box-shadow: 14px 0 42px rgba(50,66,158,.11), inset -1px 0 rgba(255,255,255,.36) !important;
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.04) !important;
  backdrop-filter: blur(22px) saturate(185%) brightness(1.04) !important;
}

html body .topbar {
  background: linear-gradient(120deg, rgba(255,255,255,.18), rgba(240,245,255,.04)) !important;
  border-color: rgba(255,255,255,.48) !important;
  box-shadow: 0 12px 34px rgba(50,66,158,.10), inset 0 -1px rgba(75,86,175,.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.05) !important;
  backdrop-filter: blur(20px) saturate(190%) brightness(1.05) !important;
}

html body :is(
  .card,
  .metric-grid > .metric,
  .mini-item,
  .note,
  .user-mini,
  .mobile-template-shortcut,
  .notify-status,
  .push-admin-health,
  .notify-checks > div,
  .notify-cron,
  .renewal-smart-strip,
  .manual-notify-toggle,
  .manual-schedule-block,
  .manual-readiness-item,
  .storage-activity-grid div,
  .storage-inventory-grid div,
  .storage-cost-breakdown span,
  .storage-checklist li,
  .storage-migration-card,
  .manual-scheduler-notice,
  .push-admin-alert,
  .notify-guide,
  .renewal-client-card,
  .storage-metric,
  .notify-kpi,
  .push-admin-metric
) {
  border-color: var(--liquid-edge) !important;
  background: var(--liquid-fill) !important;
  box-shadow: var(--liquid-shadow) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.055) !important;
  backdrop-filter: blur(20px) saturate(190%) brightness(1.055) !important;
}

html body :is(
  .mini-item,
  .note,
  .user-mini,
  .notify-status,
  .push-admin-health,
  .notify-checks > div,
  .notify-cron,
  .storage-activity-grid div,
  .storage-inventory-grid div,
  .storage-cost-breakdown span,
  .storage-checklist li
) {
  background: var(--liquid-fill-soft) !important;
  box-shadow: 0 12px 30px rgba(48,61,151,.09), inset 0 1px rgba(255,255,255,.60), inset 0 -1px rgba(75,86,175,.09) !important;
  -webkit-backdrop-filter: blur(16px) saturate(185%) brightness(1.05) !important;
  backdrop-filter: blur(16px) saturate(185%) brightness(1.05) !important;
}

html body .card.hero,
html body .card.notify-hero,
html body .card.push-admin-hero,
html body .card.storage-hero,
html body .card.renewal-center-hero,
html body .card.manual-settings-hero,
html body .card.renewal-alert,
html body :is(.notify-hero,.push-admin-hero,.storage-hero,.renewal-center-hero,.manual-settings-hero,.renewal-alert) {
  color: #fff !important;
  border-color: rgba(255,255,255,.52) !important;
  background:
    radial-gradient(circle at 87% 17%, rgba(255,255,255,.34) 0 3%, rgba(103,204,250,.17) 11%, transparent 31%),
    radial-gradient(circle at 76% 88%, rgba(243,207,248,.24), transparent 36%),
    linear-gradient(128deg, rgba(49,81,234,.58), rgba(67,92,236,.47) 27%, rgba(115,105,244,.39) 53%, rgba(103,204,250,.30) 85%, rgba(243,207,248,.22) 118%) !important;
  box-shadow: 0 25px 66px rgba(49,81,234,.20), 0 8px 24px rgba(115,105,244,.12), inset 0 1px rgba(255,255,255,.64), inset 0 -1px rgba(38,48,137,.14) !important;
  -webkit-backdrop-filter: blur(21px) saturate(195%) brightness(1.04) !important;
  backdrop-filter: blur(21px) saturate(195%) brightness(1.04) !important;
}

html body .btn,
html[data-theme="light"] body .btn,
html[data-theme="dark"] body .btn {
  border-color: rgba(255,255,255,.55) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.31), rgba(255,255,255,.09) 58%, rgba(176,159,244,.13)) !important;
  box-shadow: 0 10px 24px rgba(48,61,151,.12), inset 0 1px rgba(255,255,255,.76), inset 0 -1px rgba(75,86,175,.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(190%) brightness(1.06) !important;
  backdrop-filter: blur(14px) saturate(190%) brightness(1.06) !important;
}

html body .btn:hover {
  background: linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.13) 58%, rgba(176,159,244,.17)) !important;
  box-shadow: var(--liquid-shadow-hover) !important;
}

html body :is(.btn.primary,.btn.green) {
  color: #fff !important;
  background: linear-gradient(125deg, rgba(49,81,234,.82), rgba(115,105,244,.70) 54%, rgba(103,204,250,.61)) !important;
  border-color: rgba(255,255,255,.50) !important;
  box-shadow: 0 15px 34px rgba(49,81,234,.22), inset 0 1px rgba(255,255,255,.62), inset 0 -1px rgba(38,48,137,.15) !important;
}

html body :is(.input,.select,.textarea) {
  border-color: rgba(255,255,255,.56) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.105)) !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.62), 0 8px 20px rgba(48,61,151,.07) !important;
  -webkit-backdrop-filter: blur(14px) saturate(175%) !important;
  backdrop-filter: blur(14px) saturate(175%) !important;
}

html body :is(.pwa-install-cta,.push-permission-cta,.pwa-install-help-card,.app-dialog) {
  border-color: rgba(255,255,255,.58) !important;
  background: var(--liquid-fill-strong) !important;
  box-shadow: 0 28px 78px rgba(48,61,151,.22), inset 0 1px rgba(255,255,255,.76), inset 0 -1px rgba(75,86,175,.12) !important;
  -webkit-backdrop-filter: blur(23px) saturate(190%) brightness(1.05) !important;
  backdrop-filter: blur(23px) saturate(190%) brightness(1.05) !important;
}

html body .login-card::after {
  opacity: .42;
  background: linear-gradient(145deg, rgba(255,255,255,.25), rgba(103,204,250,.10), rgba(176,159,244,.12));
  border-color: rgba(255,255,255,.42);
}

html body .table tr:hover td {
  background: rgba(255,255,255,.11) !important;
}

/* Sin entradas escalonadas: el contenido aparece completo desde el primer frame. */
.content > .hero,
.content > .grid,
.content > .card,
.content > .section-head,
.storage-page > *,
.panel,
.workspace,
.canva-rail {
  animation: none !important;
  animation-delay: 0s !important;
}

/* Las tarjetas fuera de pantalla no se pintan hasta que el usuario se acerca. */
.template-card {
  content-visibility: auto;
  contain-intrinsic-size: 390px 590px;
}

@media (max-width: 900px) {
  html body .sidebar,
  html body .topbar,
  html body :is(.card,.metric-grid > .metric) {
    -webkit-backdrop-filter: blur(17px) saturate(180%) brightness(1.04) !important;
    backdrop-filter: blur(17px) saturate(180%) brightness(1.04) !important;
  }

  html body .table tr {
    border-color: rgba(255,255,255,.45) !important;
    background: var(--liquid-fill-soft) !important;
    box-shadow: 0 12px 28px rgba(48,61,151,.10), inset 0 1px rgba(255,255,255,.58) !important;
    -webkit-backdrop-filter: blur(15px) saturate(175%) !important;
    backdrop-filter: blur(15px) saturate(175%) !important;
  }
}

/* AIMAX 3.3 · correcciones de superposición, marca y fluidez */
html body.app-modal-open {
  overflow: hidden !important;
}

html body .app-dialog-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100200 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
  overflow: auto !important;
}

html body .app-dialog-backdrop .app-dialog {
  position: relative !important;
  z-index: 1 !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: auto !important;
}

html body .pwa-install-help {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100100 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
}

html body .pwa-install-cta,
html body .push-permission-cta {
  position: fixed !important;
  top: auto !important;
  z-index: 100000 !important;
}

html body .sidebar::before {
  z-index: 0 !important;
}

html body .sidebar > * {
  position: relative;
  z-index: 1;
}

html body .brand,
html body .brand img,
html body .brand strong,
html body .brand small {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.content > .card,
.content > .grid,
.content > .template-grid,
.content > .table-wrap {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

.content > .section-head {
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
}

:where(a, button, [role="button"]) {
  touch-action: manipulation;
}

@media (min-width: 901px) {
  html body .pwa-install-cta,
  html body .push-permission-cta {
    left: auto !important;
    right: 22px !important;
    bottom: 22px !important;
  }
}

@media (max-width: 900px) {
  html body .pwa-install-cta {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
  }

  html body .push-permission-cta {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
  }

  /* El acabado permanece transparente; en móvil se evita desenfocar cada
     tarjeta por separado para reducir repintados y hacer el desplazamiento fluido. */
  html body :is(
    .content .card,
    .content .metric,
    .content .mini-item,
    .content .note,
    .content .table tr,
    .content .renewal-client-card,
    .content .notify-kpi,
    .content .push-admin-metric,
    .content .storage-metric
  ) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body .sidebar {
    will-change: transform;
    -webkit-backdrop-filter: blur(13px) saturate(170%) !important;
    backdrop-filter: blur(13px) saturate(170%) !important;
  }

  html body .topbar {
    -webkit-backdrop-filter: blur(11px) saturate(170%) !important;
    backdrop-filter: blur(11px) saturate(170%) !important;
  }

  html body .app-dialog-backdrop,
  html body .pwa-install-help {
    -webkit-backdrop-filter: blur(10px) saturate(145%) !important;
    backdrop-filter: blur(10px) saturate(145%) !important;
  }

  html body .app-dialog,
  html body .pwa-install-cta,
  html body .pwa-install-help-card {
    -webkit-backdrop-filter: blur(14px) saturate(175%) !important;
    backdrop-filter: blur(14px) saturate(175%) !important;
  }

  html body::before,
  html body::after {
    opacity: .62;
  }
}

/* ==============================================================
 * AIMAX Partners · Emerald Green 3.4.0
 * Paleta inspirada en la referencia verde enviada por el usuario.
 * Solo modifica presentación; no toca estructura ni lógica.
 * ============================================================== */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  color-scheme: dark !important;
  --bg: #061611;
  --panel: rgba(10, 39, 30, .72);
  --panel2: rgba(14, 50, 39, .68);
  --line: rgba(109, 207, 169, .18);
  --text: #f4fbf8;
  --muted: #98b5aa;
  --cyan: #50ddb0;
  --blue: #26b985;
  --purple: #1f936c;
  --lavender: #66d9ad;
  --pearl: #b7f3da;
  --ok: #49d7a4;
  --glass: rgba(10, 48, 37, .50);
  --glass-strong: rgba(14, 62, 47, .66);
  --glass-edge: rgba(128, 225, 186, .22);
  --glass-shadow: 0 26px 70px rgba(0, 10, 7, .42), 0 8px 24px rgba(4, 37, 27, .30), inset 0 1px 0 rgba(214, 255, 237, .09), inset 0 -1px 0 rgba(0, 0, 0, .16);
  --glass-shadow-hover: 0 30px 82px rgba(0, 8, 6, .52), 0 12px 34px rgba(23, 126, 91, .18), inset 0 1px 0 rgba(214, 255, 237, .14), inset 0 -1px 0 rgba(0, 0, 0, .18);
  --hero-gradient: linear-gradient(128deg, #08271e 0%, #0c3f30 34%, #105440 66%, #17664e 100%);
  --liquid-fill: linear-gradient(145deg, rgba(26, 92, 69, .30), rgba(6, 27, 21, .42) 56%, rgba(39, 151, 111, .13));
  --liquid-fill-soft: linear-gradient(145deg, rgba(22, 77, 59, .27), rgba(6, 27, 21, .36) 58%, rgba(49, 166, 123, .09));
  --liquid-fill-strong: linear-gradient(145deg, rgba(29, 105, 78, .40), rgba(7, 32, 25, .48) 56%, rgba(60, 186, 139, .16));
  --liquid-edge: rgba(128, 225, 186, .20);
  --liquid-edge-soft: rgba(128, 225, 186, .14);
  --liquid-shadow: 0 22px 58px rgba(0, 9, 7, .40), 0 7px 20px rgba(4, 45, 32, .25), inset 0 1px 0 rgba(210,255,236,.10), inset 1px 0 0 rgba(210,255,236,.04), inset 0 -1px 0 rgba(0,0,0,.18);
  --liquid-shadow-hover: 0 28px 68px rgba(0, 8, 6, .50), 0 10px 28px rgba(24, 130, 94, .20), inset 0 1px 0 rgba(210,255,236,.16), inset 1px 0 0 rgba(210,255,236,.06), inset 0 -1px 0 rgba(0,0,0,.20);
}

html,
html[data-theme="light"],
html[data-theme="dark"] {
  background: #061611 !important;
}

html body,
html[data-theme="light"] body,
html[data-theme="dark"] body {
  color: var(--text) !important;
  background-color: #061611 !important;
  background-image:
    radial-gradient(circle at 82% 7%, rgba(31, 112, 82, .68) 0, rgba(17, 75, 55, .34) 18%, transparent 40%),
    radial-gradient(circle at 8% 84%, rgba(18, 92, 66, .42) 0, rgba(9, 52, 38, .22) 22%, transparent 44%),
    radial-gradient(circle at 74% 86%, rgba(42, 155, 113, .18) 0, transparent 34%),
    linear-gradient(145deg, #04100d 0%, #071c16 42%, #0b2a20 74%, #061913 100%) !important;
  background-attachment: fixed !important;
}

html body::before,
html body::after {
  position: fixed !important;
  filter: blur(38px) !important;
}
html body::before {
  background: radial-gradient(circle, rgba(57, 205, 153, .28) 0, rgba(22, 114, 82, .16) 42%, transparent 72%) !important;
  box-shadow: none !important;
  opacity: .78 !important;
}
html body::after {
  background: radial-gradient(circle, rgba(37, 151, 109, .24) 0, rgba(13, 81, 58, .13) 45%, transparent 73%) !important;
  box-shadow: none !important;
  opacity: .70 !important;
}

html body .sidebar {
  background: linear-gradient(180deg, rgba(5, 27, 20, .94), rgba(4, 19, 15, .96)) !important;
  border-right-color: rgba(111, 213, 173, .14) !important;
  box-shadow: 18px 0 52px rgba(0,0,0,.32), inset -1px 0 rgba(145, 235, 199, .05) !important;
}
html body .sidebar::before {
  background: radial-gradient(circle at 16% 8%, rgba(56, 208, 154, .12), transparent 34%), linear-gradient(145deg, rgba(91, 219, 169, .04), transparent 48%) !important;
}
html body .topbar {
  color: #f4fbf8 !important;
  border-color: rgba(112, 216, 174, .13) !important;
  background: linear-gradient(120deg, rgba(8, 39, 30, .86), rgba(5, 25, 19, .76)) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 -1px rgba(116, 222, 179, .04) !important;
}

html body .brand strong,
html body .topbar h1,
html body .section-head h2,
html body .card h2,
html body .card h3,
html body .login-copy h1 {
  color: #f5fcf9 !important;
}
html body .brand small,
html body .topbar .sub,
html body .muted,
html body .metric span,
html body .section-head p,
html body .login-copy p,
html body .login-card .hint,
html body .field span,
html body .table th {
  color: #91ada2 !important;
}
html body .nav .label { color: #688c7e !important; }
html body .nav a { color: #9ab7ac !important; }
html body .nav a:hover,
html body .nav a.active {
  color: #f8fffc !important;
  border-color: rgba(104, 221, 174, .20) !important;
  background: linear-gradient(135deg, rgba(21, 79, 60, .70), rgba(12, 51, 39, .82)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24), inset 0 1px rgba(170,255,220,.07) !important;
}
html body .nav .ico { color: #43d49f !important; filter: drop-shadow(0 4px 9px rgba(48, 205, 150, .20)) !important; }
html body .sidebar-foot { border-color: rgba(112, 216, 174, .12) !important; }
html body .user-mini {
  color: #eff9f5 !important;
  border-color: rgba(111, 216, 173, .17) !important;
  background: linear-gradient(145deg, rgba(18, 66, 51, .58), rgba(7, 33, 25, .72)) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.24), inset 0 1px rgba(187,255,228,.06) !important;
}
html body .logout-link { color: #7be2b8 !important; }
html body button.logout-link { color: #ff9cb4 !important; }

html body :is(
  .card,
  .metric-grid > .metric,
  .mini-item,
  .note,
  .user-mini,
  .mobile-template-shortcut,
  .notify-status,
  .push-admin-health,
  .notify-checks > div,
  .notify-cron,
  .renewal-smart-strip,
  .manual-notify-toggle,
  .manual-schedule-block,
  .manual-readiness-item,
  .storage-activity-grid div,
  .storage-inventory-grid div,
  .storage-cost-breakdown span,
  .storage-checklist li,
  .storage-migration-card,
  .manual-scheduler-notice,
  .push-admin-alert,
  .notify-guide,
  .notify-kpi,
  .push-admin-metric,
  .renewal-client-card,
  .manual-settings-card
) {
  color: #eef8f4 !important;
  border-color: var(--liquid-edge) !important;
  background: var(--liquid-fill) !important;
  box-shadow: var(--liquid-shadow) !important;
}
html body :is(
  .mini-item,.note,.mobile-template-shortcut,.notify-status,.push-admin-health,
  .notify-checks > div,.notify-cron,.renewal-smart-strip,.manual-notify-toggle,
  .manual-schedule-block,.manual-readiness-item,.storage-activity-grid div,
  .storage-inventory-grid div,.storage-cost-breakdown span,.storage-checklist li
) {
  background: var(--liquid-fill-soft) !important;
}
html body :is(.storage-migration-card p,.manual-scheduler-notice p,.push-admin-alert p,.notify-guide,.notify-guide b) { color: #9db9ae !important; }

html body .metric strong,
html[data-theme="light"] body .metric strong,
html[data-theme="dark"] body .metric strong {
  color: #ffffff !important;
  background: linear-gradient(105deg, #ffffff 0%, #bcf6dc 48%, #52dba9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html body .kpi-accent { color: #61dfb0 !important; -webkit-text-fill-color: currentColor !important; }
html body .due { color: #f1bd68 !important; -webkit-text-fill-color: currentColor !important; }
html body .late { color: #ff8fa8 !important; -webkit-text-fill-color: currentColor !important; }

html body .card.hero,
html body .card.notify-hero,
html body .card.push-admin-hero,
html body .card.storage-hero,
html body .card.renewal-center-hero,
html body .card.manual-settings-hero,
html body .hero,
html body .notify-hero,
html body .push-admin-hero,
html body .storage-hero,
html body .renewal-center-hero,
html body .manual-settings-hero {
  color: #fff !important;
  border-color: rgba(125, 230, 188, .22) !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(117, 235, 187, .16), transparent 28%),
    radial-gradient(circle at 72% 92%, rgba(48, 168, 122, .13), transparent 34%),
    var(--hero-gradient) !important;
  box-shadow: 0 28px 72px rgba(0,0,0,.42), 0 8px 26px rgba(13, 93, 67, .22), inset 0 1px rgba(197,255,232,.08) !important;
}
html body :is(.hero,.notify-hero,.push-admin-hero,.storage-hero,.renewal-center-hero,.manual-settings-hero) :is(h1,h2,h3) { color:#fff !important; text-shadow: 0 4px 20px rgba(0,0,0,.28) !important; }
html body :is(.hero,.notify-hero,.push-admin-hero,.storage-hero,.renewal-center-hero,.manual-settings-hero) p { color: rgba(231, 250, 242, .82) !important; }
html body :is(.hero .tag,.notify-kicker,.push-admin-eyebrow,.storage-eyebrow,.renewal-center-eyebrow,.manual-settings-eyebrow) {
  color: #dff8ee !important;
  border-color: rgba(137, 235, 196, .23) !important;
  background: rgba(38, 125, 94, .24) !important;
}
html body .hero .mini-item,
html body .notify-status,
html body .push-admin-health,
html body .storage-state,
html body .storage-orbit {
  color: #f4fcf9 !important;
  border-color: rgba(137,235,196,.18) !important;
  background: linear-gradient(135deg, rgba(32, 104, 79, .38), rgba(7, 35, 27, .46)) !important;
  box-shadow: 0 15px 32px rgba(0,0,0,.22), inset 0 1px rgba(207,255,237,.06) !important;
}
html body .hero .mini-item span,
html body .notify-status small,
html body .push-admin-health small,
html body .push-admin-health p,
html body .storage-orbit small,
html body .storage-sync { color: rgba(218,244,233,.72) !important; }

/* La alerta de renovaciones mantiene semántica ámbar, pero integrada al tema. */
html body .renewal-alert,
html body .card.renewal-alert {
  border-color: rgba(245, 190, 92, .40) !important;
  background: radial-gradient(circle at 86% 18%, rgba(255,218,145,.13), transparent 28%), linear-gradient(125deg, #32210b, #2a2712 52%, #153a2b 100%) !important;
  box-shadow: 0 26px 68px rgba(0,0,0,.42), 0 0 0 1px rgba(245,190,92,.07) !important;
}

html body .btn,
html[data-theme="light"] body .btn,
html[data-theme="dark"] body .btn {
  color: #d9eee6 !important;
  border-color: rgba(116, 216, 176, .20) !important;
  background: linear-gradient(145deg, rgba(21, 76, 58, .60), rgba(7, 34, 26, .72)) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px rgba(197,255,232,.06), inset 0 -1px rgba(0,0,0,.15) !important;
}
html body .btn:hover {
  color: #fff !important;
  border-color: rgba(110, 227, 181, .34) !important;
  background: linear-gradient(145deg, rgba(27, 97, 73, .72), rgba(10, 48, 36, .82)) !important;
  box-shadow: var(--liquid-shadow-hover) !important;
}
html body :is(.btn.primary,.btn.green) {
  color: #ffffff !important;
  border-color: rgba(142, 238, 198, .30) !important;
  background: linear-gradient(128deg, #157352 0%, #1d9a6d 52%, #2bc68d 100%) !important;
  box-shadow: 0 15px 34px rgba(0,0,0,.28), 0 0 28px rgba(40, 184, 132, .10), inset 0 1px rgba(218,255,239,.14) !important;
}
html body :is(.btn.primary,.btn.green):hover {
  background: linear-gradient(128deg, #18825d 0%, #21aa78 52%, #35d59a 100%) !important;
  box-shadow: 0 20px 42px rgba(0,0,0,.34), 0 0 30px rgba(54, 214, 155, .15), inset 0 1px rgba(228,255,244,.18) !important;
}

html body :is(.input,.select,.textarea),
html[data-theme="light"] body :is(.input,.select,.textarea),
html[data-theme="dark"] body :is(.input,.select,.textarea) {
  color: #eff9f5 !important;
  border-color: rgba(111, 216, 173, .18) !important;
  background: linear-gradient(145deg, rgba(7, 34, 26, .78), rgba(13, 54, 41, .62)) !important;
  box-shadow: inset 0 1px 2px rgba(198,255,232,.04), 0 8px 20px rgba(0,0,0,.16) !important;
}
html body :is(.input,.textarea)::placeholder { color: #6f9184 !important; }
html body :is(.input,.select,.textarea):focus {
  border-color: rgba(70, 211, 155, .58) !important;
  box-shadow: 0 0 0 4px rgba(45, 184, 132, .12), 0 12px 28px rgba(0,0,0,.20) !important;
}
html body .field span,
html body .table th { color: #8fac9f !important; }
html body .table,
html body .table tr,
html body .table td { color: #dceee7 !important; }
html body .table th { border-color: rgba(108, 205, 166, .13) !important; }
html body .table td { border-color: rgba(108, 205, 166, .09) !important; }
html body .table tr:hover td { background: rgba(34, 115, 87, .22) !important; }

html body .pill {
  color: #b6cec4 !important;
  border-color: rgba(112,216,174,.16) !important;
  background: rgba(12, 49, 38, .62) !important;
  box-shadow: inset 0 1px rgba(210,255,238,.04), 0 6px 15px rgba(0,0,0,.17) !important;
}
html body .pill.active,
html body .pill.sent {
  color: #8df0c7 !important;
  border-color: rgba(62, 206, 151, .34) !important;
  background: rgba(11, 79, 56, .62) !important;
}
html body .pill.pending,
html body .pill.prepared {
  color: #f2cb7e !important;
  border-color: rgba(227, 175, 81, .30) !important;
  background: rgba(77, 55, 15, .56) !important;
}
html body .pill.suspended,
html body .pill.failed,
html body .pill.expired {
  color: #ff9eb4 !important;
  border-color: rgba(232, 78, 133, .30) !important;
  background: rgba(82, 22, 43, .52) !important;
}

html body .flash.success,
html body .storage-alert.healthy { color:#9af1cf !important; border-color:rgba(63,207,153,.28)!important; background:rgba(10,74,54,.58)!important; }
html body .flash.error,
html body .storage-alert.critical { color:#ffb2c3 !important; border-color:rgba(232,78,133,.28)!important; background:rgba(79,20,40,.58)!important; }
html body .flash.info,
html body .storage-alert.warning { color:#d6e9e1 !important; border-color:rgba(116,216,176,.20)!important; background:rgba(12,54,41,.64)!important; }
html body .empty { color:#8eaa9f !important; border-color:rgba(107,205,166,.22)!important; background:rgba(7,36,27,.38)!important; }

html body .login-card {
  border-color: rgba(119, 224, 182, .20) !important;
  background: linear-gradient(145deg, rgba(15, 59, 45, .76), rgba(5, 27, 20, .84)) !important;
  box-shadow: 0 38px 95px rgba(0,0,0,.50), 0 14px 34px rgba(13, 102, 73, .22), inset 0 1px rgba(215,255,239,.07) !important;
}
html body .login-card::after {
  opacity: .72 !important;
  background: linear-gradient(145deg, rgba(49, 171, 125, .24), rgba(7, 45, 33, .28)) !important;
  border-color: rgba(127, 226, 187, .16) !important;
  box-shadow: 0 20px 45px rgba(0,0,0,.20) !important;
}

html body .brand-preview,
html body .storage-progress,
html body .pwa-install-cta,
html body .push-permission-cta,
html body .pwa-install-help-card,
html body .app-dialog {
  color: #eff9f5 !important;
  border-color: rgba(115, 219, 178, .20) !important;
  background: var(--liquid-fill-strong) !important;
  box-shadow: 0 28px 74px rgba(0,0,0,.42), inset 0 1px rgba(209,255,237,.07) !important;
}
html body .pwa-install-copy .eyebrow,
html body .pwa-install-copy b,
html body .push-permission-cta b { color:#9ff0cf !important; }
html body .pwa-install-copy .description,
html body .push-permission-cta span,
html body .pwa-install-help-card p,
html body .app-dialog p,
html body .app-dialog ul { color:#9bb7ac !important; }
html body .pwa-install-icon { background:linear-gradient(135deg,#126347,#1f9c70,#42d9a5)!important; border-color:rgba(138,235,197,.24)!important; }
html body .pwa-install-help,
html body .app-dialog-backdrop,
html body .mobile-backdrop,
html body .mobile-backdrop.show { background:rgba(0,17,12,.62)!important; }

html body .storage-progress i {
  background: linear-gradient(90deg,#157352,#22a978 54%,#43d5a1)!important;
  box-shadow: 0 0 16px rgba(67,213,161,.22)!important;
}
html body :is(.notify-kpi-icon,.push-admin-metric-icon,.push-admin-panel-icon,.manual-settings-number,.renewal-client-avatar) {
  color:#72e2b6!important;
  border-color:rgba(119,224,182,.18)!important;
  background:linear-gradient(145deg,rgba(23,91,68,.62),rgba(7,38,28,.72))!important;
  box-shadow:0 10px 23px rgba(0,0,0,.22),inset 0 1px rgba(218,255,240,.06)!important;
}
html body .storage-card-head small,
html body .storage-eyebrow:not(.storage-hero .storage-eyebrow) { color:#6ddcae!important; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(67, 213, 161, .38) !important;
}

@media (max-width: 900px) {
  html body .sidebar { box-shadow: 24px 0 66px rgba(0,0,0,.44) !important; }
  html body .table tr {
    border-color: rgba(111, 216, 173, .16) !important;
    background: linear-gradient(145deg, rgba(16, 63, 48, .72), rgba(6, 31, 23, .80)) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px rgba(210,255,238,.05) !important;
  }
  html body .table td::before { color:#82a396!important; }
}