# Mockups — E250-C0053 Panel de Integraciones

Mockups estáticos (NO producción) de la sección **Integrations** del panel admin.
Reutilizan el shell real de `PanelView.vue` (sidebar + breadcrumb), el tema `e250`
(primary `#2eac66`) y los patrones DaisyUI de `PanelMappingView.vue` /
`MappingEditorModal.vue`: `card bg-base-100 border border-base-300`, labels
`text-[11px] uppercase tracking-wider text-base-content/40`, `input-bordered`,
`select-bordered`, `alert-error`/`alert-success`/`alert-warning`, `btn-primary btn-sm`.

Eje explorado: **cómo se organizan las 4 integraciones** (TuriTop, Volcano Teide/OCTO,
Stripe, Resend).

| Variante | Organización | Guardado | Notas |
|---|---|---|---|
| `v1-accordion.html` | Una tarjeta-`collapse` por integración; primera abierta, resto colapsadas | Botón por integración dentro del collapse | Menos scroll; el badge de estado del secreto se ve en la cabecera aunque esté cerrada. |
| `v2-tabs.html` | `tabs tabs-bordered`, una pestaña por integración + punto de estado | Botón por pestaña (Guardar/Descartar) | Foco total en una integración a la vez; el `<details>` final sólo es para previsualizar otra pestaña en el mockup. |
| `v3-sectioned-form.html` | Una sola tarjeta con las 4 secciones separadas por `divider`, todo visible de un vistazo | Botón `btn-xs` por sección en su cabecera | Todo el estado a la vista; más largo verticalmente. |

Convenciones comunes a las tres (criterios del contrato con superficie visual):

- **Secretos write-only**: input `type="password"` con placeholder enmascarado
  (`••••1234 — escribe para sobrescribir`) o `(sin configurar)`; nunca se muestra el
  valor guardado; texto de ayuda "vacío = conservar".
- **Estado del secreto**: badge `badge-success` (● configurada) vs `badge-warning`
  (○ vacía) en la cabecera de cada integración.
- **Campos no-secretos en claro**: base URLs, OCTO capabilities, host/puerto/protocolo
  de Stripe, from/to de Resend — editables como inputs/select normales.
- **Confirmación de guardado**: `alert alert-success` inline ("✓ … guardado").
- **Error legible**: `input-error` + `label-text-alt text-error` en el campo +
  `alert alert-error` con mensaje (ej. puerto/URL mal formada), mismo patrón que
  el error de servidor de `MappingEditorModal.vue`.