// ============================================================
// flow3.jsx · Módulos operativos (tenant)
//   AD1 Admisiones · pipeline      AD2 Detalle de prospecto
//   AD3 Inscripción digital        RE1 Reinscripciones
//   MC1 Menú del comedor (Calendario)
// ============================================================

function tHeader(breadcrumb, badge, badgeTone) {
  return { kind: "tenant", breadcrumb, badge, badgeTone: badgeTone || "gray",
    person: { name: window.b("director.full_name"), sub: window.b("director.title"), avatarName: window.b("director.full_name"), color: "var(--tenant-brand)" } };
}

// pipeline stages
const ETAPAS = [
  { etapa: "Prospecto", color: "var(--xk-info)" },
  { etapa: "Visita", color: "var(--xk-warning)" },
  { etapa: "Examen", color: "var(--xk-accent)" },
  { etapa: "Documentos", color: "#D4537E" },
  { etapa: "Inscrito", color: "var(--xk-success)" },
];
const PROSPECTOS = [
  { id: "PR-0148", nombre: "Mateo Iturbe Lara", grado: "K2 · Kinder", origen: "Recomendación", etapa: "Prospecto", dias: 2, ini: "MI" },
  { id: "PR-0151", nombre: "Renata Cú Balam", grado: "1° Primaria", origen: "Instagram", etapa: "Prospecto", dias: 1, ini: "RC" },
  { id: "PR-0142", nombre: "Tomás Escalante Ruz", grado: "Pre-K", origen: "Open house", etapa: "Visita", dias: 5, ini: "TE" },
  { id: "PR-0139", nombre: "Isabela Novelo Pat", grado: "3° Primaria", origen: "Recomendación", etapa: "Visita", dias: 4, ini: "IN" },
  { id: "PR-0136", nombre: "Diego Aguilar Sosa", grado: "1° Secundaria", origen: "Sitio web", etapa: "Examen", dias: 6, ini: "DA", examen: "8.9" },
  { id: "PR-0131", nombre: "Camila Pacheco Uc", grado: "K1 · Kinder", origen: "Recomendación", etapa: "Documentos", dias: 8, ini: "CP" },
  { id: "PR-0128", nombre: "Sebastián Loría Mena", grado: "2° Primaria", origen: "Open house", etapa: "Documentos", dias: 3, ini: "SL" },
  { id: "PR-0119", nombre: "Valentina Koh Be", grado: "K2 · Kinder", origen: "Instagram", etapa: "Inscrito", dias: 1, ini: "VK", examen: "9.4" },
];

