/* =====================================================================
   Configuración simplificada (20-oct-2026, pedido del dueño: «que nada más te salga lo que tienes que poner, que no
   salga más pasos ni aprobaciones ni nada»). Una tarjeta por servicio: arriba una sola línea de estado («Conectado» o
   «Falta …»), los campos que hay que llenar con su «Guardar», uno o dos botones de acción y, plegadas, «Opciones
   avanzadas». La usan js/vistas/configuracion.js (Llamadas, Correo, Inteligencia artificial, Cuenta y Usuarios) y
   js/vistas/config-meta.js (Facebook e Instagram, con WhatsApp dentro de sus opciones avanzadas).
   Prefijo: .cs-  (los campos, llaves y filas para copiar siguen usando .cf- de css/vistas.css y .cm- de
   css/mensajes.css). Si esta hoja no carga, la pantalla se sigue viendo bien con esas clases.
   ===================================================================== */

/* ---------- tarjeta del servicio ---------- */
.cs { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cs-servicio { position: relative; overflow: hidden; }
.cs-servicio::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cinta); opacity: .9; }
.cs-cab { display: flex; align-items: center; gap: 14px; padding: 20px 22px 16px; border-bottom: 1px solid var(--tlc-border-2); }
.cs-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--tlc-navy); color: var(--tlc-gold); box-shadow: 0 8px 18px -12px rgba(20, 32, 72, .8); }
.cs-ic .ico { width: 20px; height: 20px; }
.cs-cab-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cs-cab-txt h3 { margin: 0; font-family: var(--tlc-titulo); font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--tlc-navy); }
.cs-cab-txt h3 .cs-de { font-weight: 700; color: var(--tlc-tinta-3); }

/* Una sola línea de estado por servicio: ok (Conectado), falta (Falta …), mal (algo que arreglar ya), neutro. */
.cs-estado { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--tlc-tinta-2); overflow-wrap: anywhere; }
.cs-estado > i { width: 9px; height: 9px; margin-top: 6px; flex: none; border-radius: 50%; background: var(--tlc-tinta-4); }
.cs-estado.ok { color: var(--tlc-exito); }
.cs-estado.ok > i { background: #34A36B; box-shadow: 0 0 0 3px rgba(52, 163, 107, .16); }
.cs-estado.falta { color: var(--tlc-gold-osc); }
.cs-estado.falta > i { background: var(--tlc-gold); box-shadow: 0 0 0 3px rgba(240, 179, 35, .18); }
.cs-estado.mal { color: var(--tlc-peligro); }
.cs-estado.mal > i { background: var(--tlc-peligro); box-shadow: 0 0 0 3px rgba(184, 59, 54, .14); }
.cs-estado a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Segunda línea corta (por ejemplo, «Para que el bot conteste falta la llave de OpenAI»). */
.cs-nota { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tlc-tinta-3); }
.cs-nota .ico { width: 14px; height: 14px; margin-top: 2px; flex: none; color: var(--tlc-blue); }
.cs-nota a { font-weight: 600; }

.cs-cuerpo { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 20px; min-width: 0; }
.cs-cuerpo > .mensaje-caja { margin: 0; }

/* Campos: los que hay que llenar, en rejilla (1 columna en celular). */
.cs-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px 16px; align-items: start; min-width: 0; }
.cs-campos > .campo { min-width: 0; }
.cs-campos[hidden] { display: none; }
.cs-etq { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.cs-etq label, .cs-etq .etq { font-size: 12.5px; font-weight: 600; color: var(--tlc-tinta-2); }
.cs-etq .gris { font-weight: 400; }
.cs-guardada { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--tlc-exito-claro); color: var(--tlc-exito); font-size: 11px; font-weight: 700; white-space: nowrap; }
.cs-guardada .ico { width: 12px; height: 12px; stroke-width: 2.4; }
.cs-ayuda { margin: 0; font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-3); overflow-wrap: anywhere; }
.cs-ayuda a { font-weight: 600; white-space: nowrap; }
.cs-ayuda a .ico { display: inline-block; width: 12px; height: 12px; margin-left: 2px; vertical-align: -1px; }
.cs-ayuda .mono { font-size: 11.5px; color: var(--tlc-navy); }

