/* Default theme variables for fallback (DARK THEME) */ :root { /* DEFAULT THEME = DARK (fallback if no .light/.dark on ) */ --bg: #050b1d; --bg-gradient: radial-gradient(120% 120% at 100% 0%, rgba(56, 189, 248, 0.16) 0%, rgba(8, 12, 26, 0) 60%), radial-gradient(120% 140% at 0% 100%, rgba(124, 58, 237, 0.18) 0%, rgba(8, 12, 26, 0) 65%), #050b1d; --card-bg: rgba(12, 18, 34, 0.92); --surface-glass: rgba(13, 23, 42, 0.62); --text: #f1f5ff; --muted: #94a3c6; --sidebar-bg: rgba(7, 14, 28, 0.92); --sidebar-text: #e2e8ff; --border: rgba(100, 116, 139, 0.26); --shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.9); --primary:#3b82f6; --primary-600:#2563eb; --primary-700:#1d4ed8; --accent:#a855f7; --success:#22c55e; --warn:#facc15; --danger:#f87171; --radius: clamp(0.75rem, 0.6rem + 0.8vw, 1.4rem); --radius-sm: clamp(0.55rem, 0.45rem + 0.6vw, 1rem); --btn-gradient: linear-gradient(135deg, rgba(59,130,246,0.95) 0%, rgba(124,58,237,0.95) 100%); --btn-shadow: 0 16px 34px -18px rgba(59, 130, 246, 0.65); /* Fluid typography and spacing */ --font-size-xs: clamp(0.75rem, 0.68rem + 0.25vw, 0.9rem); --font-size-sm: clamp(0.8125rem, 0.74rem + 0.3vw, 0.98rem); --font-size-base: clamp(0.95rem, 0.85rem + 0.35vw, 1.06rem); --font-size-lg: clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem); --font-size-xl: clamp(1.4rem, 1.18rem + 0.85vw, 1.9rem); --font-size-2xl: clamp(1.75rem, 1.45rem + 1vw, 2.4rem); --space-2: clamp(0.5rem, 0.38rem + 0.5vw, 0.9rem); --space-3: clamp(0.75rem, 0.55rem + 0.7vw, 1.35rem); --space-4: clamp(1rem, 0.72rem + 0.95vw, 1.9rem); --space-5: clamp(1.5rem, 1.1rem + 1.2vw, 2.7rem); --space-6: clamp(1.75rem, 1.2rem + 1.6vw, 3.2rem); --card-padding: clamp(1.2rem, 0.9rem + 1.6vw, 2.5rem); --panel-padding: clamp(1.1rem, 0.85rem + 1.3vw, 2rem); --input-padding-y: clamp(0.7rem, 0.6rem + 0.3vw, 0.95rem); --input-padding-x: clamp(0.85rem, 0.75rem + 0.4vw, 1.2rem); --button-pad-y: clamp(0.7rem, 0.6rem + 0.35vw, 1rem); --button-pad-x: clamp(1rem, 0.85rem + 0.8vw, 1.8rem); --sidebar-width: clamp(15rem, 18vw, 19.5rem); /* Semantic status tokens */ --status-neutral-bg: rgba(148, 163, 184, 0.24); --status-neutral-text: #f1f5ff; --status-neutral-border: rgba(148, 163, 184, 0.42); --status-success-bg: #1f5133; --status-success-text: #e6fbe9; --status-success-border: #2f7d4b; --status-warning-bg: #4a3728; --status-warning-text: #ffe5b9; --status-warning-border: #805a2b; --status-danger-bg: #5c1f1f; --status-danger-text: #ffd4d4; --status-danger-border: #a23a3a; --status-info-bg: #19334d; --status-info-text: #cbe4ff; --status-info-border: #2b5277; } [hidden] { display: none !important; } @media (max-width: 1024px) { :root { --font-size-base: clamp(0.9rem, 0.84rem + 0.25vw, 1rem); --font-size-lg: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); --font-size-xl: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem); --card-padding: clamp(1.1rem, 0.85rem + 1.2vw, 2.1rem); --panel-padding: clamp(1rem, 0.8rem + 0.9vw, 1.7rem); --button-pad-x: clamp(0.9rem, 0.8rem + 0.5vw, 1.4rem); } } @media (max-width: 768px) { :root { --font-size-base: clamp(0.88rem, 0.8rem + 0.3vw, 0.98rem); --font-size-lg: clamp(1rem, 0.92rem + 0.5vw, 1.25rem); --font-size-xl: clamp(1.2rem, 1rem + 0.7vw, 1.55rem); --card-padding: clamp(1rem, 0.8rem + 1vw, 1.8rem); --panel-padding: clamp(0.9rem, 0.75rem + 0.8vw, 1.5rem); --sidebar-width: minmax(0, 1fr); } .app { grid-template-columns: minmax(0, 1fr); } .sidebar { width: 100%; height: auto; padding: clamp(1.2rem, 1rem + 0.8vw, 1.8rem) clamp(1rem, 0.85rem + 0.6vw, 1.5rem); border-right: none; border-bottom: 1px solid rgba(148, 163, 184, 0.18); position: relative; } .main { padding: 0 clamp(1rem, 0.85rem + 0.6vw, 1.6rem) clamp(1.6rem, 1.2rem + 1vw, 2.4rem); } .header { margin: clamp(1.1rem, 0.9rem + 0.8vw, 1.8rem) clamp(1rem, 0.85rem + 0.8vw, 1.6rem) 0; padding: clamp(1rem, 0.85rem + 0.8vw, 1.6rem) clamp(1.2rem, 1rem + 0.9vw, 1.9rem); } } @media (min-width: 1440px) { :root { --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); --font-size-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); --font-size-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); --card-padding: clamp(1.4rem, 1.2rem + 1.8vw, 2.8rem); --panel-padding: clamp(1.3rem, 1.05rem + 1.3vw, 2.4rem); --button-pad-x: clamp(1.1rem, 0.95rem + 0.9vw, 2rem); } .header { margin: clamp(1.8rem, 1.5rem + 1.5vw, 3rem) clamp(1.8rem, 1.5rem + 1.5vw, 3rem) 0; } .main { padding: 0 clamp(1.8rem, 1.4rem + 1.6vw, 3.2rem) clamp(2.4rem, 1.8rem + 1.8vw, 3.8rem); } } /* ---------- Fase 3: Botones Unificados ---------- */ /* Botones unificados con gradiente azul-violeta */ .btn, .btn-sm, .deploy, .sync, .action-btn { background: var(--btn-gradient); color: #f8fafc; text-shadow: 0 1px 2px rgba(5, 12, 26, 0.45); font-weight: 600; border: 1px solid rgba(59, 130, 246, 0.42); border-radius: var(--radius-sm); cursor: pointer; box-shadow: var(--btn-shadow); transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease; } /* Tamaños y padding */ .btn { padding: var(--button-pad-y) var(--button-pad-x); font-size: var(--font-size-base); } .btn-sm { padding: clamp(0.55rem, 0.5rem + 0.25vw, 0.85rem) clamp(0.85rem, 0.75rem + 0.6vw, 1.4rem); font-size: var(--font-size-sm); } .action-btn { padding: clamp(0.45rem, 0.4rem + 0.2vw, 0.7rem) clamp(0.65rem, 0.55rem + 0.4vw, 1rem); font-size: var(--font-size-xs); margin: 0 3px; border-radius: var(--radius-sm); } /* Hover y foco consistentes */ .btn:hover, .btn-sm:hover, .deploy:hover, .sync:hover, .action-btn:hover { opacity: 0.98; transform: translateY(-3px); box-shadow: 0 22px 46px -24px rgba(124, 58, 237, 0.65); } .btn:focus, .btn-sm:focus, .deploy:focus, .sync:focus, .action-btn:focus { outline: 2px solid rgba(124, 58, 237, 0.6); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28); } /* Botón cancelar (modal) */ .btn.cancel { background: #e5e7eb; color: #374151; box-shadow: none; } .btn.cancel:hover { background: #d1d5db; color: #111827; } /* Botón logout */ .logout { padding: clamp(0.5rem, 0.45rem + 0.25vw, 0.8rem) clamp(0.85rem, 0.7rem + 0.5vw, 1.3rem); border-radius: var(--radius-sm); border: none; background: linear-gradient(135deg, #f87171, #fb7185); color: #fff; font-weight: 600; cursor: pointer; box-shadow: 0 14px 32px -20px rgba(248, 113, 113, 0.7); transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease; } .logout:hover { opacity: 0.95; transform: translateY(-2px); box-shadow: 0 18px 36px -22px rgba(248, 113, 113, 0.65); } .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; } /* ---------- Fase 2: Cards y Métricas ---------- */ /* Tarjetas de métricas con diseño más profesional */ /* Métricas compactas y elegantes */ *{box-sizing:border-box} html,body{height:100%} /* Light theme overrides */ html.light { --bg: #f5f7fb; --bg-gradient: radial-gradient(140% 140% at 100% 0%, rgba(37, 99, 235, 0.12) 0%, rgba(240, 244, 255, 0) 55%), radial-gradient(120% 160% at 0% 100%, rgba(147, 51, 234, 0.1) 0%, rgba(240, 244, 255, 0) 65%), #f5f7fb; --card-bg: rgba(255, 255, 255, 0.96); --surface-glass: rgba(255, 255, 255, 0.8); --text: #0f172a; --muted: #475569; --sidebar-bg: rgba(233, 239, 255, 0.92); --sidebar-text: #111827; --border: rgba(15, 23, 42, 0.08); --shadow: 0 22px 40px -30px rgba(15, 23, 42, 0.24); --btn-shadow: 0 18px 30px -20px rgba(59, 130, 246, 0.35); --status-neutral-bg: rgba(148, 163, 184, 0.16); --status-neutral-text: #0f172a; --status-neutral-border: rgba(148, 163, 184, 0.32); --status-success-bg: #e6f4ea; --status-success-text: #056608; --status-success-border: #9bd2a6; --status-warning-bg: #fff4e5; --status-warning-text: #8a4d00; --status-warning-border: #f3c089; --status-danger-bg: #fdecea; --status-danger-text: #b71c1c; --status-danger-border: #f2a7a7; --status-info-bg: #e7f3fe; --status-info-text: #084298; --status-info-border: #94c5f5; --card-padding: clamp(1.15rem, 0.9rem + 1.2vw, 2.3rem); --panel-padding: clamp(1rem, 0.8rem + 1vw, 1.85rem); } /* ---------- Login ---------- */ .login-wrap{ min-height:100vh; display:grid; place-items:center; padding:clamp(2.5rem,4vw,4rem) clamp(1rem,2vw,2.5rem); position: relative; z-index: 1; } .card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 24px 52px -32px rgba(15, 23, 42, 0.85); padding: var(--card-padding); backdrop-filter: blur(14px); } .card.metric-card { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease; border: 1px solid transparent; } .card.metric-card:hover { transform: translateY(-2px); box-shadow: 0 28px 58px -32px rgba(37, 99, 235, 0.55); } .card.metric-card.active { border-color: var(--primary-600); box-shadow: 0 28px 58px -32px rgba(37, 99, 235, 0.55); } .login-wrap .card { width: min(560px, 92vw); padding: clamp(1.8rem,1.4rem + 2vw,2.5rem) clamp(1.6rem,1.3rem + 2vw,2.75rem) clamp(1.6rem,1.2rem + 1.5vw,2.4rem); border-radius: clamp(1.2rem,1rem + 1vw,1.8rem); } .brand{ display:flex; gap:10px; align-items:center; justify-content:center; margin-bottom:8px; color:var(--text); font-weight:700; letter-spacing:.5px; } .brand .brand-mark{ width:clamp(28px,2.6vw,34px); height:clamp(28px,2.6vw,34px); border-radius:10px; background:linear-gradient(140deg, rgba(56,189,248,.95), rgba(99,102,241,.95)); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 16px 30px -18px rgba(59,130,246,.45); } h1{ text-align:center; font-size:var(--font-size-2xl); margin:10px 0 clamp(1rem,.8rem + .6vw,1.6rem); letter-spacing:.2px } .input{ width:100%; padding:var(--input-padding-y) var(--input-padding-x); border:1.5px solid #d8e0f5; border-radius:var(--radius-sm); background:#fbfdff; outline:none; transition:.2s; font-size:var(--font-size-base); } .input:focus{ border-color:#9db4ff; box-shadow:0 0 0 4px rgba(29,78,216,.12)} .row{ display:flex; flex-direction:column; gap:var(--space-3) } .mode-toggle{ display:flex; align-items:center; justify-content:center; gap:clamp(.5rem,.4rem + .4vw,.9rem); margin:6px 0 4px; flex-wrap:wrap; } .mode-toggle span.label{ font-weight:600; color:var(--muted); } .mode-toggle label{ display:flex; align-items:center; gap:clamp(.25rem,.2rem + .25vw,.5rem); padding:clamp(.45rem,.38rem + .3vw,.7rem) clamp(.9rem,.8rem + .5vw,1.4rem); border-radius:999px; border:1.5px solid #dbe4ff; background:#f4f7ff; color:#1d4ed8; font-weight:600; cursor:pointer; transition:.2s ease; } .mode-toggle label input{ display:none; } .mode-toggle label.active{ background:#1d4ed8; color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(29,78,216,.20);} .mode-toggle label[data-value="prod"]{ border-color:rgba(248,113,113,.45); background:rgba(248,113,113,.08); color:#b91c1c; } .mode-toggle label[data-value="prod"].active{ background:#b91c1c; color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(248,113,113,.35); } .mode-toggle.prod-active span.label::after{ content:'⚙️'; margin-left:6px; font-size:.85em; } .mode-badge{ display:inline-flex; align-items:center; gap:clamp(.25rem,.2rem + .2vw,.45rem); padding:clamp(.35rem,.3rem + .3vw,.6rem) clamp(.65rem,.55rem + .4vw,1rem); border-radius:999px; font-weight:600; font-size:var(--font-size-xs); margin-left:auto; background:rgba(59,130,246,.15); color:#1d4ed8; letter-spacing:.2px; } .mode-badge[data-mode="demo"]{ background:rgba(45,212,191,.16); color:#0f766e; } .mode-badge[data-mode="productive"], .mode-badge[data-mode="prod"]{ background:rgba(220,38,38,.16); color:#b91c1c; border:1px solid rgba(248,113,113,.35); } .mode-badge.prod-active{ box-shadow:0 0 0 1px rgba(248,113,113,.25); } .head-right .mode-badge{ margin-left:0; } .login-wrap .btn{ width:100%; border:none; color:white; font-weight:700; border-radius:var(--radius-sm); padding:var(--button-pad-y) var(--button-pad-x); cursor:pointer; background:linear-gradient(90deg,#1d4ed8,#4f46e5 55%, #7c3aed); box-shadow:0 8px 16px rgba(29,78,216,.20); } .meta{ margin-top:10px; color:var(--muted); text-align:center; font-size:var(--font-size-sm)} /* ---------- App shell ---------- */ .app { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; position: relative; z-index: 1; } .app main { display: flex; flex-direction: column; min-height: 100vh; position: relative; z-index: 1; } .sidebar { background: linear-gradient(180deg, rgba(12, 18, 34, 0.94) 0%, rgba(5, 9, 20, 0.94) 100%); color: var(--sidebar-text); padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) clamp(1.25rem, 1rem + 1vw, 2rem); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid rgba(148, 163, 184, 0.16); backdrop-filter: blur(20px); } .side-brand { display: flex; align-items: center; gap: clamp(0.6rem, 0.5rem + 0.3vw, 1rem); color: #fff; font-weight: 800; letter-spacing: 0.4px; margin: 4px 6px clamp(0.85rem, 0.7rem + 0.6vw, 1.5rem); font-size: var(--font-size-lg); } .side-brand .side-brand-mark { width: clamp(26px, 2.6vw, 34px); height: clamp(26px, 2.6vw, 34px); border-radius: 10px; background: linear-gradient(140deg, rgba(56, 189, 248, 0.95), rgba(99, 102, 241, 0.95)); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 30px -18px rgba(59, 130, 246, 0.55); } .nav { display: flex; flex-direction: column; gap: clamp(0.45rem, 0.35rem + 0.3vw, 0.75rem); margin-top: clamp(0.5rem, 0.4rem + 0.4vw, 0.9rem); } .nav a, .nav-item { padding: clamp(0.55rem, 0.45rem + 0.4vw, 0.9rem) clamp(0.85rem, 0.7rem + 0.6vw, 1.3rem); color: var(--sidebar-text); text-decoration: none; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: var(--font-size-sm); letter-spacing: 0.2px; transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease; } .nav a:hover, .nav a.active, .nav-item:hover { background: rgba(59, 130, 246, 0.18); color: #fff; transform: translateX(4px); } .header { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: clamp(1rem, 0.8rem + 0.6vw, 1.6rem); padding: clamp(1.25rem, 1rem + 0.8vw, 2rem) clamp(1.6rem, 1.2rem + 1.2vw, 2.6rem); margin: clamp(1.4rem, 1.1rem + 1vw, 2.2rem) clamp(1.4rem, 1.1rem + 1vw, 2.4rem) 0; background: var(--surface-glass); border-radius: clamp(1rem, 0.9rem + 0.6vw, 1.5rem); border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 24px 44px -30px rgba(15, 23, 42, 0.85); backdrop-filter: blur(18px); } /* Cuando el header tiene más de un hijo directo, usar space-between */ .header:has(> :nth-child(2)) { justify-content: space-between; } .page-title { display: flex; flex-direction: column; gap: 6px; } .page-title h1 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); letter-spacing: 0.3px; } .page-title .page-subtitle, .header .muted { color: var(--muted); font-size: var(--font-size-sm); margin: 0; } .head-right{ display:flex; align-items:center; gap:10px; color:var(--muted) } .head-right.hidden{ display:none } .global-toolbar { display: flex; align-items: center; gap: 14px; margin-left: auto; padding: 10px 16px; background: rgba(13, 23, 42, 0.6); border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: var(--btn-shadow); flex-wrap: wrap; color: var(--text); } .segmented { display: inline-flex; align-items: center; gap: 4px; background: rgba(148, 163, 184, 0.14); border-radius: 999px; padding: 4px; border: 1px solid rgba(148, 163, 184, 0.16); } .segmented .label { margin: 0 6px 0 8px; font-weight: 700; color: rgba(224, 232, 255, 0.8); font-size: 12px; letter-spacing: 0.3px; } html.light .segmented { background: rgba(15, 23, 42, 0.05); border: 1px solid rgba(15, 23, 42, 0.08); } html.light .segmented .label { color: #1f2937; } .segmented button { border: none; background: transparent; color: rgba(226, 232, 255, 0.82); padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } html.light .segmented button { color: #334155; } .segmented button.active { background: var(--btn-gradient); color: #fff; box-shadow: var(--btn-shadow); } .toolbar-badge { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 12px; background: rgba(59, 130, 246, 0.22); color: #e0edff; letter-spacing: 0.4px; } html.light .global-toolbar { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 18px 40px -26px rgba(15, 23, 42, 0.25); } html.light .toolbar-badge { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; } html.light .toolbar-user { color: #0f172a; } html.light .logout { box-shadow: 0 12px 24px -18px rgba(248, 113, 113, 0.35); } .toolbar-user { display: inline-flex; align-items: center; gap: clamp(0.45rem, 0.35rem + 0.3vw, 0.75rem); font-size: var(--font-size-sm); color: rgba(226, 232, 255, 0.85); } .toolbar-user .logout { padding: clamp(0.5rem, 0.45rem + 0.2vw, 0.75rem) clamp(0.75rem, 0.65rem + 0.4vw, 1.15rem); border-radius: var(--radius-sm); font-size: var(--font-size-xs); } .main { padding: 0 clamp(1.4rem, 1.1rem + 1vw, 2.4rem) clamp(2rem, 1.6rem + 1.4vw, 3rem); display: flex; flex-direction: column; gap: clamp(1.25rem, 1rem + 0.9vw, 2.2rem); position: relative; z-index: 1; } /* Responsive grid utilities */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 0.8rem + 0.8vw, 1.8rem); } .grid.auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .section-title { font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.65rem); margin: 10px 0 clamp(0.35rem, 0.3rem + 0.2vw, 0.6rem); letter-spacing: 0.4px; } .section-subtitle { color: var(--muted); font-size: var(--font-size-sm); margin: 4px 0 0; } .providers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.1rem, 0.9rem + 0.9vw, 2rem); } .providers.auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .provider { --prov-color: var(--primary, #3b82f6); --prov-color-rgb: 59, 130, 246; position: relative; border-radius: calc(var(--radius) + 14px); padding: 0; text-align: center; border: 1px solid rgba(148, 163, 184, 0.18); backdrop-filter: blur(18px); box-shadow: 0 28px 62px -40px rgba(10, 18, 38, 0.92); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .provider::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(var(--prov-color-rgb), 0.16) 0%, rgba(8, 15, 32, 0.1) 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .provider:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 34px 72px -42px rgba(15, 23, 42, 0.95); border-color: rgba(var(--prov-color-rgb), 0.35); } .provider:hover::after { opacity: 1; } .provider { border-top: 4px solid rgba(var(--prov-color-rgb), 0.45); } .provider[data-provider="aws"] { --prov-color: #f59e0b; --prov-color-rgb: 245, 158, 11; } .provider[data-provider="azure"] { --prov-color: #2563eb; --prov-color-rgb: 37, 99, 235; } .provider[data-provider="gcp"] { --prov-color: #10b981; --prov-color-rgb: 16, 185, 129; } .provider[data-provider="oci"] { --prov-color: #ef4444; --prov-color-rgb: 239, 68, 68; } .provider .card-front { position: absolute; z-index: 2; background: radial-gradient(circle at 0% -30%, rgba(var(--prov-color-rgb), 0.2) 0%, rgba(10, 16, 32, 0.92) 68%), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(7, 14, 32, 0.95) 100%); border-radius: calc(var(--radius) + 14px); border: 1px solid rgba(var(--prov-color-rgb), 0.22); padding: 1.4rem 1.2rem 1.4rem 1.2rem; min-height: clamp(16rem, 14rem + 2vw, 18rem); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.8rem; color: #f8fafc; backface-visibility: hidden; transform: rotateY(0deg); } .provider .card-front::after { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--radius) + 12px); background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(8, 15, 32, 0.45)); pointer-events: none; z-index: -1; } .provider .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); background: linear-gradient(135deg, rgba(var(--prov-color-rgb, 59, 130, 246), 0.18), rgba(16, 24, 42, 0.94)); border-radius: calc(var(--radius) + 14px); border: 1px solid rgba(var(--prov-color-rgb), 0.22); padding: 1rem 1.2rem; min-height: clamp(16rem, 14rem + 2vw, 18rem); display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; color: #fff; overflow-y: auto; gap: 0.6rem; } .logo-wrap { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: rgba(var(--prov-color-rgb), 0.16); box-shadow: inset 0 0 0 1px rgba(var(--prov-color-rgb), 0.24); flex-shrink: 0; } .logo-wrap img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(var(--prov-color-rgb), 0.35)); } .provider-front-info { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 100%; flex-shrink: 0; } .provider-name { font-size: 15px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; text-align: center; line-height: 1.2; } .provider-spend-label { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.65); text-align: center; } .provider-spend-value { font-size: 22px; font-weight: 800; color: #fff; text-align: center; } .provider .card-front > div:nth-of-type(2) { font-size: 18px; font-weight: 700; letter-spacing: 0.28px; text-transform: uppercase; } .provider .status { display: inline-flex; align-items: center; justify-content: center; padding: 6px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.32px; border: 1px solid var(--status-neutral-border); background: var(--status-neutral-bg); color: var(--status-neutral-text); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .provider .status.green { background: var(--status-success-bg); color: var(--status-success-text); border-color: var(--status-success-border); } .provider .status.amber { background: var(--status-warning-bg); color: var(--status-warning-text); border-color: var(--status-warning-border); } .provider .status.red { background: var(--status-danger-bg); color: var(--status-danger-text); border-color: var(--status-danger-border); } .provider .status:hover { transform: translateY(-1px); } .provider .acct-chip { display: inline-block; margin-top: 8px; font-size: 12px; padding: 4px 12px; border-radius: 12px; background: rgba(var(--prov-color-rgb), 0.12); color: rgba(255, 255, 255, 0.88); } @media (max-width: 640px) { .providers { grid-template-columns: minmax(0, 1fr); } } /* Badges (used across tables/cards) */ .badge { display: inline-block; padding: clamp(0.35rem, 0.3rem + 0.3vw, 0.6rem) clamp(0.55rem, 0.45rem + 0.4vw, 0.9rem); border-radius: clamp(0.7rem, 0.6rem + 0.4vw, 1.1rem); font-weight: 700; font-size: var(--font-size-xs); letter-spacing: 0.3px; background: var(--status-neutral-bg); color: var(--status-neutral-text); border: 1px solid var(--status-neutral-border); } .badge.green { background: var(--status-success-bg); color: var(--status-success-text); border-color: var(--status-success-border); } .badge.amber { background: var(--status-warning-bg); color: var(--status-warning-text); border-color: var(--status-warning-border); } .badge.red { background: var(--status-danger-bg); color: var(--status-danger-text); border-color: var(--status-danger-border); } .badge.blue { background: var(--status-info-bg); color: var(--status-info-text); border-color: var(--status-info-border); } .badge.indigo { background: linear-gradient(120deg, rgba(99, 102, 241, 0.18), rgba(59, 130, 246, 0.16)); color: #c7d2fe; border-color: rgba(99, 102, 241, 0.45); } .scripts-cell { display: flex; flex-direction: column; gap: 4px; } .scripts-cell .meta { font-size: 12px; color: var(--muted); } .scripts-cell .tags { display: flex; flex-wrap: wrap; gap: 6px; } .scripts-cell .tags .badge { font-weight: 600; font-size: 11px; } #scriptLibraryPanel .table td:last-child { white-space: nowrap; } #scriptLibraryPanel .action-btn.run-demo { background: rgba(15, 118, 110, 0.22); color: #5eead4; border-color: rgba(20, 184, 166, 0.45); box-shadow: none; } #scriptLibraryPanel .action-btn.run-demo:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -28px rgba(16, 185, 129, 0.68); } #scriptLibraryPanel .action-btn.run-prod { background: rgba(220, 38, 38, 0.18); color: #fca5a5; border-color: rgba(248, 113, 113, 0.42); box-shadow: none; } #scriptLibraryPanel .action-btn.run-prod:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -28px rgba(248, 113, 113, 0.6); } .script-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #scriptRunResults { display: flex; flex-direction: column; gap: 18px; } .results-actions { display: flex; align-items: center; gap: 12px; } .results-actions [data-script-run-status] { margin: 0; font-weight: 600; font-size: 13px; } .results-actions [data-tone="success"] { color: #22c55e; } .results-actions [data-tone="warning"] { color: #f59e0b; } .results-actions [data-tone="error"] { color: #f87171; } .results-actions [data-tone="info"] { color: var(--muted); } .badge.loading::before { content: ''; display: inline-block; width: 0.75em; height: 0.75em; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; margin-right: 6px; animation: badge-spin 0.8s linear infinite; } @keyframes badge-spin { to { transform: rotate(360deg); } } .results-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .kpi-card { padding: 16px; border-radius: var(--radius-md); border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(59, 130, 246, 0.08); display: flex; flex-direction: column; gap: 8px; min-height: 120px; } .kpi-card .kpi-label { font-size: 13px; color: var(--muted); letter-spacing: 0.02em; } .kpi-card .kpi-value { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2.1rem); font-weight: 700; display: flex; align-items: baseline; gap: 6px; } .kpi-card .kpi-unit { font-size: 12px; color: var(--muted); text-transform: uppercase; } .kpi-card.accent-green { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.28); } .kpi-card.accent-blue { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.28); } .kpi-card.accent-purple { background: rgba(147, 51, 234, 0.12); border-color: rgba(147, 51, 234, 0.28); } .kpi-card.accent-indigo { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.28); } .kpi-card.accent-amber { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.28); } .kpi-card.accent-teal { background: rgba(45, 212, 191, 0.12); border-color: rgba(45, 212, 191, 0.28); } .results-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .chart-card { padding: 18px; border-radius: var(--radius-md); border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); } .chart-card .result-title { margin-top: 0; margin-bottom: 12px; } .chart-bars { display: flex; flex-direction: column; gap: 10px; } .chart-bar { position: relative; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(71, 85, 105, 0.35); overflow: hidden; display: flex; align-items: center; justify-content: space-between; } .chart-bar::before { content: ''; position: absolute; inset: 0; width: var(--fill, 0%); background: linear-gradient(135deg, rgba(14, 165, 233, 0.7), rgba(59, 130, 246, 0.55)); opacity: 0.35; transition: width 0.3s ease; } .chart-bar .bar-label, .chart-bar .bar-value { position: relative; z-index: 1; font-weight: 600; } .chart-bar .bar-label { font-size: 13px; color: #e2e8f0; } .chart-bar .bar-value { font-variant-numeric: tabular-nums; color: #f8fafc; } .results-tables { display: grid; gap: 18px; } .result-table { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: var(--radius-md); padding: 18px; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(4px); } .result-table .result-title { margin: 0 0 12px; } .table.compact th, .table.compact td { padding: 8px 10px; font-size: 13px; } .results-notes { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: var(--radius-md); padding: 18px; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(4px); } .results-notes .result-title { margin: 0 0 10px; } .result-notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: #e2e8f0; } .result-notes li::marker { color: rgba(96, 165, 250, 0.8); } #agentAutomations .action-btn.auto-toggle { min-width: 96px; justify-content: center; display: inline-flex; align-items: center; gap: 6px; } #agentAutomations .action-btn.auto-toggle[data-state="off"] { background: rgba(148, 163, 184, 0.18); color: var(--muted); border-color: rgba(100, 116, 139, 0.28); box-shadow: none; } #agentAutomations .action-btn.auto-toggle[data-state="off"]:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -28px rgba(148, 163, 184, 0.6); } #marketplaceGrid .card { padding: 20px; display: flex; flex-direction: column; gap: 14px; border: 1px solid rgba(59, 130, 246, 0.14); background: rgba(15, 23, 42, 0.66); } #marketplaceGrid .card .meta { font-size: 12px; color: var(--muted); } #marketplaceGrid .card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #marketplaceGrid .card footer .rating { display: inline-flex; align-items: center; gap: 6px; color: #fde68a; font-weight: 600; } #marketplaceGrid .card footer .rating svg { width: 16px; height: 16px; } #marketplaceGrid .card footer .btn-sm { margin-left: auto; } #executionHistory .table td:nth-child(1) { white-space: nowrap; } #executionHistory .table td:nth-child(6) { font-weight: 600; } /* Light theme tweaks for provider cards: improve contrast on white */ html.light .provider .card-front { background: radial-gradient(circle at 0% -40%, rgba(var(--prov-color-rgb), 0.12) 0%, rgba(250, 252, 255, 0.92) 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(226, 232, 240, 0.86) 100%); color: #0f172a; } html.light .provider .card-front > div:nth-of-type(2) { color: #0f172a; } html.light .logo-wrap { background: rgba(var(--prov-color-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--prov-color-rgb), 0.2); } html.light .provider .status { background: var(--status-neutral-bg); color: var(--status-neutral-text); border-color: var(--status-neutral-border); } html.light .provider .status.green { background: var(--status-success-bg); color: var(--status-success-text); border-color: var(--status-success-border); } html.light .provider .status.amber { background: var(--status-warning-bg); color: var(--status-warning-text); border-color: var(--status-warning-border); } html.light .provider .status.red { background: var(--status-danger-bg); color: var(--status-danger-text); border-color: var(--status-danger-border); } html.light .provider .acct-chip { background: rgba(var(--prov-color-rgb), 0.14); color: rgba(17, 24, 39, 0.72); } .btn-sm{ margin-top:10px; background:var(--primary); border:none; color:white; padding:10px 14px; border-radius:10px; cursor:pointer } /* Disabled buttons */ .btn[disabled], .btn-sm[disabled] { opacity: .6; cursor: not-allowed; filter: grayscale(20%); } /* Invalid input hint */ .input.invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.25) !important; } .hint { color: #9fb3d7; font-size: 12px; margin-top: 4px; } /* API Health Banner */ .api-banner { position: sticky; top: 0; z-index: 2000; width: 100%; background: #7f1d1d; /* dark red */ border-bottom: 1px solid rgba(255,255,255,0.12); color: #fff; padding: 10px 16px; display: none; /* hidden by default */ font-weight: 600; } .api-banner.show { display: block; } .api-banner .small { font-weight: 500; font-size: 12px; opacity: .9; } /* Actions inside the banner */ .api-banner .banner-actions { float: right; display: flex; gap: 8px; } .api-banner .btn-mini { background: #374151; color: #fff; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; font-size: 12px; padding: 6px 10px; cursor: pointer; } .api-banner .btn-mini:hover { filter: brightness(1.1); } /* Provider themed UI */ .provider-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; } .provider-header .ph-left { display:flex; gap:12px; align-items:center; } .provider-header img { width:36px; height:36px; } .provider-header .ph-name { font-weight:700; font-size:18px; } .provider-tabs .provider-tab.active { background:#334155; color:#fff; } .provider-themed .card-metric, .provider-card { border-top:4px solid var(--provider-color, #3b82f6); } .provider-themed .btn-sm, .provider-tabs .provider-tab { border:1px solid var(--provider-color, #3b82f6); } /* Coming soon overlay */ .coming-soon { position:fixed; inset:0; background:rgba(15,23,42,0.6); display:flex; align-items:center; justify-content:center; z-index: 50; } .coming-soon.hidden { display:none; } .coming-soon .cs-content { background:#0b1220; border:1px solid #1f2a44; padding:24px 32px; border-radius:12px; text-align:center; box-shadow: 0 10px 30px rgba(0,0,0,0.3);} .coming-soon h3 { margin:0 0 8px; } /* Per-provider colors */ .provider-aws { --provider-color: #f59e0b; } .provider-azure { --provider-color: #2563eb; } .provider-gcp { --provider-color: #10b981; } .provider-oci { --provider-color: #ef4444; } /* Keep provider bar above overlay so tabs remain clickable */ #providerBar { position: relative; z-index: 60; } .metrics-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .metrics-toolbar-actions { display: flex; align-items: center; gap: 12px; } .metrics-provider-card { margin-top: 18px; } .metrics-layout { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; } .metrics-column, .metrics-sidebar { display: flex; flex-direction: column; gap: 24px; } .metrics-sidebar { position: sticky; top: 88px; } .metrics-block { display: block; } .metrics-glance-grid, .metrics-card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .metrics-card-grid.single { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .metrics-panel { display: flex; flex-direction: column; gap: 16px; padding: 24px; } .metrics-panel-header, .metrics-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .metrics-chart-holder { width: 100%; max-width: 720px; } .metrics-chart-holder.compact { max-width: 420px; } .metrics-double { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .metrics-trends-grid { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; } .metrics-controls-inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .metrics-controls-inline .input { min-width: 110px; } .artifacts-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .metrics-sidebar .table-wrapper { overflow-x: auto; } .metrics-sidebar .table { min-width: 520px; } #metricsTables > div { margin-top: 16px; } #metricsTables > div:first-child { margin-top: 0; } #metricsTables h3 { margin: 12px 0 8px; } @media (max-width: 1280px) { .metrics-layout { grid-template-columns: 1fr; } .metrics-sidebar { position: static; } } @media (max-width: 1024px) { .header { margin: clamp(1.3rem, 1.05rem + 0.8vw, 2rem) clamp(1.2rem, 1rem + 0.8vw, 2rem) 0; padding: clamp(1.1rem, 0.95rem + 0.7vw, 1.7rem) clamp(1.4rem, 1.1rem + 0.9vw, 2.2rem); } .main { padding: 0 clamp(1.2rem, 1rem + 0.8vw, 2rem) clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem); } } @media (max-width: 768px) { .metrics-toolbar-actions { width: 100%; justify-content: space-between; } .metrics-chart-holder, .metrics-chart-holder.compact, .metrics-sidebar .table { max-width: 100%; } .metrics-sidebar .table { min-width: 100%; } .header { margin: clamp(1.1rem, 0.9rem + 0.8vw, 1.8rem) clamp(1rem, 0.85rem + 0.8vw, 1.6rem) 0; padding: clamp(1rem, 0.85rem + 0.8vw, 1.6rem) clamp(1.2rem, 1rem + 0.9vw, 1.9rem); } .main { padding: 0 clamp(1rem, 0.85rem + 0.6vw, 1.6rem) clamp(1.6rem, 1.2rem + 1vw, 2.4rem); } .global-toolbar { width: 100%; justify-content: space-between; } } /* ---------- Fase 4: Tablas y Badges ---------- */ .table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: var(--radius); overflow: hidden; } .table th, .table td { padding: clamp(0.6rem, 0.55rem + 0.25vw, 0.85rem) clamp(0.75rem, 0.65rem + 0.45vw, 1.25rem); font-size: var(--font-size-sm); border-bottom: 1px solid rgba(148, 163, 184, 0.12); /* subtle divider */ color: var(--text); } .table th { text-transform: uppercase; font-weight: 600; font-size: var(--font-size-xs); letter-spacing: 0.5px; color: var(--muted); } .table tr:hover { background: rgba(59, 130, 246, 0.12); } /* Agents */ .panel-head{ display:flex; justify-content:space-between; align-items:center; gap:clamp(.6rem,.5rem + .3vw,1rem); margin-bottom:clamp(.6rem,.5rem + .4vw,1.1rem) } /* .deploy and .sync background now handled by unified button rules */ /* Loading state for Agents */ .badge.loading { background: var(--status-info-bg); color: var(--status-info-text); position: relative; padding-left: 24px; } .badge.loading::before { content: ""; position: absolute; left: 6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid var(--status-info-text); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Modal ---------- */ /* Action buttons for agents */ /* .action-btn appearance unified above */ /* Default agent-type style (applies when no variant is set) */ .agent-type { display: inline; font-size: 13px; font-weight: 600; text-align: left; border: none; background: none; padding: 0; min-width: auto; justify-content: flex-start; color: #fff; } /* Remove background and border for agent-type variants */ .agent-type.Inventory, .agent-type.Metrics, .agent-type.Security, .agent-type.Cost, .agent-type.Migration { /* No background or border for plain text */ } /* Align action buttons inside table cells */ .table td:last-child { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Hover effect for action buttons */ /* .action-btn:hover appearance unified above */ /* ---------- Sidebar Dropdown (Unified) ---------- */ .submenu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.35s ease; display: flex; flex-direction: column; margin-left: 14px; margin-top: 4px; gap: 4px; } .submenu.open { max-height: 500px; opacity: 1; } .submenu-title { display: block; padding: 12px 14px; color: var(--sidebar-text); text-decoration: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.25s ease, padding-left 0.25s ease; } .submenu-title:hover { background: rgba(59,130,246,0.15); color: #fff; padding-left: 18px; } .submenu a { padding: 8px 12px; font-size: 13px; color: var(--sidebar-text); border-radius: 6px; transition: background 0.25s ease, padding-left 0.25s ease; } .submenu a:hover { background: rgba(255,255,255,0.08); padding-left: 16px; } .submenu a.active { background: rgba(59,130,246,0.25); color: #fff; } /* ---------- Fase 1: Tipografía y Colores Base ---------- */ /* ========================== Color Variables (Themes) ========================== */ :root.light { --sidebar-bg:#102a5f; --sidebar-text:#e6eeff; --bg:#f6f8fd; --card-bg:#ffffff; --text:#0f172a; --muted:#5b6b91; --primary:#1d4ed8; --primary-600:#1e40af; --primary-700:#1e3a8a; --accent:#5b21b6; --success:#16a34a; --warn:#f59e0b; --danger:#ef4444; --radius:14px; --shadow:0 8px 24px rgba(16, 42, 95, .08); --border: rgba(148,163,184,0.18); } :root.dark { --bg: #0b1220; --card-bg: #101a2f; --text: #e6eeff; --muted: #9fb3d7; --sidebar-bg: #0a1b33; --sidebar-text: #cfe4ff; --border: rgba(148, 163, 184, 0.14); --shadow: 0 10px 30px rgba(2, 6, 23, 0.35); --primary:#1d4ed8; --primary-600:#1e40af; --primary-700:#1e3a8a; --accent:#5b21b6; --success:#16a34a; --warn:#f59e0b; --danger:#ef4444; --radius:14px; } /* Tipografía global mejorada */ body { margin: 0; font-family: 'Inter', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: var(--font-size-base); line-height: 1.6; color: var(--text); background: var(--bg-gradient, var(--bg)); background-attachment: fixed; min-height: 100vh; position: relative; } body::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(120deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0) 45%), linear-gradient(300deg, rgba(147, 51, 234, 0.08) 0%, rgba(147, 51, 234, 0) 40%), repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.05) 0, rgba(148, 163, 184, 0.05) 1px, transparent 1px, transparent 42px), repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.04) 0, rgba(148, 163, 184, 0.04) 1px, transparent 1px, transparent 42px); opacity: 0.55; pointer-events: none; z-index: 0; } /* ---------- Fase 4: Badges y Agent Types ---------- */ /* ---------- Fase 5: Modal Deploy Agent ---------- */ /* ===== Phase 6: Modal Deploy Agent (Futuristic Look) ===== */ .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.65); /* darker overlay */ backdrop-filter: blur(6px) saturate(140%); /* stronger blur/saturation */ display: flex; justify-content: center; align-items: center; z-index: 2000; transition: opacity 0.3s ease; } .modal.hidden { opacity: 0; pointer-events: none; } /* Modal content card with futuristic gradient and shadow */ .modal-content { background: linear-gradient(135deg, var(--card-bg), #141e33); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); padding: 32px 26px; width: min(440px, 92%); display: flex; flex-direction: column; gap: 16px; border: 1px solid rgba(255,255,255,0.06); animation: modalFadeIn 0.3s ease forwards; } .modal-content.provider-themed { border-top: 4px solid var(--provider-color, #3b82f6); } .modal.hidden .modal-content { animation: modalFadeOut 0.25s ease forwards; } .modal-content h3 { font-size: 22px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 14px; } .modal-content label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .modal-content .input { background: #0f172a; border: 1.5px solid rgba(59,130,246,0.35); color: #e6eeff; border-radius: 10px; font-size: 14px; padding: 12px 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .modal-content .input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); } .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; } .modal-actions .btn { min-width: 110px; background: linear-gradient(90deg, #2563eb, #7c3aed); color: #fff; font-weight: 600; border-radius: 12px; padding: 12px 16px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .modal-actions .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3); } /* ---------- Mejora de consistencia general ---------- */ .modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); } .modal-dialog { position: relative; z-index: 1; background: var(--card-bg, #0f172a); border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.55); width: min(760px, 94vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .modal-header, .modal-body, .modal-footer { padding: 20px 24px; } .modal-header { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); } .modal-header h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--text, #f8fafc); } .modal-close { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(148, 163, 184, 0.25); color: var(--text, #f8fafc); width: 36px; height: 36px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .modal-close:hover { background: rgba(59, 130, 246, 0.35); transform: translateY(-1px); } .modal-body { overflow-y: auto; gap: 18px; display: flex; flex-direction: column; } .modal-status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(59, 130, 246, 0.16); color: #60a5fa; } .status-pill[data-status="error"], .status-pill.error { background: rgba(239, 68, 68, 0.18); color: #f87171; } .status-pill[data-status="success"], .status-pill.success { background: rgba(34, 197, 94, 0.18); color: #4ade80; } .result-detail { font-size: 13px; color: var(--muted, #94a3b8); } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid rgba(148, 163, 184, 0.16); } .modal-footer .btn-sm.secondary { background: transparent; border: 1px solid rgba(148, 163, 184, 0.35); } .output-panel { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; background: rgba(15, 23, 42, 0.65); overflow: hidden; } .output-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: transparent; border: none; color: var(--text, #f8fafc); font-weight: 600; padding: 14px 18px; cursor: pointer; text-align: left; transition: background 0.2s ease; } .output-toggle::after { content: "▾"; font-size: 16px; transition: transform 0.2s ease; } .output-panel.open .output-toggle::after { transform: rotate(180deg); } .output-panel.open .output-toggle, .output-toggle:hover { background: rgba(59, 130, 246, 0.18); } .output-content { margin: 0; padding: 16px 18px; font-family: var(--mono, "Fira Code", "Roboto Mono", monospace); font-size: 13px; line-height: 1.6; color: #e2e8f0; background: rgba(15, 23, 42, 0.82); max-height: 260px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; border-top: 1px solid rgba(148, 163, 184, 0.16); display: none; } .output-panel.open .output-content { display: block; } .history-actions { display: flex; gap: 8px; flex-wrap: wrap; } .history-actions .btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); background: transparent; color: var(--text, #f8fafc); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .history-actions .btn-xs:hover { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.45); } /* Panel Head más definido */ .panel-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: clamp(0.4rem, 0.35rem + 0.3vw, 0.7rem); margin-bottom: clamp(0.7rem, 0.6rem + 0.4vw, 1.2rem); border-bottom: 1px solid var(--border); } /* Fix: compact Deploy Agent button in panel header */ .panel-head .deploy { display: inline-flex; align-items: center; justify-content: center; padding: clamp(0.55rem, 0.48rem + 0.3vw, 0.8rem) clamp(0.85rem, 0.7rem + 0.5vw, 1.3rem); font-size: var(--font-size-sm); line-height: 1; border-radius: var(--radius-sm); width: auto; min-width: 0; flex: 0 0 auto; margin-left: auto; /* push to the right */ background: linear-gradient(90deg, var(--primary), var(--accent)); color: #fff; } /* Ensure hover remains subtle (no heavy glow): */ .badge:hover { filter: brightness(1.05); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } /* Botones de acción dentro de celdas más consistentes (consolidated above) */ /* ===================================== Phase 1 — Dark Theme (non-destructive) ===================================== */ /* Shell */ /* body colors already defined above */ .sidebar { background: var(--sidebar-bg); color: var(--sidebar-text); } .nav a { color: var(--sidebar-text); } .nav a.active, .nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; padding-left: 18px; } /* Tables */ .table th, .table td { border-bottom: 1px solid var(--border); color: var(--text); } .table tr:hover { background: rgba(148, 163, 184, 0.06); } /* Provider status chip readibility on dark */ .provider .status { background: var(--status-neutral-bg); color: var(--status-neutral-text); } /* Panel header button keeps gradient but adapts contrast */ .panel-head .deploy { color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28); } /* Action buttons in tables use the same gradient (already defined), this only boosts their focus ring on dark */ .action-btn:focus { outline: 2px solid rgba(99, 102, 241, 0.6); outline-offset: 2px; } /* Remove button-like hover effects for agent-type */ .agent-type:hover { /* No background, shadow, or filter for plain text */ } /* ---------- Toast Notifications ---------- */ .toast { position: fixed; top: 20px; right: 20px; background: linear-gradient(90deg, #2563eb, #7c3aed); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,0.35); opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 3000; } /* Show state */ .toast.show { opacity: 1; transform: translateY(0); } /* Variants */ .toast.success { background: linear-gradient(90deg, #16a34a, #22c55e); } .toast.warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .toast.danger { background: linear-gradient(90deg, #ef4444, #dc2626); } .toast.info { background: linear-gradient(90deg, #2563eb, #3b82f6); } /* ---------- Inventory Filters ---------- */ .inventory-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .inventory-filters .input { min-width: 160px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; font-size: 14px; padding: 8px 12px; } .inventory-filters .input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); } .inventory-filters .btn-sm { background: linear-gradient(90deg, #2563eb, #7c3aed); color: #fff; font-weight: 600; border-radius: 8px; padding: 10px 16px; } /* ---------- Inventory Submenu Toggle ---------- */ #inventorySubmenu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.35s ease; margin-left: 14px; display: flex; flex-direction: column; gap: 4px; } #inventorySubmenu a { padding: 8px 12px; font-size: 13px; color: var(--sidebar-text); border-radius: 6px; transition: background 0.25s ease, padding-left 0.25s ease; } #inventorySubmenu a:hover { background: rgba(255,255,255,0.08); padding-left: 16px; } #inventorySubmenu a.active { background: rgba(59,130,246,0.25); color: #fff; } #inventorySubmenu.open { max-height: 400px; /* suficiente para mostrar enlaces */ opacity: 1; } /* ---------- Inventory Layout with Chart ---------- */ /* ----------- Inventory Layout: Chart Above Table ----------- */ .inventory-layout { display: flex; flex-direction: column; /* primero gráfico arriba, luego tabla */ gap: 24px; margin-top: 20px; align-items: stretch; } .inventory-layout .chart-container { order: -1; /* asegurar que quede encima */ width: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; align-items: center; justify-content: center; } .inventory-layout .panel { flex: 1 1 auto; width: 100%; min-height: 400px; /* para que abarque bien el contenido */ background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; } /* --------- Inventory Chart Styling (Softer Colors & Responsive) --------- */ .inventory-layout .chart-container canvas { max-width: 100%; height: auto; max-height: 320px; object-fit: contain; filter: brightness(0.9) saturate(0.85); /* reduce intensidad y saturación */ opacity: 0.92; /* tono más transparente */ border-radius: 12px; background: rgba(255, 255, 255, 0.02); /* fondo translúcido como botones */ padding: 8px; color: #fff !important; } /* --------- Inventory Chart Title Styling --------- */ .chart-container h3 { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 14px; color: rgba(159, 179, 215, 0.8); /* tono más transparente */ text-transform: uppercase; letter-spacing: 1px; } @media (min-width: 1024px) { .inventory-layout { display: grid; grid-template-rows: auto 1fr; /* gráfico arriba, tabla abajo */ gap: 24px; align-items: start; } .inventory-layout .panel { min-width: 0; /* evita desbordes */ } .inventory-layout .chart-container { min-width: 0; } } /* ---------- Inventory Summary Cards (visible arriba de todo) ---------- */ #inventorySummary { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; width: 100%; } .summary-card { flex: 1 1 180px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; box-shadow: var(--shadow); font-size: 13px; color: var(--muted); font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease; } .summary-card strong { display: block; margin-top: 6px; font-size: 18px; font-weight: 700; color: var(--text); } .summary-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.35); } /* ---------- Inventory Top Section: Filters Left, Chart Right ---------- */ .inventory-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; align-items: flex-start; } .inventory-top .filters-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 20px 18px; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .inventory-top .chart-container { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 20px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (max-width: 767px) { .inventory-top { grid-template-columns: 1fr; gap: 18px; } .inventory-top .filters-panel, .inventory-top .chart-container { padding: 14px 8px; } } /* ---------- Inventory Table Scroll Container ---------- */ .inventory-table-container { max-height: 500px; /* ajusta la altura visible de la tabla */ overflow-y: auto; /* habilita scroll vertical */ border-radius: 12px; } .inventory-table-container table { width: 100%; } /* ---------- Inventory Table Pagination ---------- */ .table-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--muted); } .table-pagination .tp-left { display: flex; align-items: center; gap: 10px; } .table-pagination .tp-right { display: flex; align-items: center; gap: 6px; } .table-pagination select { background: var(--card-bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 6px; font-size: 13px; } .table-pagination .btn { padding: 6px 10px; font-size: 12px; min-width: 28px; } /* ---------- Inventory Refresh + Counter ---------- */ .inventory-header-actions { display: flex; justify-content: space-between; /* separa izquierda/derecha */ align-items: center; gap: 10px; margin-bottom: 10px; } .inventory-header-actions .left-actions { display: flex; align-items: center; gap: 10px; } .inventory-header-actions .right-info { margin-left: auto; } .btn-basic { background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.24); color: var(--text); text-shadow: 0 1px 2px rgba(5, 12, 26, 0.2); border-radius: var(--radius-sm); padding: 7px 14px; font-size: 13px; cursor: pointer; backdrop-filter: blur(10px); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .btn-basic:hover { background: rgba(59, 130, 246, 0.2); color: #fff; border-color: rgba(59, 130, 246, 0.4); box-shadow: 0 18px 36px -24px rgba(59, 130, 246, 0.4); } .btn-basic:disabled { opacity: 0.6; cursor: not-allowed; } html.light .btn-basic { background: rgba(15, 23, 42, 0.08); border: 1px solid rgba(15, 23, 42, 0.12); color: #0f172a; text-shadow: none; } html.light .btn-basic:hover { color: #fff; } html.light .btn, html.light .btn-sm, html.light .deploy, html.light .sync, html.light .action-btn { color: #ffffff; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35); } .inventory-counter { display: inline-block; background: var(--card-bg); padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; color: var(--muted); margin: 8px 0 14px; transition: transform 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s cubic-bezier(0.4,0,0.2,1); } .inventory-counter:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,42,95,0.13); } /* ---------- Optimization Module ---------- */ .optimization-chart-card { display: flex; flex-direction: column; gap: 16px; } .optimization-chart-card canvas { width: 100%; max-height: 340px; } .optimization-insights-card { display: flex; flex-direction: column; gap: 16px; } .optimization-insights-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; } .optimization-insights-state { font-size: 14px; color: var(--muted); } .optimization-insights-state.hidden { display: none; } .optimization-insights-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .optimization-insight { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; background: rgba(15, 23, 42, 0.5); display: flex; flex-direction: column; gap: 12px; min-height: 220px; min-width: 0; overflow-wrap: break-word; word-break: normal; white-space: normal; } .optimization-insight.tone-warning { border-left: 4px solid var(--warn); } .optimization-insight.tone-positive { border-left: 4px solid var(--success); } html.light .optimization-insight { background: rgba(236, 241, 247, 0.92); } .optimization-insight-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .optimization-insight-heading { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 220px; min-width: 0; } .optimization-insight-header h3 { margin: 0; font-size: 18px; color: var(--text); overflow-wrap: break-word; word-break: normal; white-space: normal; } .optimization-insight-header p { margin: 6px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: break-word; word-break: normal; white-space: normal; } .optimization-insight-icon { font-size: 24px; line-height: 1; } .optimization-insight-total { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; text-align: right; max-width: 100%; overflow-wrap: break-word; word-break: normal; white-space: normal; } .optimization-insight-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .optimization-insight-item { border: 1px solid rgba(59, 130, 246, 0.28); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: rgba(15, 23, 42, 0.32); min-width: 0; overflow-wrap: break-word; word-break: normal; white-space: normal; } .optimization-insight-item.tone-warning { border-color: rgba(250, 204, 21, 0.45); background: rgba(71, 49, 12, 0.46); } .optimization-insight-item.tone-positive { border-color: rgba(34, 197, 94, 0.35); background: rgba(16, 56, 32, 0.38); } html.light .optimization-insight-item { background: rgba(236, 241, 247, 0.92); } .optimization-insight-item-title { margin: 0; font-weight: 600; color: var(--text); font-size: 14px; overflow-wrap: break-word; word-break: normal; white-space: normal; } .optimization-insight-item-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); overflow-wrap: break-word; word-break: normal; white-space: normal; } .optimization-insight-item-savings { font-weight: 600; color: var(--text); } .optimization-insight-empty { font-size: 13px; color: var(--muted); } .optimization-insight-footer { display: flex; justify-content: flex-end; } .optimization-active-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .optimization-active-filter.hidden { display: none; } .optimization-active-filter .btn-mini { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.18); color: var(--text); font-size: 12px; cursor: pointer; } .optimization-resource-cell { display: flex; flex-direction: column; gap: 4px; } .optimization-resource-sub { font-size: 12px; color: var(--muted); } .optimization-category-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .optimization-category-cell .badge + span { font-size: 12px; color: var(--muted); } .optimization-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .optimization-section-header .muted { margin: 0; } .optimization-chart-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .optimization-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .optimization-filters .input { min-width: 160px; } .optimization-table-card .table-wrapper { overflow-x: auto; } .optimization-table-summary { margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(59, 130, 246, 0.12); color: var(--text); font-weight: 600; display: inline-flex; gap: 12px; align-items: center; } .optimization-table-summary span { display: inline-flex; align-items: center; gap: 6px; } html.light .optimization-table-summary { background: rgba(37, 99, 235, 0.08); color: #0f172a; } .optimization-table-card td:first-child, .optimization-table-card th:first-child { text-align: center; width: 52px; } .optimization-table-card td:nth-child(3) { min-width: 180px; } .optimization-table-card td:nth-child(4) { min-width: 150px; } .optimization-table-card td:last-child { min-width: 130px; } .optimization-table-card .btn-sm[data-mode="demo"] { opacity: 0.55; cursor: not-allowed; } #optimizationLoading { font-weight: 600; } #optimizationLoading.hidden { display: none; } #optimizationEmpty { margin-top: 12px; } /* ---- Unificado: Card Metric ---- */ .card-metric { position: relative; background: var(--card-bg); border-radius: var(--radius); box-shadow: 0 22px 48px -30px rgba(15, 23, 42, 0.85); padding: clamp(1rem, 0.85rem + 0.8vw, 1.6rem) clamp(1.1rem, 0.95rem + 0.9vw, 1.8rem); border: 1px solid rgba(148, 163, 184, 0.18); min-height: clamp(6.5rem, 5.5rem + 1.2vw, 7.5rem); display: flex; flex-direction: column; justify-content: center; gap: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .card-metric::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(124, 58, 237, 0.06)); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .card-metric:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -30px rgba(59, 130, 246, 0.55); border-color: rgba(59, 130, 246, 0.32); } .card-metric:hover::after { opacity: 1; } .metric-label { color: var(--muted); opacity: 0.85; font-weight: 600; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 1px; } .metric-value { margin-top: 2px; font-weight: 700; font-size: clamp(1.35rem, 1.2rem + 1vw, 1.8rem); color: var(--text); letter-spacing: 0.4px; } /* Refuerzo: valores de métricas y strong en métricas usan color neutro */ .metric-value, .card-metric strong { color: var(--text) !important; } /* ---- Unificado: Panel ---- */ .panel { position: relative; background: var(--card-bg); border-radius: var(--radius); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 24px 50px -32px rgba(15, 23, 42, 0.85); padding: 20px; backdrop-filter: blur(16px); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .panel:hover { border-color: rgba(59, 130, 246, 0.25); box-shadow: 0 28px 58px -30px rgba(59, 130, 246, 0.45); } /* ---- Unificado: Badge ---- */ .badge { display: inline-block; padding: 6px 14px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--status-neutral-text); background: var(--status-neutral-bg); border: 1px solid var(--status-neutral-border); min-width: 70px; text-align: center; cursor: pointer; transition: filter 0.15s, box-shadow 0.15s, background 0.15s; } .badge.green { background: var(--status-success-bg); color: var(--status-success-text); border-color: var(--status-success-border); } .badge.amber { background: var(--status-warning-bg); color: var(--status-warning-text); border-color: var(--status-warning-border); } .badge.red { background: var(--status-danger-bg); color: var(--status-danger-text); border-color: var(--status-danger-border); } .badge.blue { background: var(--status-info-bg); color: var(--status-info-text); border-color: var(--status-info-border); } .badge:hover { filter: brightness(1.05); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } /* ---- Unificado: Modal ---- */ @keyframes modalFadeIn { from { opacity: 0; transform: translateY(-10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes modalFadeOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(0.96); } } /* Modal rules consolidated earlier */ /* Body consolidated earlier */ /* ---- Fix: Submenu oculto ---- */ .submenu.hidden { display: none; } /* ---- Fix: Canvas de gráfica más limpio ---- */ .inventory-layout .chart-container canvas { max-width: 100%; height: auto; max-height: 320px; object-fit: contain; filter: brightness(0.9) saturate(0.85); opacity: 0.92; border-radius: 12px; background: transparent; /* quitar bloque blanco */ padding: 8px; color: #fff !important; } /* Badges consolidated earlier */ /* ---- Panels con menos sombra y más consistencia ---- */ .panel { background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 4px 10px rgba(0,0,0,0.25); padding: 20px; } /* ---- Flip Card Effect for Dashboard Metrics ---- */ .flip-card { background: transparent; perspective: 1000px; min-height: 320px; height: 100%; cursor: pointer; width: 100%; display: block; } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; border-radius: calc(var(--radius) + 14px); box-shadow: none; } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: inherit; overflow: hidden; } .card-front { min-height: 230px; display: flex; flex-direction: column; justify-content: center; } .card-back { background: linear-gradient(135deg, rgba(var(--prov-color-rgb, 59, 130, 246), 0.18), rgba(16, 24, 42, 0.94)); color: #fff; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; align-items: center; /* centra horizontalmente */ text-align: center; /* centra textos */ padding: 20px; font-size: 14px; min-height: 230px; height: 100%; } .card-back h4 { font-size: 10px; margin: 0 0 4px 0; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; color: #dbeafe; opacity: 0.85; } .card-back p { font-size: 14px; font-weight: 700; margin: 0 0 8px 0; color: #fff; letter-spacing: 0.4px; line-height: 1.3; } .card-back .metric-block { margin: 0; padding: 8px 0; display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .card-back .metric-block h4 { width: 100%; text-align: left; } .card-back .metric-block p { width: 100%; text-align: left; } .card-back .provider-recommendations { flex: 1; overflow-y: auto; } .card-back .recommendations-list { list-style: none; padding: 0; margin: 4px 0 0 0; font-size: 12px; text-align: left; width: 100%; } .card-back .recommendations-list li { padding: 4px 0; line-height: 1.4; color: #e0e7ff; } /* ---------- Métricas: Botón global de refresco y cabecera de sección ---------- */ .section-header { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 10px; } .metrics-refresh-btn { background: linear-gradient(90deg, #2563eb, #7c3aed); color: #fff; font-weight: 600; border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .metrics-refresh-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(124, 58, 237, 0.28); } /* ---------- Connect Dropdown Button ---------- */ /* ---------- Connect Dropdown Button ---------- */ .connect-dropdown { position: relative; display: inline-block; } /* Connect Dropdown Button */ .connect-btn { background: linear-gradient(90deg, #2563eb, #7c3aed); color: #fff; font-weight: 600; border: none; border-radius: 8px; padding: 10px 16px; font-size: 14px; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .connect-btn::after { content: none; } .connect-btn:hover { opacity: 0.95; transform: translateY(-1px); } .connect-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 18px rgba(0,0,0,0.35); z-index: 1500; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; padding: 6px 0; } .connect-menu ul { list-style: none; margin: 0; padding: 0; } .connect-menu li { padding: 10px 14px; font-size: 14px; color: var(--text); text-align: left; border-radius: 6px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .connect-menu li:hover { background: rgba(59,130,246,0.2); color: #fff; } .connect-dropdown.show .connect-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Metric cards sizing & responsiveness */ .card-metric{ background: var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(1rem,.85rem + .8vw,1.6rem) clamp(1.05rem,.9rem + .8vw,1.7rem); min-height:clamp(6rem,5.3rem + 1vw,7rem); display:flex; flex-direction:column; justify-content:center } .metric-label{ color: var(--muted); font-size:14px } .metric-value{ font-weight:800; font-size:clamp(18px, 4vw, 28px); line-height:1.2 } /* Tables */ .table{ width:100%; border-collapse: collapse } .table thead th{ text-align:left; padding:clamp(.6rem,.55rem + .25vw,.85rem) clamp(.75rem,.65rem + .45vw,1.25rem); color:var(--muted); border-bottom:1px solid var(--border) } .table tbody td{ padding:clamp(.6rem,.55rem + .2vw,.85rem) clamp(.75rem,.65rem + .4vw,1.2rem); border-bottom:1px solid var(--border) } .panel{ background:var(--card-bg); border-radius:var(--radius); padding:var(--panel-padding); box-shadow:var(--shadow) } .provider-themed{ border:1px solid var(--border) } .table-wrapper{ overflow:auto; width:100% } .intelligence-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin:24px 0 } .intelligence-card{ display:flex; flex-direction:column; gap:12px; min-height:280px } .intelligence-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px } .intelligence-header h3{ margin:0; font-size:18px } .intel-controls{ display:flex; gap:clamp(.45rem,.4rem + .3vw,.8rem); flex-wrap:wrap } .intel-controls button{ border:1px solid var(--border); background:var(--card-bg); color:var(--muted); padding:clamp(.45rem,.4rem + .2vw,.7rem) clamp(.75rem,.65rem + .4vw,1.2rem); border-radius:clamp(.9rem,.8rem + .4vw,1.4rem); font-size:var(--font-size-sm); cursor:pointer; transition:all .2s ease } .intel-controls button.active{ background:var(--primary); color:#fff; border-color:var(--primary) } .intel-list{ display:flex; flex-direction:column; gap:clamp(.5rem,.45rem + .3vw,.9rem); max-height:240px; overflow:auto } .intel-item{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:clamp(.75rem,.65rem + .4vw,1.2rem) clamp(1rem,.85rem + .5vw,1.5rem); background:var(--bg); display:flex; flex-direction:column; gap:clamp(.4rem,.35rem + .2vw,.7rem) } .intel-item strong{ font-size:var(--font-size-base) } .intel-resource-line{ display:flex; flex-direction:column; gap:clamp(.3rem,.25rem + .2vw,.5rem); padding:clamp(.4rem,.35rem + .2vw,.6rem) 0; border-top:1px solid rgba(148,163,184,.2) } .intel-item .intel-resource-line:first-of-type{ border-top:none; padding-top:0 } .intel-resource-id{ font-weight:600; font-size:var(--font-size-sm) } .intel-provider-label{ font-size:var(--font-size-xs); color:var(--muted) } .intel-tags{ display:flex; gap:clamp(.4rem,.35rem + .3vw,.7rem); flex-wrap:wrap } .intel-tag{ background:rgba(37,99,235,.12); color:#1d4ed8; padding:clamp(.3rem,.25rem + .2vw,.5rem) clamp(.55rem,.45rem + .3vw,.9rem); border-radius:clamp(.75rem,.65rem + .3vw,1.1rem); font-size:var(--font-size-xs); text-transform:uppercase; letter-spacing:.5px } .intel-meta{ font-size:var(--font-size-xs); color:var(--muted); display:flex; gap:clamp(.6rem,.5rem + .4vw,1rem); flex-wrap:wrap } .intel-footer{ font-size:var(--font-size-xs) } .intel-summary{ font-size:var(--font-size-sm); display:flex; flex-wrap:wrap; gap:clamp(.6rem,.5rem + .4vw,1rem) } .intel-risks{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:clamp(.65rem,.55rem + .4vw,1.1rem); max-height:260px; overflow:auto } .intel-risks li{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:clamp(.85rem,.75rem + .4vw,1.3rem) clamp(1.05rem,.9rem + .5vw,1.6rem); background:var(--bg); display:flex; flex-direction:column; gap:clamp(.45rem,.4rem + .3vw,.8rem) } .intel-risks li header{ display:flex; justify-content:space-between; align-items:center; gap:clamp(.6rem,.5rem + .3vw,1rem) } .intel-risks .risk-title{ font-weight:600 } .intel-risks .risk-meta{ font-size:var(--font-size-xs); color:var(--muted); display:flex; gap:clamp(.55rem,.45rem + .3vw,.9rem); flex-wrap:wrap } .risk-pill{ display:inline-flex; align-items:center; padding:clamp(.3rem,.25rem + .2vw,.5rem) clamp(.55rem,.45rem + .3vw,.9rem); border-radius:999px; font-size:var(--font-size-xs); letter-spacing:.5px; text-transform:uppercase; font-weight:700 } .risk-pill.high{ background:#fee2e2; color:#b91c1c } .risk-pill.medium{ background:#fef3c7; color:#92400e } .risk-pill.low{ background:#dcfce7; color:#166534 } .dependency-legend{ display:flex; flex-wrap:wrap; gap:clamp(.45rem,.4rem + .3vw,.8rem); font-size:var(--font-size-xs); color:var(--muted) } .dependency-legend span{ display:inline-flex; align-items:center; gap:clamp(.35rem,.3rem + .2vw,.55rem) } .legend-dot{ width:clamp(8px,1vw,12px); height:clamp(8px,1vw,12px); border-radius:50%; display:inline-block } .dependency-viewport{ position:relative; width:100%; height:260px } #dependencyGraph{ width:100%; height:100% } .dependency-link{ stroke:rgba(148,163,184,.6); stroke-width:1.4 } .dependency-node circle{ stroke:#fff; stroke-width:1.5px } .dependency-node text{ font-size:11px; fill:var(--muted) } .risk-badge{ display:inline-flex; margin-left:8px; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; letter-spacing:.5px; color:#fff } .risk-badge.high{ background:#b91c1c } .risk-badge.medium{ background:#92400e } .risk-badge.low{ background:#166534 } .has-risk{ background:rgba(185,28,28,0.06) } /* Modal sizing */ .modal .modal-content{ width:min(92vw, 840px) } /* Make charts responsive */ canvas{ max-width:100%; height:auto } /* Responsive breakpoints */ @media (max-width: 1200px){ .app{ grid-template-columns:240px 1fr } } @media (max-width: 900px){ .app{ grid-template-columns:1fr } .sidebar{ position:relative; height:auto; padding:clamp(1.3rem,1.1rem + .9vw,1.9rem) clamp(1rem,.85rem + .6vw,1.5rem) } .header{ padding:clamp(1rem,.85rem + .7vw,1.5rem) } .main{ padding:0 clamp(1rem,.85rem + .7vw,1.6rem) clamp(1.5rem,1.2rem + 1vw,2.2rem) } .grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) } .providers{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) } } @media (max-width: 480px){ h1{ font-size: clamp(1.5rem, 1.35rem + 1vw, 1.9rem) } .section-title{ font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem) } .btn, .btn-sm{ padding:clamp(.55rem,.5rem + .3vw,.8rem) clamp(.85rem,.75rem + .5vw,1.2rem); font-size:var(--font-size-sm) } .card{ padding: clamp(1rem,.85rem + .9vw,1.6rem); width:min(96vw, 560px) } } /* ---------- Inventory Optimization Cards ---------- */ .inventory-optimization { margin-bottom: clamp(1.2rem, 1rem + 0.8vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.1rem, 0.95rem + 0.8vw, 1.8rem); background: var(--card-bg); box-shadow: var(--shadow); } .optimization-summary { display: flex; align-items: center; justify-content: space-between; gap: clamp(0.9rem, 0.75rem + 0.5vw, 1.5rem); flex-wrap: wrap; } .optimization-title h3 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); color: var(--text); } .optimization-title p { margin: 6px 0 0; font-size: var(--font-size-sm); } .optimization-total { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem); } .optimization-total-label { font-size: var(--font-size-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .optimization-total-value { font-size: clamp(1.35rem, 1.2rem + 0.9vw, 1.9rem); font-weight: 700; color: var(--text); } .optimization-body { margin-top: 18px; } .optimization-loading, .optimization-empty { font-size: 14px; color: var(--muted); padding: 12px 0; } .optimization-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .optimization-item { border: 1px solid var(--border); border-left: 6px solid var(--primary); border-radius: 14px; padding: 18px 20px; background: rgba(15, 23, 42, 0.55); display: flex; flex-direction: column; gap: 10px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .optimization-item:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -22px rgba(59, 130, 246, 0.55); } .optimization-item.tone-positive { border-left-color: var(--success); background: rgba(16, 56, 32, 0.45); } .optimization-item.tone-warning { border-left-color: var(--warn); background: rgba(70, 50, 12, 0.45); } .optimization-item-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .optimization-item-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .impact-badge { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; text-transform: uppercase; } .impact-badge.impact-high { background: var(--status-danger-bg); color: var(--status-danger-text); border: 1px solid var(--status-danger-border); } .impact-badge.impact-medium { background: var(--status-warning-bg); color: var(--status-warning-text); border: 1px solid var(--status-warning-border); } .impact-badge.impact-low { background: var(--status-info-bg); color: var(--status-info-text); border: 1px solid var(--status-info-border); } .optimization-item h4 { margin: 0; font-size: 17px; color: var(--text); overflow-wrap: break-word; word-break: normal; white-space: normal; } .optimization-item p { margin: 0; font-size: 13px; color: var(--muted); overflow-wrap: break-word; word-break: normal; white-space: normal; } .optimization-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 16px; margin: 6px 0 0; } .optimization-metrics dt { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.03em; } .optimization-metrics dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--text); } .optimization-footer { margin-top: 8px; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 16px; } @media (max-width: 640px) { .optimization-total { align-items: flex-start; } .optimization-total-value { font-size: 22px; } } /* Optimization overflow fixes */ .optimization-insight, .optimization-insight * { min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .optimization-item, .optimization-item * { min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .optimization-insight-total, .optimization-total-value { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 820px) { .optimization-insight-total { flex-basis: 100%; align-items: flex-start; text-align: left; } } @media (max-width: 640px) { .optimization-insights-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } /* -------- Agents: Live metrics & advanced config -------- */ .metrics-layout { display: grid; gap: 20px; } @media (min-width: 1024px) { .metrics-layout { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: stretch; } } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .metrics-grid .metric-card h4 { margin-bottom: 4px; } .metrics-grid .metric-card p { margin-bottom: 0; } .metric-stat { font-size: 28px; font-weight: 600; margin-bottom: 12px; color: var(--text); } .metrics-grid .metric-meta { display: flex; flex-direction: column; gap: 6px; } .metrics-logs { max-height: 420px; display: flex; flex-direction: column; } .metrics-logs .log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .metrics-logs .log-entry { border-left: 3px solid var(--primary-500); padding-left: 12px; } .metrics-logs .log-entry time { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; } .metrics-logs .log-entry .log-message { margin: 0; color: var(--text); } .metrics-logs .log-entry[data-level='warning'] { border-color: var(--warn); } .metrics-logs .log-entry[data-level='error'] { border-color: var(--danger); } .filters-group { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; padding: 12px 16px 16px; margin-bottom: 16px; } .filters-group legend { font-weight: 600; padding: 0 4px; } .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 999px; padding: 6px 12px; background: rgba(148, 163, 184, 0.12); font-size: 13px; color: var(--text); } .filter-chip input { accent-color: var(--primary-500); } .divider { width: 100%; height: 1px; background: rgba(148, 163, 184, 0.26); margin: 16px 0; } /* ===== LIGHT MODE ADDITIONAL FIXES ===== */ html.light .panel { background: var(--card-bg); color: var(--text); } html.light .panel-head { color: var(--text); } html.light .section-title { color: var(--text); } html.light .muted, html.light .section-subtitle { color: var(--muted); } html.light .card { background: var(--card-bg); color: var(--text); border-color: var(--border); } html.light .table { background: var(--card-bg); color: var(--text); } html.light .table th { background: rgba(37, 99, 235, 0.06); color: var(--text); border-color: var(--border); } html.light .table td { color: var(--text); border-color: var(--border); } html.light .metric-label { color: var(--muted); } html.light .metric-value { color: var(--text); } html.light .metric-note { color: var(--muted); } html.light h1, html.light h2, html.light h3, html.light h4, html.light h5, html.light h6 { color: var(--text); } html.light .input { background: #ffffff; border-color: rgba(15, 23, 42, 0.15); color: var(--text); } html.light .input::placeholder { color: var(--muted); } html.light .filter-chip { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.18); color: var(--text); } /* ===== DASHBOARD-SPECIFIC LIGHT THEME FIXES ===== */ /* Finance Summary Cards */ html.light .finance-summary-card { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } html.light .finance-card-head { border-bottom: 1px solid #e5e7eb; } html.light .finance-provider-name { color: #111827; font-weight: 600; } html.light .finance-stat .label { color: #6b7280; font-size: 12px; } html.light .finance-stat .value { color: #111827; font-weight: 600; } html.light .finance-summary-totals { background: #f9fafb; border-top: 1px solid #e5e7eb; padding: 16px; } html.light .finance-total { color: #374151; } html.light .finance-total strong { color: #111827; font-weight: 700; } /* Finance Alerts */ html.light .finance-alerts-container { display: flex; flex-direction: column; gap: 12px; } html.light .finance-alert-item { background: #ffffff; border: 1px solid #e5e7eb; border-left-width: 4px; border-left-style: solid; border-radius: 8px; padding: 16px; } html.light .finance-alert-item.severity-red { border-left-color: #ef4444; background: #fef2f2; } html.light .finance-alert-item.severity-amber { border-left-color: #f59e0b; background: #fffbeb; } html.light .finance-alert-item.severity-blue { border-left-color: #3b82f6; background: #eff6ff; } html.light .finance-alert-text { color: #111827; flex: 1; } html.light .finance-alert-icon { font-size: 18px; margin-right: 8px; } html.light .alert-detail-btn { background: #3b82f6; color: #ffffff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; transition: background 0.2s; } html.light .alert-detail-btn:hover { background: #2563eb; } /* Benchmark Table */ html.light .benchmark-table { width: 100%; border-collapse: collapse; } html.light .benchmark-table th { background: rgba(37, 99, 235, 0.06); color: #111827; border-bottom: 2px solid #e5e7eb; padding: 12px; text-align: left; font-weight: 600; } html.light .benchmark-table td { color: #374151; border-bottom: 1px solid #e5e7eb; padding: 12px; } html.light .cost-index-wrapper { display: flex; align-items: center; gap: 12px; } html.light .cost-index-value { color: #111827; font-weight: 600; min-width: 40px; } html.light .cost-index-bar { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; } html.light .cost-index-bar span { display: block; height: 100%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); border-radius: 4px; transition: width 0.3s; } html.light .gap-positive { color: #10b981; font-weight: 600; } html.light .gap-negative { color: #ef4444; font-weight: 600; } /* Flip Cards - Provider Cards */ html.light .flip-card { background: transparent; } html.light .flip-card .card-front { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } html.light .provider-card-front { padding: 20px; } html.light .provider-name { color: #111827; font-weight: 700; font-size: 18px; } html.light .provider-spend-label { color: #6b7280; font-size: 12px; margin-top: 8px; } html.light .provider-spend-value { color: #111827; font-weight: 700; font-size: 24px; margin-top: 4px; } html.light .flip-card .card-back { background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(255, 255, 255, 0.95) ); color: #111827; border: 1px solid #e5e7eb; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } html.light .card-back h4 { color: #374151; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } html.light .card-back p { color: #111827; font-weight: 600; margin: 0 0 8px 0; } html.light .card-back .metric-block { border-bottom: 1px solid #e5e7eb; padding: 12px 0; } html.light .card-back .metric-block:last-child { border-bottom: none; } html.light .card-back .provider-consumption { color: #111827; font-size: 13px; } html.light .card-back .provider-savings-pct { color: #059669; font-size: 16px; font-weight: 700; } html.light .card-back .recommendations-list { list-style: none; padding: 0; margin: 4px 0 0 0; text-align: left; } html.light .card-back .recommendations-list li { color: #374151; font-size: 12px; line-height: 1.5; padding: 4px 0; position: relative; padding-left: 16px; } html.light .card-back .recommendations-list li:before { content: "•"; position: absolute; left: 0; color: #3b82f6; font-weight: bold; } /* Agent Summary */ html.light .agent-summary { padding: 16px; } html.light .agent-summary-block { color: #111827; } html.light .agent-summary-block .muted { color: #6b7280; font-size: 13px; } html.light #agent-active-count { color: #111827; font-weight: 700; } html.light #agent-last-name { color: #111827; font-weight: 600; } html.light #agent-last-provider { color: #6b7280; } html.light #agent-last-date { color: #9ca3af; font-size: 12px; } /* Status Badges */ html.light .badge { font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.3px; } html.light .badge.green { background: #d1fae5; color: #065f46; border: 1px solid #10b981; } html.light .badge.amber { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; } html.light .badge.red { background: #fee2e2; color: #991b1b; border: 1px solid #ef4444; } html.light .badge.blue { background: #dbeafe; color: #1e40af; border: 1px solid #3b82f6; } /* Modals in Light Mode */ html.light .modal { background: rgba(0, 0, 0, 0.5); } html.light .modal-content { background: #ffffff; color: #111827; border: 1px solid #e5e7eb; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } html.light .modal h3 { color: #111827; border-bottom: 1px solid #e5e7eb; padding-bottom: 12px; } html.light .modal-close { color: #6b7280; background: transparent; } html.light .modal-close:hover { color: #111827; background: #f3f4f6; } html.light .alert-modal-header { border-bottom: 1px solid #e5e7eb; padding-bottom: 16px; margin-bottom: 16px; } html.light .alert-provider-chip { background: #f3f4f6; border: 1px solid #e5e7eb; } html.light .alert-modal-title h3 { color: #111827; border-bottom: none; padding-bottom: 0; } html.light .alert-severity-pill { padding: 6px 12px; border-radius: 16px; font-weight: 600; font-size: 12px; } html.light .alert-severity-pill[data-severity="red"] { background: #fee2e2; color: #991b1b; } html.light .alert-severity-pill[data-severity="amber"] { background: #fef3c7; color: #92400e; } html.light .alert-severity-pill[data-severity="blue"] { background: #dbeafe; color: #1e40af; } html.light .alert-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; } html.light .alert-detail-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; } html.light .alert-detail-card .label { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } html.light .alert-detail-card .value { color: #111827; font-weight: 600; font-size: 14px; } html.light .alert-trend { margin: 20px 0; } html.light .alert-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } html.light .alert-section-head h4 { color: #111827; font-size: 14px; font-weight: 600; margin: 0; } html.light .pill { background: #f3f4f6; color: #374151; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; } html.light .alert-recommendation-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; } html.light .alert-recommendation-card h5 { color: #111827; font-size: 13px; font-weight: 600; margin: 0 0 6px 0; } html.light .alert-recommendation-card p { color: #374151; font-size: 12px; line-height: 1.5; margin: 0; } html.light .alert-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e5e7eb; } html.light .alert-actions .btn { flex: 1; min-width: 140px; } html.light .btn.ghost { background: transparent; border: 1px solid #d1d5db; color: #374151; } html.light .btn.ghost:hover { background: #f9fafb; border-color: #9ca3af; } html.light .btn.outline { background: transparent; border: 1px solid #3b82f6; color: #3b82f6; } html.light .btn.outline:hover { background: #eff6ff; } html.light .btn.success { background: #10b981; color: #ffffff; border: none; } html.light .btn.success:hover { background: #059669; } /* Provider Logos in Light Mode */ html.light .logo-wrap { filter: brightness(0.9) contrast(1.1); } /* Finance Summary Grid */ html.light .finance-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 16px 0; } /* Card Metrics in Light Mode */ html.light .card-metric { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } html.light .card-metric .metric-label { color: #6b7280; } html.light .card-metric .metric-value { color: #111827; font-weight: 700; } /* Page Title and Subtitle */ html.light .page-title h1 { color: #111827; } html.light .page-subtitle { color: #6b7280; } html.light .section-header { border-bottom: 1px solid #e5e7eb; padding-bottom: 12px; margin-bottom: 20px; } /* Misc Dashboard Elements */ html.light .finance-benchmark-hint { color: #6b7280; font-size: 12px; font-style: italic; } /* Demo mode: Hide technical/infrastructure elements */ body.demo-mode .demo-hidden { display: none !important; } html.light .table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; } html.light .alert-message { color: #374151; line-height: 1.6; margin-bottom: 16px; } html.light .alert-trend-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 11px; color: #6b7280; }