// ---------- AD1 · Pipeline ----------
function AD1({ state = "happy", openModal }) {
  if (state === "loading") return (
    <ScreenFrame header={tHeader(["Dashboard", "Admisiones"])} maxWidth={1180}>
      <div style={{ marginBottom: 22 }}><Sk w={260} h={26} style={{ marginBottom: 10 }} /><Sk w={360} h={13} /></div>
      <SLoading variant="kpis" />
      <div style={{ marginTop: 24 }}><SLoading variant="cards" rows={5} cols={5} /></div>
    </ScreenFrame>
  );
  if (state === "empty") return (
    <ScreenFrame header={tHeader(["Dashboard", "Admisiones"])} maxWidth={1180}>
      <WizardHead title={"Admisiones de " + window.b("school.short_name")} subtitle="Aún no hay prospectos en el pipeline de este ciclo." />
      <SEmpty illustration="box" title="Sin prospectos todavía" body="Agrega el primer prospecto manualmente o comparte el formulario de inscripción para que las familias se registren solas." cta="Nuevo prospecto" ctaIcon="plus" secondary="Compartir formulario" />
    </ScreenFrame>
  );
  return (
    <ScreenFrame header={tHeader(["Dashboard", "Admisiones"])} maxWidth={1180}>
      <div style={{ display: "flex", alignItems: "flex-start", marginBottom: 22 }}>
        <WizardHead title="Admisiones · ciclo 2026–2027" subtitle="23 prospectos activos · 47 inscritos · pipeline de admisión completo." />
        <div style={{ marginLeft: "auto", display: "flex", gap: 10, paddingTop: 4 }}>
          <Btn variant="secondary" icon="download">Reporte</Btn>
          <Btn variant="primary" icon="plus">Nuevo prospecto</Btn>
        </div>
      </div>
      <KpiGrid style={{ marginBottom: 24 }} items={[
        { label: "Prospectos activos", value: "23", sub: "+8 vs. semana pasada" },
        { label: "Tasa de conversión", value: "34%", sub: "meta 40%" },
        { label: "Tiempo promedio", value: "18 d", sub: "prospecto → inscrito" },
        { label: "Inscritos 26–27", value: "47", sub: "cupo disponible 53", tone: "success" },
      ]} />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 12, alignItems: "start" }}>
        {ETAPAS.map((e, ci) => {
          const items = PROSPECTOS.filter(p => p.etapa === e.etapa);
          return (
            <div key={ci} style={{ background: "var(--xk-surface-2)", borderRadius: 12, padding: 10, minHeight: 200 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 7, padding: "4px 6px 10px" }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: e.color }}></span>
                <span style={{ fontSize: 12.5, fontWeight: 600 }}>{e.etapa}</span>
                <span className="xk-mono" style={{ marginLeft: "auto", fontSize: 11.5, color: "var(--xk-text-muted)" }}>{items.length}</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {items.map((p, i) => (
                  <Card key={i} interactive style={{ padding: 12 }} onClick={() => openModal && null}>
                    <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 9 }}>
                      <Avatar name={p.nombre} size={28} color="var(--tenant-brand)" />
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.nombre}</div>
                        <div style={{ fontSize: 11, color: "var(--xk-text-muted)" }}>{p.grado}</div>
                      </div>
                    </div>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 5, marginBottom: 9 }}>
                      <Badge tone="neutral">{p.origen}</Badge>
                      {p.examen && <Badge tone="success">Examen {p.examen}</Badge>}
                    </div>
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 10.5, color: "var(--xk-text-muted)" }}>
                      <span><span className="xk-mono">{p.dias}d</span> en etapa</span>
                      <span className="xk-mono">{p.id}</span>
                    </div>
                  </Card>
                ))}
                {items.length === 0 && <div style={{ padding: "16px 8px", textAlign: "center", fontSize: 11.5, color: "var(--xk-text-muted)" }}>Sin prospectos</div>}
              </div>
            </div>
          );
        })}
      </div>
    </ScreenFrame>
  );
}

