/* * apiusage dashboard — estilos propios. * * Paleta corporativa expresada como custom properties CSS nativas (sin LESS * ni preprocesador): primario #0076A4, acento #F0A500, degradado de cabecera * #005A7D -> #0076A4. Bootstrap 5 se sirve desde CDN (ver de cada * página) y este fichero solo aporta la capa de marca encima. */ :root { --color-primary: #0076A4; --color-primary-dark: #005A7D; --color-accent: #F0A500; --color-accent-dark: #C98600; --color-surface: #FFFFFF; --color-surface-muted: #F4F7F9; --color-border: #DCE4E8; --color-text: #1F2D34; --color-text-muted: #5B6C74; --color-success: #1E8E5A; --color-danger: #C4362B; --color-warning: var(--color-accent); --header-gradient: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); --radius-md: 0.5rem; --radius-lg: 0.75rem; --shadow-card: 0 1px 3px rgba(15, 41, 51, 0.08), 0 1px 2px rgba(15, 41, 51, 0.06); } @media (prefers-color-scheme: dark) { :root { --color-surface: #16232A; --color-surface-muted: #1D2E36; --color-border: #2A3E47; --color-text: #E7EEF1; --color-text-muted: #9FB2BA; } } body { background-color: var(--color-surface-muted); color: var(--color-text); } /* ─── Login ─────────────────────────────────────────────────────── */ body.login-page { min-height: 100vh; display: flex; align-items: center; background: var(--header-gradient); } .login-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; } .login-header { background: var(--header-gradient); color: #fff; padding: 2rem 1.5rem 1.5rem; text-align: center; } .login-header h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; } .login-body { padding: 1.75rem 1.75rem 2rem; } /* ─── Navbar ────────────────────────────────────────────────────── */ .navbar-brand-app { background: var(--header-gradient); } .navbar-brand-app .navbar-brand, .navbar-brand-app .nav-link { color: rgba(255, 255, 255, 0.88) !important; } .navbar-brand-app .nav-link.active, .navbar-brand-app .nav-link:hover { color: #fff !important; } .navbar-brand-app .nav-link.active { position: relative; } .navbar-brand-app .nav-link.active::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: -1px; height: 2px; background: var(--color-accent); border-radius: 2px; } /* ─── Tarjetas KPI ──────────────────────────────────────────────── */ .kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 1.1rem 1.25rem; height: 100%; } .kpi-card .kpi-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 0.35rem; } .kpi-card .kpi-value { font-size: 1.7rem; font-weight: 700; color: var(--color-primary-dark); } .kpi-card .kpi-value.accent { color: var(--color-accent-dark); } /* ─── Tarjetas / paneles genéricos ──────────────────────────────── */ .app-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 1.25rem; } .app-card > .app-card-title { font-weight: 600; margin-bottom: 1rem; color: var(--color-primary-dark); } /* ─── Botones de marca ──────────────────────────────────────────── */ .btn-app-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-app-primary:hover, .btn-app-primary:focus { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; } .btn-app-accent { background-color: var(--color-accent); border-color: var(--color-accent); color: #1F2D34; } .btn-app-accent:hover, .btn-app-accent:focus { background-color: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #1F2D34; } /* ─── Tablas ────────────────────────────────────────────────────── */ .table-app thead th { background-color: var(--color-surface-muted); color: var(--color-text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid var(--color-border); white-space: nowrap; } .table-app td, .table-app th { vertical-align: middle; } .status-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .status-badge.status-2xx { background: rgba(30, 142, 90, 0.12); color: var(--color-success); } .status-badge.status-3xx { background: rgba(0, 118, 164, 0.12); color: var(--color-primary); } .status-badge.status-4xx { background: rgba(240, 165, 0, 0.15); color: var(--color-accent-dark); } .status-badge.status-5xx { background: rgba(196, 54, 43, 0.12); color: var(--color-danger); } /* ─── Utilidades ────────────────────────────────────────────────── */ .text-app-primary { color: var(--color-primary); } .text-app-muted { color: var(--color-text-muted); } .bg-app-header { background: var(--header-gradient); } .hash-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 0.35rem; padding: 0.1rem 0.4rem; font-size: 0.85rem; }