/* La app de cartas (public/cartas.js): prefijo ca-. Solo tokens de style.css (docs/diseno.md → Cartas: la página).
   Arriba lo que se mira (búsqueda, consulta, mazo destino); la barra de filtros pegada debajo de la cabecera (lo único
   que se pega: la cabecera de la página no, como en Python); los resultados en tres vistas; la ficha (.ca-x) y los
   modales de reglas, ayuda e importar. */

/* ---------- arriba: qué se mira ---------- */
.ca-page { --ca-gut: 20px; }
.ca-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border-2); }
.ca-head .sec-title { border: 0; padding: 0; margin: 0; }
.ca-searchrow { display: flex; gap: var(--s2); align-items: center; }
.ca-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.ca-search > .icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.ca-search > .input { padding-left: 38px; }
.ca-q { height: 44px; font-size: var(--fs-5); }
.ca-searchrow > .btn-icon { width: 44px; height: 44px; }
.ca-src { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.ca-fld { display: flex; flex-direction: column; gap: var(--s1); flex: 0 1 320px; min-width: 220px; }
.ca-fld-ctl { display: flex; align-items: center; gap: var(--s1); }
.ca-fld-ctl > .select { min-width: 0; }
.ca-dest-meta { font-size: var(--fs-3); padding-bottom: var(--s2); min-width: 0; }
.ca-dest-meta:empty { display: none; }
.ca-conc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s3); }
.ca-conc:empty { display: none; }
.ca-conc-t { margin-right: var(--s1); }
.ca-conc-b { font-weight: 500; }
.ca-conc-n { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.ca-avisos { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s2); }
.ca-avisos:empty { display: none; }
.ca-aviso { font-size: var(--fs-3); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ca-aviso.status-orange { font-weight: 600; }

/* ---------- la barra: pegada debajo de la cabecera, a todo el ancho de la página ---------- */
.ca-bar { position: sticky; top: var(--ca-top, 57px); z-index: var(--z-raise); display: flex; flex-direction: column; gap: var(--s2);
  margin: var(--s4) calc(-1 * var(--ca-gut)) 0; padding: var(--s2) var(--ca-gut);
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); }
.ca-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.ca-bar-grp { display: contents; }   /* sus selects se acomodan en el renglón uno por uno */
.ca-count { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-2); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ca-btn-filtros { display: none; }
.ca-nf { color: var(--gold-2); font-variant-numeric: tabular-nums; }
.ca-nf:empty { display: none; }
.ca-vista button { min-height: 28px; }
.ca-selwrap { position: relative; display: inline-flex; align-items: center; }
.ca-selwrap > .icon { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
.ca-selwrap > .select { padding-left: 32px; }
.ca-bar .select { width: auto; max-width: 260px; }
.ca-colbox { display: inline-flex; align-items: center; gap: var(--s1); }
.ca-colores { --pip-size: 16px; }
.ca-colores button { min-width: 30px; padding: 0 var(--s1); }
.ca-colores button.on .pip { box-shadow: 0 0 0 1px var(--on-accent); }
.ca-num { width: 92px; }
.ca-tog { display: inline-flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s2); border: 0; border-radius: var(--r-2); background: transparent; color: var(--text-2); font-size: var(--fs-3); font-weight: 600; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ca-tog:hover { background: var(--panel-2); color: var(--text); }
.ca-tog .switch { display: inline-block; }
.ca-tog:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- resultados ---------- */
.ca-res { margin-top: var(--s4); isolation: isolate; transition: opacity var(--t-base) var(--ease); }
.ca-res.is-loading { opacity: .55; }
.ca-note { margin: 0 0 var(--s3); }
.ca-intro { margin-bottom: var(--s4); }
.ca-intro-t { font-family: var(--font-display); font-size: var(--fs-7); font-weight: 600; letter-spacing: 0; margin: 0 0 var(--s2); }
.ca-intro-n { color: var(--text-2); font-size: var(--fs-4); line-height: 1.55; max-width: 860px; margin: 0 0 var(--s2); }
.ca-intro-meta { font-size: var(--fs-2); }
.ca-empty { margin-top: var(--s2); }
.ca-hello { padding: var(--s6) var(--s4); }
.ca-hello-t { font-family: var(--font-display); font-size: var(--fs-7); font-weight: 600; letter-spacing: 0; margin: 0; color: var(--text); }
.ca-hello p { max-width: 560px; margin: 0; }
.ca-ex { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); max-width: 760px; margin-top: var(--s2); }
.ca-ex .caps { flex-basis: 100%; }
.ca-ex-b { font-family: var(--font-mono); font-weight: 500; }
.ca-more-row { display: flex; justify-content: center; margin-top: var(--s5); }

