/* The new sections' public pages (src/worker/directory/sections.ts): auditions, groups, basic profiles, the Tienda and
   business pages. On top of directorio.css and its tokens (BRAND_GUIDE: Lima). */

/* Five sections in the top nav: on a phone they scroll sideways, the page's own section is scrolled into view (the
   script under the nav, html.ts), and a short fade at the edge says there's more. */
@media (max-width: 480px) {
  .top-nav { gap: 16px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent); padding-right: 24px; }
}

/* An audition's card: no logo; who calls it on top, as the vouch line. */
.sc.au { display: block; }
.sc.au .sc-vouch { margin: 0 0 4px; }
.sc-key.soon { text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: .5em;
  text-underline-offset: -.35em; text-decoration-skip-ink: none; }
/* Charging to audition is never small print. */
.fee { display: inline-block; margin-top: 6px; font-weight: 700; font-size: 14px; }
.fee.big { font-size: 17px; margin: 0 0 12px; }
/* Free says so too, so «free» never reads as «not said»; quieter than a fee. */
.fee.free { font-weight: 600; }
/* Who calls it is a link to their page, where the members are. */
.where a { text-decoration: underline; text-underline-offset: 3px; }
.note-minor { font-weight: 600; margin: 0 0 14px; }
.facts-list { margin: 0; }
/* An audition's poster, full width. Only the <img>: a competition's poster is an <a class="poster"> thumbnail beside
 * its date (directorio.css), and every Worker page loads both files. */
img.poster { display: block; width: 100%; height: auto; border-radius: var(--radius-media); }

/* A group's members: one row each, the role in grey; the linked names are the ones who confirmed. */
.members { list-style: none; margin: 0 0 12px; padding: 0; }
.members li { min-height: 44px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 10px 0;
  border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.members li:first-child { border-top: 0; }
.members .mname { font-weight: 600; }
.members .mrole { color: var(--gris, #6b6b6b); font-size: 14px; }
.members a { text-decoration: underline; text-underline-offset: 3px; }
.cards.plain { gap: 4px; margin: 0; }
.cards.plain li { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.cards.plain .sc-vouch { width: 100%; margin: 6px 0 0; }

/* «¿Algo no está bien?»: the help form, folded. */
details.report { margin: 28px 0 0; }
details.report summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center;
  text-decoration: underline; text-underline-offset: 3px; }
details.report[open] summary { margin-bottom: 4px; }

/* A person's public profile (/@<handle>, sections.ts personPage): the profile board of the brand canvas («Lima 2 v3 ·
   Lima intermedio»). Who she is first, in type while there's no photo; then soft cards on Niebla. */
.person-page h2 { margin-top: 0; }
.pp-id { margin: 0 0 8px; }
.pp-id h1 { font-size: 44px; line-height: 1.12; letter-spacing: -0.02em; margin: 4px 0 0; text-wrap: balance; overflow-wrap: break-word; }
.pp-intro { margin: 10px 0 0; font-size: 18px; line-height: 1.4; }
.pp-roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.pp-roles li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill);
  background: var(--blanco); font-weight: 600; font-size: 15px; }
.pp-school { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0; font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--gris); }
.pp-school svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.pp-school a { font-weight: 700; color: var(--pizarra); text-decoration: underline; text-underline-offset: 3px; }
.pp-acts { margin: 20px 0 0; }
.pp-minor { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0; font-size: 14px; color: var(--gris); }
.pp-minor svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.pp-done p { margin: 0 0 8px; }
.pp-sec { margin-top: 44px; scroll-margin-top: 16px; }
.pp-sec h2 { margin: 0 0 16px; }
/* Her words: Fraunces italic, the human voice (BRAND_GUIDE). */
.pp-quote { margin: 0; font-family: var(--font-voice); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.38;
  overflow-wrap: break-word; white-space: pre-line; }
.pp-partner { margin-top: 28px; }
.pp-partner-t { margin: 0 0 4px; font-weight: 700; font-size: 18px; }
.pp-partner-d { margin: 0 0 12px; font-size: 16px; line-height: 1.45; overflow-wrap: break-word; }
.pp-svc h3 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; overflow-wrap: break-word; }
.pp-svc-d { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--gris); overflow-wrap: break-word; }
.pp-svc .btn-lima, .pp-partner .btn-lima { margin-top: 14px; }
.btn-lima svg { width: 16px; height: 16px; }
/* The form: labels above, 44 px and up, the select with its own arrow. */
.pp-form select { appearance: none; -webkit-appearance: none; font: 500 17px var(--font-sans); color: var(--pizarra); background: var(--niebla);
  border: 1.5px solid var(--gris); border-radius: var(--radius-field); padding: 0 48px 0 18px; min-height: 54px; width: 100%; }
