/* Controles compactos: el espacio restante pertenece a la lectura.
   Sólo presentación de pantalla; no cambia hojas ni cálculos. */
#app.natal #cartaPanel .modo-carta{
  justify-content:flex-end;gap:6px;padding:3px 8px;
  min-height:40px;background:var(--studio-panel,#fff);border-color:var(--studio-line,#CFDCE2);
}
#app.natal #cartaPanel .modo-carta>span{display:none}
#app.natal #cartaPanel .modo-selector{
  width:auto;gap:2px;padding:2px;border-radius:8px;
  background:var(--studio-panel,#fff);border-color:var(--studio-line,#CFDCE2);
}
#app.natal #cartaPanel .modo-selector button{
  min-height:30px;padding:4px 13px;font-size:11px;letter-spacing:0;text-transform:none;
  color:var(--studio-muted,#526B77);
}
#app.natal #cartaPanel .modo-selector button[aria-pressed="true"]{background:#DAB86A;color:#173A47}
#app.natal #cartaPanel #plegar{
  align-self:center;min-width:30px;min-height:32px;padding:3px;
  border:0;border-radius:6px;color:var(--studio-text,#173A47);font-size:16px;
}
#app.natal #cartaPanel #plegar:focus-visible{outline:2px solid var(--studio-b,#1675BE);outline-offset:1px}
#app.natal #cartaPanel .pest-fila{min-width:0;flex:none}
#app.natal #cartaPanel .pest-carrusel{
  display:flex;align-items:stretch;gap:3px;flex:1 1 0%;min-width:0;padding:3px 5px 0;
}
#app.natal #cartaPanel #pestCarta{
  display:flex;flex:1 1 0%;flex-direction:row;flex-wrap:nowrap;gap:3px;min-width:0;
  align-items:stretch;align-content:normal;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding:0 2px;border:0;
}
#app.natal #cartaPanel #pestCarta::-webkit-scrollbar{display:none}
#app.natal #cartaPanel #pestCarta button{
  flex:0 0 auto;min-width:max-content;min-height:38px;margin:0;padding:7px 12px;
  border:1px solid var(--studio-line,#CFDCE2);border-bottom:2px solid transparent;
  border-radius:8px 8px 0 0;white-space:nowrap;scroll-snap-align:start;
  font:500 12px "IBM Plex Mono",monospace;letter-spacing:0;text-transform:none;
  background:var(--studio-panel,#fff)!important;color:var(--studio-text,#173A47)!important;
}
#app.natal #cartaPanel #pestCarta button[aria-selected="true"]{
  background:#DAB86A!important;color:#173A47!important;border-color:#C4A254!important;
  border-bottom-color:#9A7523!important;
}
#app.natal #cartaPanel #pestCarta button:hover{box-shadow:inset 0 0 0 1px var(--studio-accent,#947025)}
#app.natal #cartaPanel #pestCarta button:focus-visible{
  outline:2px solid var(--studio-b,#1675BE);outline-offset:-3px;
}
#app.natal #cartaPanel .pest-flecha{
  flex:0 0 28px;min-width:28px;min-height:38px;padding:0;border-radius:6px;
  border:1px solid var(--studio-line,#CFDCE2);border-bottom:0;
  color:var(--studio-text,#173A47);background:var(--studio-panel,#fff);
  font:22px/1 sans-serif;cursor:pointer;
}
#app.natal #cartaPanel .pest-flecha:disabled{opacity:.3;cursor:default}
#app.natal #cartaPanel .pest-flecha:focus-visible{outline:2px solid var(--studio-b,#1675BE);outline-offset:-3px}
#app.natal #cartaPanel.modo-avanzado .pest-carrusel,
#app.natal #cartaPanel.plegado .pest-fila{display:none}
#app.natal #cartaPanel .hoja{min-height:0}
/* La ficha ocupa una línea cerrada y conserva todo su contenido al abrirla. */
#app.natal #cartaPanel #lecturaGuiada:not([hidden]){
  flex:none;min-height:0;max-height:none;padding:0;overflow:visible;
}
#lecturaGuiada .guiada-desplegable>summary{
  display:flex;align-items:center;gap:7px;min-height:34px;padding:6px 12px;
  list-style:none;cursor:pointer;color:#173A47;font:600 14px/1.3 Spectral,serif;
}
#lecturaGuiada .guiada-desplegable>summary::-webkit-details-marker{display:none}
#lecturaGuiada .guiada-desplegable>summary::before{content:"▸";font:13px sans-serif}
#lecturaGuiada .guiada-desplegable[open]>summary::before{transform:rotate(90deg)}
#lecturaGuiada .guiada-desplegable>summary:focus-visible{outline:2px solid #1675BE;outline-offset:-3px}
#lecturaGuiada .guiada-contenido{padding:4px 12px 10px;max-height:min(230px,30dvh);overflow-y:auto;scrollbar-width:thin}
@media(pointer:coarse){
  #app.natal #cartaPanel #pestCarta button,#app.natal #cartaPanel .pest-flecha{min-height:40px}
}
@media print{#app.natal #cartaPanel .pest-carrusel{display:none}}