/* ═══════════ AUTOMATIZACIONES — qué hace la app sola y cómo apagarlo ═══════════
   Tarjetas, nunca una tabla: cada automatización se lee como una frase y tiene su interruptor
   grande al lado. Tokens (--azul, --ok, --bad…) de ds.css. */

.panel.au-host { border: none; box-shadow: none; background: none; padding: 0; }

/* ── Resumen + filtros ── */
.au-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.au-resumen { font-size: 13.5px; color: #5b6b80; }
.au-resumen b { color: #1d2b3c; }
.au-filtros { display: inline-flex; background: #e9edf3; border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.au-filtros button { border: none; background: none; border-radius: 8px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 600; color: #4a5a70; cursor: pointer; min-height: 36px; }
.au-filtros button.on { background: #fff; color: var(--azul); box-shadow: 0 1px 3px rgba(20,40,70,.12); }

/* ── Grupos por módulo ── */
.au-grupo { margin-bottom: 18px; }
.au-grupo > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8391a5; margin: 0 0 8px 2px; font-weight: 700; }
.au-lista { display: flex; flex-direction: column; gap: 10px; }

/* ── Tarjeta ── */
.au-card { background: #fff; border: 1px solid #e2e6ed; border-left: 4px solid #cfd6e0; border-radius: 12px; padding: 13px 14px; }
.au-card.on { border-left-color: var(--ok); }
.au-card.off { border-left-color: #b8c0cc; background: #fbfbfc; }
.au-card.off .au-tit, .au-card.off .au-que { color: #7b8797; }

.au-head { display: flex; align-items: flex-start; gap: 12px; }
.au-head-txt { flex: 1; min-width: 0; }
.au-tit { font-size: 15px; font-weight: 700; color: #1d2b3c; line-height: 1.3; overflow-wrap: anywhere; }
.au-que { font-size: 13px; color: #5b6b80; line-height: 1.45; margin-top: 3px; overflow-wrap: anywhere; }
.au-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }

.au-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef1f5; color: #5b6b80; white-space: nowrap; }
.au-chip.correo { background: var(--warn-cl); color: var(--warn); }
.au-chip.fuera { background: var(--bad-cl); color: var(--bad); }
.au-chip.cambiada { background: var(--info-cl); color: var(--info); }

/* ── Interruptor (grande: en el celular no se falla el toque) ── */
.au-sw { flex: none; display: inline-flex; align-items: center; gap: 8px; border: none; background: none; font: inherit; cursor: pointer; padding: 2px; }
.au-sw:disabled { cursor: default; opacity: .55; }
.au-sw-pista { width: 52px; height: 30px; border-radius: 999px; background: #c8cfd9; position: relative; transition: background .15s; flex: none; }
.au-sw-bola { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.3); transition: transform .15s; }
.au-sw.on .au-sw-pista { background: var(--ok); }
.au-sw.on .au-sw-bola { transform: translateX(22px); }
.au-sw-txt { font-size: 12.5px; font-weight: 700; color: #7b8797; min-width: 62px; text-align: left; }
.au-sw.on .au-sw-txt { color: var(--ok); }
.au-sw:focus-visible { outline: none; border-radius: 10px; box-shadow: var(--foco); }

/* ── Pie: parámetros, nota y acciones ── */
.au-pie { margin-top: 11px; padding-top: 10px; border-top: 1px solid #f0f2f6; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.au-param { display: flex; flex-direction: column; gap: 4px; }
.au-param > span { font-size: 12px; font-weight: 600; color: #4a5a70; }
.au-param input { width: 90px; min-height: 40px; border: 1px solid #d9dfe7; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 15px; color: #1d2b3c; background: #fff; }
.au-param input:focus { outline: none; border-color: var(--azul2); box-shadow: 0 0 0 3px rgba(46,109,164,.15); }
.au-param small { font-size: 11.5px; color: #98a3b3; }
.au-pie-acc { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.au-nota { font-size: 12.5px; color: #7a4a00; background: var(--warn-cl); border-radius: 8px; padding: 8px 10px; line-height: 1.45; margin-top: 10px; }
.au-nota.gris { background: #f3f5f8; color: #5b6b80; }
.au-quien { font-size: 11.5px; color: #98a3b3; margin-top: 8px; }

/* ── Historial ── */
.au-hist { border: 1px solid var(--borde); border-radius: 12px; background: #fff; padding: 12px 14px; margin-top: 4px; }
.au-hist h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8391a5; margin: 0 0 8px; }
.au-hist ul { list-style: none; margin: 0; padding: 0; }
.au-hist li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid #f1f3f6; font-size: 12.5px; color: #4a5a70; line-height: 1.45; }
.au-hist li:first-child { border-top: none; }
.au-hist li time { flex: none; color: #98a3b3; font-size: 11.5px; min-width: 96px; }
.au-vacia { color: #98a3b3; font-size: 13px; padding: 10px 0; }

@media (max-width: 760px) {
  /* El interruptor toma su propio renglón arriba: así el texto dispone de todo el ancho y el
     horario no se corta (los chips pasan a varias líneas en vez de desbordar la tarjeta). */
  .au-head { flex-wrap: wrap; }
  .au-sw { order: -1; width: 100%; }
  .au-chip { white-space: normal; line-height: 1.35; }
  .au-pie-acc { margin-left: 0; width: 100%; }
  .au-pie-acc .btn { flex: 1; min-width: 130px; }
}