.pp-form select:focus { border-color: var(--pizarra); }
.pp-sel { position: relative; display: block; }
.pp-sel::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--pizarra); border-bottom: 2px solid var(--pizarra); transform: rotate(45deg); pointer-events: none; }
/* iOS Safari's native date field has its own minimum width and spills out of the card: a plain field takes the width. */
.pp-form input[type="date"] { appearance: none; -webkit-appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
.pp-form input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }
.pp-form .btn { margin-top: 4px; }
.pp-notice { margin: 0 0 12px; padding: 14px 16px; border-radius: var(--radius-field); font-weight: 600; line-height: 1.45; }
.pp-notice.ok { background: var(--lima-suave); box-shadow: inset 0 0 0 1.5px var(--pizarra); }
.pp-notice.error { background: #FBEAE8; color: #A12C22; }
/* Groups: one row each, the role in grey. */
.pp-rows { list-style: none; margin: 0; padding: 0; }
.pp-rows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--line); }
.pp-rows li:first-child { border-top: 0; padding-top: 0; }
.pp-rows a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pp-rows span { color: var(--gris); font-size: 14px; }
/* Networks: white rows, the handle on the right. */
.pp-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-links a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 20px; border-radius: var(--radius-card);
  background: var(--blanco); text-decoration: none; }
.pp-links svg { width: 22px; height: 22px; flex: none; }
.pp-links strong { font-size: 16px; }
.pp-links span { margin-left: auto; font-size: 14px; color: var(--gris); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-share-n { margin: 0; }
.pp-share-n strong { display: block; font-size: 18px; line-height: 1.25; overflow-wrap: break-word; }
.pp-share-n span { display: block; font-size: 14px; color: var(--gris); }
.pp-share-u { margin: 12px 0 14px; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
@media (max-width: 380px) { .pp-id h1 { font-size: 38px; } }

/* The profile's CV (20261025000000_profile_cv.sql): photos, skills, lists of entries, references, partners, and the
   casting and CV cards. Each section shows only when the person switched it on and it has something in it. */
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-grid figure { margin: 0; min-width: 0; }
.pp-grid .big, .pp-grid.one figure { grid-column: 1 / -1; }
.pp-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-media);
  background: var(--blanco); }
.pp-grid .big img { aspect-ratio: 4 / 3; }
.pp-grid figcaption { margin: 6px 2px 0; font-size: 13px; line-height: 1.35; color: var(--gris); overflow-wrap: break-word; }
.pp-credit { margin: 10px 0 0; }
.pp-skills .pp-rows strong { font-size: 16px; }
.pp-skills .pp-rows li { min-height: 0; } /* nothing to tap in a skill row */
.pp-skill-lf, .pp-skill-lang { margin: 14px 0 0; font-size: 15px; line-height: 1.45; overflow-wrap: break-word; }
.pp-extras { margin-top: 14px; }
.pp-extras li { background: var(--niebla); min-height: 36px; font-size: 14px; }
/* «Su camino» and the results: one card, a subheading per list, «Declarado por …» once where nobody can confirm. */
.pp-cv-card { padding: 20px; }
.pp-cv-part + .pp-cv-part { margin-top: 22px; padding-top: 20px; border-top: 2px solid var(--line); }
.pp-cv-part h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.pp-cv-said { margin: 4px 0 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--gris); }
/* An entry: the years on the left, then what, where and as what, the detail, a link and who vouches. */
.pp-cv-list { list-style: none; padding: 0; margin: 12px 0 0; }
.pp-cv-e { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.pp-cv-e:first-child { border-top: 0; padding-top: 0; }
.pp-cv-e:last-child { padding-bottom: 0; }
.pp-cv-y { font-weight: 700; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--gris); }
.pp-cv-b strong { display: block; font-size: 17px; line-height: 1.3; overflow-wrap: break-word; }
.pp-cv-o { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--gris); overflow-wrap: break-word; }
.pp-cv-d { margin: 6px 0 0; font-size: 15px; line-height: 1.45; overflow-wrap: break-word; white-space: pre-line; }
.pp-cv-l { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; }
.pp-cv-l svg { width: 14px; height: 14px; }
.pp-cv-b .eb { margin: 8px 0 0; }
@media (max-width: 480px) {
  .pp-cv-e { grid-template-columns: minmax(0, 1fr); }
  .pp-cv-y { font-size: 14px; }
}
/* References: the words in Fraunces, then who wrote them and from where they know the person. */
.pp-ref { margin: 0; }
.pp-ref + .pp-ref { margin-top: 12px; }
.pp-ref .pp-quote { font-size: 20px; }
.pp-ref figcaption { margin: 12px 0 0; font-size: 15px; line-height: 1.4; color: var(--gris); overflow-wrap: break-word; }
.pp-ref figcaption a, .pp-ref figcaption strong { color: var(--pizarra); font-weight: 700; }
.pp-ref figcaption a { text-decoration: underline; text-underline-offset: 3px; }
.pp-ref-ask { margin: 12px 0 0; font-size: 15px; }
.pp-ref-ask a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pp-casting h2, .pp-cvcard h2 { margin: 0 0 6px; }
.pp-casting p, .pp-cvcard p { margin: 0 0 12px; line-height: 1.45; }

