/* Papelería El Compàs — конструктор школьного списка и печать. Общая система — в estilo.css. */
/* ════════════════════ конструктор списка ════════════════════ */

.lista-cab { padding-block: 10px 26px; }
.lista-cab__env { display: grid; gap: 26px; }
.lista-cab__texto { display: grid; gap: 14px; align-content: start; }
.lista-cab__collage { position: relative; display: grid; justify-items: end; }
.lista-cab__foto { --giro: 3deg; width: min(70%, 300px); margin-right: 6px; }
.lista-cab__foto img { aspect-ratio: 4 / 3; object-fit: cover; }
.lista-cab__collage { padding-top: 16px; }
.lista-cab__collage .aviso-tipo { justify-self: start; margin-top: -14px; z-index: 2; }
.lista-cab__collage .aviso-tipo .cinta { left: 22%; }
.aviso-tipo {
  position: relative; align-self: start; justify-self: start; max-width: 360px; display: grid; gap: 6px; padding: 26px 20px 20px;
  background: var(--amarillo-claro); border-radius: 3px; transform: rotate(1.6deg);
  box-shadow: 0 1px 1px rgba(29, 36, 51, .08), 0 18px 26px -20px rgba(29, 36, 51, .55);
}
.aviso-tipo .cinta { width: 86px; top: -12px; }
.aviso-tipo__tit { font-weight: 700; font-size: 18px; }
.aviso-tipo p:not([class]) { font-size: 15px; color: var(--tinta-2); line-height: 1.5; }
.aviso-tipo .nota { justify-self: end; margin-top: 4px; font-size: 23px; }
@media (min-width: 900px) {
  .lista-cab__env { grid-template-columns: minmax(0, 1fr) 460px; align-items: start; gap: 40px; }
  .lista-cab__collage { padding-top: 34px; }
  .lista-cab__foto { width: 270px; }
  .lista-cab__collage .aviso-tipo { margin-top: -26px; max-width: 300px; }
}

.lista-herr { padding-bottom: clamp(48px, 6vw, 80px); }
.cursos { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.cursos__leyenda { padding: 0; margin-bottom: 12px; font-weight: 700; font-size: 19px; letter-spacing: -.015em; }
.cursos__grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(29, 36, 51, .1), 0 14px 24px -22px rgba(29, 36, 51, .5); }
.cursos__etapa { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 7px; }
.cursos__opciones { display: flex; flex-wrap: wrap; gap: 6px; }






@media (min-width: 900px) {
  .cursos__grupos { display: flex; flex-wrap: wrap; gap: 0; padding: 14px 8px; }
  .cursos__grupo { padding: 2px 22px; }
  .cursos__grupo + .cursos__grupo { border-left: 1px dashed rgba(29, 36, 51, .2); }
}

.lista-herr__env { display: grid; gap: 30px; align-items: start; }
.lista-hoja { --margen-x: 28px; padding: 26px 14px 26px 42px; container-type: inline-size; container-name: lista; }
.lista-hoja__cab { position: relative; display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 2px solid var(--tinta); }
.lista-hoja__cab.salta { animation: salta .5s cubic-bezier(.3, .7, .2, 1); }
@keyframes salta { 30% { transform: translateY(-4px); } }
.lista-hoja__nota { justify-self: start; margin-top: 8px; font-size: 22px; }
@media (min-width: 600px) { .lista-hoja__nota { position: absolute; right: 0; top: -2px; margin-top: 0; } }
.lista-hoja__nota svg { width: 36px; height: 28px; transform: rotate(40deg) translate(4px, 6px); }
.arts { display: grid; }
.arts--extra { border-top: 1px dashed rgba(29, 36, 51, .25); }
.arts--extra[hidden] { display: none; }
.art {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre nombre" "precio sub" "contador tengo";
  align-items: center; gap: 2px 12px; padding: 12px 0 14px; border-bottom: 1px solid var(--raya);
}
.art__nombre { grid-area: nombre; font-weight: 600; font-size: 15.5px; line-height: 1.35; min-width: 0; }
.art__ver { font-size: 13px; font-weight: 600; color: var(--azul); margin-left: 4px; white-space: nowrap; }
.art__precio { grid-area: precio; font-size: 13.5px; color: var(--tinta-3); margin-bottom: 8px; align-self: start; }
.art .contador { grid-area: contador; justify-self: start; }
.art__sub { grid-area: sub; font-weight: 700; font-size: 16px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; align-self: start; margin-bottom: 8px; }
.art .tengo, .art .quitar { grid-area: tengo; justify-self: end; }



