@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";.app-layout-container{display:flex;justify-content:center;min-height:100vh;width:100%;background-color:#f8f9fa}.app-content-area{width:100%;max-width:1000px;background-color:var(--color-background);min-height:100vh;position:relative;box-shadow:0 0 40px #0000000d;display:flex;flex-direction:column}.app-content-area>*{width:100%}.app-bar{position:sticky;top:0;z-index:50;min-height:64px;height:auto;display:flex;flex-direction:column;padding:0;width:100%;background-color:var(--color-surface);box-shadow:var(--shadow-sm);transition:box-shadow .3s ease}.app-bar-left{display:flex;align-items:center;gap:12px}.app-bar-user{color:var(--text-primary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.app-bar-right{display:flex;align-items:center}.app-bar-content{height:64px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.app-bar-extension{width:100%;padding:0 16px}.app-tabs{display:flex;width:100%;justify-content:space-between}.tab-item{flex:1;text-align:center;padding:12px 4px;background:none;border:none;font-family:inherit;font-size:14px;font-weight:500;color:var(--text-secondary);border-bottom:2px solid transparent;cursor:pointer;transition:all .2s}.tab-item.active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.payment-bottom-sheet{position:fixed;bottom:0;left:0;width:100%;background-color:var(--color-surface);border-radius:24px 24px 0 0;padding:24px 24px 40px;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:201}.payment-bottom-sheet.open{transform:translateY(0)}.card-select-container{margin-bottom:24px}.card-select{width:100%;padding:16px;border-radius:12px;border:1px solid var(--color-border);background-color:var(--color-background);color:var(--text-primary);font-size:16px;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 16px top 50%;background-size:12px auto}.new-card-form{animation:fadeIn .3s ease-in-out}.form-input:focus{border-color:var(--color-secondary)}.dashboard-content{padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-lg)}.surface-card{background-color:var(--color-surface);border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.03)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.link-btn{color:var(--color-primary);font-size:14px;font-weight:500;text-decoration:none}.consumption-section{margin-bottom:4px}.section-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.divider{height:1px;background-color:var(--color-surface-dim);margin:var(--spacing-md) 0}.progress-bar-container{height:8px;background-color:#e5e7eb;border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-secondary) 100%);border-radius:var(--radius-full)}.consumption-row{display:flex;align-items:center;justify-content:space-between}.icon-metric{display:flex;gap:12px;align-items:center}.metric-text{display:flex;align-items:baseline;gap:4px}.minutes-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.minute-item{display:flex;flex-direction:column;gap:4px;padding:8px;background-color:#f8fafc;border-radius:var(--radius-sm)}.minute-value{display:flex;align-items:center;gap:6px;font-weight:600}.icon-sm{font-size:18px}.primary-btn{background-color:var(--color-primary);color:#fff;border:none;padding:12px 16px;border-radius:var(--radius-full);font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 4px 10px #18a8df40;transition:transform .1s}.primary-btn:active{transform:scale(.97)}.primary-btn-outline{background-color:transparent;color:var(--color-primary);border:1px solid var(--color-primary);padding:10px 16px;border-radius:var(--radius-full);font-weight:600;font-size:14px;cursor:pointer}.full-width{width:100%}.card-actions{margin-top:var(--spacing-lg)}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-right{text-align:right}.mt-1{margin-top:4px}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.balance-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.center-content{display:flex;justify-content:center;align-items:center;padding:32px 16px}.items-center{align-items:center}.justify-between{justify-content:space-between}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:8px}.gap-3{gap:12px}.p-3{padding:24px}.mt-4{margin-top:24px}.mb-4{margin-bottom:12px}.mb-6{margin-bottom:24px}.ml-1{margin-left:4px}.section-margin{margin-top:16px;margin-bottom:24px}.history-list{display:flex;flex-direction:column;gap:12px}.history-item{display:flex;align-items:center;gap:14px;padding:12px,14px;position:relative}.history-icon{width:40px;height:40px;border-radius:50%;background-color:var(--color-surface-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0}.history-details{flex:1;display:flex;flex-direction:column}.chip-movistar-right{background-color:var(--color-primary);color:#fff;font-size:10px;font-weight:700;padding:4px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;margin-left:auto}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.usage-header,.usage-footer{display:flex;justify-content:space-between;align-items:center}.invoices-page{animation:fadeIn .3s ease-in-out}.chart-container{display:flex;justify-content:space-between;align-items:flex-end;height:160px;padding-top:220px;padding-bottom:15px;margin-bottom:10px}.chart-bar-group{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative}.bar-wrapper{width:25px;height:150px;background-color:transparent;border-radius:0;position:relative;display:flex;align-items:flex-end;overflow:hidden}.bar-fill{width:100%;border-radius:5px 5px 0 0;transition:height .5s ease-out}.bar-value-label{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:6px}.bar-label{font-size:14px;color:var(--text-secondary)}.summary-row{display:flex;gap:0px;margin-bottom:20px}.summary-card-left{flex:1;background-color:#f5f5f5;padding:16px;border-radius:16px 0 0 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}.summary-card-right{flex:1;background-color:#f5f5f5;padding:16px;border-radius:0 16px 16px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}.button-row{display:flex;gap:12px;margin-bottom:0}.button-row>button{flex:1;display:flex;align-items:center;justify-content:center;padding:12px;gap:10px;height:48px;font-size:14px}.btn-red-text{color:#ef5350!important}.invoice-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--color-border);cursor:pointer;transition:background-color .2s}.invoice-item:last-child{border-bottom:none}.invoice-item:active{background-color:var(--color-surface-dim)}.status-badge{padding:4px 8px;border-radius:100px;font-size:11px;font-weight:600;text-transform:uppercase}.status-paid{background-color:#e8f5e9;color:#388e3c}.status-pending{background-color:#e3f2fd;color:#1976d2}.status-overdue{background-color:#e8f5e9;color:#388e3c}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s}.modal-overlay.open{opacity:1;visibility:visible}.detail-modal{background-color:var(--color-surface);width:90%;max-width:400px;border-radius:24px;padding:24px;transform:scale(.9);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.modal-overlay.open .detail-modal{transform:scale(1)}.detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--color-border)}.bottom-sheet{position:fixed;bottom:0;left:0;width:100%;background-color:var(--color-surface);border-radius:24px 24px 0 0;padding:24px 24px 40px;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:201}.modal-overlay.open .bottom-sheet{transform:translateY(0)}.sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.form-group{margin-bottom:16px}.form-label{display:block;margin-bottom:8px;font-size:13px;color:var(--text-secondary);font-weight:500}.form-input{width:100%;padding:12px 16px;border-radius:12px;border:1px solid var(--color-border);background-color:var(--color-background);color:var(--text-primary);font-family:inherit;font-size:16px;outline:none;transition:border-color .2s}.form-input:focus{border-color:var(--color-primary)}.form-row{display:flex;gap:12px}.secondary-btn{background-color:transparent;color:var(--color-primary);border:1px solid var(--color-primary);padding:12px 16px;border-radius:var(--radius-full);font-weight:600;font-size:14px;cursor:pointer;transition:background-color .2s}.secondary-btn:active{background-color:#18a8df1a}.text-btn{background:none;border:none;color:var(--text-secondary);font-weight:600;padding:12px;cursor:pointer}.drawer-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#ffffff1a;z-index:90;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}.drawer-backdrop.open{opacity:1;visibility:visible;z-index:99}.nav-drawer{position:fixed;top:0;left:0;width:80%;max-width:300px;height:100%;z-index:100;background:#ffffffbf;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border-right:1px solid rgba(255,255,255,.5);box-shadow:5px 0 25px #0000001a;transform:translate(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}.nav-drawer.open{transform:translate(0)}.drawer-header{height:64px;display:flex;align-items:center;padding:0 16px;gap:16px;border-bottom:1px solid rgba(0,0,0,.05)}.drawer-nav{flex:1;padding:16px 0;overflow-y:auto}.nav-item{width:100%;display:flex;align-items:center;padding:16px 24px;background:transparent;border:none;cursor:pointer;text-align:left;transition:background-color .2s;color:var(--text-primary)}.nav-item:active{background-color:#18a8df1a}.nav-item.active{border-left:4px solid var(--color-primary);padding-left:20px}.nav-item.active .nav-icon{color:var(--color-primary)}.nav-item.active .body-lg{color:var(--color-primary);font-weight:600}.nav-icon{margin-right:16px;color:var(--text-secondary)}.nav-arrow{margin-left:auto;font-size:20px;color:var(--color-surface-dim)}.drawer-footer{padding:24px;text-align:center}:root{--color-primary: #18A8DF;--color-secondary: #65BC46;--color-primary-dark: #1280AB;--color-secondary-dark: #4E9635;--color-background: #F2F4F8;--color-surface: #FFFFFF;--color-surface-dim: #E5E7EB;--color-error: #ca4343ff;--text-primary: #111827;--text-secondary: #6B7280;--text-inverse: #FFFFFF;--glass-bg: rgba(255, 255, 255, .65);--glass-border: 1px solid rgba(255, 255, 255, .4);--glass-blur: blur(20px);--glass-shadow: 0 4px 30px rgba(0, 0, 0, .1);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1)}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.glass-panel{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:var(--glass-border)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:#f8f9fa;color:var(--text-primary);display:block;min-height:100vh;margin:0}.material-symbols-rounded{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;font-size:24px;-webkit-user-select:none;user-select:none}.icon-btn{background:transparent;border:none;cursor:pointer;padding:8px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--text-primary);transition:background-color var(--transition-fast)}.icon-btn:active{background-color:#0000000d}.h1{font-size:24px;font-weight:700}.h2{font-size:20px;font-weight:600}.h3{font-size:18px;font-weight:600}.body-lg{font-size:16px;font-weight:400}.body-md{font-size:14px;font-weight:400}.caption{font-size:12px;font-weight:400;color:var(--text-secondary)}