/* The printable CV (/@<handle>/cv, sections.ts cvPage): one white sheet on screen, black on white on A4. */
.cv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 20px; }
.cv-doc { background: var(--blanco); border-radius: var(--radius-card); padding: 28px 24px; }
.cv-head h1 { font-size: 36px; line-height: 1.12; letter-spacing: -0.02em; margin: 0; overflow-wrap: break-word; }
.cv-head.with-photo { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 20px; align-items: start; }
.cv-photo { display: block; width: 120px; height: 150px; object-fit: cover; border-radius: var(--radius-media); }
.cv-head .pp-school { margin-top: 8px; }
.cv-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cv-inapp { flex-basis: 100%; margin: 0; font-size: 15px; line-height: 1.45; }
.cv-intro { margin: 8px 0 0; font-size: 18px; line-height: 1.4; }
.cv-meta { margin: 4px 0 0; font-size: 15px; color: var(--gris); overflow-wrap: anywhere; }
.cv-sec { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.cv-sec > h2 { margin: 0 0 12px; font-size: 20px; }
.cv-page .cv-sec .card { background: none; padding: 0; margin: 0; border-radius: 0; }
.cv-foot { margin: 28px 0 0; font-size: 13px; color: var(--gris); }
@media (max-width: 480px) {
  .cv-doc { padding: 22px 18px; }
  .cv-head h1 { font-size: 30px; }
  .cv-head.with-photo { grid-template-columns: minmax(0, 1fr) 88px; gap: 14px; }
  .cv-photo { width: 88px; height: 110px; }
}
@media print {
  @page { size: A4; margin: 16mm 16mm 18mm; }
  body:has(main.cv-page) > header, body:has(main.cv-page) > footer, body:has(main.cv-page) > .skip, .cv-tools { display: none !important; }
  body:has(main.cv-page) { background: #fff !important; }
  main.cv-page { max-width: none; padding: 0; }
  .cv-doc { padding: 0; border-radius: 0; background: #fff; }
  .cv-doc, .cv-doc * { color: #000 !important; }
  .cv-doc a { text-decoration: none; }
  /* Tighter on paper: this much fits one A4 page. */
  .cv-head h1 { font-size: 28px; }
  .cv-sec { margin-top: 14px; padding-top: 12px; border-top-color: #bbb; }
  .cv-sec > h2 { margin-bottom: 8px; font-size: 17px; }
  .cv-page .pp-cv-card { padding: 0; }
  .pp-cv-part + .pp-cv-part { margin-top: 12px; padding-top: 10px; border-top-width: 1px; border-top-color: #ddd; }
  .pp-cv-part h3 { font-size: 15px; }
  .pp-cv-list { margin-top: 6px; }
  .pp-cv-e { padding: 7px 0; }
  .pp-cv-b strong { font-size: 15px; }
  .pp-cv-o, .pp-cv-d, .pp-skill-lf, .pp-skill-lang { font-size: 13px; }
  .pp-skill-lf, .pp-skill-lang { margin-top: 6px; }
  .pp-ref .pp-quote { font-size: 16px; }
  .cv-meta a::after { content: none; }
  .cv-sec > h2 { break-after: avoid; page-break-after: avoid; }
  .pp-cv-e, .pp-ref, .pp-rows li, .cv-head { break-inside: avoid; page-break-inside: avoid; }
  .pp-cv-l { min-height: 0; }
  .pp-cv-l::after { content: " " attr(href); font-weight: 400; font-size: 12px; overflow-wrap: anywhere; }
}

/* A business's articles on its page (sections.ts itemsBlock): a two-column grid on a phone, three on a desktop; the
   photo square, then the name, the price in ink (or «Consultar el precio», quieter), the sizes, the details and
   «Consultar» on its WhatsApp. No cart: Dancers doesn't sell. */
.bi-grid { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .bi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 340px) { .bi-grid { grid-template-columns: 1fr; } }
.bi-card { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.bi-img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--niebla); }
.bi-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bi-body h3 { margin: 0; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.bi-price { margin: 2px 0 0; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.bi-price.ask { font-weight: 600; font-size: 14px; color: var(--gris); }
.bi-sizes { margin: 0; font-size: 14px; color: var(--gris); font-weight: 600; }
.bi-desc { margin: 4px 0 0; font-size: 14px; line-height: 1.4; overflow-wrap: break-word; }
/* «Consultar» at the foot of every card, so a row's buttons line up. */
.bi-ask { margin-top: auto; min-height: 44px; padding: 0 14px; font-size: 15px; gap: 8px; }
.bi-body > :nth-last-child(2):not(.bi-ask) { margin-bottom: 8px; }
/* No photo: a square tile with what the visitor looks for first, its sizes («35 al 40,5»), or its initial. */
.bi-tile { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--lima-suave); text-align: center; }
.bi-tile span { font-weight: 800; font-size: clamp(20px, 6vw, 30px); line-height: 1.1; letter-spacing: -0.01em; color: var(--pizarra); overflow-wrap: anywhere; }
.bi-tile.letter span { font-family: var(--font-voice, serif); font-weight: 600; font-size: 56px; color: var(--gris); }
.bi-ask svg { width: 18px; height: 18px; flex: none; }
/* Its featured articles (up to three, sections.ts featuredBlock): bigger than the grid. On a phone they slide sideways,
   each most of the screen wide so the next one peeks; one alone takes the width. On a desktop they sit in a row. */
.bi-feat { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -16px 8px; padding: 0 16px 4px; scroll-padding-inline: 16px; scrollbar-width: none; }
.bi-feat::-webkit-scrollbar { display: none; }
.bi-feat > li { scroll-snap-align: start; }
.bi-feat.n1 { grid-auto-columns: 100%; }
.bi-feat .bi-body h3 { font-size: 18px; }
.bi-feat .bi-price { font-size: 20px; }
@media (min-width: 720px) {
  .bi-feat { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0 0 8px; padding: 0; }
  .bi-feat.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-feat.n1 { grid-template-columns: 1fr; }
  /* One alone: the photo beside its words, not a square the width of the page. */
  .bi-feat.n1 .bi-card { flex-direction: row; }
  .bi-feat.n1 .bi-img, .bi-feat.n1 .bi-tile { width: 45%; flex: none; }
}
/* The three buttons under the name (WhatsApp, Llamar, Ver en mapa), on the page's ground, not in a card: WhatsApp black
   and first; the other two outlined. A phone gives WhatsApp the whole row and the other two half each. */
.biz-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 8px; }
.biz-acts > :first-child, .biz-acts.n2 > :last-child { grid-column: 1 / -1; }
.biz-acts .btn { min-width: 0; padding: 0 14px; }
.biz-acts .btn-secondary { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pizarra); }
@media (min-width: 560px) {
  .biz-acts { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
  .biz-acts.n2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .biz-acts.n1 { grid-template-columns: 1fr; }
  .biz-acts > :first-child, .biz-acts.n2 > :last-child { grid-column: auto; }
}
@media (hover: hover) { .biz-acts .btn-secondary:hover { box-shadow: inset 0 0 0 2.5px var(--pizarra); } }
/* Its promotions: lime cards (lime marks what's chosen), the last day first, then the offer. */
.promos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .promos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promos > li:only-child { grid-column: 1 / -1; } }
.promo { margin: 0; display: flex; flex-direction: column; }
.promo .eb { margin-bottom: 6px; }
.promo h3 { margin: 0; font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; }
.promo p:not(.eb) { margin: 6px 0 0; }
.promo .go { margin-top: auto; padding-top: 6px; text-decoration: underline; }

/* Talleres and «Clases de verano» (src/worker/directory/workshops.ts). A summer class says its ages before anything else:
   a lime pill on the card and under the title, since it's the first thing a parent checks. */
.ws-ages { display: inline-block; align-self: flex-start; font-weight: 700; font-size: 14px; background: var(--lima);
  border-radius: var(--radius-pill); padding: 2px 10px; margin: 2px 0 6px; }
.ws-ages.big { font-size: 17px; padding: 4px 14px; margin: 0 0 14px; }
.ws-spots { font-weight: 600; margin: 0 0 12px; }
.ws-price-note { margin: -6px 0 12px; }
/* The poster right under the title, whole: never cropped, never taller than most of the screen, so the price and the
   button stay one scroll away. */
.ws-poster { display: block; width: auto; max-width: 100%; height: auto; max-height: min(70vh, 560px); margin: 4px 0 16px;
  border-radius: var(--radius-media); background: var(--niebla); }
/* «Dónde»'s map: one place, so smaller than a list's; the facts' text weight doesn't reach its credits. */
.facts-list .place-map { margin: 10px 0 0; }
.facts-list .place-map .map-foot { font-weight: 400; }
.map.place { height: 200px; }
@media (min-width: 600px) { .map.place { height: 240px; } }
.ws-summer-link { display: block; text-decoration: none; margin: 24px 0 0; }
.ws-summer-link strong { display: block; font-size: 18px; line-height: 1.3; margin: 0 0 4px; }
.ws-summer-link span { color: var(--gris); font-size: 15px; }
.ws-summer-link svg { width: 16px; height: 16px; vertical-align: -3px; }
.ws-age { margin: 18px 0 4px; max-width: 320px; }
.ws-age select { font: 600 16px var(--font-sans); min-height: 48px; padding: 0 14px; border-radius: var(--radius-field);
  border: 1.5px solid var(--line); background: var(--blanco); color: var(--pizarra); }
.ws-trust h2 { margin-top: 0; font-size: 20px; }
.ws-trust p { margin: 0; }

/* Reservations in Dancers (20261026130000_workshop_spots.sql): the seats, one dot each, taken ones filled; how many
   are left, louder when few; the one button for this moment. The block is swapped live by the page's script. */
.reserve { margin: 4px 0 0; }
.seats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; padding: 0; }
.seats li { width: 14px; height: 14px; border-radius: 50%; background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--pizarra); }
.seats li.t { background: var(--pizarra); }
.spots-left { font-weight: 700; font-size: 17px; margin: 0 0 12px; }
.spots-left.few { text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: .5em;
  text-underline-offset: -.35em; text-decoration-skip-ink: none; }
.spots-wait { margin: -8px 0 12px; }
.spots-opens { margin: 0 0 12px; }
.under.ask a { text-decoration: underline; text-underline-offset: 3px; }
/* The small links under the reserve button are taps too. */
.reserve ~ .under a, .card.first .under a { display: inline-flex; align-items: center; min-height: 44px; }
/* On a card in the lists. */
.ws-left { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--gris); }
.ws-left.few { color: var(--pizarra); font-weight: 700; }

/* A group's picture on /grupos (20261026180000_group_pages_list.sql): cropped square; without one, the listing shows its
   school's logo or its initials on Pizarra. */
.gc-ph { background: var(--pizarra); color: var(--lima); font-size: 36px; letter-spacing: .02em; }

/* A group's page (20261026210000_group_media.sql): its main photo opens it, big, with the profile hero's radius; the
   crop keeps a phone's first screen for the name too. */
.g-hero { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 62vh; object-fit: cover; margin: 0 0 20px;
  border-radius: var(--radius-photo); background: var(--pizarra); }
@media (min-width: 700px) { .g-hero { aspect-ratio: 16 / 9; } }
/* Its results: the year in a fixed column, the competition, and the place on the right, a medal for the top three. */
.g-results { list-style: none; margin: 0; padding: 0; }
.g-results li { display: grid; grid-template-columns: 3.2em 1fr auto; gap: 12px; align-items: center; min-height: 52px;
  padding: 8px 0; border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.g-results li:first-child { border-top: 0; }
.g-year { font-weight: 700; color: var(--gris); font-variant-numeric: tabular-nums; }
.g-comp { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.g-comp a { text-decoration: underline; text-underline-offset: 3px; }
.g-place-t { font-size: 14px; font-weight: 600; color: var(--gris); text-align: right; }
.medal { display: block; width: 32px; height: 40px; justify-self: end; }
.medal svg { display: block; width: 100%; height: 100%; font-family: inherit; }
.g-feats { margin: 0; padding-left: 1.2em; }
.g-feats li { padding: 4px 0; }
/* Its other photos: two by two, square; one alone or the first of three takes the whole width. */
.g-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.g-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-media); background: var(--niebla); }
.g-photos.n1 img, .g-photos.n3 img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.groups-page .pcs { margin-top: 18px; }
.groups-page h2 { margin-top: 44px; }
@media (min-width: 700px) {
  .gcs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Dancers Podium, /podium (src/worker/directory/podium-landing.ts; Rafael, 28-Oct-2026). A landing page, so lime as on the
   home (BRAND_GUIDE §3: about a quarter): the band carries the pitch and the ticket.
   Decisions, not defects:
   - The hero's picture is the real judge's sheet while scoring (a capture, not a redraw), in a plain dark bezel: the
     judge's screen is the main image (Rafael, 28-Oct).
   - The ticket is plan C, on a Pizarra block («if everything fails»), copied from the one the operator's printer cuts
     (Print.tsx in dancers-jurado), tilted like paper set down, with no shadow.
   - The public page is drawn in Podium's dark context (BRAND_GUIDE §3, «The dark context»): Grafito, the Lima marker
     behind who is on stage, mint with its lamp for who follows, scores in Montserrat as Podium shows them. Its colours live only here.
   - Both say «Datos de ejemplo» under them.
   - Two highlighters: «Gratis» in the band (white, on Lima) and in its card. The h1 keeps the hero's plain look.
   - «Si algo sale mal» is a ruled list like the steps, incident then answer, not a grid of feature cards. */
.podium { --grafito: #232528; --grafito-alto: #2E3135; --tiza: #F1F2EC; --humo: #A7ACB2; --verde: #7FD6A3; }
.hlw { text-decoration: underline; text-decoration-color: var(--blanco); text-decoration-thickness: .56em; text-underline-offset: -.4em;
  text-decoration-skip-ink: none; }
.pd-hero { padding: 16px 16px 40px; display: grid; gap: 32px; }
.pd-name { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.005em; }
.pd-hero .hero-voice { font-size: 40px; line-height: 1.04; margin: 0; text-wrap: balance; }
.pd-hero h1 { margin: 16px 0 0; font-size: 26px; line-height: 1.18; letter-spacing: -0.02em; }
.pd-hero .hero-lead { margin: 10px 0 0; font-size: 17px; }
.pd-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.pd-acts .btn { flex: 1 1 260px; }
.pd-free { margin: 16px 0 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.pd-free a { white-space: nowrap; }

.pd-tab { margin: 0; }
.pd-bezel { background: #101113; border-radius: 16px; padding: 6px; }
.pd-bezel img { display: block; width: 100%; height: auto; border-radius: 10px; }
.pd-tab figcaption { margin-top: 12px; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; }
.pd-ticket { margin: 0 auto; width: 100%; max-width: 300px; }
.pd-paper { position: relative; background: var(--blanco); color: var(--pizarra); padding: 18px 18px 16px; transform: rotate(-2deg); margin-bottom: 6px;
  font-size: 13px; line-height: 1.35; text-align: center; }
.pd-paper :where(p) { margin: 0; }
.pt-brand { font-weight: 600; color: var(--gris); font-size: 11px; }
.pt-kind { font-weight: 700; margin-top: 4px; }
.pt-cat { margin-top: 10px; font-weight: 600; }
.pt-num { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-top: 2px; }
.pt-names { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.pt-sub { color: var(--gris); }
.pd-paper table { width: 100%; border-collapse: collapse; margin: 14px 0 0; font-size: 12.5px; }
.pd-paper th, .pd-paper td { padding: 3px 0; text-align: right; font-weight: 600; }
.pd-paper th[scope="row"], .pd-paper thead th:first-child { text-align: left; }
.pd-paper thead th { font-size: 11px; color: var(--gris); border-bottom: 1.5px dashed var(--pizarra); padding-bottom: 5px; }
.pd-paper tbody tr:first-child > * { padding-top: 6px; }
.pd-paper tfoot > tr > * { border-top: 1.5px dashed var(--pizarra); padding-top: 6px; font-weight: 700; }
.pt-mean, .pt-final { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; text-align: left; }
.pt-mean { margin-top: 10px; }
.pt-final { margin-top: 2px; font-weight: 700; }
.pt-final strong { font-size: 20px; line-height: 1.05; }
.pt-foot { margin-top: 8px; font-size: 11px; color: var(--gris); line-height: 1.35; }
.pt-place { margin-top: 8px; padding-top: 8px; border-top: 1.5px dashed var(--pizarra); font-size: 15px; font-weight: 700; }
.pt-edge { position: absolute; left: 0; bottom: -6px; width: 100%; height: 6px; fill: var(--blanco); display: block; }
.pd-ticket figcaption, .pd-live figcaption { margin-top: 14px; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; }
.pd-live figcaption { color: var(--gris); }

.podium .pd-sec:first-child > h2 { margin-top: 12px; }
.pd-steps { list-style: none; margin-top: 16px; border-top: 2px solid var(--pizarra); }
.pd-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 2px solid var(--pizarra); }
.pd-steps .n { font-size: 46px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.pd-steps strong { display: block; font-size: 19px; letter-spacing: -0.015em; line-height: 1.2; }
.pd-steps p { margin: 6px 0 0; color: var(--gris); }

.pd-people { display: grid; gap: 28px; align-items: center; margin-top: 44px; }
.pd-people h2 { margin-top: 0; }
.pd-voice { font-size: 24px; line-height: 1.3; margin: 0 0 14px; }
.pd-list { list-style: disc; padding-left: 20px; display: grid; gap: 8px; }
.pd-live { margin: 0 auto; width: 100%; max-width: 360px; }
.pd-screen { background: var(--grafito); color: var(--tiza); border-radius: var(--radius-photo); padding: 20px 20px 12px; }
.pd-screen :where(p) { margin: 0; }
.pd-ev { font-size: 13px; font-weight: 600; color: var(--humo); }
.pd-lbl { margin-top: 16px; font-size: 12px; font-weight: 600; color: var(--humo); }
.pd-now { margin-top: 4px; font-size: 23px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
/* The marker: Grafito letters on a Lima band, drawn in once (as Podium's public page does for each new name). */
.pd-mk { color: var(--grafito); padding: 0 .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--lima), var(--lima)) no-repeat 0 0 / 100% 100%;
  animation: pd-mk .6s cubic-bezier(.2, .7, .2, 1) .4s both, pd-mk-ink .3s steps(1, end) .4s both; }
/* The letters stay Tiza until the band has covered them (93 % at 300 ms), then turn Grafito, never grey on Lima. */
@keyframes pd-mk { from { background-size: 0% 100%; } }
@keyframes pd-mk-ink { from { color: var(--tiza); } }
@media (prefers-reduced-motion: reduce) { .pd-mk { animation: none; } }
.pd-cat { margin-top: 4px; font-size: 14px; color: var(--humo); }
.pd-next { margin-top: 4px; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.pd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); flex: none; }
.pd-pub { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pizarra); }
.pd-res { list-style: none; margin-top: 4px; }
.pd-res li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 8px 0;
  border-bottom: 1px solid var(--grafito-alto); font-size: 15px; }
.pd-res li:last-child { border-bottom: 0; }
.pd-p { font-weight: 700; }
.pd-n { font-weight: 600; }
.pd-s { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }

/* The film: 16:9 at the column's width, Grafito until its poster loads. */
.pd-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; background: var(--grafito); }
.pd-film-note { margin: 10px 0 0; font-size: 14px; color: var(--gris); }

.pd-cases { margin: 0; border-top: 2px solid var(--pizarra); }
.pd-cases > div { padding: 16px 0; border-bottom: 2px solid var(--pizarra); }
.pd-plan { display: block; width: fit-content; margin: 0 0 6px; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--blanco); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.pd-planc { margin-top: 28px; padding: 24px 20px 32px; border-radius: var(--radius-card); background: var(--pizarra); color: var(--niebla);
  display: grid; gap: 28px; }
.pd-planc .pd-plan { background: var(--lima); color: var(--pizarra); }
.pd-planc h3 { margin: 4px 0 8px; font-size: 22px; color: var(--blanco); }
.pd-planc-text p:last-child { margin: 0; }
.pd-planc .pd-ticket figcaption { color: var(--niebla); }
.pd-cases dt { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--pizarra); }
.pd-cases dd { margin: 6px 0 0; color: var(--gris); font-weight: 500; font-size: 16px; }
.pd-free-card { margin-top: 44px; }
.pd-free-card > * { max-width: 46em; }
.pd-free-card > h2:first-child { font-size: 24px; }
.pd-free-card .pd-list { margin: 4px 0 0; }
.pd-else { margin: 14px 0 0; color: var(--gris); font-size: 15px; }