// ---------- AD2 · Detalle de prospecto ----------
function AD2({ state = "happy", openModal }) {
  const prospecto = { nombre: "Diego Aguilar Sosa", grado: "1° Secundaria", id: "PR-0136", etapa: "Examen", ini: "DA" };
  const current = ETAPAS.findIndex(e => e.etapa === prospecto.etapa);
  const docs = [
    { n: "Acta de nacimiento", e: "Recibido", f: "12/04/2026" },
    { n: "CURP del alumno", e: "Recibido", f: "12/04/2026" },
    { n: "Boleta del ciclo anterior", e: "Recibido", f: "14/04/2026" },
    { n: "Comprobante de domicilio", e: "Pendiente", f: null },
    { n: "Cartilla de vacunación", e: "Pendiente", f: null },
    { n: "Carta de no adeudo", e: "En revisión", f: "18/04/2026" },
  ];
  const docTone = { "Recibido": "success", "Pendiente": "warning", "En revisión": "info" };
  return (
    <ScreenFrame header={tHeader(["Admisiones", prospecto.nombre])} maxWidth={1080}>
      <div style={{ display: "flex", alignItems: "flex-start", marginBottom: 22 }}>
        <WizardHead title={prospecto.nombre} subtitle={prospecto.grado + " · prospecto " + prospecto.id + " · etapa: " + prospecto.etapa} />
        <div style={{ marginLeft: "auto", display: "flex", gap: 10, paddingTop: 4 }}>
          <Btn variant="ghost" onClick={() => openModal(<MConfirmDestructive title="Rechazar prospecto" description="Se moverá a archivados y se notificará al tutor. Puedes reactivarlo después." actionLabel="Sí, rechazar" onClose={openModal.close} onConfirm={openModal.close} />)}>Rechazar</Btn>
          <Btn variant="primary" iconRight="arrow-right">Avanzar etapa</Btn>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 18, alignItems: "start" }}>
        {/* left */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Card style={{ padding: 20 }}>
            <Label>Pipeline</Label>
            <div style={{ marginTop: 14 }}><WizardStepper steps={ETAPAS.map(e => e.etapa)} current={current + 1} /></div>
          </Card>
          <Card style={{ padding: 20 }}>
            <div style={{ display: "flex", alignItems: "center", marginBottom: 12 }}>
              <Label>Documentos requeridos</Label>
              <span className="xk-mono" style={{ marginLeft: "auto", fontSize: 12, color: "var(--xk-text-muted)" }}>{docs.filter(d => d.e === "Recibido").length}/{docs.length}</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
              {docs.map((d, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 11, padding: "9px 0", borderBottom: i === docs.length - 1 ? "none" : "1px solid var(--xk-border)" }}>
                  <Icon name="file-text" size={16} color="var(--xk-text-muted)" />
                  <div style={{ flex: 1 }}><div style={{ fontSize: 13 }}>{d.n}</div>{d.f && <div style={{ fontSize: 11, color: "var(--xk-text-muted)" }}>Recibido {d.f}</div>}</div>
                  <Badge tone={docTone[d.e]} dot>{d.e}</Badge>
                </div>
              ))}
            </div>
          </Card>
          <Card style={{ padding: 20 }}>
            <Label>Bitácora</Label>
            <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 0 }}>
              {[
                ["Examen de admisión presentado", "Calificación 8.9 · 18/04/2026"],
                ["Visita guiada completada", "Coord. Claudia Reyes · 14/04/2026"],
                ["Primer contacto", "Origen: Sitio web · 08/04/2026"],
              ].map((t, i, arr) => (
                <div key={i} style={{ display: "flex", gap: 12 }}>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                    <span style={{ width: 10, height: 10, borderRadius: 999, background: "var(--xk-success)", marginTop: 3 }}></span>
                    {i < arr.length - 1 && <span style={{ flex: 1, width: 1, background: "var(--xk-border-strong)" }}></span>}
                  </div>
                  <div style={{ paddingBottom: i < arr.length - 1 ? 16 : 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{t[0]}</div>
                    <div style={{ fontSize: 11.5, color: "var(--xk-text-muted)", marginTop: 1 }}>{t[1]}</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>
        {/* right */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Card style={{ padding: 20 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
              <Avatar name={prospecto.nombre} size={48} color="var(--tenant-brand)" />
              <div><div style={{ fontSize: 15, fontWeight: 600 }}>{prospecto.nombre}</div><div style={{ fontSize: 12.5, color: "var(--xk-text-muted)" }}>{prospecto.grado}</div></div>
            </div>
            {[["Fecha de nacimiento", "14/09/2012"], ["Escuela anterior", "Colegio Miraflores"], ["Promedio anterior", "8.7"], ["Origen", "Sitio web"]].map((kv, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: i < 3 ? "1px solid var(--xk-border)" : "none", fontSize: 12.5 }}>
                <span style={{ color: "var(--xk-text-muted)" }}>{kv[0]}</span><span style={{ fontWeight: 500 }}>{kv[1]}</span>
              </div>
            ))}
          </Card>
          <Card style={{ padding: 20 }}>
            <Label>Tutores</Label>
            <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                { n: "Claudia Ruiz Martínez", r: "Madre · contacto primario", c: "55 8240 1672 · claudia.ruiz@email.mx" },
                { n: "Ricardo Mendoza Gutiérrez", r: "Padre", c: "55 3019 4582" },
              ].map((t, i) => (
                <div key={i} style={{ display: "flex", gap: 10 }}>
                  <Avatar name={t.n} size={32} />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{t.n}</div>
                    <div style={{ fontSize: 11.5, color: "var(--xk-text-muted)" }}>{t.r}</div>
                    <div className="xk-mono" style={{ fontSize: 11, color: "var(--xk-text-muted)", marginTop: 2 }}>{t.c}</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </ScreenFrame>
  );
}

// ---------- AD3 · Inscripción digital ----------
function AD3({ state = "happy", openModal }) {
  const [shake, setShake] = useState(false);
  const v = state === "validation";
  return (
    <ScreenFrame header={tHeader(["Admisiones", "Nueva inscripción"])} maxWidth={840}>
      <WizardHead eyebrow="Inscripción digital" title="Nueva inscripción" subtitle="El mismo formulario que la familia llena desde su celular · sin papeles, sin filas en la dirección." />
      <Banner tone="info" icon="smartphone" style={{ marginBottom: 16 }}>Comparte el link <span className="xk-mono" style={{ color: "var(--xk-info)" }}>{window.b("school.subdomain")}.xokai.app/inscripcion</span> y la familia llena esto sola · tú solo revisas y apruebas.</Banner>
      <Card style={{ padding: 26 }}>
        <Label>Datos del alumno</Label>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 10 }}>
          <Field label="Nombre completo" required full error={v ? "Campo requerido" : null}><Input value={v ? "" : "Mateo Iturbe Lara"} error={v} shake={shake} /></Field>
          <Field label="Fecha de nacimiento"><Input mono value="2021-03-14" /></Field>
          <Field label="CURP"><Input mono value="IULM210314HYNXRT09" /></Field>
          <Field label="Grado al que aplica"><Select value="K2 · Kinder" options={["Pre-K", "K1 · Kinder", "K2 · Kinder", "1° Primaria", "2° Primaria"]} /></Field>
          <Field label="Escuela anterior"><Input placeholder="Opcional" /></Field>
        </div>
        <Divider dashed style={{ margin: "20px 0" }} />
        <Label>Tutor que inscribe</Label>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 10 }}>
          <Field label="Nombre del tutor" required><Input value="Karina Lara Méndez" /></Field>
          <Field label="Parentesco"><Select value="Madre" options={["Madre", "Padre", "Tutor legal", "Abuelo/a"]} /></Field>
          <Field label="Email" required><Input value="karina.lara@gmail.com" /></Field>
          <Field label="Teléfono"><Input value="999 234 5678" /></Field>
        </div>
        <Divider dashed style={{ margin: "20px 0" }} />
        <Label>Documentos</Label>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 10 }}>
          {[["Acta de nacimiento", true], ["CURP", true], ["Comprobante de domicilio", false], ["Cartilla de vacunación", false]].map((d, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "11px 13px", border: "1px dashed var(--xk-border-strong)", borderRadius: 10 }}>
              <Icon name={d[1] ? "file-check-2" : "upload"} size={17} color={d[1] ? "var(--xk-success)" : "var(--xk-text-muted)"} />
              <div style={{ flex: 1, fontSize: 12.5, fontWeight: 500 }}>{d[0]}</div>
              {d[1] ? <Badge tone="success" dot>SUBIDO</Badge> : <span style={{ fontSize: 11.5, color: "var(--xk-accent)", fontWeight: 500, cursor: "pointer" }}>Subir</span>}
            </div>
          ))}
        </div>
        <WizardFooter back={false} saveLabel="Guardar borrador" next={false}>
          <Btn variant="primary" icon="check" onClick={() => { if (v) { setShake(true); setTimeout(() => setShake(false), 350); } }}>Crear inscripción</Btn>
        </WizardFooter>
      </Card>
    </ScreenFrame>
  );
}