/* grilla: la carta, debajo sus datos en texto y los botones */
.ca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--s4) var(--s3); align-items: start; }
.ca-gh { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin-top: var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--border-2); }
.ca-gh:first-child { margin-top: 0; }
.ca-gh-t { font-family: var(--font-display); font-size: var(--fs-6); font-weight: 600; letter-spacing: 0; margin: 0; }
.ca-gh-meta { font-size: var(--fs-2); }
.ca-gh-note { flex-basis: 100%; margin: 0; color: var(--text-2); font-size: var(--fs-3); line-height: 1.5; max-width: 860px; }
.ca-tile { min-width: 0; }
.ca-img { position: relative; display: block; aspect-ratio: 488 / 680; cursor: pointer; }
.ca-img:focus-visible { outline: none; box-shadow: var(--ring); }
.ca-grid .ca-img:hover { transform: translateY(-2px); }
.ca-ph { height: 100%; aspect-ratio: auto; font-size: var(--fs-2); }
.ca-skel { aspect-ratio: 488 / 680; border-radius: var(--r-card); }
.ca-foot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); min-height: 28px; }
.ca-datos { flex: 1; min-width: 0; font-size: var(--fs-2); line-height: 1.45; }
.ca-roles { margin-top: 2px; font-size: var(--fs-2); color: var(--muted); }
.ca-gc { font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; }
.ca-why { margin: var(--s1) 0 0; font-size: var(--fs-2); color: var(--text-2); line-height: 1.4; }
.ca-acts { display: flex; gap: var(--s1); flex: none; }
.ca-act.on { color: color-mix(in srgb, var(--forest-2) 65%, white); border-color: color-mix(in srgb, var(--forest-2) 70%, transparent); }
.ca-act-entra.on { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.ca-act-entra.on:hover { background: var(--gold-2); border-color: var(--gold-2); }

/* pilas: una columna por grupo; las cartas se solapan mostrando la franja del nombre y la de abajo se levanta entera
   al pasar el mouse (CSS puro: la que está debajo del mouse pasa adelante de las que la tapan) */
.ca-stacks { --ca-sw: 176px; --ca-strip: calc(var(--ca-sw) * .148); display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s5) var(--s4); }
.ca-col { flex: 0 0 var(--ca-sw); width: var(--ca-sw); min-width: 0; }
.ca-col-h { margin-bottom: var(--s2); padding-bottom: var(--s1); border-bottom: 1px solid var(--border-2); }
.ca-col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-3); font-weight: 700; }
.ca-col-meta { font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.ca-stk { position: relative; }
.ca-stk .ca-tile { position: relative; margin-top: calc(-1 * (var(--ca-sw) * 680 / 488 - var(--ca-strip))); }
.ca-stk .ca-tile:first-child { margin-top: 0; }
.ca-stk .ca-tile:hover, .ca-stk .ca-tile:focus-within { z-index: 1; }
.ca-ov { position: absolute; right: var(--s2); bottom: var(--s2); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.ca-stk .ca-tile:hover .ca-ov, .ca-stk .ca-tile:focus-within .ca-ov, .ca-stk .ca-tile:last-child .ca-ov { opacity: 1; }
.ca-ov .ca-act:not(.on) { background: color-mix(in srgb, var(--bg) 85%, transparent); border-color: color-mix(in srgb, var(--text) 20%, transparent); color: var(--text); box-shadow: var(--sh-1); }
.ca-ov .ca-act-mas.on { background: color-mix(in srgb, var(--bg) 85%, transparent); box-shadow: var(--sh-1); }

/* tabla: una planilla sobria, sin cajas (la del ranking); con la página ancha el encabezado se pega debajo de la barra */
.ca-tblwrap { overflow-x: auto; }
.ca-tbl { width: 100%; min-width: 860px; border-collapse: collapse; font-size: var(--fs-3); }
.ca-tbl th { text-align: left; font-size: var(--fs-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: var(--s2); border-bottom: 1px solid var(--border-2); white-space: nowrap; background: var(--bg); }
.ca-tbl td { padding: 6px var(--s2); border-bottom: 1px solid var(--border); vertical-align: middle; }
.ca-tbl .ca-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-row { cursor: pointer; }
.ca-row:hover td { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.ca-row:focus-visible { outline: none; }
.ca-row:focus-visible td { box-shadow: inset 0 1px 0 var(--gold), inset 0 -1px 0 var(--gold); }
.ca-td-name { min-width: 200px; }
.ca-td-nm { font-weight: 600; }
.ca-td-why { display: block; margin-top: 2px; max-width: 520px; font-size: var(--fs-2); font-weight: 400; color: var(--text-2); line-height: 1.35; }
.ca-td-cost .pips { --pip-size: 15px; flex-wrap: nowrap; }
.ca-td-dim { color: var(--text-2); font-size: var(--fs-2); white-space: nowrap; }
.ca-td-mini { color: var(--muted); font-size: var(--fs-2); white-space: nowrap; }
.ca-td-acts { width: 1%; }
.ca-grp td { padding-top: var(--s4); font-size: var(--fs-2); border-bottom-color: var(--border-2); }
.ca-grp b { color: var(--text); font-size: var(--fs-3); }
@media (min-width: 1000px) {
  .ca-tblwrap { overflow: visible; }
  .ca-tbl th { position: sticky; top: calc(var(--ca-top, 57px) + var(--ca-barh, 0px)); z-index: 1; }
}

/* ---------- lo que suma a la ficha (HS.cartaExtra) ---------- */
.ca-x { border-top: 1px solid var(--border); padding-top: var(--s3); }
.ca-x-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s4); align-items: baseline; font-size: var(--fs-3); }
.ca-x-grid:empty { display: none; }
.ca-x-k { white-space: nowrap; }
.ca-x-v { min-width: 0; }
.ca-x-v .meta-i { white-space: normal; }   /* "-9 % de sinergia con Kibo, Uktabi Prince" no entra en un renglón del teléfono */
.ca-x-line + .ca-x-line { margin-top: var(--s1); }
.ca-x-temas { font-size: var(--fs-2); }
.ca-x-notas { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border); }
.ca-x-ntit { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); }
.ca-x-nn { color: var(--text-2); font-weight: 400; }
.ca-x-nn::before { content: '·'; margin-right: var(--s2); color: var(--muted); }
.ca-x-nlist { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.ca-x-nota { padding: 2px 0 2px var(--s3); border-left: 2px solid var(--gold); }
.ca-x-nhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 28px; }
.ca-x-nmeta { font-size: var(--fs-2); color: var(--muted); }
.ca-x-ntxt { font-size: var(--fs-3); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ca-x-ntxtarea { min-height: 76px; font-family: var(--font); font-size: var(--fs-3); }
.ca-x-nacts { display: flex; justify-content: flex-end; margin-top: var(--s2); }
.ca-x-err { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); font-size: var(--fs-2); }
.ca-x-err:empty { display: none; }

