/*
 * Extra visuals for /modelos (tools/site/pages/new_catalog.py): the thumbnails of the email models are small HTML/CSS
 * mockups (blocks of colour and lines, in the style of mini_email). Flat components: 1px lines, no shadows.
 * The palette classes .nc-p0, .nc-p1... at the end of this file are generated from the colours of the product gallery.
 */

/* On phones the one-column split grid (1fr) grew to the width of a long code line: let its cells shrink and scroll the code. */
.mk-split > * {
  min-width: 0;
}

.mk-code pre {
  overflow-x: auto;
}

.nc-thumb {
  height: 196px;
  margin-bottom: 8px;
  padding: 14px 16px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--o);
}

.nc-mail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  background: var(--c);
}

.nc-s {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
}

.nc-s span {
  display: block;
}

.nc-bar {
  align-items: center;
  padding: 10px 12px 8px;
}

.nc-bar span {
  width: 36px;
  height: 6px;
  border-radius: 3px;
  background: var(--h);
}

.nc-hero {
  align-items: center;
  gap: 5px;
  padding: 16px 14px;
  background: var(--x);
}

.nc-hero .nc-t {
  width: 62%;
  height: 7px;
  border-radius: 3px;
  background: var(--xt);
}

.nc-hero .nc-ln {
  width: 80%;
  height: 3px;
  border-radius: 2px;
  background: var(--xl);
}

.nc-hero .nc-ln.nc-sh {
  width: 52%;
}

.nc-hero .nc-bt {
  width: 38px;
  height: 11px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--xb);
}

.nc-hero .nc-pic {
  width: 64%;
  height: 24px;
  margin-bottom: 3px;
  background: var(--xl);
  opacity: 0.55;
}

.nc-pic {
  height: 26px;
  border-radius: 4px;
  background: var(--pic);
}

.nc-hd span {
  width: 56%;
  height: 7px;
  border-radius: 3px;
  background: var(--h);
}

.nc-tx {
  gap: 4px;
}

.nc-tx span,
.nc-pr div span,
.nc-li span,
.nc-q span,
.nc-cols div span:not(.nc-pic) {
  height: 3px;
  border-radius: 2px;
  background: var(--k);
}

.nc-tx .nc-sh {
  width: 62%;
}

.nc-btn span {
  align-self: center;
  width: 40px;
  height: 11px;
  border-radius: 999px;
  background: var(--a);
}

.nc-img {
  height: 34px;
  margin: 4px 12px;
  padding: 0;
  border-radius: 4px;
  background: var(--pic);
}

.nc-vid {
  align-items: center;
  justify-content: center;
}

.nc-vid span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--h);
  opacity: 0.6;
}

.nc-pr {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.nc-pr .nc-pic {
  flex: none;
  width: 38px;
  height: 28px;
}

.nc-pr div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.nc-li div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nc-li i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--a);
}

.nc-li span {
  flex: 1;
}

.nc-cp {
  align-items: center;
  margin: 4px 12px;
  padding: 8px;
  border: 1px dashed var(--a);
  border-radius: 4px;
}

.nc-cp span {
  width: 42%;
  height: 6px;
  border-radius: 3px;
  background: var(--a);
}

.nc-tb {
  gap: 0;
}

.nc-tb span {
  height: 10px;
  border-bottom: 1px solid var(--k);
}

.nc-q {
  margin: 4px 12px;
  padding: 2px 8px;
  border-left: 3px solid var(--a);
}

.nc-cd {
  align-items: center;
  padding: 7px;
  background: var(--a);
}

.nc-cd span {
  width: 46%;
  height: 4px;
  border-radius: 2px;
  background: var(--c);
}

.nc-cols {
  flex-direction: row;
  gap: 6px;
}

.nc-cols div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.nc-cols div span:not(.nc-pic):first-child {
  width: 70%;
  height: 5px;
  background: var(--h);
}