// ---------- RE1 · Reinscripciones ----------
function RE1({ state = "happy", openModal }) {
  const [toast, setToast] = useState(false);
  const grupos = [
    { g: "Pre-K", total: 18, re: 16, color: "#0F9E8A" },
    { g: "Kinder", total: 72, re: 61, color: "#E8714C" },
    { g: "Primaria", total: 150, re: 108, color: "#D4537E" },
    { g: "Secundaria", total: 85, re: 33, color: "#6D4AE8" },
  ];
  return (
    <ScreenFrame header={tHeader(["Dashboard", "Reinscripciones"])} maxWidth={1000}>
      <div style={{ display: "flex", alignItems: "flex-start", marginBottom: 22 }}>
        <WizardHead title="Reinscripciones · ciclo 2027–2028" subtitle="Campaña de reinscripción de los alumnos actuales · envía el link y da seguimiento al avance por nivel." />
        <div style={{ marginLeft: "auto", paddingTop: 4 }}>
          <Btn variant="primary" icon="send" onClick={() => openModal(<MConfirmDestructive title="Enviar recordatorio de reinscripción" description="Se enviará un email a las 107 familias que aún no reinscriben. No se puede deshacer el envío." actionLabel="Sí, enviar a 107" confirmWord="ENVIAR" affected={107} onClose={openModal.close} onConfirm={() => { openModal.close(); setToast(true); setTimeout(() => setToast(false), 2400); }} />)}>Enviar recordatorio</Btn>
        </div>
      </div>
      <KpiGrid style={{ marginBottom: 22 }} items={[
        { label: "Alumnos actuales", value: "325" },
        { label: "Reinscritos", value: "218", sub: "67% del total", tone: "success" },
        { label: "Pendientes", value: "89", sub: "sin completar", tone: "warning" },
        { label: "No continúan", value: "18", sub: "baja confirmada" },
      ]} />
      <Banner tone="info" style={{ marginBottom: 16 }} title="Cómo funciona">Cada familia recibe un link para confirmar la reinscripción y elegir continuar con su grupo. Los pagos de reinscripción se generan automáticamente con los conceptos de cobro que ya configuraste.</Banner>
      <Label style={{ marginBottom: 10 }}>Avance por nivel</Label>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {grupos.map((g, i) => {
          const pct = Math.round(g.re / g.total * 100);
          return (
            <Card key={i} style={{ padding: "14px 18px", display: "flex", alignItems: "center", gap: 16 }}>
              <span style={{ width: 12, height: 12, borderRadius: 999, background: g.color, flexShrink: 0 }}></span>
              <div style={{ width: 120, fontSize: 13.5, fontWeight: 600 }}>{g.g}</div>
              <div style={{ flex: 1 }}>
                <div style={{ height: 8, background: "var(--xk-surface-2)", borderRadius: 999, overflow: "hidden" }}>
                  <div style={{ height: "100%", width: pct + "%", background: g.color, borderRadius: 999, transition: "width 400ms ease" }}></div>
                </div>
              </div>
              <div className="xk-mono" style={{ fontSize: 12.5, color: "var(--xk-text-secondary)", width: 90, textAlign: "right" }}>{g.re}/{g.total} · {pct}%</div>
            </Card>
          );
        })}
      </div>
      {toast && <Toast>Recordatorio enviado a 107 familias</Toast>}
    </ScreenFrame>
  );
}

