/* Estilos (app v2, mockups/app_v2/estilos.html): la mesa clara con los 10 destacados grandes y los
   1.113 en rejilla. Muestra solo de los 247 aprobados; el resto, el marcador tramado. */

.styles-view { overflow-y: auto !important; background: var(--bg); color: var(--text); }
.styles__in { max-width: 1320px; margin: 0 auto; padding: 26px 36px 80px; }
.styles__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }
.styles__bar .field-wrap { flex: 1; min-width: 240px; max-width: 520px; }
.styles__bar .field { height: 44px; font-size: 15px; border-radius: 12px; }
.styles__bar .seg > button { min-height: 34px; padding: 0 12px; }
.sty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px 0; color: var(--text-2); }
.sty-state > .spinner + span { margin-left: 8px; }
.sty-state .notice { max-width: 560px; }
.feat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 40px; }
.fabbar { margin-bottom: 14px; }
.fabgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }

.scard { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--surface); isolation: isolate; content-visibility: auto; contain-intrinsic-size: 160px 213px; }
.scard__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms ease; }
.scard__img.veil { display: grid; }
.scard__img.veil .icon { width: 22px; height: 22px; opacity: 0.7; margin-bottom: 30px; }
.scard:hover .scard__img { transform: scale(1.03); }
.scard__foot { position: absolute; inset: auto 0 0 0; padding: 40px 12px 12px; display: flex; align-items: end; justify-content: space-between; gap: 8px; background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.82)); pointer-events: none; }
.scard__name { font: 500 13.5px/1.2 var(--f-num); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scard__tag { font-size: 11px; font-weight: 600; color: rgb(255 255 255 / 0.85); background: rgb(255 255 255 / 0.14); padding: 3px 7px; border-radius: 5px; backdrop-filter: blur(4px); flex: none; }
.scard__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.scard__hit:focus-visible { outline-offset: -3px; }
.scard__use { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; background: rgb(20 16 10 / 0.5); opacity: 0; transition: opacity var(--dur); pointer-events: none; }
.scard__use .btn { min-width: 140px; pointer-events: auto; }
.scard__use .btn-line { background: rgb(0 0 0 / 0.35); color: #fff; border-color: rgb(255 255 255 / 0.35); }
.scard:hover .scard__use, .scard:focus-within .scard__use { opacity: 1; }
.scard:not(:hover):not(:focus-within) .scard__use .btn { pointer-events: none; }
.scard.is-on { outline: 2px solid var(--sel); outline-offset: 3px; }
.scard .god { position: absolute; top: 10px; left: 10px; z-index: 3; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: rgb(0 0 0 / 0.45); color: var(--star); backdrop-filter: blur(4px); }
.scard .god .icon { width: 13px; height: 13px; fill: currentColor; }
.scard--fab { border-radius: 10px; }
.scard--fab .scard__foot { padding: 30px 9px 9px; }
.scard--fab .scard__name { font-size: 12px; }
.scard--fab .scard__tag { font-size: 10px; padding: 2px 6px; }
.scard--fab .scard__use { gap: 6px; }
.scard--fab .scard__use .btn { min-width: 0; width: calc(100% - 16px); }
.scard--fab .god { top: 8px; left: 8px; width: 22px; height: 22px; }

@media (max-width: 1180px) { .feat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899.98px) {
  .styles__in { padding: 14px 12px 60px; }
  .styles__bar { gap: 8px; margin-bottom: 18px; }
  .styles__bar .field-wrap { min-width: 100%; }
  .styles__bar .seg { width: 100%; }
  .styles__bar .seg > button { flex: 1; padding: 0 6px; }
  .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 28px; }
  .scard { border-radius: 10px; }
  .scard__foot { padding: 30px 9px 9px; flex-direction: column; align-items: flex-start; gap: 5px; }
  .fabgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .scard--fab .scard__foot { padding: 22px 6px 6px; }
  .scard--fab .scard__name { font-size: 10.5px; }
  .scard--fab .scard__tag { display: none; }
}
/* Táctil: no hay hover; la tarjeta entera usa el estilo y «Con su prompt» va visible abajo. */
@media (hover: none) {
  .scard__use { opacity: 1; background: none; justify-content: flex-end; padding-bottom: 38px; }
  .scard__use [data-sty-use] { display: none; }
  .scard__use .btn { pointer-events: auto !important; min-height: 30px; font-size: 11.5px; }
  .scard--fab .scard__use { padding-bottom: 26px; }
  .scard--fab .scard__use .btn { width: auto; padding: 0 8px; }
}