/* Guardar + uno o dos botones de acción. */
.cs-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cs-pie .cs-ayuda { flex: 1 1 220px; }

/* «Datos para pegar en Meta / en Google»: una fila compacta con botón de copiar. */
.cs-pegar { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--tlc-cream-2); border: 1px solid var(--tlc-border); min-width: 0; }
.cs-pegar-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.cs-pegar-cab h4 { margin: 0; display: flex; align-items: center; gap: 7px; font-family: var(--tlc-titulo); font-size: 14px; font-weight: 800; color: var(--tlc-navy); }
.cs-pegar-cab h4 .ico { width: 16px; height: 16px; color: var(--tlc-blue); }
.cs-pegar-cab .cs-ayuda { flex: 1 1 260px; }
.cs-pegar-filas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px 14px; min-width: 0; }
.cs-copiar { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-copiar > .etq { font-size: 12px; font-weight: 700; color: var(--tlc-tinta-2); }
.cs-copiar-fila { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 3px 3px 12px; border-radius: 11px; background: #fff; border: 1px solid var(--tlc-border); }
.cs-copiar-fila .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--tlc-navy); user-select: all; }
.cs-copiar-fila .btn { flex: none; }
.cs-chips { margin: 0; font-size: 12px; line-height: 1.7; color: var(--tlc-tinta-3); }
.cs-chips b { font-weight: 700; color: var(--tlc-tinta-2); }

/* Meta: los 10 permisos del token arriba de la tarjeta, a todo lo ancho (cuando Meta rechazó el token o le faltan
   permisos). Los que faltan dicen «· falta» (no solo el color). */