.pd-faq { background: var(--blanco); border-radius: var(--radius-card); margin-top: 16px; }
.pd-faq details + details { border-top: 1px solid var(--line); }
.pd-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 8px 20px; font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.pd-faq summary::-webkit-details-marker { display: none; }
.pd-faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border: solid var(--pizarra); border-width: 0 2px 2px 0;
  transform: translateY(-3px) rotate(45deg); }
.pd-faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.pd-faq details p { margin: 0; padding: 0 20px 18px; color: var(--gris); }
.pd-faq details p a { color: var(--pizarra); }
.podium #sumar textarea { min-height: 10em; }

@media (min-width: 700px) {
  .pd-hero { padding: 40px 16px 64px; }
  .pd-hero .hero-voice { font-size: 60px; }
  .pd-hero h1 { font-size: 32px; }
  .pd-acts .btn { flex: 0 1 auto; }
  .pd-cases > div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: baseline; }
  .pd-cases dd { margin: 0; }
  .pd-steps .n { font-size: 50px; }
  .pd-steps li { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (min-width: 960px) {
  .pd-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 48px; align-items: center; }
  .pd-bezel { border-radius: 22px; padding: 10px; }
  .pd-bezel img { border-radius: 12px; }
  .pd-planc { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center; padding: 36px 40px; }
  .pd-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .pd-people { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; }
}