/* ---------- reglas ---------- */
.ca-r-top { position: sticky; top: calc(-1 * var(--s4)); z-index: 1; margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0; padding: var(--s4) var(--s4) var(--s3); background: var(--panel); border-bottom: 1px solid var(--border); }
.ca-r-hint { margin-top: var(--s2); line-height: 1.5; }
.ca-r-res { transition: opacity var(--t-base) var(--ease); }
.ca-r-res.is-loading { opacity: .55; }
.ca-r-modo { padding-top: var(--s3); }
.ca-r { padding: var(--s3) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-4); line-height: 1.55; }
.ca-r-head { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: 2px; }
.ca-r-num { padding: 0; border: 0; background: none; color: var(--gold-2); font-family: var(--font-mono); font-size: var(--fs-3); font-weight: 700; }
.ca-r-num:hover { text-decoration: underline; }
.ca-r-ch { font-size: var(--fs-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ca-r-up { display: inline-flex; align-self: center; }
.ca-r-tx { color: var(--text); overflow-wrap: anywhere; }
.ca-r-ex { margin: var(--s2) 0 0 var(--s3); padding-left: var(--s3); border-left: 2px solid var(--border-2); color: var(--text-2); font-size: var(--fs-3); font-style: italic; }
.ca-r-exl { font-style: normal; font-weight: 600; }
.ca-r-sub { margin-left: var(--s5); padding: var(--s2) 0 0; border-bottom: 0; font-size: var(--fs-3); }
.ca-r-ref { padding: 0; border: 0; border-bottom: 1px dotted var(--gold); background: none; color: var(--gold-2); font: inherit; }
.ca-r-ref:hover { border-bottom-style: solid; }
.ca-r-num:focus-visible, .ca-r-ref:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-1); }
.ca-r-mark { background: color-mix(in srgb, var(--gold) 28%, transparent); color: var(--gold-2); border-radius: var(--r-1); padding: 0 1px; }
.ca-r-gl { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--gold); }
.ca-r-glt { margin-bottom: var(--s1); color: var(--gold-2); }
.ca-r-glo { padding: var(--s2) 0; }
.ca-r-term { font-weight: 700; color: color-mix(in srgb, var(--forest-2) 65%, white); }
.ca-r-empty { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s5) 0; color: var(--muted); text-align: center; }
.ca-r-vig { padding-top: var(--s3); }

