added new style to ask 1

2025-11-19 18:17:24 -06:00
parent 42efd5aba4
commit 9b979725e5
4 changed files with 270 additions and 240 deletions
@@ -0,0 +1,144 @@
+
+.contenedor-censo{
+  background-color: #002855;
+  color: white;
+  padding: 15px;
+  font-size: 20px;
+  margin-bottom: 25px;
+}
+ 
+
+.pregunta-cuadro {
+  background-color: #f5f5f5;
+  border-left: 6px solid #001f3f;
+  padding: 15px;
+  border-radius: 8px;
+  font-size: 16px;
+  margin-bottom: 25px;
+}
+
+
+.tabla-contenedor {
+  background: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow-x: auto;
+  min-width: 700px;
+}
+
+/* Tabla */
+.tabla {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: center;
+  color: black;
+  width: 100%;        /* ocupa todo el ancho del contenedor */
+  table-layout: fixed;
+}
+
+.tabla th,
+.tabla td {
+  border: 1px solid #ddd;
+  padding: 12px;
+  
+}
+
+.tabla th {
+  color: white;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.tabla td {
+  font-size: 14px;
+}
+
+/* Colores personalizados */
+.azul-marino {
+  background-color: #002855;
+  color: white;
+}
+
+.rosa-fuerte {
+  background-color: #dc1557;
+  color: white;
+}
+
+/* Contenedor input  */
+.input-contenedor {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+/* Input  */
+.input-contenedor input {
+  width: 100%;
+  padding: 6px 25px 6px 6px;
+  border: 2px solid #002855; 
+  border-radius: 6px;
+  font-size: 14px;
+  color: #333;
+  text-align: center; 
+  outline: none;
+  background-color: rgb(232, 226, 226);
+  box-sizing: border-box;
+}
+
+
+.input-contenedor input::-webkit-inner-spin-button,
+.input-contenedor input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Focus del input */
+.input-contenedor input:focus {
+  border-color: #001f3f;
+  box-shadow: 0 0 6px rgba(0, 47, 95, 0.3);
+}
+
+/* Placeholder gris claro */
+.input-contenedor input::placeholder {
+  color: #bbb;
+  opacity: 1;
+}
+
+ 
+.input-contenedor .porcentaje {
+  position: absolute;
+  right: 8px; 
+  color: #555;
+  font-weight: bold;
+  pointer-events: none;
+  font-size: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Celda del total */
+.total-celda {
+  font-weight: bold;
+  color: #002855;
+  background-color: #eef2f6;
+}
+
+/* Total > 100% */
+.total-error {
+  background-color: #ffcccc;
+  color: #a80000;
+}
+
+.contenedor-tablas {
+  display: flex;          
+  gap: 10px;              
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.tabla-contenedor {
+  flex: 1;                    
+}