.cs-permisos-caja:empty { display: none; }
.cs-permisos { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #FDFBF7; border: 1px solid var(--tlc-border-2); min-width: 0; }
.cs-permisos .cm-chip { overflow-wrap: anywhere; }
.cs-permisos .cm-chip.cs-falta { background: var(--tlc-peligro-claro); border-color: rgba(184, 59, 54, .35); color: var(--tlc-peligro); font-weight: 700; }
.cs-permisos .cm-chip.cs-falta em { font-style: normal; }
/* La nota del servidor sobre la app de Meta, dentro de «Opciones avanzadas › La app en Meta». */
.cs-nota-app:empty { display: none; }
.cs-nota-app > .mensaje-caja { margin: 0; }

/* ---------- «Opciones avanzadas»: una sola por servicio, plegada ---------- */
.cs-avanzadas { border-top: 1px solid var(--tlc-border-2); background: #FDFBF7; }
.cs-avanzadas > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 22px; min-height: 52px; color: var(--tlc-navy); }
.cs-avanzadas > summary::-webkit-details-marker { display: none; }
.cs-avanzadas > summary:hover { background: #F9F5EC; }
.cs-avanzadas > summary > .ico:first-child { width: 17px; height: 17px; flex: none; color: var(--tlc-tinta-3); }
.cs-avanzadas-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cs-avanzadas-txt b { font-family: var(--tlc-titulo); font-size: 14px; font-weight: 800; }
.cs-avanzadas-txt small { font-size: 12px; line-height: 1.4; color: var(--tlc-tinta-3); }
.cs-avanzadas > summary .estado-punto { flex: none; font-size: 12px; }
.cs-chev { width: 18px; height: 18px; flex: none; color: var(--tlc-tinta-3); transition: transform var(--t) var(--curva); }
.cs-avanzadas[open] > summary { border-bottom: 1px solid var(--tlc-border-2); }
.cs-avanzadas[open] > summary .cs-chev { transform: rotate(180deg); }
.cs-avanzadas-cuerpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 14px; align-items: start; padding: 16px 22px 22px; min-width: 0; }

/* Cada grupo de opciones avanzadas. */
.cs-grupo { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--tlc-border-2); background: #fff; }
.cs-grupo.completo { grid-column: 1 / -1; }
.cs-grupo > h4 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-family: var(--tlc-titulo); font-size: 13.5px; font-weight: 800; color: var(--tlc-navy); }
.cs-grupo > h4 > .ico { width: 16px; height: 16px; color: var(--tlc-blue); }
.cs-grupo > h4 .gris { font-weight: 400; font-size: 12px; }
.cs-grupo .cf-texto, .cs-grupo .cs-ayuda { margin: 0; }
.cs-grupo .casilla { align-items: flex-start; }
.cs-grupo .casilla > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cs-grupo .casilla b { font-weight: 600; color: var(--tlc-navy); }
.cs-grupo .casilla small { font-size: 12px; line-height: 1.4; color: var(--tlc-tinta-3); }
.cs-grupo .cf-url { gap: 4px; }
.cs-grupo .cm-acciones { gap: 6px 8px; }
.cs-acciones { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.cs-dato { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 12.5px; color: var(--tlc-tinta-2); }
.cs-dato b { font-weight: 700; color: var(--tlc-navy); overflow-wrap: anywhere; }

/* Plegable dentro de las opciones avanzadas (WhatsApp más adelante, ejemplo para mandar prospectos). */
.cs-sub { border: 1px solid var(--tlc-border-2); border-radius: 14px; background: #fff; min-width: 0; }
.cs-sub.completo { grid-column: 1 / -1; }
.cs-sub > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; }
.cs-sub > summary::-webkit-details-marker { display: none; }
.cs-sub > summary:hover { background: #FCFAF5; }
.cs-sub > summary > .ico:first-child { width: 17px; height: 17px; flex: none; color: var(--tlc-blue); }
.cs-sub[open] > summary { border-bottom: 1px solid var(--tlc-border-2); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cs-sub[open] > summary .cs-chev { transform: rotate(180deg); }
.cs-sub-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 14px; min-width: 0; }

/* «Cómo mandar un prospecto» (en las opciones avanzadas de Llamadas). */
.cs-ejemplo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cs-ejemplo .cf-ejemplo-intro, .cs-ejemplo .cf-n8n, .cs-ejemplo .cf-codigo, .cs-ejemplo .cf-campos-tabla { margin-top: 0; }
.cs-ejemplo .cf-campos-tabla > div { grid-template-columns: 124px minmax(0, 1fr); }
.cs-ejemplo > .ayuda { display: block; font-size: 12px; line-height: 1.45; color: var(--tlc-tinta-3); }

/* Cuenta: contraseña y sesiones lado a lado. */
.cs-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
.cs-dos > * { min-width: 0; }
.cs-avanzadas-sueltas { border: 1px solid var(--tlc-border); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.cs-avanzadas-sueltas > .cs-avanzadas-cuerpo { display: flex; flex-direction: column; gap: 16px; }

/* Usuarios (lo pinta js/vistas/config-usuarios.js del carril de usuarios). */
.cs-usuarios { min-width: 0; }

/* Mensajes que regresan del servidor, debajo de los botones. */
.cs-msg { display: flex; flex-direction: column; gap: 8px; }
.cs-msg:empty { display: none; }

@media (max-width: 760px) {
  .cs-cab { padding: 18px 16px 14px; gap: 12px; }
  .cs-ic { width: 40px; height: 40px; border-radius: 12px; }
  .cs-cuerpo { padding: 16px; }
  .cs-avanzadas > summary { padding: 12px 16px; }
  .cs-avanzadas-cuerpo { padding: 14px 16px 18px; grid-template-columns: minmax(0, 1fr); }
  .cs-dos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cs-cab-txt h3 { font-size: 16px; }
  .cs-estado { font-size: 13px; }
  .cs-campos, .cs-pegar-filas { grid-template-columns: minmax(0, 1fr); }
  .cs-pie > .btn { flex: 1 1 100%; justify-content: center; }
  .cs-pegar { padding: 12px; }
  .cs-grupo { padding: 12px; }
  /* En el celular, el estado del plegable baja a su propio renglón (no aprieta el título). */
  .cs-avanzadas > summary, .cs-sub > summary { flex-wrap: wrap; row-gap: 4px; }
  .cs-avanzadas > summary .cs-avanzadas-txt, .cs-sub > summary .cs-avanzadas-txt { flex: 1 1 0; }
  .cs-avanzadas > summary .cs-chev, .cs-sub > summary .cs-chev { order: 2; }
  .cs-avanzadas > summary .estado-punto, .cs-sub > summary .estado-punto { order: 3; flex-basis: 100%; padding-left: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-chev { transition: none; }
}