// ---------- MC1 · Menú del comedor (Calendario) ----------
function MC1({ state = "happy", openModal }) {
  const [toast, setToast] = useState(false);
  const dias = [
    { d: "Lunes", n: "1 sep", fuerte: "Pollo en mole poblano", guarni: "Arroz rojo · ejotes", sopa: "Sopa de fideo", postre: "Gelatina de fresa" },
    { d: "Martes", n: "2 sep", fuerte: "Pescado empanizado", guarni: "Puré de papa · zanahoria", sopa: "Crema de elote", postre: "Manzana" },
    { d: "Miércoles", n: "3 sep", fuerte: "Albóndigas al chipotle", guarni: "Arroz blanco · calabacitas", sopa: "Sopa de verduras", postre: "Plátano" },
    { d: "Jueves", n: "4 sep", fuerte: "Tinga de pollo", guarni: "Frijoles · tostadas", sopa: "Sopa de lentejas", postre: "Yogurt natural" },
    { d: "Viernes", n: "5 sep", fuerte: "Pasta boloñesa", guarni: "Pan de ajo · ensalada", sopa: "Crema de zanahoria", postre: "Fruta de temporada" },
  ];
  return (
    <ScreenFrame header={tHeader(["Calendario", "Menú del comedor"])} maxWidth={1120}>
      <div style={{ display: "flex", alignItems: "flex-start", marginBottom: 20 }}>
        <WizardHead title="Menú del comedor" subtitle="Publica el menú de la semana para las familias · lo ven en su celular dentro del calendario." />
        <div style={{ marginLeft: "auto", display: "flex", gap: 10, paddingTop: 4 }}>
          <Btn variant="secondary" icon="copy">Duplicar semana</Btn>
          <Btn variant="primary" icon="send" onClick={() => { setToast(true); setTimeout(() => setToast(false), 2400); }}>Publicar a familias</Btn>
        </div>
      </div>
      <Banner tone="success" icon="check-circle-2" style={{ marginBottom: 18 }}>
        <strong style={{ color: "var(--xk-text)" }}>El comedor está incluido en la colegiatura</strong> · aquí solo publicas el menú para las familias, no se cobra aparte ni genera conceptos.
      </Banner>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
        <Btn variant="secondary" size="sm" icon="chevron-left">Semana anterior</Btn>
        <span style={{ fontSize: 13.5, fontWeight: 600 }}>Semana del 1 al 5 de septiembre</span>
        <Btn variant="secondary" size="sm" iconRight="chevron-right">Siguiente</Btn>
        <Badge tone="success" dot style={{ marginLeft: 6 }}>PUBLICADA</Badge>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(5,1fr)", gap: 0, border: "1px solid var(--xk-border)", borderRadius: 12, overflow: "hidden" }}>
        {/* header row */}
        <div style={{ background: "var(--xk-surface-2)", borderBottom: "1px solid var(--xk-border)", borderRight: "1px solid var(--xk-border)" }}></div>
        {dias.map((d, i) => (
          <div key={i} style={{ background: "var(--xk-surface-2)", borderBottom: "1px solid var(--xk-border)", borderRight: i < 4 ? "1px solid var(--xk-border)" : "none", padding: "12px 14px", textAlign: "center" }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{d.d}</div>
            <div className="xk-mono" style={{ fontSize: 11, color: "var(--xk-text-muted)", marginTop: 2 }}>{d.n}</div>
          </div>
        ))}
        {/* rows by course */}
        {[
          ["receipt", "Sopa", "sopa"],
          ["utensils-crossed", "Plato fuerte", "fuerte"],
          ["salad", "Guarnición", "guarni"],
          ["apple", "Postre", "postre"],
        ].map((row, ri) => (
          <React.Fragment key={ri}>
            <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "14px 16px", background: "var(--xk-surface-2)", borderRight: "1px solid var(--xk-border)", borderBottom: ri < 3 ? "1px solid var(--xk-border)" : "none" }}>
              <Icon name={row[0]} size={16} color="var(--tenant-brand)" />
              <span className="xk-overline" style={{ marginBottom: 0, fontSize: 10.5 }}>{row[1]}</span>
            </div>
            {dias.map((d, i) => (
              <div key={i} style={{ padding: "14px 14px", borderRight: i < 4 ? "1px solid var(--xk-border)" : "none", borderBottom: ri < 3 ? "1px solid var(--xk-border)" : "none", fontSize: 12.5, color: "var(--xk-text-secondary)", lineHeight: 1.4 }}>
                {d[row[2]]}
              </div>
            ))}
          </React.Fragment>
        ))}
      </div>
      <div style={{ fontSize: 11.5, color: "var(--xk-text-muted)", marginTop: 12, display: "flex", alignItems: "center", gap: 7 }}>
        <Icon name="info" size={13} />Toca cualquier celda para editar el platillo · los cambios se publican cuando presionas "Publicar a familias".
      </div>
      {toast && <Toast>Menú publicado · 614 familias notificadas</Toast>}
    </ScreenFrame>
  );
}

Object.assign(window, { AD1, AD2, AD3, RE1, MC1 });