/* Sección Tienda online: vidriera, pedidos, integraciones de pagos y envíos, sitio (D-234) */

/* Franja de estado: abierta o cerrada, la dirección y el botón para cambiarlo. */
.ts-franja { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; margin-bottom: 1rem; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); }
.ts-franja.abierta { background: linear-gradient(120deg, var(--tienda-suave), var(--superficie) 70%); box-shadow: 0 0 0 1px var(--tienda-linea), var(--sombra-1); }
.ts-franja-icono { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--relleno); color: var(--texto-2); }
.ts-franja.abierta .ts-franja-icono { background: var(--tienda); color: var(--tienda-sobre); }
.ts-franja-texto { display: grid; gap: .15rem; flex: 1; min-width: 0; }
.ts-franja-texto strong { font-family: var(--fuente-display); font-size: 1.08rem; }
.ts-franja-texto span { color: var(--texto-3); font-size: .9rem; overflow-wrap: anywhere; }

.ts-pestanas { margin-bottom: 1.1rem; grid-auto-flow: column; }
.ts-cuerpo { display: grid; gap: 1rem; min-width: 0; }
.ts-tabla { overflow-x: auto; min-width: 0; }

/* Resumen */
.ts-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .8rem; }
.ts-cifra { display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); }
.ts-cifra span { color: var(--texto-3); font-size: .85rem; }
.ts-cifra strong { font-family: var(--fuente-display); font-size: 1.6rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ts-cifra small { color: var(--texto-3); }
.ts-cifra.urgente { box-shadow: 0 0 0 1px var(--tienda-linea), var(--sombra-1); }
.ts-cifra.urgente strong { color: var(--tienda-tinta); }
.ts-cifra.aviso strong { color: var(--aviso-tinta); }
.ts-cifra.peligro strong { color: var(--peligro-tinta); }
.ts-barras { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; align-items: end; height: 9rem; }
.ts-dia { display: grid; grid-template-rows: 1fr auto; gap: .35rem; height: 100%; text-align: center; }
.ts-dia small { color: var(--texto-3); text-transform: capitalize; }
.ts-barra { align-self: end; height: var(--alto, 3%); border-radius: 8px 8px 4px 4px; background: color-mix(in srgb, var(--tienda) 45%, transparent); transition: height .5s var(--ease); }
.ts-dia.hoy .ts-barra { background: var(--tienda); }
.ts-dia.hoy small { color: var(--tienda-tinta); font-weight: 600; }
.ts-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; align-items: start; }
.ts-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.ts-lista-relleno { padding: .3rem 1.1rem; }
.ts-fila { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--linea); }
.ts-fila:last-child { border-bottom: 0; }
.ts-fila > div:first-child { flex: 1; min-width: 0; }
.ts-fila.apagada { opacity: .6; }
.ts-estados { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .5rem; }
.ts-estado { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border: 0; border-radius: var(--r-m); background: var(--relleno); color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: background .15s var(--ease); }
.ts-estado:hover { background: var(--relleno-hover); }
.ts-estado:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.ts-estado span:not(.pastilla) { flex: 1; font-weight: 500; }
.ts-rango { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: .8rem; }
.ts-rango label { display: flex; align-items: center; gap: .4rem; color: var(--texto-3); font-size: .9rem; }

/* Integraciones: tarjetas grandes con ícono, estado y lo que se configura. */
.ts-ints { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; align-items: start; }
.ts-int { overflow: hidden; }
.ts-int-cab { display: flex; align-items: flex-start; gap: .9rem; padding: 1.1rem 1.2rem .9rem; }
.ts-int-icono { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--tienda-suave); color: var(--tienda-tinta); }
.ts-int-titulo { flex: 1; min-width: 0; }
.ts-int-titulo h2 { margin: 0; font-size: 1.08rem; }
.ts-int-titulo p { margin: .2rem 0 0; color: var(--texto-3); font-size: .9rem; }
.ts-int-cuerpo { display: grid; gap: .8rem; padding: 0 1.2rem 1.2rem; }
.ts-int-prox .ts-int-icono { background: var(--relleno); color: var(--texto-3); }
.ts-int-prox .ts-int-cuerpo { opacity: .7; }
.ts-pasos { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; color: var(--texto-2); }
.ts-pasos strong { color: var(--texto); }
.ts-avanzado { border-top: 1px solid var(--linea); padding-top: .7rem; }
.ts-avanzado summary { cursor: pointer; color: var(--texto-3); font-weight: 500; }
.ts-avanzado[open] summary { margin-bottom: .6rem; }
.ts-form { display: grid; gap: .8rem; }
.ts-form textarea, .ts-plantilla textarea { width: 100%; resize: vertical; font: inherit; }
.ts-subtitulo { margin: .6rem 0 0; font-size: 1rem; }
.ts-local { padding: .6rem 0; border-bottom: 1px solid var(--linea); }
.ts-transportistas { display: grid; gap: .5rem; }
.ts-transportista { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: var(--r-m); background: var(--relleno); }
.ts-transportista > div:first-child { display: grid; gap: .1rem; }
.ts-transportista small { color: var(--texto-3); }

/* Vidriera: banners y temporadas */
.ts-barra-acciones { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-radius: var(--r-l); background: var(--tienda-suave); color: var(--tienda-tinta); }
.ts-barra-acciones p { flex: 1; margin: 0; }
.ts-piezas { display: grid; gap: .7rem; }
.ts-pieza { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .6rem; border-radius: var(--r-l); background: var(--relleno); }
.ts-pieza-img { width: 8.5rem; aspect-ratio: 16 / 7; border-radius: var(--r-m); object-fit: cover; background: var(--superficie-2); }
.ts-sin-img { display: grid; place-items: center; color: var(--texto-3); }
.ts-pieza-texto { display: grid; gap: .25rem; min-width: 0; }
.ts-pieza-acciones { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.ts-borrador .ts-pieza-img { opacity: .75; }
.ts-miniatura { display: block; max-width: 100%; max-height: 9rem; margin-bottom: .5rem; border-radius: var(--r-m); object-fit: cover; }
.ts-elegir-caja { display: grid; gap: .6rem; }
.ts-elegir { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; display: grid; gap: .25rem; }
.ts-elegir label { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--r-s); cursor: pointer; }
.ts-elegir label:hover { background: var(--fila-hover); }
.ts-elegir label span:not(.pastilla) { flex: 1; }

/* Avisos */
.ts-variables { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.ts-variable { display: inline-flex; align-items: baseline; gap: .35rem; padding: .25rem .55rem; border-radius: 999px; background: var(--relleno); font-family: ui-monospace, monospace; font-size: .82rem; }
.ts-variable small { font-family: var(--fuente); color: var(--texto-3); }
.ts-plantillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .8rem; }
.ts-plantilla { display: grid; gap: .6rem; padding: .9rem; border-radius: var(--r-l); background: var(--relleno); }
.ts-plantilla header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ts-plantilla header .td-opcion { padding: .2rem .4rem; background: transparent; }

@media (max-width: 720px) {
  .ts-franja { flex-wrap: wrap; }
  .ts-franja .btn { width: 100%; }
  .ts-ints, .ts-dos, .ts-plantillas { grid-template-columns: minmax(0, 1fr); }
  .ts-pieza { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .ts-pieza-img { width: 5.5rem; }
  .ts-pieza-acciones { grid-column: 1 / -1; justify-content: flex-start; }
  .ts-transportista { grid-template-columns: minmax(0, 1fr); }
  .ts-barra-acciones { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .ts-barra { transition: none; } }