.login-container{max-width:400px;margin:0 auto;padding:2rem;text-align:center;display:flex;flex-direction:column;align-items:center}.logo-container{display:flex;justify-content:center;margin-bottom:1rem}.logo{width:100px;height:auto;object-fit:contain}.titulo{margin:.5rem 0}.campo{margin-bottom:1rem}.campo input{width:100%;min-width:300px;padding:.5rem 1rem;border:1px solid #ccc;border-radius:4px;height:15px}.contraseña{position:relative;display:flex;align-items:center}.toggle-password{position:absolute;right:10px;cursor:pointer;background:none;border:none;padding:0;font-size:1.2em;color:#666}.boton-ingresar{width:100%;padding:.5rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.boton-about{display:block;margin-top:1rem;color:#007bff;text-decoration:none}.rol-label{display:block;margin-bottom:5px;color:#fff2f2c6;font-weight:700;text-align:left}.rol-selector{width:100%;min-width:300px;padding:.5rem 1rem;border:1px solid #ccc;border-radius:25px;background-color:#fff;font-size:16px;margin-bottom:15px;height:40px;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;transition:border-color .3s ease}.rol-selector:focus{outline:none;box-shadow:0 0 5px #007bff80}.usuarios-container{font-family:Arial,sans-serif;max-width:1000px;margin:20px auto;padding:0;box-shadow:0 0 10px #0000001a;border-radius:5px;overflow:hidden}.usuarios-header{background-color:#4caf50;color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}.usuarios-header h1{margin:0;font-size:24px}.usuarios-button{background-color:#fff;color:#4caf50;border:none;padding:8px 15px;border-radius:4px;font-weight:700;cursor:pointer;transition:all .3s}.usuarios-button:hover{background-color:#f1f1f1}.formulario-seccion,.acciones-seccion,.tabla-seccion{padding:15px 20px;border-bottom:1px solid #e0e0e0}.formulario-seccion h2,.acciones-seccion h2,.tabla-seccion h2{margin-top:0;color:#fff;font-size:18px;margin-bottom:15px}.form-row{display:flex;gap:15px;margin-bottom:10px}.form-group{flex:1;margin-bottom:10px}.form-group label{display:block;margin-bottom:5px;font-weight:700;color:#555;font-size:14px}.form-group input,.form-group select{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.form-group input:focus,.form-group select:focus{border-color:#4caf50;outline:none}.acciones-botones{display:flex;gap:10px}.accion-boton{padding:8px 15px;border:none;border-radius:4px;cursor:pointer;font-weight:700;font-size:14px;transition:all .3s}.crear{background-color:#4caf50;color:#fff}.crear:hover{background-color:#3d8b40}.limpiar{background-color:#f44336;color:#fff}.limpiar:hover{background-color:#d32f2f}.editar{background-color:#2196f3;color:#fff;margin-right:5px}.editar:hover{background-color:#0b7dda}.eliminar{background-color:#ff5722;color:#fff}.eliminar:hover{background-color:#e64a19}.tabla-container{overflow-x:auto;margin-top:10px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #ddd}th{background-color:#f5f5f5;font-weight:700;color:#333}tr:hover{background-color:#f9f9f9}.mostrar{background-color:#27b079;color:#fff;margin-right:5px}@media (max-width: 768px){.form-row{flex-direction:column;gap:0}.form-group{margin-bottom:15px}}.rack-container{padding:2rem;text-align:center}.rack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;max-width:600px;margin:auto}.room-btn{padding:1rem;font-size:1rem;border:none;cursor:pointer;border-radius:10px;box-shadow:0 0 8px gray;transition:.3s}.room-btn.libre{box-shadow:0 0 12px green;background-color:#e6ffe6}.room-btn.ocupada{box-shadow:0 0 12px red;background-color:#ffe6e6}.panel-container{background-color:#32cd32;padding:20px;border-radius:10px;color:#fff;font-family:sans-serif;width:80%;margin:20px}.panel-header h1{font-size:28px;margin-bottom:5px}.user-info{display:flex;justify-content:space-between;margin-bottom:20px}.section{margin-top:10px;background-color:#2eb82e;padding:15px;border-radius:10px}.quick-actions{display:flex;gap:10px;margin-bottom:20px}.action-btn{padding:8px 16px;border:none;color:#fff;font-weight:700;border-radius:5px;cursor:pointer;transition:.2s ease}.primary{background-color:#28a745}.secondary{background-color:#007bff}.cancel{background-color:#dc3545}.action-btn:hover{opacity:.9}.form-container{background-color:#fff;color:#000;padding:15px;border-radius:10px;box-shadow:0 0 10px #0003;margin-top:15px}.form-container h3{margin-bottom:15px}.form-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:15px}.form-group{flex:1;min-width:200px;display:flex;flex-direction:column}.form-group label{font-weight:700;margin-bottom:5px}.form-group input,.form-group select{padding:8px;border-radius:5px;border:1px solid #ccc}.form-buttons{display:flex;gap:10px}.active-guests-table{width:100%;background-color:#fff;color:#000;border-radius:10px;overflow:hidden;margin-top:10px}.active-guests-table th,.active-guests-table td{padding:10px;border-bottom:1px solid #ccc;text-align:left}.active-guests-table th{background-color:#f8f8f8}.active-guests-table tr:hover{background-color:#f1f1f1}.habitacion-container{max-width:500px;margin:40px auto;padding:30px;background-color:#fff;border-radius:16px;box-shadow:0 10px 25px #00000014;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.habitacion-container h2{color:#6c63ff;margin-bottom:20px;text-align:center}.habitacion-container h3,.habitacion-container h4{margin-top:20px;margin-bottom:15px;color:#444;text-align:center}.habitacion-container form{display:flex;flex-direction:column;gap:15px}.habitacion-container input,.habitacion-container select{padding:12px 14px;border:1px solid #ccc;border-radius:10px;font-size:16px;transition:border-color .3s,box-shadow .3s}.habitacion-container input:focus,.habitacion-container select:focus{border-color:#6c63ff;outline:none;box-shadow:0 0 0 3px #6c63ff33}.habitacion-container button{padding:12px;background-color:#6c63ff;color:#fff;border:none;border-radius:10px;font-size:16px;cursor:pointer;transition:background-color .3s}.habitacion-container button:hover{background-color:#574bdb}.habitacion-container p{margin:8px 0;color:#555;font-size:15px}.habitacion-container strong{color:#333}body{margin:0;padding:0}.App{background-color:#3ad55e;margin:0;padding:0;font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;min-width:320;min-height:100vh}.login-container{width:350px;background-color:#47b444;padding:40px;border-radius:20px;box-shadow:0 8px 16px #0003;text-align:center}.logo{width:150px;margin-bottom:20px}.titulo{color:#fff;margin-bottom:25px;font-size:34px}.campo{margin-bottom:25px;position:relative}.campo input{width:90%;padding:15px;border:none;border-radius:25px;font-size:15px;background-color:#f9f9f9;box-shadow:inset 0 0 5px #0000001a;color:#333}.campo input::placeholder{color:#aaa}.campo input:focus{outline:none;box-shadow:0 0 0 2px #a5d6a7}.toggle-password{position:absolute;right:15px;top:12px;cursor:pointer;color:#999;font-size:18px}.boton-ingresar{width:50%;padding:12px;background-color:#fff;color:#000;border:none;border-radius:25px;font-size:16px;cursor:pointer;transition:background-color .3s}