.tengo__caja { stroke: var(--tinta); stroke-width: 1.7; fill: #fff; }
.tengo__tick { stroke: var(--verde); stroke-width: 2.8; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s ease; }


.art--tengo .tachable { background-size: 100% 100%; color: var(--tinta-3); }
.art--tengo .art__precio, .art--tengo .art__sub { color: #9aa1ae; }
.art--tengo .contador { opacity: .45; }



.art--extra .art__precio { font-style: italic; }
@container lista (min-width: 600px) {
  .art { grid-template-columns: minmax(0, 1fr) auto 84px auto; grid-template-areas: "nombre contador sub tengo" "precio contador sub tengo"; gap: 0 14px; padding: 10px 0; }
  .art__precio { margin-bottom: 0; }
  .art__sub { align-self: center; margin-bottom: 0; }
}
.extra-form {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "campo campo" "contador btn" "aviso aviso"; gap: 10px 12px;
  margin-top: 22px; padding: 16px; border-radius: 12px; background: var(--mesa); box-shadow: inset 0 0 0 1px rgba(29, 36, 51, .06);
}
.extra-form__campo { grid-area: campo; }
.extra-form .contador { grid-area: contador; }
.extra-form__btn { grid-area: btn; justify-self: start; min-height: 46px; padding: 8px 18px; }
.extra-form__aviso { grid-area: aviso; font-size: 14px; color: var(--tinta-2); min-height: 0; }
.extra-form__aviso:empty { display: none; }
@container lista (min-width: 600px) {
  .extra-form { grid-template-columns: 1fr auto auto; grid-template-areas: "campo contador btn" "aviso aviso aviso"; align-items: end; }
}
.forro-bloque {
  display: grid; grid-template-columns: 64px 1fr; grid-template-areas: "ilus txt" "ilus cont"; gap: 6px 16px; align-items: center;
  margin-top: 18px; padding: 14px 16px 16px 12px; border-radius: 12px; background: #eef6ff; box-shadow: inset 0 0 0 1px rgba(95, 179, 232, .45);
}
.forro-bloque__ilus { grid-area: ilus; width: 64px; height: 64px; }
.forro-bloque__txt { grid-area: txt; }
.forro-bloque h3 { font-size: 17px; letter-spacing: -.01em; }
.forro-bloque p { font-size: 14.5px; color: var(--tinta-2); }
.forro-bloque p b { color: var(--tinta); white-space: nowrap; }
.forro-bloque .contador { grid-area: cont; justify-self: start; }
@container lista (min-width: 600px) {
  .forro-bloque { grid-template-columns: 64px 1fr auto; grid-template-areas: "ilus txt cont"; }
}
.lista-hoja__aviso { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(29, 36, 51, .2); }
























@media (min-width: 1100px) {
  .lista-herr__env { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  .lista-hoja { --margen-x: 56px; padding: 34px 32px 32px 84px; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .lista-hoja { --margen-x: 44px; padding: 30px 26px 28px 70px; }
}










.lista-mas__tit { margin-bottom: 20px; }
.lista-mas__rejilla { display: grid; gap: 16px; grid-auto-rows: 1fr; }
.mas-tarjeta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 20px;
  border-radius: 14px; background: #fff; text-decoration: none; color: var(--tinta);
  box-shadow: 0 0 0 1px rgba(29, 36, 51, .1), 0 18px 28px -24px rgba(29, 36, 51, .55); transition: transform .3s cubic-bezier(.3, .7, .2, 1);
}
.mas-tarjeta:hover { transform: translateY(-4px); }
.mas-tarjeta--grande { background: var(--verde-claro); box-shadow: 0 0 0 1px rgba(31, 157, 107, .3); }
.mas-tarjeta__ilus { display: flex; }
.mas-tarjeta__ilus svg { width: 64px; height: 64px; }
.mas-tarjeta--grande .mas-tarjeta__ilus svg + svg { margin-left: -30px; transform: rotate(10deg); }
.mas-tarjeta__txt { display: grid; gap: 6px; }
.mas-tarjeta__txt b { font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.mas-tarjeta__txt > span:not(.rotulo):not(.enlace) { color: var(--tinta-2); font-size: 15px; }
.mas-tarjeta .enlace { min-height: 0; margin-top: 4px; }
@media (min-width: 800px) {
  .lista-mas__rejilla { grid-template-columns: 1.35fr 1fr; }
  .mas-tarjeta { padding: 28px; }
  .mas-tarjeta__ilus svg { width: 104px; height: 104px; }
}

/* печать: чистый список с галочками */
.impresion { display: none; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; padding: 0 !important; font-size: 11pt; color: #000; }
  body > *:not(.impresion) { display: none !important; }
  .impresion { display: block; }
  .impresion h2 { font-size: 18pt; margin: 4pt 0 2pt; letter-spacing: -.02em; }
  .imp__tienda, .imp__aviso, .imp__tengo { font-size: 9.5pt; color: #333; }
  .impresion table { width: 100%; border-collapse: collapse; margin-top: 10pt; }
  .impresion th, .impresion td { text-align: left; padding: 5pt 4pt; border-bottom: .6pt solid #999; font-weight: 400; }
  .impresion thead th { font-weight: 700; border-bottom: 1.2pt solid #000; }
  .impresion tfoot th { font-weight: 700; border-bottom: 0; }
  .impresion td:last-child, .impresion th:last-child { text-align: right; white-space: nowrap; }
  .imp__caja { width: 18pt; font-size: 13pt; }
  .imp__tengo { margin-top: 10pt; }
}