/* Tutoriales de Podium, /podium/tutoriales (src/worker/directory/podium-tutorials.ts; Rafael, 29-Oct-2026). StillDanz's
   guides for the judges, the head judge, the organizer and the public, opened on a phone from a WhatsApp link. Ported
   from the KB's tutorials page (an Artifact until then) into the site's frame; everything is scoped to .tut.
   Decisions, not defects:
   - A sticky row of role chips under the header: a link with #jurados or #presidente opens on that guide, and the chip
     of the guide on screen is the lime one (the page's script).
   - The keypad's keys are drawn as key caps (kbd), so «1, 3 y 6» looks like the tablet.
   - One soft white card per group of steps on Niebla; a Pizarra block only for what can't be missed.
   - The ensayo's steps are checkboxes the reader ticks, kept in this browser only. */
.tut-band { max-width: 1040px; margin: 0 auto; padding: 0 8px 14px 16px; }
@media (min-width: 700px) { .tut-band { max-width: 1072px; padding: 0 16px 16px; } }
@media (min-width: 1100px) { .tut-band { max-width: 1440px; padding: 0 32px 16px; } }
/* The header's «Entrar» is the Dancers account, not Podium's document and PIN: a judge could take it for the login the
   guides talk about, so this page doesn't show it. */
body:has(main.tut) [data-cuenta] { display: none; }
html:has(main.tut) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.tut-band p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.tut-brand { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.tut-event { font-weight: 600; font-size: 14px; }
.tut { --tut-key: var(--niebla); display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 0; }
.tut a { overflow-wrap: anywhere; }
.tut b, .tut strong { font-weight: 700; }
.tut .roles { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--niebla);
  border-bottom: 1px solid var(--line); margin: 0 -16px -20px; min-width: 0; }