/* ---------- cómo buscar e importar ---------- */
.ca-help { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); gap: var(--s2) var(--s4); align-items: baseline; }
.ca-help-row { display: contents; }
.ca-help-ex { justify-self: start; padding: 2px var(--s2); border: 1px solid var(--border-2); border-radius: var(--r-1); background: var(--bg-2); color: var(--gold-2); font-family: var(--font-mono); font-size: var(--fs-3); text-align: left; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.ca-help-ex:hover { border-color: var(--gold); background: var(--panel-2); }
.ca-help-ex:focus-visible { outline: none; box-shadow: var(--ring); }
.ca-help-d { font-size: var(--fs-3); color: var(--text-2); line-height: 1.45; }
.ca-imp-txt { min-height: 220px; }
.ca-imp-row { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.ca-imp-err { margin-top: var(--s2); font-size: var(--fs-3); }
.ca-imp-err:empty { display: none; }

/* ---------- tamaños ---------- */
@media (max-width: 900px) {
  .ca-vista-l { display: none; }
  .ca-vista button { padding: 0 10px; }
  /* la tabla entra en una tableta sin correrse: sin la edición y con el nombre más angosto */
  .ca-tbl { min-width: 700px; }
  .ca-tbl .ca-td-set { display: none; }
  .ca-td-name { min-width: 150px; }
  .ca-td-dim, .ca-td-mini { white-space: normal; }
}
@media (max-width: 720px) {
  .ca-page { --ca-gut: var(--s3); }
}
/* teléfono: la barra arranca plegada (vista, "Filtros" y la cuenta); lo demás aparece al tocar "Filtros" */
@media (max-width: 560px) {
  .ca-head .sec-title { font-size: var(--fs-7); }
  .ca-q { height: 40px; font-size: var(--fs-5); }
  .ca-searchrow > .btn-icon { width: 40px; height: 40px; }
  .ca-fld { flex: 1 1 100%; min-width: 0; }
  .ca-dest-meta { padding-bottom: 0; }
  .ca-btn-filtros { display: inline-flex; }
  .ca-bar .ca-more { display: none; }
  .ca-bar.open .ca-more { display: flex; }
  .ca-bar.open .ca-bar-grp { display: flex; flex-wrap: wrap; gap: var(--s2); order: 1; }   /* la cuenta queda arriba, al lado de "Filtros" */
  .ca-bar.open { position: relative; top: 0; }   /* abierta ocupa media pantalla: se queda arriba en vez de pegarse */
  .ca-bar.open .ca-bar-grp { flex-basis: 100%; }
  .ca-bar .select { max-width: 100%; }
  .ca-bar-grp .ca-selwrap { flex: 1 1 100%; }
  .ca-bar-grp .ca-selwrap > .select { width: 100%; }
  .ca-num { width: 84px; }
  .ca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
  .ca-stacks { --ca-sw: min(176px, calc((100vw - 2 * var(--s3) - var(--s3)) / 2)); gap: var(--s4) var(--s3); }
  .ca-help { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .ca-help-d { margin-bottom: var(--s2); }
  .ca-r-sub { margin-left: var(--s3); }
  .ca-r-ex { margin-left: 0; }
}