@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";
:root{--sura-blue:#0033a0;--sura-blue-dark:#002878;--sura-blue-light:#1a4db8;--sura-teal:#00aec7;--sura-teal-dark:#0097ad;--sura-teal-light:#33c4d8;--bg-primary:#f4f7fb;--bg-secondary:#fff;--bg-card:#fff;--bg-card-hover:#f8fafd;--bg-elevated:#fff;--bg-sidebar:#0033a0;--bg-sidebar-hover:#ffffff1a;--bg-sidebar-active:#ffffff2e;--text-primary:#1a2332;--text-secondary:#4a5568;--text-muted:#8896a6;--text-on-blue:#fff;--text-on-blue-muted:#ffffffa6;--status-pending-bg:#fff8e1;--status-pending-text:#e6a800;--status-pending-border:#ffd54f;--status-approved-bg:#e8f5e9;--status-approved-text:#2e7d32;--status-approved-border:#81c784;--status-urgent-bg:#fef2f2;--status-urgent-text:#dc2626;--status-urgent-border:#fca5a5;--border:#e8ecf1;--border-light:#dde3eb;--shadow-sm:0 1px 3px #0033a00f;--shadow-md:0 4px 12px #0033a014;--shadow-lg:0 8px 24px #0033a01a;--shadow-card:0 1px 4px #0000000a,0 4px 16px #0033a00f;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-pill:100px}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.app-layout{min-height:100vh;display:flex}.sidebar{background:linear-gradient(180deg,var(--sura-blue)0%,var(--sura-blue-dark)100%);z-index:100;flex-direction:column;width:260px;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar-header{border-bottom:1px solid #ffffff1a;padding:28px 24px}.sidebar-logo{align-items:center;gap:14px;text-decoration:none;display:flex}.sidebar-logo-img{filter:brightness(0)invert();width:auto;height:32px}.sidebar-logo-text{flex-direction:column;display:flex}.sidebar-logo-title{color:var(--text-on-blue);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600}.sidebar-logo-subtitle{color:var(--text-on-blue-muted);letter-spacing:.04em;margin-top:2px;font-size:10px;font-weight:400}.sidebar-nav{flex:1;padding:20px 14px}.sidebar-nav-item{border-radius:var(--radius-sm);color:var(--text-on-blue-muted);align-items:center;gap:12px;margin-bottom:4px;padding:11px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.sidebar-nav-item:hover{background:var(--bg-sidebar-hover);color:var(--text-on-blue)}.sidebar-nav-item.active{background:var(--bg-sidebar-active);color:var(--text-on-blue);font-weight:600}.sidebar-nav-icon{text-align:center;width:24px;font-size:18px}.sidebar-footer{border-top:1px solid #ffffff1a;padding:18px 24px}.sidebar-status{color:var(--text-on-blue-muted);align-items:center;gap:8px;font-size:12px;display:flex}.sidebar-status-dot{background:var(--sura-teal);border-radius:50%;width:8px;height:8px;animation:2s infinite pulse;box-shadow:0 0 8px #00aec780}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.main-content{flex:1;min-height:100vh;margin-left:260px;padding:36px 40px}.page-header{margin-bottom:32px}.page-title{letter-spacing:-.03em;color:var(--sura-blue);margin-bottom:4px;font-size:26px;font-weight:800}.page-subtitle{color:var(--text-muted);font-size:14px;font-weight:400}.kpi-grid{grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px;display:grid}.kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.kpi-card:before{content:"";opacity:0;height:3px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.kpi-card:first-child:before{background:var(--sura-blue)}.kpi-card:nth-child(2):before{background:var(--status-pending-text)}.kpi-card:nth-child(3):before{background:var(--status-approved-text)}.kpi-card:nth-child(4):before{background:var(--status-urgent-text)}.kpi-card:hover{border-color:var(--border-light);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.kpi-card:hover:before{opacity:1}.kpi-card-icon{border-radius:var(--radius-md);justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:16px;font-size:22px;display:flex}.kpi-card-icon.total{color:var(--sura-blue);background:#0033a014}.kpi-card-icon.pending{background:var(--status-pending-bg);color:var(--status-pending-text)}.kpi-card-icon.approved{background:var(--status-approved-bg);color:var(--status-approved-text)}.kpi-card-icon.urgent{background:var(--status-urgent-bg);color:var(--status-urgent-text)}.kpi-card-value{letter-spacing:-.04em;color:var(--text-primary);margin-bottom:6px;font-size:36px;font-weight:800;line-height:1}.kpi-card-label{color:var(--text-muted);font-size:13px;font-weight:500}.table-container{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}.table-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.table-title{color:var(--text-primary);font-size:16px;font-weight:700}.table-filter{gap:8px;display:flex}.filter-btn{border-radius:var(--radius-pill);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;background:0 0;padding:7px 16px;font-family:inherit;font-size:12px;font-weight:500;transition:all .2s}.filter-btn:hover{border-color:var(--sura-blue);color:var(--sura-blue);background:#0033a00a}.filter-btn.active{background:var(--sura-blue);border-color:var(--sura-blue);color:#fff}.filter-btn.urgente-filter{border-color:var(--status-urgent-border);color:var(--status-urgent-text)}.filter-btn.urgente-filter:hover{border-color:var(--status-urgent-text);background:var(--status-urgent-bg);color:var(--status-urgent-text)}.filter-btn.urgente-filter.active{background:var(--status-urgent-text);border-color:var(--status-urgent-text);color:#fff}.orders-table{border-collapse:collapse;width:100%}.orders-table thead th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;background:var(--bg-primary);border-bottom:1px solid var(--border);padding:12px 24px;font-size:11px;font-weight:600}.orders-table tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}.orders-table tbody tr:last-child{border-bottom:none}.orders-table tbody tr:hover{background:#0033a005}.orders-table td{padding:16px 24px;font-size:14px}.order-name{color:var(--sura-blue);font-weight:600}.order-name-cell{align-items:center;gap:8px;display:flex}.urgent-tag{border-radius:var(--radius-pill);background:var(--status-urgent-bg);color:var(--status-urgent-text);border:1px solid var(--status-urgent-border);letter-spacing:.02em;white-space:nowrap;align-items:center;gap:4px;padding:2px 10px;font-size:11px;font-weight:600;animation:2s ease-in-out infinite urgentPulse;display:inline-flex}@keyframes urgentPulse{0%,to{opacity:1}50%{opacity:.7}}.urgent-row{border-left:3px solid var(--status-urgent-text)!important;background:#dc262605!important}.urgent-row:hover{background:#dc26260d!important}.order-customer{color:var(--text-primary);font-weight:500}.order-company{color:var(--text-muted);margin-top:2px;font-size:12px}.order-amount{color:var(--text-primary);font-variant-numeric:tabular-nums;font-weight:600}.order-date{color:var(--text-secondary);font-size:13px}.status-badge{border-radius:var(--radius-pill);letter-spacing:.01em;align-items:center;gap:6px;padding:5px 14px;font-size:12px;font-weight:600;display:inline-flex}.status-badge.pendiente{background:var(--status-pending-bg);color:var(--status-pending-text);border:1px solid var(--status-pending-border)}.status-badge.aprobada{background:var(--status-approved-bg);color:var(--status-approved-text);border:1px solid var(--status-approved-border)}.status-badge-dot{background:currentColor;border-radius:50%;width:6px;height:6px}.detail-back{color:var(--sura-blue);align-items:center;gap:8px;margin-bottom:24px;font-size:14px;font-weight:500;text-decoration:none;transition:color .2s;display:inline-flex}.detail-back:hover{color:var(--sura-teal)}.detail-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px;display:flex}.detail-header-left{align-items:center;gap:16px;display:flex}.detail-order-name{letter-spacing:-.03em;color:var(--sura-blue);font-size:24px;font-weight:800}.detail-grid{grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px;display:grid}.detail-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px}.detail-card-title{text-transform:uppercase;letter-spacing:.06em;color:var(--sura-blue);margin-bottom:16px;font-size:13px;font-weight:700}.detail-field{margin-bottom:12px}.detail-field:last-child{margin-bottom:0}.detail-field-label{color:var(--text-muted);margin-bottom:3px;font-size:12px}.detail-field-value{color:var(--text-primary);font-size:14px;font-weight:500}.line-items-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:32px;overflow:hidden}.line-items-card .detail-card-title{padding:24px 24px 0}.line-items-table{border-collapse:collapse;width:100%;margin-top:16px}.line-items-table thead th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;background:var(--bg-primary);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 24px;font-size:11px;font-weight:600}.line-items-table thead th:last-child{text-align:right}.line-items-table tbody td{border-bottom:1px solid var(--border);padding:14px 24px;font-size:14px}.line-items-table tbody tr:last-child td{border-bottom:none}.line-items-table tbody td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}.line-item-title{color:var(--text-primary);font-weight:500}.line-item-variant{color:var(--text-muted);margin-top:2px;font-size:12px}.line-item-qty{text-align:center}.totals-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:400px;box-shadow:var(--shadow-sm);margin-left:auto;padding:24px}.totals-row{justify-content:space-between;align-items:center;padding:8px 0;font-size:14px;display:flex}.totals-row.total{border-top:2px solid var(--border);margin-top:8px;padding-top:16px}.totals-label{color:var(--text-muted)}.totals-value{color:var(--text-primary);font-variant-numeric:tabular-nums;font-weight:600}.totals-row.total .totals-label{color:var(--text-primary);font-size:16px;font-weight:700}.totals-row.total .totals-value{color:var(--sura-blue);font-size:20px;font-weight:800}.approve-btn{background:var(--sura-teal);color:#fff;border-radius:var(--radius-pill);cursor:pointer;border:none;align-items:center;gap:8px;padding:12px 32px;font-family:inherit;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 4px 14px #00aec740}.approve-btn:hover:not(:disabled){background:var(--sura-teal-dark);transform:translateY(-2px);box-shadow:0 6px 20px #00aec759}.approve-btn:active:not(:disabled){transform:translateY(0)}.approve-btn:disabled{opacity:.6;cursor:not-allowed}.approve-btn.loading{color:#0000;position:relative}.approve-btn.loading:after{content:"";border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.6s linear infinite spin;position:absolute}.approved-badge{background:var(--status-approved-bg);color:var(--status-approved-text);border:1px solid var(--status-approved-border);border-radius:var(--radius-pill);align-items:center;gap:8px;padding:12px 28px;font-size:14px;font-weight:600;display:inline-flex}@keyframes spin{to{transform:rotate(360deg)}}.toast{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:1000;align-items:center;gap:10px;padding:14px 20px;font-size:14px;font-weight:500;animation:.3s cubic-bezier(.4,0,.2,1) slideIn;display:flex;position:fixed;bottom:24px;right:24px}.toast.success{border-color:var(--status-approved-border);border-left:4px solid var(--status-approved-text)}.toast.error{border-color:#fca5a5 #fca5a5 #fca5a5 #ef4444;border-left-style:solid;border-left-width:4px}@keyframes slideIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.loading-container{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:400px;display:flex}.loading-spinner{border:3px solid var(--border);border-top-color:var(--sura-blue);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}.loading-text{color:var(--text-muted);font-size:14px}.empty-state{text-align:center;color:var(--text-muted);padding:64px 24px}.empty-state-icon{opacity:.5;margin-bottom:16px;font-size:48px}.empty-state-title{color:var(--text-secondary);margin-bottom:8px;font-size:18px;font-weight:600}.empty-state-text{font-size:14px}@media (max-width:768px){.sidebar{transform:translate(-100%)}.main-content{margin-left:0;padding:20px 16px}.kpi-grid,.detail-grid{grid-template-columns:1fr}.detail-header{flex-direction:column;align-items:flex-start}.orders-table{display:block;overflow-x:auto}.page-title{font-size:22px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:.4s cubic-bezier(.4,0,.2,1) both fadeIn}.animate-in-delay-1{animation-delay:50ms}.animate-in-delay-2{animation-delay:.1s}.animate-in-delay-3{animation-delay:.15s}