.tut .roles .wrap { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; }
.tut .roles .wrap::-webkit-scrollbar { display: none; }
.tut-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill);
  background: var(--blanco); color: var(--pizarra); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.tut-chip[aria-current="true"] { background: var(--lima); }
.tut section { display: grid; gap: 12px; min-width: 0; scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 76px); }
.tut h1, .tut h2, .tut h3 { margin: 0; }
.tut h1 { font-size: clamp(32px, 8vw, 40px); }
.tut h2 { font-size: 28px; line-height: 1.18; letter-spacing: -0.02em; }
.tut h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.tut p { margin: 0; }
.tut .for { font-size: 14px; font-weight: 600; color: var(--gris); }
.tut .voice { font-size: 20px; line-height: 1.4; max-width: 62ch; }
.tut .head { display: grid; gap: 8px; padding-bottom: 4px; }
.tut .card { margin: 0; display: grid; gap: 14px; min-width: 0; }
.tut .card > p, .tut .card li { max-width: 68ch; }
.tut ul, .tut ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.tut li::marker { font-weight: 700; }
.tut li > ul, .tut li > ol { margin-top: 8px; }
.tut .checks { list-style: none; padding: 0; counter-reset: step; gap: 0; }
.tut .checks li { counter-increment: step; }
.tut .checks label { display: grid; grid-template-columns: 26px 1.6em minmax(0, 1fr); gap: 0 8px; align-items: start; cursor: pointer;
  padding-block: 10px; }
