@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--primary-blue:#1473e6;--darker-blue:#0f5bb8;--telmex-red:#db3825;--bg-gray:#f4f5f7;--text-dark:#1a1a1a;--text-gray:#666;--border-color:#e5e7eb}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-dark);-webkit-font-smoothing:antialiased;background-color:#333;font-family:Inter,sans-serif}#root{justify-content:center;align-items:stretch;width:100%;min-height:100vh;display:flex}.mobile-container{background-color:var(--bg-gray);flex-direction:column;width:100%;max-width:450px;min-height:100vh;display:flex;position:relative;overflow-x:hidden;box-shadow:0 0 20px #00000080}@media (width<=480px){.mobile-container{max-width:100%;box-shadow:none}}.desktop-container{color:#333;background-color:#fff;flex-direction:column;width:100%;min-height:100vh;display:flex}@media (width<=768px){.top-nav-bar,.main-header,.sidebar{display:none}.content-area{padding:20px}.download-form .form-controls{flex-direction:column;width:100%}.select-box,.select-box-large{width:100%}}.login-screen{background-color:var(--primary-blue);color:#fff;flex-direction:column;flex:1;padding:20px;display:flex;position:relative}.status-bar{justify-content:space-between;padding:5px;font-size:14px;font-weight:600;display:flex}.chatbot-btn{color:var(--primary-blue);cursor:pointer;background:#fff;border-radius:20px 0 0 20px;align-items:center;padding:8px 12px;display:flex;position:absolute;top:60px;right:0;box-shadow:0 2px 10px #0000001a}.login-content{flex-direction:column;flex:1;justify-content:center;align-items:center;margin-top:-60px;display:flex}.logo-container{margin-bottom:25px}.login-title{letter-spacing:.5px;margin-bottom:12px;font-size:32px;font-weight:700}.login-phone{letter-spacing:.5px;margin-bottom:24px;font-size:18px;font-weight:600}.login-link{color:#fff;cursor:pointer;margin-bottom:40px;font-size:16px;font-weight:500;text-decoration:underline}.login-buttons{flex-direction:column;gap:20px;width:100%;margin-bottom:30px;display:flex}.btn{cursor:pointer;text-align:center;border:none;border-radius:8px;width:100%;padding:16px;font-size:16px;font-weight:600;transition:transform .1s}.btn:active{transform:scale(.98)}.btn-red{background-color:var(--telmex-red);color:#fff}.btn-white{color:var(--darker-blue);background-color:#fff}.dashboard-screen{background-color:var(--bg-gray);flex-direction:column;flex:1;padding-bottom:40px;display:flex}.dash-header{background-color:var(--primary-blue);color:#fff;padding:15px 20px 70px;position:relative}.header-top{justify-content:space-between;align-items:center;margin-top:20px;display:flex}.header-title{align-items:center;gap:15px;font-size:18px;font-weight:500;display:flex}.card-container{z-index:10;margin-top:-50px;padding:0 20px;position:relative}.main-card{background:var(--primary-blue);color:#fff;text-align:center;background:linear-gradient(145deg,#187bf1,#0f5bb8);border-radius:12px;padding:25px 20px;position:relative;box-shadow:0 12px 25px #1473e666}.phone-badge{background-color:var(--telmex-red);border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;display:flex;position:absolute;top:-15px;left:15px;box-shadow:0 4px 12px #db382566}.card-phone{letter-spacing:.5px;margin-bottom:8px;font-size:20px;font-weight:700;text-decoration:underline}.card-name{text-transform:uppercase;letter-spacing:.5px;margin-bottom:20px;font-size:16px;font-weight:500}.card-balance{margin-bottom:6px;font-size:18px;font-weight:600}.card-date{opacity:.9;font-size:14px;font-weight:400}.pagination{justify-content:center;gap:8px;margin:15px 0 20px;display:flex}.dot{background-color:#d1d5db;border-radius:50%;width:8px;height:8px}.dot.active{background-color:#00d2ff}.pay-btn-container{margin-bottom:20px;padding:0 20px}.pay-btn{background-color:var(--telmex-red);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;padding:16px;font-size:16px;font-weight:600;text-decoration:underline;transition:transform .1s}.pay-btn:active{transform:scale(.98)}.actions-row{border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);background:#fff;margin-bottom:15px;display:flex}.action-item{color:var(--primary-blue);border-right:1px solid var(--border-color);cursor:pointer;flex:1;justify-content:center;align-items:center;gap:8px;padding:16px 5px;font-size:14px;font-weight:500;display:flex}.action-item:last-child{border-right:none}.grid-container{grid-template-columns:1fr 1fr;gap:12px;padding:0 15px 15px;display:grid}.grid-item{cursor:pointer;background:#fff;border:1px solid #0000;border-radius:12px;align-items:center;gap:12px;padding:16px;font-size:13px;font-weight:500;transition:border-color .2s;display:flex;position:relative;box-shadow:0 2px 8px #0000000a}.grid-item:active{border-color:var(--primary-blue)}.grid-icon{color:var(--primary-blue);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.grid-icon.bg-light{background:#1473e614}.grid-item.star-badge{overflow:hidden}.grid-item.star-badge .grid-icon{background:0 0;margin-left:5px}.star-corner{border-style:solid;border-width:32px 32px 0 0;border-color:var(--primary-blue) transparent transparent transparent;width:0;height:0;position:absolute;top:0;left:0}.star-corner-icon{color:#fff;width:12px;height:12px;position:absolute;top:4px;left:4px}.badge-new{color:#000;background-color:#00e676;border-radius:0 12px;padding:3px 8px;font-size:11px;font-weight:700;position:absolute;top:0;right:0}.section-header{color:#00a5cf;align-items:center;gap:6px;padding:10px 15px;font-size:16px;font-style:italic;font-weight:700;display:flex}.grid-item span{line-height:1.2}.top-nav-bar{color:#fff;background-color:#3b4249;justify-content:space-between;align-items:center;height:34px;padding:0 40px;font-size:12px;display:flex}.top-nav-links{height:100%;display:flex}.top-nav-link{cursor:pointer;align-items:center;padding:0 20px;display:flex}.top-nav-link.active{background-color:#00a5cf}.main-header{border-bottom:1px solid #eaeaea;justify-content:space-between;align-items:center;height:70px;padding:0 40px;display:flex}.main-nav{align-items:center;gap:30px;height:100%;font-size:14px;display:flex}.main-nav-item{color:#555;cursor:pointer;border-bottom:3px solid #0000;align-items:center;height:100%;display:flex}.main-nav-item.active{color:#00a5cf;border-bottom:3px solid #db3825}.desktop-body{flex:1;width:100%;max-width:1200px;margin:0 auto;display:flex}.sidebar{border-right:1px solid #eaeaea;width:250px;padding:20px 0}.sidebar-item{color:#333;cursor:pointer;align-items:center;gap:12px;padding:12px 20px;font-size:14px;display:flex}.sidebar-item:hover{background-color:#f9f9f9}.sidebar-item.active{color:#00a5cf;font-weight:600}.sidebar-subitem{color:#666;cursor:pointer;padding:8px 20px 8px 46px;font-size:13px}.sidebar-subitem:hover{background-color:#f9f9f9}.content-area{flex:1;padding:40px 60px}.top-controls{align-items:center;gap:10px;margin-bottom:50px;font-size:14px;display:flex}.telmex-number-dropdown{border:1px solid #ccc;border-radius:4px;padding:6px 30px 6px 12px;font-size:14px}.content-title-row{justify-content:center;align-items:center;gap:10px;margin-bottom:20px;display:flex}.content-title-row h2{color:#1473e6;text-transform:uppercase;letter-spacing:.5px;font-size:18px;font-weight:700}.center-telmex-number{text-align:center;color:#333;margin-bottom:20px;font-size:16px}.download-tabs{border-bottom:2px solid #eaeaea;justify-content:center;gap:20px;margin-bottom:40px;display:flex}.download-tab{color:#666;cursor:pointer;border-bottom:3px solid #0000;align-items:center;gap:8px;margin-bottom:-2px;padding:10px 20px;font-size:18px;font-weight:600;display:flex}.download-tab.active{color:#666;border-bottom:3px solid var(--telmex-red)}.download-form{flex-direction:column;align-items:center;gap:15px;display:flex}.form-label{color:#555;margin-bottom:5px;font-size:14px}.form-controls{gap:15px;margin-bottom:15px;display:flex}.select-box{border:1px solid #888;border-radius:4px;min-width:100px;padding:8px 12px;font-size:14px}.select-box-large{color:#333;border:1px solid #db3825;border-radius:4px;min-width:180px;padding:8px 12px;font-size:14px;font-weight:600}.btn-descargar{background-color:var(--telmex-red);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:12px 60px;font-size:16px;font-weight:500;text-decoration:none;display:inline-block}.btn-descargar:hover{background-color:#c02f1e}