.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:16px}.login-box{background:white;padding:clamp(24px,5vw,40px);border-radius:12px;box-shadow:0 10px 40px #0003;width:100%;max-width:400px}.login-logo-container{text-align:center;margin-bottom:10px}.login-logo{max-width:100%;max-height:clamp(60px,10vw,80px);object-fit:contain}.login-box h1{margin:0 0 10px;color:#333;text-align:center;font-size:clamp(24px,5vw,32px)}.subtitle{margin:0 0 clamp(20px,4vw,30px) 0;color:#666;text-align:center;font-size:14px}.form-group{margin-bottom:clamp(16px,3vw,20px)}.form-group input{width:100%;padding:clamp(10px,2vw,12px);border:1px solid #ddd;border-radius:6px;font-size:clamp(14px,2.5vw,16px);box-sizing:border-box;transition:border-color .3s}.btn-primary{width:100%;padding:clamp(12px,2.5vw,14px);background:#667eea;color:#fff;border:none;border-radius:6px;font-size:clamp(14px,2.5vw,16px);font-weight:600;cursor:pointer;transition:background .3s;margin-bottom:10px}.btn-primary:hover{background:#5568d3}.btn-secondary{width:100%;padding:clamp(12px,2.5vw,14px);background:#6c757d;color:#fff;border:none;border-radius:6px;font-size:clamp(14px,2.5vw,16px);font-weight:600;cursor:pointer;transition:background .3s;margin-top:10px}.btn-secondary:hover{background:#5a6268}.btn-link{width:100%;padding:10px;background:transparent;color:#667eea;border:none;font-size:14px;cursor:pointer;text-decoration:none}.btn-link:hover{text-decoration:underline}.error-message{background:#fee;color:#c33;padding:12px;border-radius:6px;margin-bottom:20px;font-size:14px;border-left:4px solid #c33}.success-message{background:#efe;color:#3c3;padding:12px;border-radius:6px;margin-bottom:20px;font-size:14px;border-left:4px solid #3c3}@media (max-width: 480px){.login-container{padding:12px}.login-box{padding:20px}}.home-container{min-height:100vh;background:#f5f7fa}.logo-container h2{margin:0;color:#667eea;font-size:clamp(18px,4vw,24px)}@media (max-width: 480px){.company-logo{max-height:32px;max-width:150px}.top-bar{padding:12px 16px;gap:12px}.menu-item{padding:12px 16px}}.user-info{padding:30px 20px;border-bottom:1px solid #eee;text-align:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.user-info h3{margin:0 0 5px;font-size:20px}.user-info p{margin:0;font-size:14px;opacity:.9}.menu-item{padding:15px 20px;border:none;background:none;text-align:left;cursor:pointer;font-size:16px;color:#333;transition:background .3s;border-left:3px solid transparent}.menu-item:hover{background:#f5f7fa;border-left-color:#667eea}.menu-item.logout{margin-top:auto;color:#c33;border-top:1px solid #eee}.menu-item.logout:hover{background:#fee;border-left-color:#c33}.main-content{width:95%;max-width:1800px;margin:0 auto;padding:clamp(16px,4vw,40px) clamp(12px,3vw,20px)}.main-content h1{margin:0 0 clamp(20px,4vw,40px) 0;color:#333;font-size:clamp(24px,5vw,32px)}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(16px,3vw,25px)}.module-card{background:white;padding:30px;border-radius:12px;box-shadow:0 4px 12px #0000001a;cursor:pointer;transition:all .3s;text-align:center}.module-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #00000026}.card-icon{font-size:48px;margin-bottom:15px}.module-card h3{margin:0 0 10px;color:#333;font-size:20px}.module-card p{margin:0;color:#666;font-size:14px;line-height:1.5}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:white;border-radius:12px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee}.modal-header h2{margin:0;color:#333;font-size:20px}.modal-actions{display:flex;gap:10px;margin-top:20px;justify-content:flex-end}.btn-cancel,.btn-save{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.btn-cancel:hover{background:#e5e5e5}.control-presencia-container{min-height:100vh;background:#f5f7fa}.main-content{width:95%;max-width:1800px;margin:0 auto;padding:clamp(12px,3vw,20px)}.header-section{margin-bottom:clamp(16px,4vw,30px)}.header-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.header-title-row h1{margin:0;font-size:clamp(20px,4vw,28px);flex:1;min-width:200px}.user-selector{display:flex;align-items:center;gap:8px;flex:1;min-width:250px}.user-selector label{font-size:13px;color:#666;font-weight:500;white-space:nowrap;display:none}.user-selector select{padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;background:white;cursor:pointer;flex:1;min-width:0}@media (min-width: 768px){.user-selector label{display:block}}.user-selector select:focus{outline:none;border-color:#667eea}.two-column-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:15px}.left-column,.right-column{display:flex;flex-direction:column;gap:12px}.column-title{color:#333;font-size:22px;margin:0 0 10px;padding-bottom:10px;border-bottom:2px solid #667eea}@media (max-width: 1024px){.two-column-layout{grid-template-columns:1fr}}.back-btn{background:none;border:none;color:#667eea;font-size:16px;cursor:pointer;padding:8px 0;margin-bottom:15px;transition:color .3s}.action-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}@media (max-width: 480px){.action-cards{grid-template-columns:1fr}}.action-card{background:white;padding:20px;border-radius:12px;box-shadow:0 4px 12px #0000001a;cursor:pointer;transition:all .3s;text-align:center;border:2px solid transparent}.action-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #00000026}.action-card.entrada{border-color:#28a745}.action-card.entrada:hover{background:#e8f5e9}.action-card.salida{border-color:#dc3545}.action-card.salida:hover{background:#ffebee}.action-card.ausencia{border-color:#ff9800}.action-card.ausencia:hover{background:#fff3e0}.action-card.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.action-card.disabled:hover{transform:none;box-shadow:0 4px 12px #0000001a;background:white}.card-icon{font-size:40px;margin-bottom:8px}.action-card h3{margin:0;color:#333;font-size:16px}.datetime-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px}@media (max-width: 480px){.datetime-section{grid-template-columns:1fr}}.datetime-group{background:white;padding:15px;border-radius:12px;box-shadow:0 2px 8px #0000001a}.datetime-group label{display:block;margin-bottom:8px;color:#333;font-weight:500;font-size:14px}.datetime-group input{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:16px;box-sizing:border-box}.datetime-group input:focus{outline:none;border-color:#667eea}.comments-section{background:white;padding:15px;border-radius:12px;box-shadow:0 2px 8px #0000001a}.comments-section label{display:block;margin-bottom:8px;color:#333;font-weight:500;font-size:14px}.comments-section textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;resize:vertical;box-sizing:border-box}.comments-section textarea:focus{outline:none;border-color:#667eea}.filter-section{background:white;padding:15px;border-radius:12px;box-shadow:0 2px 8px #0000001a}.filter-section label{display:block;margin-bottom:8px;color:#333;font-weight:500;font-size:14px}.filter-section select{width:100%;max-width:300px;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:14px;background:white;cursor:pointer}.filter-section select:focus{outline:none;border-color:#667eea}.records-table{background:white;padding:clamp(12px,2vw,15px);border-radius:12px;box-shadow:0 2px 8px #0000001a}.tabs-header{display:flex;gap:8px;margin-bottom:16px;border-bottom:2px solid #e0e0e0;overflow-x:auto;-webkit-overflow-scrolling:touch}.tab-button{padding:clamp(8px,2vw,12px) clamp(12px,3vw,24px);background:none;border:none;border-bottom:3px solid transparent;font-size:clamp(13px,2.5vw,15px);font-weight:500;color:#666;cursor:pointer;transition:all .3s;margin-bottom:-2px;white-space:nowrap}.tab-button:hover{color:#667eea}.tab-button.active{color:#667eea;border-bottom-color:#667eea;font-weight:600}.records-table h2{margin:0 0 20px;color:#333;font-size:20px}.records-table-container{max-height:600px;overflow-y:auto;overflow-x:auto}.records-table table{width:100%;border-collapse:collapse;font-size:clamp(12px,2vw,14px)}.records-table th{background:#f8f9fa;padding:clamp(8px,2vw,12px);text-align:left;font-weight:600;color:#333;border-bottom:2px solid #dee2e6;font-size:clamp(11px,2vw,13px);white-space:nowrap}.records-table td{padding:clamp(8px,2vw,12px);border-bottom:1px solid #dee2e6}@media (max-width: 768px){.records-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.records-table th,.records-table td{padding:8px 6px}.badge,.time-badge,.hours-badge{font-size:10px;padding:3px 8px}}.ausencia-row{background-color:#e8f5e9!important}.ausencia-row:hover{background-color:#c8e6c9!important}.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}.badge.entrada{background:#d4edda;color:#155724}.badge.salida{background:#f8d7da;color:#721c24}.time-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}.time-badge-blue{background:#d1ecf1;color:#0c5460}.time-badge-orange{background:#ffe8cc;color:#856404}.hours-badge{display:inline-block;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600}.hours-badge.under-hours{background:#f8d7da;color:#721c24}.hours-badge.complete-hours{background:#d4edda;color:#155724}.hours-badge.pending-badge{background:#dc3545;color:#fff;animation:pulse-pending 2s infinite}@keyframes pulse-pending{0%,to{opacity:1}50%{opacity:.7}}.pendiente-row{background-color:#fff3cd!important}.pendiente-row:hover{background-color:#ffe8a1!important}.no-records{text-align:center;color:#666;padding:40px 20px;font-size:16px}.btn-delete-record{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s;opacity:.7}.btn-delete-record:hover{opacity:1;background:#fee;transform:scale(1.1)}.modal-body{padding:20px}.close-btn{background:none;border:none;font-size:24px;color:#999;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .3s}.close-btn:hover{background:#f5f5f5;color:#333}.drop-zone{border:2px dashed #ccc;border-radius:8px;padding:40px;text-align:center;cursor:pointer;transition:all .3s;background:#fafafa;min-height:200px;display:flex;align-items:center;justify-content:center}.avatar-preview{max-width:100%;max-height:200px;border-radius:8px;object-fit:contain}.btn-save{background:#667eea;color:#fff}.btn-save:hover:not(:disabled){background:#5568d3;transform:translateY(-1px)}.btn-save:disabled{opacity:.5;cursor:not-allowed}.kpis-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}@media (max-width: 600px){.kpis-section{grid-template-columns:1fr}.kpi-card{padding:12px}.kpi-content h3{font-size:10px}.kpi-value{font-size:18px}}.kpi-card{background:white;padding:15px;border-radius:12px;box-shadow:0 4px 12px #0000001a;display:flex;align-items:center;gap:12px}.kpi-icon{font-size:32px;flex-shrink:0}.kpi-content{flex:1;min-width:0}.kpi-content h3{margin:0 0 3px;color:#666;font-size:11px;font-weight:500;white-space:nowrap}.kpi-value{margin:0;color:#667eea;font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:white;border-radius:16px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid #e0e0e0}.modal-header h2{margin:0;color:#333;font-size:22px}.modal-close{background:none;border:none;font-size:28px;color:#999;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:color .3s}.modal-body{padding:25px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#333;font-weight:500;font-size:14px}.form-group input{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:15px;box-sizing:border-box;transition:border-color .3s}.form-group input:focus{outline:none;border-color:#667eea}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.modal-footer{padding:20px 25px;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end;gap:12px}.btn-cancel,.btn-submit{padding:12px 24px;border:none;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s}.btn-cancel{background:#f5f5f5;color:#666}.btn-cancel:hover:not(:disabled){background:#e0e0e0}.btn-submit{background:#667eea;color:#fff}.btn-submit:hover:not(:disabled){background:#5568d3}.btn-cancel:disabled,.btn-submit:disabled{opacity:.5;cursor:not-allowed}.delete-modal{max-width:450px}.delete-modal .modal-header h2{color:#dc3545;font-size:24px}.delete-warning{font-size:18px;color:#333;margin:0 0 15px;font-weight:500}.delete-info{font-size:15px;color:#666;margin:0}.btn-delete-confirm{padding:12px 24px;border:none;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s;background:#dc3545;color:#fff}.btn-delete-confirm:hover{background:#c82333;transform:translateY(-1px);box-shadow:0 4px 12px #dc35454d}.confirm-modal{max-width:500px}.confirm-modal .modal-header h2{color:#667eea;font-size:24px}.confirm-question{font-size:18px;color:#333;margin:0 0 25px;font-weight:500;text-align:center}.confirm-details{background:#f8f9fa;border-radius:8px;padding:20px;margin-bottom:10px}.confirm-detail-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #e0e0e0}.confirm-detail-row:last-child{border-bottom:none;padding-bottom:0}.confirm-detail-row:first-child{padding-top:0}.detail-label{font-weight:600;color:#666;font-size:15px}.detail-value{font-size:16px;color:#333;font-weight:500}.detail-value.badge{padding:6px 16px;border-radius:20px;font-size:14px;font-weight:600;text-transform:uppercase}.detail-value.badge.entrada{background:#d4edda;color:#155724}.detail-value.badge.salida{background:#f8d7da;color:#721c24}.detail-value.badge.ausencia{background:#fff3cd;color:#856404}.btn-confirm-registration{padding:12px 24px;border:none;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s;background:#667eea;color:#fff}.btn-confirm-registration:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}@media (max-width: 768px){.action-cards,.form-row{grid-template-columns:1fr}.modal-content{width:95%}.confirm-detail-row{flex-direction:column;align-items:flex-start;gap:8px}}.calendar-container{padding:10px 0}.calendar-grid{display:flex;flex-direction:column;gap:2px;background:#e0e0e0;border-radius:8px;overflow:hidden}.calendar-header{display:grid;grid-template-columns:repeat(7,1fr);background:#667eea;color:#fff;font-weight:600;text-align:center;font-size:12px}.calendar-header span{padding:10px 4px}.calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}.calendar-day{background:white;min-height:80px;padding:6px;display:flex;flex-direction:column;gap:4px}.calendar-day.empty{background:#f5f5f5}.calendar-day.has-records{background:#fafbff}.day-number{font-weight:600;font-size:14px;color:#333}.day-badges{display:flex;flex-direction:column;gap:3px;flex:1}.calendar-badge-group{display:flex;flex-direction:column;gap:2px}.calendar-badge{display:inline-block;padding:3px 6px;border-radius:10px;font-size:10px;font-weight:600;text-align:center;white-space:nowrap}.calendar-badge-blue{background:#d1ecf1;color:#0c5460}.calendar-badge-red{background:#fff3cd;color:#856404}.calendar-badge-green{background:#d4edda;color:#155724}.calendar-badge-warning{background:#dc3545;color:#fff}.calendar-badge-button{border:none;cursor:pointer;transition:all .3s ease;padding:3px 6px}.calendar-badge-button:hover{background:#c82333!important;transform:scale(1.05);box-shadow:0 2px 8px #dc354566}.calendar-legend{display:flex;gap:20px;justify-content:center;margin-top:16px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#666}.legend-color{width:16px;height:16px;border-radius:4px}.legend-color.blue{background:#d1ecf1;border:1px solid #0c5460}.legend-color.red{background:#fff3cd;border:1px solid #856404}.legend-color.green{background:#d4edda;border:1px solid #155724}.legend-color.warning{background:#dc3545}@media (max-width: 768px){.calendar-day{min-height:60px;padding:4px}.day-number{font-size:12px}.calendar-badge{font-size:8px;padding:2px 4px}.calendar-header span{padding:8px 2px;font-size:10px}.calendar-legend{gap:10px}.legend-item{font-size:10px}}@media (max-width: 480px){.calendar-day{min-height:50px;padding:2px}.day-number{font-size:10px}.calendar-badge{font-size:7px;padding:1px 3px}.calendar-header span{padding:6px 1px;font-size:9px}}.gestion-usuarios-container{min-height:100vh;background:#f5f7fa}.top-bar{background:white;box-shadow:0 2px 8px #0000001a;padding:15px 20px;display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:100}.menu-btn{background:none;border:none;cursor:pointer;padding:8px}.hamburger{display:flex;flex-direction:column;gap:4px}.hamburger span{display:block;width:25px;height:3px;background:#333;border-radius:2px;transition:.3s}.logo-container{flex:1;display:flex;justify-content:center;align-items:center}.company-logo{max-height:40px;max-width:200px;object-fit:contain}.logo-container h2{margin:0;color:#667eea;font-size:24px}.spacer{width:41px}.menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:200;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.menu-sidebar{position:absolute;left:0;top:0;bottom:0;width:min(300px,85vw);background:white;box-shadow:2px 0 12px #0003;animation:slideIn .3s;display:flex;flex-direction:column}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}.menu-nav{flex:1;padding:20px 0;display:flex;flex-direction:column}.menu-item{background:none;border:none;padding:15px 20px;text-align:left;cursor:pointer;font-size:16px;color:#333;transition:all .3s;border-left:4px solid transparent}.menu-item:hover{background:#f5f7ff;border-left-color:#667eea}.menu-item.logout{margin-top:auto;color:#dc3545}.menu-item.logout:hover{background:#fff0f0;border-left-color:#dc3545}.main-content{width:95%;max-width:1800px;margin:0 auto;padding:clamp(8px,2vw,15px)}@media (max-width: 480px){.main-content{width:100%;padding:8px}}.header-section{margin-bottom:clamp(12px,3vw,15px)}.header-section h1{font-size:clamp(16px,4vw,24px);margin:5px 0}.two-column-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(12px,2vw,15px);margin-top:10px}.left-column,.right-column{display:flex;flex-direction:column;gap:10px}.column-title{color:#333;font-size:clamp(16px,3vw,20px);margin:0 0 8px;padding-bottom:8px;border-bottom:2px solid #667eea}@media (max-width: 768px){.two-column-layout{grid-template-columns:1fr}.users-table{overflow-x:auto;-webkit-overflow-scrolling:touch}.users-table table{min-width:640px}.users-table th,.users-table td{font-size:12px;padding:8px 6px;white-space:nowrap}.table-avatar,.table-avatar-placeholder{width:30px;height:30px;font-size:12px}.action-buttons{flex-wrap:wrap;gap:4px}}@media (max-width: 480px){.top-bar{padding:8px 10px;gap:10px}.company-logo{max-width:120px;max-height:32px}.spacer{width:28px}.menu-btn{padding:4px}.hamburger span{width:22px;height:2px}}.back-btn{background:none;border:none;color:#667eea;font-size:14px;cursor:pointer;padding:5px 0;margin-bottom:8px;transition:color .3s}.user-form,.modal-form{background:white;padding:clamp(10px,3vw,15px);border-radius:12px;box-shadow:0 2px 8px #0000001a}.form-group label{display:block;margin-bottom:4px;color:#333;font-weight:500;font-size:13px}.form-group input,.form-group select{width:100%;padding:clamp(6px,2vw,10px);border:1px solid #ddd;border-radius:6px;font-size:clamp(13px,3vw,14px);box-sizing:border-box;transition:border-color .3s}.form-group input:focus,.form-group select:focus{outline:none;border-color:#667eea}.dropzone{border:2px dashed #ddd;border-radius:8px;padding:clamp(12px,4vw,20px);text-align:center;cursor:pointer;transition:all .3s;background:#fafafa;min-height:clamp(80px,35vw,120px);display:flex;align-items:center;justify-content:center}.dropzone:hover{border-color:#667eea;background:#f0f4ff}.dropzone.dragging{border-color:#667eea;background:#e0e7ff}.dropzone-content{pointer-events:none}.dropzone-content p:first-child{font-size:32px;margin:0 0 8px}.dropzone-content p:last-child{color:#666;font-size:13px;margin:0}.avatar-preview{position:relative;width:100px;height:100px;margin:0 auto}.avatar-preview img{width:100%;height:100%;object-fit:cover;border-radius:8px}.remove-avatar{position:absolute;top:-8px;right:-8px;background:#f44336;color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .3s}.remove-avatar:hover{background:#d32f2f}.btn-submit{width:100%;padding:10px;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s;margin-top:8px}.search-section{background:white;padding:clamp(8px,2vw,12px);border-radius:clamp(8px,2vw,12px);box-shadow:0 2px 8px #0000001a}.search-input{width:100%;padding:clamp(8px,2vw,10px);border:1px solid #ddd;border-radius:6px;font-size:clamp(13px,3vw,14px);box-sizing:border-box}.search-input:focus{outline:none;border-color:#667eea}.users-table{background:white;padding:clamp(10px,3vw,15px);border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow-x:auto}.users-table h2{margin:0 0 12px;color:#333;font-size:18px}.users-table table{width:100%;border-collapse:collapse}.users-table thead{background:#f5f7fa}.users-table th{padding:10px;text-align:left;font-weight:600;font-size:13px;color:#333;border-bottom:2px solid #667eea}.users-table td{padding:10px;font-size:13px;border-bottom:1px solid #eee}.users-table tr:hover{background:#f9fafb}.table-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block}.table-avatar-placeholder{width:36px;height:36px;border-radius:50%;background:#667eea;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}.badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500}.badge.admin{background:#667eea;color:#fff}.badge.user{background:#e0e7ff;color:#4c51bf}.status{font-size:13px;font-weight:500}.status.enabled{color:#28a745}.status.disabled{color:#dc3545}.action-buttons{display:flex;gap:6px}.btn-edit,.btn-toggle{background:none;border:1px solid #ddd;padding:5px 10px;border-radius:5px;cursor:pointer;font-size:14px;transition:all .3s}.btn-edit:hover{background:#e3f2fd;border-color:#2196f3}.btn-toggle:hover{background:#f5f7fa;border-color:#667eea}.no-users{text-align:center;padding:30px 15px;color:#999;font-size:14px}.error-message{background:#fee;color:#c33;padding:10px 15px;border-radius:6px;margin-bottom:12px;border-left:3px solid #c33;font-size:13px}.success-message{background:#efe;color:#3c3;padding:10px 15px;border-radius:6px;margin-bottom:12px;border-left:3px solid #3c3;font-size:13px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:clamp(8px,3vw,20px)}.modal-content{background:white;border-radius:clamp(8px,2vw,12px);max-width:700px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #0000004d}.edit-modal{max-width:800px}@media (max-width: 480px){.modal-content{max-width:100%;margin:0;border-radius:0;max-height:100vh}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:clamp(12px,3vw,20px);border-bottom:1px solid #eee}.modal-header h2{margin:0;font-size:clamp(16px,4vw,20px);color:#333}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#999;transition:color .3s;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.modal-close:hover{color:#333}.modal-form{padding:clamp(12px,3vw,20px);box-shadow:none}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 768px){.form-row{grid-template-columns:1fr}}@media (max-width: 480px){.modal-actions{flex-direction:column;gap:8px}.modal-actions .btn-submit,.btn-cancel{width:100%}.users-table h2{font-size:16px}.no-users{padding:20px 10px;font-size:13px}}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:15px;padding-top:15px;border-top:1px solid #eee}.btn-cancel{padding:10px 20px;background:#f5f7fa;color:#333;border:1px solid #ddd;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s}.btn-cancel:hover{background:#e0e4e9}.modal-actions .btn-submit{width:auto;margin-top:0;padding:10px 20px}.edit-avatar-btn{margin-top:15px;padding:8px 16px;background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:6px;cursor:pointer;font-size:13px;transition:all .3s}.edit-avatar-btn:hover{background:rgba(255,255,255,.3);border-color:#fff9}.avatar-modal{max-width:500px}.drop-zone{border:2px dashed #ccc;border-radius:8px;padding:clamp(20px,6vw,40px);text-align:center;cursor:pointer;transition:all .3s;background:#fafafa;min-height:clamp(120px,40vw,200px);display:flex;align-items:center;justify-content:center}.drop-zone-content p{margin:5px 0;color:#666}.drop-zone-content p:first-child{font-size:48px;margin-bottom:10px}.drop-zone .avatar-preview{max-width:100%;max-height:200px;border-radius:8px;object-fit:contain;position:static;width:auto;height:auto;margin:0}.datos-empresa-container{min-height:100vh;background:#f5f7fa}.main-content{width:95%;max-width:1800px;margin:0 auto;padding:clamp(10px,2vw,15px)}.header-section{margin-bottom:clamp(10px,2vw,15px)}.back-btn{background:none;border:none;color:#667eea;font-size:clamp(14px,2.5vw,16px);cursor:pointer;padding:8px 0;margin-bottom:10px;transition:color .3s}.back-btn:hover{color:#5568d3}.header-section h1{margin:0;color:#333;font-size:clamp(20px,4vw,24px)}.error-message{background:#fee;color:#c33;padding:8px 12px;border-radius:6px;margin-bottom:8px;border-left:3px solid #c33}.success-message{background:#efe;color:#3c3;padding:8px 12px;border-radius:6px;margin-bottom:8px;border-left:3px solid #3c3}.empresa-form{background:white;border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:clamp(12px,3vw,20px)}.form-section{margin-bottom:clamp(12px,3vw,15px)}.form-section h2{margin:0 0 10px;color:#333;font-size:clamp(16px,3vw,18px);padding-bottom:6px;border-bottom:2px solid #667eea}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width: 600px){.form-row,.images-row{grid-template-columns:1fr}}.form-group{margin-bottom:10px}.form-group label{display:block;margin-bottom:4px;color:#333;font-weight:500;font-size:14px}.form-group input,.form-group textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;box-sizing:border-box;font-family:inherit}.form-group textarea{resize:vertical}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea}.images-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.image-group label{display:block;margin-bottom:4px;color:#333;font-weight:500;font-size:14px}.drop-zone{border:2px dashed #ccc;border-radius:8px;padding:15px;text-align:center;cursor:pointer;transition:all .3s;background:#fafafa;min-height:120px;display:flex;align-items:center;justify-content:center}.drop-zone:hover{border-color:#667eea;background:#f5f7ff}.drop-zone.dragging{border-color:#667eea;background:#e8ecff}.drop-zone-content p{margin:3px 0;color:#666;font-size:13px}.drop-zone-content p:first-child{font-size:32px;margin-bottom:5px}.image-preview{max-width:100%;max-height:120px;object-fit:contain;border-radius:8px}.form-actions{display:flex;gap:10px;margin-top:10px}.btn-cancel{flex:1;padding:10px;background:white;color:#667eea;border:2px solid #667eea;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s}.btn-cancel:hover:not(:disabled){background:#f5f7ff;transform:translateY(-1px)}.btn-cancel:disabled{opacity:.6;cursor:not-allowed}.btn-submit{flex:1;padding:10px;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s}.btn-submit:hover:not(:disabled){background:#5568d3;transform:translateY(-1px)}.btn-submit:disabled{opacity:.6;cursor:not-allowed}.sidebar-logo{padding:20px;text-align:center}.sidebar-logo img{max-width:80%;max-height:80px;object-fit:contain}.user-info{padding:30px 20px;text-align:center;border-bottom:1px solid #eee;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.avatar-container{position:relative;display:inline-block;margin-bottom:15px}.avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid white;display:block}.avatar-placeholder{width:80px;height:80px;border-radius:50%;background:white;color:#667eea;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700}.edit-avatar-icon{position:absolute;bottom:0;right:0;width:28px;height:28px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;box-shadow:0 2px 6px #0003;transition:all .3s;border:2px solid #667eea}.edit-avatar-icon:hover{transform:scale(1.1);box-shadow:0 3px 8px #0000004d}.user-info h3{margin:0 0 5px;font-size:18px}.user-info p{margin:0;opacity:.9;font-size:14px}@media (max-width: 768px){.empresa-form{padding:16px}.drop-zone{padding:12px;min-height:100px}.drop-zone-content p:first-child{font-size:24px}}:root{--breakpoint-mobile: 480px;--breakpoint-tablet: 768px;--breakpoint-desktop: 1024px;--breakpoint-wide: 1440px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 20px;--spacing-xl: 32px;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--font-size-base)}#root{min-height:100vh}@media (max-width: 768px){:root{--spacing-lg: 16px;--spacing-xl: 24px;--font-size-xl: 20px;--font-size-2xl: 28px}}@media (max-width: 480px){:root{--spacing-lg: 12px;--spacing-xl: 20px;--font-size-xl: 18px;--font-size-2xl: 24px}}