.tut .checks label::before { content: counter(step) "."; grid-column: 2; grid-row: 1; font-weight: 700; padding-top: 1px; }
.tut .checks input { grid-column: 1; grid-row: 1; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--pizarra); }
.tut .checks span { grid-column: 3; grid-row: 1; }
.tut .checks input:checked ~ span { color: var(--gris); }
.tut .checks.bare label { grid-template-columns: 26px minmax(0, 1fr); }
.tut .checks.bare label::before { content: none; }
.tut .checks.bare span { grid-column: 2; }
.tut .note { margin: 0; background: var(--lima-suave); border-radius: var(--radius-field); padding: 14px 16px; display: grid; gap: 6px; }
.tut .note .tag, .tut .alert .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tut .alert { background: var(--pizarra); color: var(--niebla); border-radius: var(--radius-field); padding: 16px; display: grid; gap: 6px; }
.tut .alert a { color: inherit; }
.tut kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; height: 1.9em; padding: 0 .45em;
  margin: 0 1px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 8px; background: var(--tut-key);
  color: var(--pizarra); font-family: var(--font-sans); font-weight: 700; font-size: .9em; font-variant-numeric: tabular-nums;
  vertical-align: .05em; line-height: 1; }
.tut .keys { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.tut .result { font-weight: 700; font-variant-numeric: tabular-nums; }
.tut .tbl { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tut table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tut th, .tut td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
.tut tr:last-child > td { border-bottom: 0; }
.tut thead th { font-size: 13px; font-weight: 600; color: var(--gris); padding-top: 0; }
.tut td.num, .tut th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
.tut td.num:not(:last-child), .tut th.num:not(:last-child) { padding-right: 12px; }
.tut .trouble td:first-child { font-weight: 600; width: 42%; }
.tut .links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.tut .links dl { margin: 0; display: grid; gap: 10px; }
.tut .links dt { font-size: 13px; font-weight: 600; color: var(--gris); }
.tut .links dd { margin: 0; font-size: inherit; font-weight: 600; }
.tut .links dd a { display: inline; min-height: 0; }
.tut .links dd .nw { white-space: nowrap; } /* an address breaks only after a «/» */
.tut .who { list-style: none; padding: 0; gap: 0; }
.tut .who li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); max-width: none; }
.tut .who li:last-child { border-bottom: 0; }
.tut .who a { font-weight: 700; }
.tut .who small, .tut .who .min { color: var(--gris); font-weight: 600; font-size: 14px; }
.tut .who .min { white-space: nowrap; }
.tut .reset { justify-self: start; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: transparent; color: var(--pizarra); font: 600 15px var(--font-sans); cursor: pointer; }
.tut #videos { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 76px); }
.tut .videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.tut .videos figure { margin: 0; display: grid; gap: 8px; min-width: 0; }
.tut .videos figure.lead { grid-column: 1 / -1; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.tut .videos video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-media); background: var(--pizarra); }
.tut .videos figcaption { font-weight: 600; font-size: 15px; }
.tut .videos figcaption small { color: var(--gris); font-weight: 600; font-size: 14px; }
.tut-updated { color: var(--gris); font-size: 14px; font-weight: 600; border-top: 1px solid var(--line); padding-top: 20px; }
@media (prefers-reduced-motion: no-preference) { html:has(main.tut) { scroll-behavior: smooth; } }