/* The cards of the gallery */

.nc-card h3 {
  font-size: 1.15rem;
  line-height: 1.25;
}

.nc-card .ly-card-top {
  margin-bottom: 4px;
}

.nc-note {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* The families of system emails */

.nc-fams {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.nc-fam .nc-thumb {
  height: 128px;
  margin-bottom: 6px;
  padding: 10px 10px 0;
}

.nc-fam b {
  display: block;
  color: #111;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .nc-fams {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Generated palettes of the thumbnails of /modelos (colors taken from the product gallery JSON files). */
.nc-p0 { --o: #eef2ff; --c: #ffffff; --h: #18181b; --k: #c2c2c4; --a: #4f46e5; --x: #ffffff; --xt: #18181b; --xl: #808082; --pic: #cecbf8; --xb: #4f46e5; }
.nc-p1 { --o: #fff4ed; --c: #ffffff; --h: #2b1710; --k: #c5bdbb; --a: #c2410c; --x: #fed7aa; --xt: #2b1710; --xl: #8a6d55; --pic: #eecabb; --xb: #c2410c; }
.nc-p2 { --o: #f3eee6; --c: #fffdf8; --h: #1f1b16; --k: #c1beb9; --a: #9a3412; --x: #fffdf8; --xt: #1f1b16; --xl: #84817c; --pic: #e3c5b8; --xb: #9a3412; }
.nc-p3 { --o: #eff6ff; --c: #ffffff; --h: #172554; --k: #b7bbc0; --a: #1d4ed8; --x: #ffffff; --xt: #172554; --xl: #7f87a1; --pic: #c0cdf4; --xb: #1d4ed8; }
.nc-p4 { --o: #f1f5f9; --c: #ffffff; --h: #0f172a; --k: #bec2c9; --a: #4338ca; --x: #ffffff; --xt: #0f172a; --xl: #7b7f8a; --pic: #cac7f0; --xb: #4338ca; }
.nc-p5 { --o: #f0fdfa; --c: #ffffff; --h: #134e4a; --k: #bec2c9; --a: #0f766e; --x: #0c4a6e; --xt: #ffffff; --xl: #92aebe; --pic: #bcd9d6; --xb: #0f766e; }
.nc-p6 { --o: #ffffff; --c: #ffffff; --h: #111827; --k: #b7bbbf; --a: #111827; --x: #ffffff; --xt: #111827; --xl: #7c8088; --pic: #bcbec3; --xb: #111827; }
.nc-p7 { --o: #f0fdf4; --c: #ffffff; --h: #14532d; --k: #bfc2c7; --a: #15803d; --x: #ffffff; --xt: #14532d; --xl: #7ea08c; --pic: #bddbc9; --xb: #15803d; }
.nc-p8 { --o: #ecfeff; --c: #ffffff; --h: #164e63; --k: #bec2c9; --a: #0e7490; --x: #ffffff; --xt: #164e63; --xl: #7f9ea9; --pic: #bcd8e0; --xb: #0e7490; }
.nc-p9 { --o: #09090b; --c: #18181b; --h: #ffffff; --k: #545457; --a: #ec4899; --x: #27143c; --xt: #ffffff; --xl: #9e95a7; --pic: #53253e; --xb: #ec4899; }
.nc-p10 { --o: #fff7ed; --c: #ffffff; --h: #18181b; --k: #c2c2c4; --a: #dc2626; --x: #ffffff; --xt: #18181b; --xl: #808082; --pic: #f5c2c2; --xb: #dc2626; }
.nc-p11 { --o: #0c0a09; --c: #1c1917; --h: #fafaf9; --k: #585553; --a: #d4af37; --x: #0c0a09; --xt: #ffffff; --xl: #929190; --pic: #504320; --xb: #d4af37; }
.nc-p12 { --o: #f5f3ff; --c: #ffffff; --h: #1e1b4b; --k: #c2c2c4; --a: #1e1b4b; --x: #ffffff; --xt: #1e1b4b; --xl: #83829c; --pic: #c0bfcd; --xb: #1e1b4b; }
.nc-p13 { --o: #f0fdf4; --c: #ffffff; --h: #052e16; --k: #bfc2c7; --a: #047857; --x: #ffffff; --xt: #052e16; --xl: #758c7f; --pic: #b9d9d0; --xb: #047857; }
.nc-p14 { --o: #f1f5f9; --c: #ffffff; --h: #0f172a; --k: #bec2c9; --a: #2563eb; --x: #ffffff; --xt: #0f172a; --xl: #7b7f8a; --pic: #c2d3f9; --xb: #2563eb; }
.nc-p15 { --o: #f4f4f5; --c: #ffffff; --h: #18181b; --k: #c2c2c4; --a: #18181b; --x: #ffffff; --xt: #18181b; --xl: #808082; --pic: #bebebf; --xb: #18181b; }
.nc-p16 { --o: #e0f2fe; --c: #ffffff; --h: #0c4a6e; --k: #bec2c9; --a: #0369a1; --x: #ffffff; --xt: #0c4a6e; --xl: #799baf; --pic: #b8d5e5; --xb: #0369a1; }
.nc-p17 { --o: #fff7ed; --c: #ffffff; --h: #1c1917; --k: #c2c2c4; --a: #c2410c; --x: #ffffff; --xt: #1c1917; --xl: #82807f; --pic: #eecabb; --xb: #c2410c; }
.nc-p18 { --o: #e9edf3; --c: #ffffff; --h: #111827; --k: #bfc2c7; --a: #111827; --x: #ffffff; --xt: #111827; --xl: #7c8088; --pic: #bcbec3; --xb: #111827; }
.nc-p19 { --o: #ede9fe; --c: #ffffff; --h: #1e1b4b; --k: #c2c2c4; --a: #6d28d9; --x: #ffffff; --xt: #1e1b4b; --xl: #83829c; --pic: #d6c3f4; --xb: #6d28d9; }
.nc-p20 { --o: #e5ebf3; --c: #ffffff; --h: #0f172a; --k: #bec2c9; --a: #1d4ed8; --x: #ffffff; --xt: #0f172a; --xl: #7b7f8a; --pic: #c0cdf4; --xb: #1d4ed8; }
.nc-p21 { --o: #fdf2f2; --c: #ffffff; --h: #18181b; --k: #c2c2c4; --a: #dc2626; --x: #ffffff; --xt: #18181b; --xl: #808082; --pic: #f5c2c2; --xb: #dc2626; }
.nc-p22 { --o: #f4f4f5; --c: #ffffff; --h: #18181b; --k: #c2c2c4; --a: #2563eb; --x: #ffffff; --xt: #18181b; --xl: #808082; --pic: #c2d3f9; --xb: #2563eb; }
.nc-p23 { --o: #fdf4ff; --c: #ffffff; --h: #4a044e; --k: #c2c2c4; --a: #a21caf; --x: #7e22ce; --xt: #ffffff; --xl: #c59ce9; --pic: #e5bfe9; --xb: #a21caf; }
.nc-p24 { --o: #fafafa; --c: #ffffff; --h: #18181b; --k: #bababb; --a: #18181b; --x: #ffffff; --xt: #18181b; --xl: #808082; --pic: #bebebf; --xb: #18181b; }
.nc-p25 { --o: #05070f; --c: #0b1020; --h: #ffffff; --k: #484f5e; --a: #4f46e5; --x: #0b1020; --xt: #ffffff; --xl: #91939b; --pic: #1e1f57; --xb: #4f46e5; }
.nc-p26 { --o: #fff1e8; --c: #ffffff; --h: #1c1917; --k: #c3c2c1; --a: #c2410c; --x: #ffffff; --xt: #1c1917; --xl: #82807f; --pic: #eecabb; --xb: #c2410c; }
.nc-p27 { --o: #f1f5f9; --c: #ffffff; --h: #0f172a; --k: #bec2c9; --a: #0f766e; --x: #ffffff; --xt: #0f172a; --xl: #7b7f8a; --pic: #bcd9d6; --xb: #0f766e; }
.nc-p28 { --o: #fbf3e4; --c: #ffffff; --h: #1c1917; --k: #c3c2c1; --a: #b45309; --x: #ffffff; --xt: #1c1917; --xl: #82807f; --pic: #eacfba; --xb: #b45309; }
.nc-p29 { --o: #fff1e6; --c: #ffffff; --h: #7c2d12; --k: #c9beb7; --a: #c2410c; --x: #fed7aa; --xt: #7c2d12; --xl: #b67956; --pic: #eecabb; --xb: #c2410c; }
.nc-p30 { --o: #fdf2f8; --c: #ffffff; --h: #701a75; --k: #c5c0c4; --a: #a21caf; --x: #fce7f3; --xt: #701a75; --xl: #af76ae; --pic: #e5bfe9; --xb: #a21caf; }
.nc-p31 { --o: #052e16; --c: #fffbf5; --h: #7f1d1d; --k: #c3bfba; --a: #166534; --x: #b91c1c; --xt: #ffffff; --xl: #e09999; --pic: #bed1bf; --xb: #166534; }
.nc-p32 { --o: #faf5ff; --c: #ffffff; --h: #3b0764; --k: #c2c2c4; --a: #7c3aed; --x: #faf5ff; --xt: #3b0764; --xl: #9172aa; --pic: #dac8fa; --xb: #7c3aed; }
.nc-p33 { --o: #e6f4f1; --c: #ffffff; --h: #134e4a; --k: #bec2c9; --a: #0f766e; --x: #ffffff; --xt: #134e4a; --xl: #7d9e9b; --pic: #bcd9d6; --xb: #0f766e; }
.nc-p34 { --o: #0c0a09; --c: #1c1917; --h: #fde68a; --k: #5d5a59; --a: #f59e0b; --x: #0c0a09; --xt: #ffffff; --xl: #929190; --pic: #593e14; --xb: #f59e0b; }
.nc-p35 { --o: #f4f4f5; --c: #ffffff; --h: #18181b; --k: #c2c2c4; --a: #18181b; --x: #18181b; --xt: #ffffff; --xl: #979798; --pic: #bebebf; --xb: #ffffff; }
.nc-p36 { --o: #ece4d6; --c: #fbf8f2; --h: #2b2118; --k: #c2bdb6; --a: #9a3412; --x: #2b2118; --xt: #ffffff; --xl: #a09b97; --pic: #e0c1b3; --xb: #ffffff; }
.nc-p37 { --o: #07080c; --c: #11131a; --h: #f5f6fa; --k: #4a4d55; --a: #8b5cf6; --x: #8b5cf6; --xt: #ffffff; --xl: #cbb6fb; --pic: #332758; --xb: #ffffff; }
.nc-p38 { --o: #eef2f6; --c: #ffffff; --h: #0b1f3a; --k: #bec2c9; --a: #0f766e; --x: #0b1f3a; --xt: #ffffff; --xl: #919aa6; --pic: #bcd9d6; --xb: #ffffff; }
.nc-p39 { --o: #fff1ea; --c: #ffffff; --h: #1f1f1f; --k: #c5c5c5; --a: #f2542d; --x: #f2542d; --xt: #ffffff; --xl: #f9b2a0; --pic: #fbcfc4; --xb: #ffffff; }
.nc-p40 { --o: #12081f; --c: #1d0f31; --h: #ffffff; --k: #594c6d; --a: #ff3d8b; --x: #ff3d8b; --xt: #ffffff; --xl: #ffa8cb; --pic: #5c1c4a; --xb: #ffffff; }