Conexion a APIS con Preguntas

2025-11-19 18:24:38 -06:00
parent 1047a49171
commit db2dd0f97e
7 changed files with 526 additions and 359 deletions
@@ -0,0 +1,109 @@
+/* === Cuadro de la pregunta === */
+.pregunta-cuadro {
+  border-left: 6px solid #001f3f;
+  padding: 15px;
+  border-radius: 8px;
+  font-size: 16px;
+  margin-bottom: 25px;
+}
+
+/* === Contenedor de tabla === */
+.tabla-contenedor {
+  background: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow-x: auto;
+}
+
+/* === Estilos de la tabla === */
+.tabla {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: center;
+  color: black;
+}
+
+.tabla th,
+.tabla td {
+  border: 1px solid #ddd;
+  padding: 12px;
+}
+
+.tabla th {
+  background-color: #002855;
+  color: white;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.tabla td {
+  font-size: 14px;
+}
+
+/* === Colores personalizados === */
+.azul-marino {
+  background-color: #002855 !important;
+  color: white !important;
+}
+
+.rosa-fuerte {
+  background-color: #dc1557 !important;
+  color: white !important;
+}
+
+/* === Input === */
+.input-contenedor {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.input-contenedor input {
+  width: 40%;
+  padding: 6px;
+  border: 2px solid #002855;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #333;
+  text-align: center;
+  outline: none;
+  background-color: #e8e2e2;
+  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 */
+.input-contenedor input::placeholder {
+  color: #bbb;
+}
+
+/* Para celdas del total */
+.total-celda {
+  font-weight: bold;
+  color: #002855;
+  background-color: #eef2f6;
+}
+
+/* Error de total */
+.total-error {
+  background-color: #ffcccc;
+  color: #a80000;
+}
+
+/* Ajuste especial para inputs */
+.input-sp input {
+  width: 38%;
+}