/* Opinión sobre Podium, /podium/opinion (src/worker/directory/podium-opinion.ts; Rafael, 2-Nov-2026): two open
   questions and an optional role, anonymous.
   Decisions, not defects:
   - «Es anónimo» sits above the form on its own white line with the lock, not in fine print: it's why people answer
     honestly about judges and organizers.
   - «¿Competiste o fuiste de público?» is one tap on two chips (radios), required; the answers are two boxes, and either
     one alone is enough. Each error shows next to what it's about: under the chips, or in «Responde una o las dos.».
   - No stars, scales or NPS: Rafael asked for two open questions. */
.op-eyebrow { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.opinion h1 { margin-top: 6px; }
.op-anon { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 22px; padding: 14px 16px; background: var(--blanco);
  border-radius: var(--radius-card); font-size: 15px; line-height: 1.45; }
.op-anon svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.op-roles { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.op-roles legend { padding: 0; margin-bottom: 10px; }
.op-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.op-chip { position: relative; display: inline-flex; }
.help .op-chip input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0;
  opacity: 0; cursor: pointer; }
.op-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--gris);
  border-radius: var(--radius-pill); background: var(--niebla); font-weight: 600; font-size: 15px; }
.op-chip input:checked + span { background: var(--lima); border-color: var(--pizarra); }
.op-chip input:focus-visible + span { outline: 3px solid var(--pizarra); outline-offset: 2px; }
.op-either { margin: 0 0 14px; }
.op-either.is-error { color: #A12C22; font-weight: 600; }
.op-roles[aria-invalid="true"] .op-chip span { border-color: #A12C22; border-width: 2.5px; }
.op-roles .field-error { display: block; margin-top: 8px; }
.op-private { margin: -4px 0 16px; }
.op-other { margin: 16px 0 0; }
.op-voice { margin: 4px 0 0; font-size: 22px; }
.opinion .done h2 { margin-top: 0; }
.op-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.op-acts .btn { flex: 1 1 240px; }