/* ============================================================ ALIADOS-ENCUESTAS.CSS — Encuestas de seguimiento de aliados ------------------------------------------------------------ Estilos del submódulo Encuestas del módulo Onboarding Aliados: el modal de historial (lista desplegable + fotos de cada visita) y el modal del formulario de nueva encuesta. El chasis del módulo (responsive del dashboard de KPIs y los keyframes) vive en: - css/modules/aliados.css Cargar SIEMPRE después de aliados.css (chasis primero). Los pinta js/aliados.js: renderizarAliadosHistorico() -> solo el boton disparador de la tarjeta abrirHistorialEncuestas() / _toggleEncuesta() abrirFormularioEncuesta() y helpers _encuesta* guardarEncuesta() NOTA SOBRE COLORES — se usan los tokens de css/design-system.css SOLO donde el token vale exactamente el mismo hex que tenía el estilo inline, para que el render no cambie: --primary-600 #2AA048 --primary-700 #1E8038 --red-600 #dc2626 --red-50 #fef2f2 --blue-50 #eff6ff El resto va literal a propósito, porque el design-system NO tiene token exacto y el parecido engaña: #f9fafb (--gray-50 vale #FAFAFA), #e5e7eb (--gray-200 vale #E8E8E8), #6b7280 / #9ca3af / #374151 / #111827 (los --gray-* "Apple Style" del segundo :root son otra escala), el violeta #8b5cf6 / #7c3aed y el azul #1d4ed8 / #93c5fd (ojo: --blue-500 y --blue-600 están sobrescritos con los verdes de YaYa). Autor: Miguel Yepes Creado: 2026-08-10 (extracción de estilos inline de js/aliados.js) ============================================================ */ /* ── Disparador en la tarjeta del histórico ──────────────────── */ /* Botón "Encuesta" de la tarjeta de aliado, el que abre el historial. Mismo violeta que la cabecera del modal de historial, y misma geometría que los demás botones de acción de la tarjeta (Activar / Desactivar / QR / Editar), que siguen inline. */ .enc-btn-tarjeta { padding: 6px 14px; background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; border: none; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: var(--space-1); } /* ── Chasis de modal (historial y formulario) ────────────────── */ /* Los dos modales se crean por JS y se insertan en . El del formulario se abre ENCIMA del de historial: de ahí el z-index mayor en la variante --form. */ .enc-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: var(--space-5); } .enc-modal-overlay--form { background: rgba(0, 0, 0, 0.6); z-index: 10001; } .enc-modal-card { background: white; border-radius: 16px; max-width: 820px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .enc-modal-card--form { max-width: 700px; max-height: 92vh; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .enc-modal-head { padding: var(--space-5) var(--space-6); border-radius: 16px 16px 0 0; display: flex; justify-content: space-between; align-items: center; } /* Violeta = historial de encuestas. Verde = alta de encuesta. */ .enc-modal-head--violeta { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } .enc-modal-head--verde { background: linear-gradient(135deg, var(--primary-600), var(--primary-700)); } .enc-modal-head-txt { color: white; } .enc-modal-title { margin: 0; font-size: 18px; font-weight: 700; } .enc-modal-title i { margin-right: var(--space-2); } .enc-modal-sub { margin: var(--space-1) 0 0; font-size: 13px; opacity: 0.85; } .enc-modal-close { background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px; } .enc-modal-body { padding: var(--space-6); } /* ── Historial: botón de alta, carga y vacío ─────────────────── */ .enc-btn-nueva { width: 100%; padding: var(--space-3); background: linear-gradient(135deg, var(--primary-600), var(--primary-700)); color: white; border: none; border-radius: 10px; font-size: var(--text-sm); font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-5); } .enc-cargando { text-align: center; padding: 30px; color: #9ca3af; } .enc-cargando-icon { font-size: 22px; } .enc-cargando-txt { margin-top: 10px; font-size: 13px; } .enc-vacio { text-align: center; padding: 30px; background: #f9fafb; border-radius: 10px; color: #6b7280; } .enc-vacio-icon { font-size: 26px; color: #d1d5db; } .enc-vacio-txt { margin-top: 10px; font-size: 13px; } .enc-error-box { padding: var(--space-4); background: var(--red-50); border: 1px solid #fca5a5; border-radius: 10px; color: var(--red-600); font-size: 13px; } .enc-error-box i { margin-right: 6px; } /* ── Historial: una encuesta (cabecera plegable + cuerpo) ────── */ .enc-item { border: 1px solid #e5e7eb; border-radius: var(--radius-lg); margin-bottom: var(--space-3); overflow: hidden; } .enc-item-head { padding: 14px var(--space-4); background: #f9fafb; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .enc-item-fecha { font-size: var(--text-sm); font-weight: 700; color: #111827; } .enc-item-fecha i { color: #8b5cf6; margin-right: 6px; } .enc-item-autor { font-size: var(--text-xs); color: #6b7280; margin-top: 2px; } .enc-item-badges { display: flex; align-items: center; gap: 6px; } /* Rompetráfico / QR visible. El dato manda: --si verde, --no rojo. Antes se calculaba el hex en runtime dentro del string HTML. */ .enc-badge { padding: 3px var(--space-2); border-radius: var(--radius-sm); font-size: 11px; } .enc-badge--si { background: #dcfce7; color: var(--primary-600); } .enc-badge--no { background: var(--red-50); color: var(--red-600); } .enc-item-chevron { color: #9ca3af; font-size: var(--text-xs); } /* Cerrado por defecto; _toggleEncuesta() alterna .enc-abierto. */ .enc-item-cuerpo { display: none; padding: var(--space-4); border-top: 1px solid #f3f4f6; } .enc-item-cuerpo.enc-abierto { display: block; } /* ── Historial: datos de la visita ───────────────────────────── */ .enc-dato { font-size: 13px; margin-bottom: 6px; } .enc-dato-block { font-size: 13px; margin-bottom: 10px; } .enc-dato-correo { color: #9ca3af; font-size: 11px; } .enc-dato-vacio { color: #9ca3af; } .enc-comentarios-box { margin-top: var(--space-1); padding: 10px; background: #f9fafb; border-radius: var(--radius-md); white-space: pre-wrap; color: #374151; } .enc-seccion-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-2); } .enc-seccion-label i { margin-right: var(--space-1); } .enc-seccion-label--violeta { color: #8b5cf6; } .enc-seccion-label--verde { color: var(--primary-600); } /* ── Fotos ya guardadas (historial) ──────────────────────────── */ .enc-fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } /* Compartida por el grid del historial y el de fotos extra del form. */ .enc-foto-card { border: 1px solid #e5e7eb; border-radius: var(--radius-md); overflow: hidden; } .enc-foto-img { width: 100%; height: 120px; object-fit: cover; cursor: pointer; display: block; } .enc-foto-cap { padding: 6px var(--space-2); font-size: 11px; font-weight: 600; color: #374151; background: #f9fafb; } .enc-sin-fotos { font-size: var(--text-xs); color: #9ca3af; } /* ── Formulario: cabecera de datos fijos ─────────────────────── */ .enc-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: 18px; } .enc-meta-card { background: #f9fafb; border-radius: 10px; padding: var(--space-3); } .enc-meta-label { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; } .enc-meta-valor { font-size: var(--text-sm); font-weight: 600; color: #111827; margin-top: var(--space-1); } .enc-meta-valor i { color: var(--primary-600); margin-right: 5px; } /* ── Formulario: campos ──────────────────────────────────────── */ .enc-campo { margin-bottom: var(--space-4); } .enc-campo--lg { margin-bottom: 18px; } .enc-campo-label { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; } .enc-radio { font-size: var(--text-sm); cursor: pointer; } /* Separación entre la opción Sí y la opción No. */ .enc-radio--sep { margin-right: 18px; } .enc-radio input { margin-right: 5px; } .enc-check { display: block; font-size: var(--text-sm); margin-bottom: 5px; cursor: pointer; } .enc-check input { margin-right: 6px; } .enc-textarea { width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: var(--radius-md); font-size: var(--text-sm); font-family: inherit; resize: vertical; box-sizing: border-box; } /* Los tres son disparadores ocultos. */ .enc-input-file { display: none; } /* ── Formulario: slots de foto y fotos extra ─────────────────── */ .enc-fotos-cont { margin-bottom: 18px; } .enc-slots-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .enc-slot { border: 1px dashed #d1d5db; border-radius: 10px; padding: 10px; } /* Título de slot y encabezado "Fotos adicionales (N)". */ .enc-label-sm { font-size: var(--text-xs); font-weight: 600; color: #374151; margin-bottom: 6px; } .enc-slot-img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--radius-sm); display: block; } .enc-slot-nombre { font-size: 10px; color: #9ca3af; margin-top: var(--space-1); word-break: break-all; } .enc-slot-picker { width: 100%; padding: var(--space-6) var(--space-2); background: #f9fafb; color: #6b7280; border: none; border-radius: var(--radius-sm); font-size: var(--text-xs); cursor: pointer; } .enc-slot-picker i { display: block; font-size: 20px; margin-bottom: 6px; color: #d1d5db; } .enc-extras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); margin-bottom: 10px; } .enc-extra-img { width: 100%; height: 90px; object-fit: cover; display: block; } .enc-btn-quitar { margin-top: 6px; width: 100%; padding: 5px; background: var(--red-50); color: var(--red-600); border: 1px solid #fca5a5; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; cursor: pointer; } /* Variante pegada al pie de una foto extra: sin margen ni marco, solo la línea que la separa de la imagen. */ .enc-btn-quitar--extra { margin-top: 0; padding: var(--space-1); border: none; border-top: 1px solid #fca5a5; border-radius: 0; font-size: 10px; } .enc-btn-otra { width: 100%; padding: 9px; background: var(--blue-50); color: #1d4ed8; border: 1px dashed #93c5fd; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; cursor: pointer; } /* ── Formulario: estado de guardado y pie ────────────────────── */ /* Oculto hasta que _encuestaEstado() le pone .enc-estado--info o .enc-estado--error. Antes el color se escribía inline. */ .enc-estado { display: none; margin-bottom: var(--space-3); font-size: 13px; padding: 10px; border-radius: var(--radius-md); } .enc-estado--info { display: block; background: var(--blue-50); border: 1px solid #93c5fd; color: #1d4ed8; } .enc-estado--error { display: block; background: var(--red-50); border: 1px solid #fca5a5; color: var(--red-600); } .enc-estado-hint { font-size: var(--text-xs); } .enc-form-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: var(--space-4); border-top: 1px solid #e5e7eb; } .enc-btn-cancelar { padding: 10px var(--space-5); background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; cursor: pointer; } .enc-btn-guardar { padding: 10px var(--space-6); background: linear-gradient(135deg, var(--primary-600), var(--primary-700)); color: white; border: none; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; } /* Mientras guarda, guardarEncuesta() solo hace btn.disabled = true. */ .enc-btn-guardar:disabled { opacity: 0.6; cursor: not-allowed; } /* ── Selector de origen de la foto ───────────────────────────── */ /* Modal chico que pregunta camara o galeria. Se apila sobre el formulario: 10002 contra los 10001 de .enc-modal-overlay--form. Solo aparece en dispositivos tactiles (ver _encuestaAbrirSelector). */ .enc-origen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 10002; display: flex; align-items: center; justify-content: center; padding: 20px; } .enc-origen-card { background: white; border-radius: var(--radius-lg); padding: 22px; max-width: 340px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); text-align: center; } .enc-origen-title { font-size: 15px; font-weight: 700; color: #111827; } .enc-origen-sub { font-size: 13px; color: #6b7280; margin: 4px 0 18px; } .enc-origen-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .enc-origen-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; background: #f9fafb; color: #374151; border: 1px solid #e5e7eb; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; } .enc-origen-btn i { font-size: 24px; color: var(--primary-600); } .enc-origen-btn:active { background: #f3f4f6; } .enc-origen-cancelar { width: 100%; padding: 9px; background: none; color: #6b7280; border: none; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; } .enc-origen-btn:disabled { opacity: 0.45; cursor: not-allowed; } .enc-origen-btn:disabled i { color: #9ca3af; } .enc-origen-nota { font-size: 10px; font-weight: 500; color: #9ca3af; line-height: 1.2; }