/* La tienda — kiosco público, mostrador y kiosco admin comparten estas piezas.
   Vive fuera de Tailwind a propósito: los anchos mínimos como `min-w-[56px]` nunca
   llegaron al bundle compilado y los blancos táctiles quedaron del tamaño del texto
   (medido 10–22px, 4-sep-2026). Aquí el tamaño no depende del purge.

   El color de acento lo pone el layout: el kiosco público usa el de la academia
   (`--kiosk-primary`), el panel el azul de marca. Los partials sólo leen `--store-accent`. */
:root { --store-accent: #2563eb; --store-accent-dark: #1d4ed8; }

.store-accent-bg { background-color: var(--store-accent); }
.store-accent-text { color: var(--store-accent); }

/* Una fila que se toca: 52px mínimo, sin depender del purge de Tailwind. */
.store-row { min-height: 52px; }

/* Botón de clase: 44px de alto mínimo, el ancho lo da la rejilla. */
.store-class-button {
  min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 2px solid #6b7280; /* gray-500: 4.83:1 sobre blanco; gray-400 daba 2.55:1 */
  background: #fff;
  color: #111827;
  font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center;
}
.store-class-button:hover { border-color: var(--store-accent); color: var(--store-accent); }
.store-class-button:focus-visible { outline: 2px solid var(--store-accent); outline-offset: 2px; }
.dark .store-class-button { background: #111827; color: #f3f4f6; border-color: #4b5563; }

/* Chip de talla: la talla y su segunda línea. El estado vive en el input. */
.store-chip > span {
  position: relative;
  min-width: 3.25rem; min-height: 3.25rem;
  padding: 0.25rem 0.625rem;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 0.75rem;
  border: 2px solid #6b7280; /* gray-500: 4.83:1 sobre blanco; gray-400 daba 2.55:1 */
  background: #fff;
  text-align: center; line-height: 1.2;
}
.dark .store-chip > span { background: #111827; border-color: #4b5563; }
.store-chip input:focus-visible + span { outline: 2px solid var(--store-accent); outline-offset: 2px; }
.store-chip input:disabled + span { opacity: .45; }

/* La elegida: relleno pleno, letra invertida y palomita — tres señales que no dependen del
   tono de la academia (un primario claro sólo con borde se pierde a un brazo de distancia). */
.store-chip input:checked + span {
  border-color: var(--store-accent);
  background-color: var(--store-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--store-accent) 28%, transparent);
}
.store-chip input:checked + span,
.store-chip input:checked + span * { color: #fff; }
.store-chip input:checked + span::after {
  content: '';
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 9999px;
  background: #fff center / 13px 13px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 2px var(--store-accent);
}

/* La sección de una familia (<details>): la palabra Ver/Ocultar según el estado. */
.store-family summary::-webkit-details-marker { display: none; }
.store-family summary { list-style: none; }
.store-family .store-hide { display: none; }
.store-family[open] .store-show { display: none; }
.store-family[open] .store-hide { display: inline; }

/* El desglose del ticket en la barra fija del mostrador: no puede crecer más de media pantalla
   en el teléfono (el resto se desplaza adentro); en escritorio no hay tope. Vive aquí porque
   `max-h-[60vh]` es un valor arbitrario y no llegó al bundle compilado. */
.store-detail { max-height: 60vh; }
@media (min-width: 1024px) { .store-detail { max-height: none; } }

/* Mostrador ---------------------------------------------------------------
   Geometría propia y predecible. Estas medidas no viven en clases arbitrarias
   porque el bundle Tailwind de este repo las purga silenciosamente. */
.counter-page { min-height: 100vh; padding: 1.25rem 1rem 7.5rem; }
.counter-shell { width: 100%; max-width: 76rem; margin: 0 auto; }
.counter-header {
  box-sizing: border-box;
  min-height: 7rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; margin-bottom: 1rem;
  border-radius: 1rem;
}
.counter-header h1, .counter-header p, .counter-card-header h2, .counter-ticket-head h2,
.counter-ticket-head p { margin: 0; }
.counter-setup-links {
  display: grid; grid-template-columns: 1fr; gap: .625rem;
  margin-bottom: 1rem;
}
.counter-history-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, .45fr) auto; gap: .625rem; padding: .75rem; margin-bottom: .75rem; border-radius: 1rem; }
.counter-setup-link {
  min-height: 4.25rem; padding: .625rem .75rem;
  display: flex; align-items: center; gap: .75rem;
  border-radius: 1rem;
}
.counter-setup-link-icon {
  width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .75rem;
}
.counter-next-card {
  min-height: 4.25rem;
  padding: .625rem .75rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.counter-recent-paid { margin-bottom: .75rem; }
.counter-next-icon {
  width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .75rem;
}
.counter-next-badge {
  display: inline-flex; align-items: center; min-height: 1.5rem;
  padding: .125rem .5rem; border-radius: 9999px;
  background: #eff6ff; color: #1d4ed8;
  font-size: .75rem; font-weight: 600;
}
.dark .counter-next-badge { background: rgba(30, 58, 138, .45); color: #bfdbfe; }
.counter-recent-paid { border-radius: 1rem; overflow: hidden; }
.counter-recent-paid summary { list-style: none; }
.counter-recent-paid summary::-webkit-details-marker { display: none; }
.counter-history-hide { display: none; }
.counter-recent-paid[open] .counter-history-show { display: none; }
.counter-recent-paid[open] .counter-history-hide { display: inline; }
.counter-recent-paid-row { min-height: 3.5rem; padding: .625rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.counter-recent-paid-all { min-height: 2.75rem; }
.counter-customer-history-list { display: flex; flex-direction: column; gap: .75rem; }
.counter-customer-history-row { min-height: 5rem; padding: .875rem 1rem; border-radius: 1rem; display: flex; align-items: center; gap: .75rem; transition: border-color .15s, background-color .15s; }
.counter-customer-history-row:hover { border-color: #93c5fd; background: #eff6ff; }
.dark .counter-customer-history-row:hover { border-color: #1e40af; background: rgba(30, 58, 138, .2); }
.counter-customer-history-avatar { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; font-weight: 700; font-size: .875rem; }
.counter-payment-history-row { min-height: 4.25rem; padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.counter-empty-state { min-height: 14rem; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.counter-empty-state h2 { margin: .75rem 0 .25rem; font-size: 1rem; font-weight: 600; color: #111827; }
.counter-empty-state p { margin: 0; font-size: .875rem; color: #4b5563; }
.dark .counter-empty-state h2 { color: #fff; }.dark .counter-empty-state p { color: #d1d5db; }
.counter-monthly-create { margin-top: .75rem; }
.counter-monthly-create summary { list-style: none; }
.counter-monthly-create summary::-webkit-details-marker { display: none; }
.counter-monthly-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.counter-monthly-option { width: 100%; padding: .5rem .75rem; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; font-weight: 600; }
.counter-monthly-option:hover { background: #dbeafe; border-color: #2563eb; }
.dark .counter-monthly-option { background: rgba(30, 58, 138, .24); border-color: #1e40af; color: #bfdbfe; }
.dark .counter-monthly-option:hover { background: rgba(30, 58, 138, .42); border-color: #60a5fa; }
.counter-monthly-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .75rem; align-items: end; }
.counter-monthly-form input { scroll-margin-bottom: 9rem; }
.counter-product-summary { min-height: 3.5rem; padding: .625rem 1rem; }
.counter-product-family .counter-product-summary { border-left: 3px solid transparent; }
.counter-product-family:not([open]) .counter-product-summary:hover { border-left-color: #2563eb; background: #eff6ff; }
.dark .counter-product-family:not([open]) .counter-product-summary:hover { border-left-color: #60a5fa; background: rgba(30, 58, 138, .2); }
.counter-product-disclosure { white-space: nowrap; font-size: .8125rem; }
.counter-product-price { font-size: 1.125rem; font-weight: 700; }
.counter-title-icon { width: 3rem; height: 3rem; }
.counter-control {
  box-sizing: border-box;
  min-height: 3rem;
  border-radius: .75rem;
  font-size: 1rem;
}
.counter-search { box-sizing: border-box; height: 3.5rem; border-radius: .875rem; }
.counter-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.counter-workspace { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.counter-card { border-radius: 1rem; overflow: hidden; }
.counter-card-header { box-sizing: border-box; min-height: 3.5rem; padding: .75rem 1rem; }
.counter-card-body { padding: 1rem; }
.counter-step {
  width: 1.75rem; height: 1.75rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: #2563eb; color: #fff;
  font-size: .875rem; font-weight: 700;
}
.counter-class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.counter-class-button {
  min-height: 3.25rem;
  padding: .625rem .75rem;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  text-align: left;
}
.counter-class-button:hover { border-color: #2563eb; background: #dbeafe; color: #1d4ed8; }
.counter-class-button:active { background: #bfdbfe; }
.counter-class-button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.counter-class-button-icon { color: #2563eb; }
.counter-class-button > span { min-width: 0; }
.counter-ticket-line > .min-w-0 { flex: 1 1 auto; }
.counter-ticket-line-amount { flex: 0 0 auto; white-space: nowrap; }
.dark .counter-class-button { background: rgba(30, 58, 138, .24); border-color: #1e40af; color: #bfdbfe; }
.dark .counter-class-button:hover { background: rgba(30, 58, 138, .42); border-color: #60a5fa; color: #dbeafe; }
.dark .counter-class-button-icon { color: #93c5fd; }
.counter-ticket { width: 100%; }
.counter-ticket-form { border-radius: 1rem 1rem 0 0; }
.counter-ticket-head { box-sizing: border-box; min-height: 4.5rem; }
.counter-ticket-actions { padding: .75rem 1rem 1rem; }
.counter-primary { box-sizing: border-box; min-height: 3.25rem; border-radius: .75rem; }
.counter-secondary { box-sizing: border-box; min-height: 3rem; border-radius: .75rem; }
.counter-customer { position: relative; padding-right: 7rem; }
.counter-customer-change { position: absolute; top: .75rem; right: .75rem; }

/* La puerta de entrada a Mostrador comparte el mismo lienzo, radios y controles.
   Conserva una segunda fila para las utilidades del index, por eso no usa el flex del header. */
.income-home-header {
  box-sizing: border-box;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
}
.income-home-header h1, .income-home-header p { margin: 0; }

@media (min-width: 640px) {
  .counter-page { padding: 1.5rem 1.5rem 8rem; }
  .counter-class-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .counter-setup-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .counter-page { padding: 2rem 1.5rem; }
  .counter-layout { grid-template-columns: minmax(0, 1fr) 22.5rem; }
  .counter-workspace { padding-bottom: 0; }
  .counter-ticket { position: sticky; top: 1rem; }
  .counter-ticket-form { border-radius: 1rem; }
  .counter-ticket-actions { padding-top: 0; }
  .counter-setup-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .counter-header { min-height: 5rem; padding: .75rem 1rem; }
  .counter-title-icon { width: 2.5rem; height: 2.5rem; }
  .counter-subtitle { display: none; }
  .counter-back-label { display: none; }
  .counter-card-header { min-height: 3.25rem; }
  .counter-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counter-setup-link { min-height: 4.5rem; }
  .counter-monthly-form { grid-template-columns: 1fr; }
  .counter-monthly-options { grid-template-columns: 1fr; }
  .counter-history-filters { grid-template-columns: 1fr; }
  .counter-customer { padding: .75rem 6.75rem .75rem .75rem; }
  .income-home-header { padding: .75rem 1rem; }
}