Fixed iphone video reproduction and responsive issues

app/static/css/style.css

@@ -29,6 +29,21 @@ body {
     color: var(--text-main);
     min-height: 100vh;
     line-height: 1.6;
+    overflow-x: hidden;
+    /* Evitar scroll lateral indeseado */
+}
+
+h1 {
+    font-size: clamp(1.5rem, 5vw, 2.5rem);
+    font-family: 'Outfit', sans-serif;
+}
+
+h2 {
+    font-size: clamp(1.2rem, 4vw, 2rem);
+}
+
+h3 {
+    font-size: clamp(1rem, 3vw, 1.5rem);
 }
 
 /* EFECTO GLASSMORFISMO 
@@ -47,7 +62,7 @@ body {
     position: sticky;
     top: 0;
     z-index: 100;
-    padding: 1rem 2rem;
+    padding: 0.8rem 1rem;
     margin-bottom: 2rem;
 }
 
@@ -163,7 +178,14 @@ body {
 .content-wrapper {
     max-width: 1000px;
     margin: 0 auto;
-    padding: 0 2rem 4rem;
+    padding: 0 1rem 4rem;
+    /* Reducir padding lateral en móviles */
+}
+
+@media (min-width: 768px) {
+    .content-wrapper {
+        padding: 0 2rem 4rem;
+    }
 }
 
 /* TARJETAS DE NAVEGACIÓN (Dashboard) */
@@ -264,6 +286,29 @@ input:focus {
     border-color: var(--accent);
 }
 
+.responsive-container {
+    padding: 1.5rem;
+}
+
+@media (min-width: 768px) {
+    .responsive-container {
+        padding: 2.5rem;
+    }
+}
+
+.time-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+@media (max-width: 480px) {
+    .time-grid {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+    }
+}
+
 /* SISTEMA DE NOTIFICACIONES FLOTANTES */
 #notification-container {
     position: fixed;
@@ -339,10 +384,33 @@ input:focus {
     grid-template-columns: 1fr 2fr 100px auto;
     gap: 1rem;
     align-items: flex-end;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
+    /* Más espacio entre filas en móvil */
 }
 
 /* Adaptabilidad para móviles */
+@media (max-width: 768px) {
+    .item-row {
+        grid-template-columns: 1fr;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid var(--glass-border);
+    }
+
+    .item-row .form-group {
+        margin-bottom: 0.5rem;
+    }
+
+    .repo-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .repo-item .btn {
+        width: 100%;
+    }
+}
+
 /* MODALES */
 .receipt-modal {
     position: fixed;
@@ -378,5 +446,37 @@ input:focus {
 
     .receipt-modal {
         padding: 1.5rem;
+        width: 90%;
+    }
+
+    .navbar {
+        padding: 0.5rem 1rem;
+    }
+
+    .nav-logo span {
+        font-size: 1.1rem;
+        /* Logo más pequeño en móvil */
+    }
+
+    .card-grid {
+        grid-template-columns: 1fr;
+        /* Forzar una columna en móviles muy pequeños */
+        gap: 1rem;
+    }
+
+    .hero.section {
+        padding: 2rem 1rem 1rem;
+        text-align: center;
+    }
+
+    #notification-container {
+        right: 1rem;
+        left: 1rem;
+        bottom: 1rem;
+    }
+
+    .notification {
+        padding: 0.8rem 1rem;
+        font-size: 0.9rem;
     }
 }

app/templates/asistencia.html

@@ -6,7 +6,7 @@
     <p class="text-dim">Reconocimiento facial en tiempo real para el Maker Space.</p>
 </div>
 
-<div class="attendance-container glass" style="padding: 2rem; border-radius: 1rem; max-width: 800px; margin: 0 auto;">
+<div class="attendance-container glass" style="padding: 1rem; border-radius: 1rem; max-width: 800px; margin: 0 auto;">
     <div id="loading-overlay" style="text-align: center; padding: 2rem;">
         <i class="fas fa-spinner fa-spin fa-3x" style="color: #38bdf8;"></i>
         <p style="margin-top: 1rem;">Cargando modelos de IA...</p>
@@ -14,17 +14,19 @@
 
     <div id="camera-container"
         style="position: relative; display: none; margin-bottom: 2rem; border-radius: 0.5rem; overflow: hidden; background: #000;">
-        <video id="video" width="720" height="560" autoplay muted
+        <video id="video" width="720" height="560" autoplay muted playsinline webkit-playsinline
             style="width: 100%; height: auto; display: block;"></video>
         <canvas id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
     </div>
 
-    <div class="controls-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
-        <button id="btn-attendance" class="btn glass active" style="background: #10b981; color: white;">
-            <i class="fas fa-id-card"></i> MODO ASISTENCIA
+    <div class="controls-grid"
+        style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; margin-top: 1rem;">
+        <button id="btn-attendance" class="btn glass active"
+            style="background: #10b981; color: white; padding: 0.8rem;">
+            <i class="fas fa-id-card"></i> <span class="hide-mobile">MODO</span> ASISTENCIA
         </button>
-        <button id="btn-register" class="btn glass">
-            <i class="fas fa-user-plus"></i> REGISTRAR ROSTRO
+        <button id="btn-register" class="btn glass" style="padding: 0.8rem;">
+            <i class="fas fa-user-plus"></i> <span class="hide-mobile">REGISTRAR</span> ROSTRO
         </button>
     </div>
 
@@ -152,9 +154,11 @@
     }
 
     function startVideo() {
-        navigator.mediaDevices.getUserMedia({ video: {} })
+        navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
             .then(stream => {
                 video.srcObject = stream;
+                video.setAttribute('playsinline', true);
+                video.play(); // Forzar play para navegadores móviles
                 loadingOverlay.style.display = 'none';
                 cameraContainer.style.display = 'block';
                 detectionActive = true;
@@ -285,17 +289,23 @@
 </script>
 
 <style>
-    .btn.active {
-        border: 1px solid white;
-    }
+    @media (max-width: 480px) {
+        .hide-mobile {
+            display: none;
+        }
 
-    .controls-grid .btn {
-        padding: 1rem;
-        border-radius: 0.5rem;
-    }
+        .attendance-container {
+            padding: 0.8rem !important;
+        }
 
-    input.glass::placeholder {
-        color: rgba(255, 255, 255, 0.4);
+        .controls-grid {
+            grid-template-columns: 1fr 1fr !important;
+        }
+
+        .btn {
+            font-size: 0.8rem;
+            padding: 0.6rem !important;
+        }
     }
 </style>
 {% endblock %}

app/templates/prestamos.html

@@ -8,7 +8,7 @@
 </div>
 
 <!-- Formulario de Solicitud de Préstamo -->
-<div class="glass" style="padding: 2rem; border-radius: 24px; margin-bottom: 3rem;">
+<div class="glass responsive-container" style="border-radius: 24px; margin-bottom: 3rem;">
     <form id="loan-form">
         <div class="form-group">
             <label for="solicitante">Nombre del solicitante</label>
@@ -16,7 +16,7 @@
         </div>
 
         <!-- Selección de Horarios (AST/Republica Dominicana) -->
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+        <div class="time-grid">
             <div class="form-group">
                 <label for="hora_salida">Hora Salida</label>
                 <select id="hora_salida" name="hora_salida">