*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;min-height:100dvh}html{font-size:16px}body{background-color:#fff;font-family:Arial,Helvetica,sans-serif}button,input,textarea,select{font:inherit}#root{height:100vh}@media (width>=768px){.login-container{max-width:500px;margin:0 auto}}.loading-overlay{z-index:9999;background:#000000a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loading-card{text-align:center;background:#fff;border-radius:16px;width:280px;padding:30px;box-shadow:0 10px 40px #00000040}.loading-logo{width:130px;margin-bottom:20px}.loading-spinner{border:4px solid #e5e5e5;border-top-color:#000;border-radius:50%;width:42px;height:42px;margin:0 auto 20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-card h3{margin-bottom:8px}.loading-card p{color:#666;font-size:14px}.app-layout{flex-direction:column;width:100%;min-height:100dvh;display:flex}.app-header{color:#fff;background-color:#1f2937;justify-content:space-between;align-items:center;height:64px;padding:0 20px;display:flex}.header-left{align-items:center;gap:8px;display:flex}.app-title{font-size:1.25rem;font-weight:600}.header-button{color:#fff;font-size:1.6 rem;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:background-color .2s;display:flex}.header-button svg{font-size:1.9rem}.header-button:hover{background-color:#fff3}.header-button:active{background-color:#ffffff59}.drawer-overlay{z-index:1000;background:#0006;position:fixed;inset:0}.drawer{z-index:1001;background:#fff;width:280px;height:100dvh;padding:20px;position:fixed;top:0;left:0;overflow-y:auto;box-shadow:2px 0 10px #0003}.drawer-close{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.2rem;transition:all .2s;display:flex}.drawer-close:hover{background-color:#f3f4f6}.drawer-close:active{background-color:#e5e7eb}.drawer-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.drawer-section{margin-bottom:20px}.drawer-section-title{color:#6b7280;text-transform:uppercase;margin-bottom:8px;font-size:.8rem;font-weight:700}.drawer ul{list-style:none}.drawer li{cursor:pointer;padding:8px 0}.drawer li:hover{color:#0d6efd}.drawer-user{border-bottom:1px solid #e5e7eb;margin-bottom:20px;padding-bottom:15px}.drawer-user p:first-child{font-size:1rem;font-weight:600}.drawer-user p:last-child{color:#6b7280;font-size:.85rem}.drawer-link{color:inherit;text-decoration:none}.active-link{color:#0d6efd;font-weight:600}.app-content{flex:1;padding:16px}.app-bottom-nav{background-color:#fff;border-top:1px solid #e5e7eb;justify-content:space-around;align-items:center;width:100%;height:60px;display:flex}.app-bottom-nav button{cursor:pointer;background:0 0;border:none;font-size:24px}.nav-item{color:#374151;cursor:pointer;background:0 0;border:none;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:60px;height:55px;font-size:.75rem;transition:all .2s;display:flex}.nav-item svg{font-size:1.4rem}.nav-item span{font-size:.7rem}.nav-item:hover{background-color:#f3f4f6}.nav-item:active{background-color:#e5e7eb;font-weight:600}.nav-item.active svg{color:#0d6efd}.user-menu{position:relative}.user-dropdown{z-index:2000;background:#fff;border-radius:10px;width:200px;position:absolute;top:55px;right:0;overflow:hidden;box-shadow:0 4px 12px #00000026}.dropdown-item{text-align:left;cursor:pointer;background:#fff;border:none;width:100%;padding:12px 16px;font-size:.9rem;transition:background .2s}.dropdown-item:hover{background-color:#f3f4f6}.logout-item{color:#dc2626;font-weight:600}.logout-item:hover{background-color:#fee2e2}.dashboard-title{margin-bottom:16px;font-size:1.5rem;font-weight:700}.dashboard-cards{flex-direction:column;gap:16px;display:flex}.dashboard-card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 8px #00000014}.dashboard-card h3{color:#6b7280;margin-bottom:8px;font-size:.85rem}.dashboard-card p{font-size:1.1rem;font-weight:600}.dashboard-link{cursor:pointer;transition:all .2s}.dashboard-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.dashboard-link:active{transform:scale(.98)}*{box-sizing:border-box}.usuarios-page{flex-direction:column;gap:16px;width:100%;max-width:100%;display:flex;overflow-x:hidden}.usuarios-page h1{color:#1f2937;font-size:1.5rem}.usuarios-resumen{grid-template-columns:1fr 1fr;gap:12px;display:grid}.resumen-card:last-child{grid-column:1/-1}.resumen-card{text-align:center;background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 2px 4px #0000000d}.resumen-card h3{color:#6b7280;font-size:.9rem}.resumen-card p{color:#1f2937;font-size:2rem;font-weight:700}.btn-nuevo-usuario{color:#fff;cursor:pointer;background-color:#0d6efd;border:none;border-radius:10px;width:100%;padding:12px;font-weight:600}.btn-nuevo-usuario:hover{background-color:#0b5ed7}.input-buscar{border:1px solid #d1d5db;border-radius:10px;outline:none;width:100%;padding:12px}.input-buscar:focus{border-color:#0d6efd}.usuario-card{background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 2px 4px #0000000d}.usuario-card h3{color:#111827;margin-bottom:6px}.usuario-card p{color:#6b7280}.nuevo-usuario-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;flex-direction:column;gap:12px;padding:16px;display:flex}.usuarios-filters{flex-direction:column;gap:12px;width:100%;display:flex}.usuarios-filters input,.usuarios-filters select{box-sizing:border-box;width:100%;max-width:100%}.usuarios-filters select{color:#111827;background-color:#fff;border:1px solid #d1d5db;border-radius:10px;outline:none;padding:12px}.nuevo-usuario-card input,.nuevo-usuario-card select,.nuevo-usuario-card button{box-sizing:border-box;width:100%;max-width:100%}.nuevo-usuario-card select{background-color:#fff;border:1px solid #d1d5db;border-radius:10px;outline:none;padding:12px}.btn-guardar{color:#fff;cursor:pointer;background-color:#198754;border:none;border-radius:10px;width:100%;padding:12px;font-weight:600}.btn-guardar:hover{background-color:#157347}.credenciales-card{background-color:#e8fff1;border:1px solid #198754;border-radius:10px;margin-top:16px;padding:16px}.credenciales-card h3{color:#198754;margin-bottom:10px}.credenciales-card p{margin-bottom:8px}.credenciales-card strong{margin-bottom:4px;display:block}.btn-copiar{color:#fff;cursor:pointer;background-color:#0d6efd;border:none;border-radius:10px;width:100%;margin-top:12px;padding:12px;font-weight:600}.btn-copiar:hover{background-color:#0b5ed7}.btn-compartir{color:#fff;cursor:pointer;background-color:#198754;border:none;border-radius:10px;width:100%;margin-top:10px;padding:12px;font-weight:600}.btn-compartir:hover{background-color:#157347}.btn-restablecer{color:#fff;cursor:pointer;background-color:#dc3545;border:none;border-radius:10px;width:100%;margin-top:12px;padding:12px;font-weight:600}.btn-restablecer:hover{background-color:#bb2d3b}.login-container{flex-direction:column;justify-content:center;min-height:100vh;padding:24px;display:flex}.login-logo{width:220px;max-width:100%;margin:0 auto 24px;display:block}.login-title{text-align:center;margin-bottom:32px}.login-form{flex-direction:column;gap:20px;width:100%;max-width:400px;margin:0 auto;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{font-weight:600}.form-group input{border:1px solid #dcdcdc;border-radius:8px;width:100%;padding:14px 45px 14px 14px;font-size:16px}.password-wrapper{position:relative}.password-wrapper input{width:100%;padding-right:45px}.toggle-password{cursor:pointer;color:#000;background:0 0;border:none;margin:0;font-size:22px;position:absolute;top:50%;right:12px;transform:translateY(-50%);width:auto!important;padding:0!important}.forgot-password{text-align:right}.forgot-password button{color:#06c;cursor:pointer;background:0 0;border:none;width:auto;padding:0;font-size:14px}.forgot-password button:hover{text-decoration:underline}.login-form button[type=submit]{color:#fff;cursor:pointer;background:#000;border:none;border-radius:8px;width:100%;padding:14px;font-size:16px}.login-form button:disabled{cursor:not-allowed;opacity:.7;background-color:#999}@media (width>=768px){.login-container{max-width:500px;margin:0 auto}}.password-message{text-align:center;color:#666;margin-bottom:1rem;font-size:.95rem}.error-message{color:#dc2626;text-align:center;margin-bottom:12px;font-size:14px;font-weight:500}.login-footer{text-align:center;color:#6b7280;margin-top:24px;font-size:.8rem}.success-message{color:#198754;text-align:center;margin-bottom:12px}.link-button{color:#0d6efd;cursor:pointer;font-size:14px;background:0 0!important;border:none!important;width:auto!important;padding:0!important}.link-button:hover{text-decoration:underline}