:root { --valor-orange: #ed670d; --valor-orange-dark: #bd4805; --valor-bg: #f7f8fa; --valor-ink: #1d2733; --valor-muted: #667281; --valor-border: #e2e6ea; }
* { box-sizing: border-box; } body { color: var(--valor-ink); background: var(--valor-bg); font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } h1,h2,h3 { font-weight: 700; letter-spacing: -.02em; } h1 { font-size: 2rem; } h2 { font-size: 1.15rem; } .btn-valor { background: var(--valor-orange); border-color: var(--valor-orange); color: #fff; font-weight: 650; } .btn-valor:hover { background: var(--valor-orange-dark); border-color: var(--valor-orange-dark); color: #fff; } .login-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(135deg,#fff 0%,#fff7f0 100%); } .login-card { width: min(100%, 430px); padding: 2.5rem; background: #fff; border: 1px solid var(--valor-border); border-radius: 18px; box-shadow: 0 14px 40px rgb(27 34 43 / 9%); } .login-card h1 { margin: 1rem 0 .25rem; } .form-control { min-height: 46px; border-color: #cfd6dc; } .form-control:focus { border-color: var(--valor-orange); box-shadow: 0 0 0 .2rem rgb(237 103 13 / 15%); } .brand-mark { display: inline-grid; place-items: center; width: 35px; height: 35px; border-radius: 9px; background: var(--valor-orange); color: white; font-weight: 800; } .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 256px; flex: 0 0 256px; padding: 1.35rem 1rem; background: #fff; border-right: 1px solid var(--valor-border); } .sidebar-brand { display: flex; align-items: center; gap: .75rem; margin: 0 .55rem 2rem; color: var(--valor-ink); font-size: 1.25rem; font-weight: 750; text-decoration: none; } .sidebar-brand small, .nav-link small { display: block; color: var(--valor-muted); font-size: .7rem; font-weight: 500; } .nav-link { margin: .16rem 0; padding: .6rem .75rem; color: #485565; border-radius: 8px; font-weight: 600; } .nav-link.active { color: var(--valor-orange-dark); background: #fff0e5; } .nav-link.disabled { opacity: .58; cursor: not-allowed; } .main-content { width: 100%; padding: 2rem clamp(1.5rem, 4vw, 4.5rem); } .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.8rem; } .topbar h1 { margin: 0; } .eyebrow { margin: 0 0 .35rem; color: var(--valor-orange-dark); font-size: .72rem; font-weight: 800; letter-spacing: .1em; } .user-menu { display: flex; align-items: center; gap: .8rem; color: var(--valor-muted); } .user-menu form { margin: 0; } .user-menu .btn { padding: .25rem; color: var(--valor-orange-dark); } .action-card,.kpi-card,.recent { width: 100%; background: #fff; border: 1px solid var(--valor-border); border-radius: 12px; } .action-card { padding: 1.1rem; text-align: left; color: var(--valor-ink); font-weight: 700; } .action-card:disabled { opacity: 1; } .action-card small,.kpi-card span { display: block; margin-top: .25rem; color: var(--valor-muted); font-weight: 400; font-size: .82rem; } .action-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: .65rem; border-radius: 50%; background: #fff0e5; color: var(--valor-orange-dark); font-size: 1.25rem; } .kpi-card { min-height: 144px; padding: 1.15rem; } .kpi-card p { margin: 0 0 1rem; color: var(--valor-muted); font-size: .9rem; } .kpi-card strong { display: block; font-size: 2rem; line-height: 1; } .recent { padding: 1.5rem; } .empty-state { padding: 3.2rem 1rem 1.2rem; text-align: center; color: var(--valor-muted); } .empty-state div { color: var(--valor-orange); font-size: 2rem; } .empty-state h3 { margin: .4rem 0; color: var(--valor-ink); font-size: 1rem; } .empty-state p { margin: 0; font-size: .9rem; } .page-actions { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; } .search-form { display:flex; gap:.5rem; width:min(100%, 550px); } .table-card,.form-card,.detail-card,.admin-card { background:#fff; border:1px solid var(--valor-border); border-radius:12px; padding:1.25rem; } .table-card { padding:0; overflow:hidden; } .table th { color:var(--valor-muted); font-size:.8rem; white-space:nowrap; } .table td { vertical-align:middle; } .table a { color:var(--valor-orange-dark); text-decoration:none; } .status { display:inline-block; border-radius:999px; padding:.2rem .55rem; font-size:.78rem; font-weight:700; } .status-ok { color:#146c43; background:#d1e7dd; } .status-muted { color:#5c636a; background:#e9ecef; } .status-warning { color:#805b10; background:#fff3cd; } .status-error { color:#b02a37; background:#f8d7da; } .detail-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--valor-border); margin-bottom:1.25rem; padding-bottom:1rem; } .detail-header h2 { margin:0; font-size:1.4rem; } .detail-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:1.25rem; } .detail-grid strong { font-size:.82rem; color:var(--valor-muted); } .detail-grid p { margin:.25rem 0 0; white-space:normal; } .empty-section { color:var(--valor-muted); } .empty-section p { margin-bottom:0; } .diagnostics th { width:42%; padding:1rem 1.25rem; } .diagnostics td { padding:1rem 1.25rem; } @media (max-width: 767px) { .app-shell { display: block; } .sidebar { width: 100%; padding: 1rem; border-right: 0; border-bottom: 1px solid var(--valor-border); } .sidebar-brand { margin: 0; } .sidebar nav { display: none; } .main-content { padding: 1.5rem; } .topbar { margin-bottom: 2rem; } .user-menu span { display: none; } .page-actions { align-items:stretch; flex-direction:column; } .search-form { width:100%; } }