*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;color:#fff}#root{min-height:100vh;display:flex;flex-direction:column}.container{max-width:400px;margin:0 auto;padding:20px;width:100%}.header{text-align:center;padding:20px 20px 16px}.logo{width:100px;height:100px;margin-bottom:16px}@media(max-height:700px){.logo{width:60px;height:60px;margin-bottom:8px}.header{padding:10px 20px 8px}.header h1{font-size:1.4rem;margin-bottom:4px}.pin-display{margin:16px 0}.keypad{gap:10px}}.logo-small{width:50px;height:50px;margin-bottom:8px}.header h1{font-size:1.8rem;font-weight:700;margin-bottom:8px}.header p{color:#a0aec0;font-size:.95rem}.pin-display{display:flex;justify-content:center;gap:12px;margin:30px 0}.pin-dot{width:20px;height:20px;border-radius:50%;background:#2d3748;border:2px solid #4a5568;transition:all .2s}.pin-dot.filled{background:#48bb78;border-color:#48bb78;box-shadow:0 0 15px #48bb7880}.pin-dot.error{background:#fc8181;border-color:#fc8181;animation:shake .3s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;max-width:300px;margin:0 auto}.key{aspect-ratio:1;border:none;border-radius:50%;font-size:1.8rem;font-weight:600;background:#ffffff1a;color:#fff;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}.key:hover{background:#fff3}.key:active{transform:scale(.95);background:#ffffff40}.key.delete{font-size:1.2rem}.key.empty{background:transparent;cursor:default}.btn{width:100%;padding:16px 24px;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:12px}.btn-entrada{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff}.btn-entrada:hover{transform:translateY(-2px);box-shadow:0 10px 20px #48bb784d}.btn-salida{background:linear-gradient(135deg,#fc8181,#f56565);color:#fff}.btn-salida:hover{transform:translateY(-2px);box-shadow:0 10px 20px #fc81814d}.btn-pausa{background:linear-gradient(135deg,#f6ad55,#ed8936);color:#fff}.btn-pausa:hover{transform:translateY(-2px);box-shadow:0 10px 20px #f6ad554d}.btn-secondary{background:#ffffff1a;color:#a0aec0}.btn-secondary:hover{background:#ffffff26}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.estado-card{background:#ffffff0d;border-radius:16px;padding:24px;margin-bottom:24px;text-align:center}.estado-card .hora{font-size:2.5rem;font-weight:700;color:#48bb78;margin:16px 0}.estado-card .info{color:#a0aec0;font-size:.9rem}.estado-badge{display:inline-block;padding:6px 16px;border-radius:20px;font-size:.85rem;font-weight:600;margin-top:12px}.estado-badge.trabajando{background:#48bb7833;color:#48bb78}.estado-badge.pausa{background:#f6ad5533;color:#f6ad55}.historial{margin-top:30px}.historial h3{font-size:1rem;color:#a0aec0;margin-bottom:16px}.historial-item{background:#ffffff0d;border-radius:12px;padding:16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.historial-item .fecha{font-weight:600}.historial-item .horas{color:#48bb78;font-weight:600}.error-message{background:#fc81811a;border:1px solid rgba(252,129,129,.3);color:#fc8181;padding:12px 16px;border-radius:8px;text-align:center;margin:16px 0;font-size:.9rem}.success-message{background:#48bb781a;border:1px solid rgba(72,187,120,.3);color:#48bb78;padding:12px 16px;border-radius:8px;text-align:center;margin:16px 0;font-size:.9rem}.loading{display:flex;align-items:center;justify-content:center;padding:40px}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#48bb78;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tabs{display:flex;gap:8px;margin-bottom:20px}.tab{flex:1;padding:12px 16px;border:none;border-radius:10px;font-size:.95rem;font-weight:600;background:#ffffff0d;color:#a0aec0;cursor:pointer;transition:all .2s}.tab:hover{background:#ffffff1a}.tab.active{background:#48bb7833;color:#48bb78}.historial-completo{margin-top:10px}.historial-completo h3{font-size:1rem;color:#a0aec0;margin-bottom:16px}.historial-item-detalle{background:#ffffff0d;border-radius:12px;padding:16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.historial-fecha{display:flex;flex-direction:column;gap:4px}.historial-fecha .dia{font-weight:600;font-size:1rem}.historial-fecha .fecha-num{color:#a0aec0;font-size:.85rem}.historial-horas{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.historial-horas .entrada-salida{color:#a0aec0;font-size:.85rem}.historial-horas .total{color:#48bb78;font-weight:600;font-size:1rem}.manual-form{margin-top:10px}.manual-form h3{font-size:1rem;color:#a0aec0;margin-bottom:8px}.form-group{margin-bottom:16px}.form-group label{display:block;color:#a0aec0;font-size:.85rem;margin-bottom:6px}.form-group input,.form-group textarea{width:100%;padding:12px 16px;border:1px solid #4a5568;border-radius:10px;background:#ffffff0d;color:#fff;font-size:1rem;font-family:inherit}.form-group textarea{resize:vertical;min-height:60px}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#48bb78}.form-row{display:flex;gap:12px}.form-row .form-group{flex:1}.badge-manual{display:inline-block;margin-left:8px;padding:2px 6px;background:#f6ad5533;color:#f6ad55;font-size:.7rem;font-weight:600;border-radius:4px;vertical-align:middle}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;padding:24px;width:100%;max-width:360px;border:1px solid rgba(255,255,255,.1)}.modal h3{font-size:1.2rem;margin-bottom:8px;text-align:center}.modal p{color:#a0aec0;font-size:.9rem;text-align:center;margin-bottom:20px}.modal .form-group{margin-bottom:20px}.modal-buttons{display:flex;gap:12px}.modal-buttons .btn{flex:1;margin-bottom:0}.btn-cancel{background:#ffffff1a;color:#a0aec0}.btn-cancel:hover{background:#ffffff26}.btn-logout{background:linear-gradient(135deg,#667eea,#5a67d8);color:#fff}.btn-logout:hover{transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.admin-container{max-width:600px}.admin-filtros{display:flex;gap:12px;margin-bottom:16px}.filtro-grupo{flex:1}.filtro-grupo label{display:block;color:#a0aec0;font-size:.8rem;margin-bottom:4px}.filtro-grupo input{width:100%;padding:10px 12px;border:1px solid #4a5568;border-radius:8px;background:#ffffff0d;color:#fff;font-size:.9rem}.filtro-grupo input:focus{outline:none;border-color:#48bb78}.admin-acciones{display:flex;gap:10px;margin-bottom:20px}.btn-small{padding:10px 16px;font-size:.9rem}.admin-tabla-wrapper{overflow-x:auto;margin:0 -20px;padding:0 20px}.admin-tabla{width:100%;border-collapse:collapse;font-size:.85rem}.admin-tabla th,.admin-tabla td{padding:12px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.1)}.admin-tabla th{color:#a0aec0;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.admin-tabla td{color:#fff}.admin-tabla tr:hover{background:#ffffff0d}.admin-tabla .total-horas{color:#48bb78;font-weight:600}.admin-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.registros-count{color:#a0aec0;font-size:.85rem}@media(max-width:500px){.admin-filtros{flex-direction:column;gap:10px}.admin-tabla{font-size:.8rem}.admin-tabla th,.admin-tabla td{padding:10px 6px}}.copyright{text-align:center;color:#4a5568;font-size:.75rem;padding:20px;margin-top:auto}