/* Lo que estas utilidades necesitan y no es color de marca (los colores --ti-* los pone el tema). */
:root {
  --ti-ancho: 1200px; --ti-radio: 14px; --ti-radio-s: 10px;
  --ti-titulos: 'Manrope', system-ui, sans-serif; --ti-cuerpo: 'Inter', system-ui, sans-serif;
  --ti-sombra: 0 4px 16px rgba(15, 23, 42, .06); --ti-sombra-alta: 0 14px 40px rgba(15, 23, 42, .12);
  --ti-bien: #157a45; --ti-bien-suave: #e7f6ee; --ti-error: #b42318; --ti-error-suave: #fdecea;
  --ti-atencion: #9a5b00; --ti-atencion-suave: #fff4dc;
}

/* utilidades.css — las piezas pequeñas de las páginas de cuenta, pedido y
   acceso (formularios, botones, avisos, vacíos…), de la tienda anterior de
   Vemix: usan las variables --ti-* que pone el tema. El marco (cabecera, pie,
   tarjetas, catálogo, ficha, carrito, pago) es el de la tienda de GECOTEL. */
.ti-contenedor { width: 100%; max-width: var(--ti-ancho); margin: 0 auto; padding: 0 16px; }
.ti-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ti-saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ti-oro); color: var(--ti-marino); padding: .5rem 1rem; border-radius: 8px; font-weight: 700; }
.ti-saltar:focus { left: 8px; }
.ti-tenue { color: var(--ti-tenue); }
.ti-mini { font-size: .84rem; }
.ti-codigo { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .92em; letter-spacing: .02em; }
.ti-bien-texto { color: var(--ti-bien); }
.ti-error-texto { color: var(--ti-error); }
.ti-solo-movil { display: inline-flex; }
.ti-sin-movil { display: none !important; }
@media (min-width: 900px) {
.ti-solo-movil { display: none !important; }
.ti-sin-movil { display: flex !important; }
}
.ti-boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .6rem 1.15rem; border: 1px solid var(--ti-marino);
  border-radius: 999px; background: var(--ti-marino); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s; }
.ti-boton:hover { background: var(--ti-marino-3); }
.ti-boton:active { transform: translateY(1px); }
.ti-boton:disabled, .ti-boton.is-desactivado { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ti-boton--oro { background: var(--ti-oro); border-color: var(--ti-oro); color: var(--ti-marino); }
.ti-boton--oro:hover { background: #ffcd38; }
.ti-boton--claro { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.ti-boton--claro:hover { background: rgba(255, 255, 255, .1); }
.ti-boton--linea { background: var(--ti-blanco); color: var(--ti-marino); border-color: var(--ti-linea); }
.ti-boton--linea:hover { background: var(--ti-linea-suave); border-color: #d6d2c9; }
.ti-boton--peligro { background: var(--ti-error); border-color: var(--ti-error); }
.ti-boton--peligro:hover { background: #911d14; }
.ti-boton--grande { min-height: 52px; padding: .8rem 1.5rem; font-size: 1.02rem; }
.ti-boton--mini { min-height: 34px; padding: .3rem .8rem; font-size: .85rem; }
.ti-boton--ancho { width: 100%; }
.ti-icono-boton { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.15rem; }
.ti-icono-boton:hover { background: rgba(13, 23, 39, .07); }
.ti-enlace { background: none; border: 0; padding: 0; color: var(--ti-marino); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }
.ti-enlace--peligro { color: var(--ti-error); }
.ti-idioma { display: inline-flex; align-items: center; gap: .35rem; }
.ti-idioma select { background: transparent; border: 0; color: #fff; padding: .2rem; cursor: pointer; }
.ti-idioma option { color: var(--ti-tinta); }
.ti-acciones { grid-area: acciones; display: flex; align-items: center; gap: .25rem; }
.ti-accion { display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem; border-radius: 10px; text-decoration: none; color: var(--ti-tinta); font-weight: 700; font-size: .88rem; }
.ti-accion:hover { background: var(--ti-linea-suave); }
.ti-accion > i, .ti-bolsa > i { font-size: 1.35rem; }
.ti-accion > span:not(.ti-bolsa) { display: none; flex-direction: column; line-height: 1.1; }
.ti-accion small { font-weight: 500; color: var(--ti-tenue); font-size: .74rem; }
.ti-bolsa { position: relative; display: inline-flex; }
.ti-globo { position: absolute; top: -6px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--ti-oro); color: var(--ti-marino); font: 800 .72rem/19px var(--ti-cuerpo); text-align: center; }
.ti-globo--suave { position: static; margin-left: auto; }
@media (min-width: 900px) {
.ti-accion > span:not(.ti-bolsa) { display: flex; }
}
.ti-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font: 700 .78rem var(--ti-titulos); text-transform: uppercase; letter-spacing: .12em; color: var(--ti-oro-hondo); margin-bottom: .8rem; }
.ti-seccion { padding-top: 2.4rem; }
.ti-seccion__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ti-seccion__cabeza h2 { margin: 0; font-size: 1.4rem; }
.ti-seccion__cabeza a { font-weight: 700; color: var(--ti-marino); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.ti-seccion__cabeza a:hover { text-decoration: underline; }
.ti-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.ti-categoria { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem; background: #fff; border: 1px solid var(--ti-linea); border-radius: var(--ti-radio); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.ti-categoria:hover { border-color: var(--ti-oro); transform: translateY(-2px); box-shadow: var(--ti-sombra); }
.ti-categoria i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ti-oro-suave); color: var(--ti-oro-hondo); font-size: 1.15rem; margin-bottom: .4rem; }
.ti-categoria b { font-family: var(--ti-titulos); color: var(--ti-tinta); }
.ti-categoria small { color: var(--ti-tenue); }
.ti-insignia { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: var(--ti-marino); color: #fff; font: 700 .72rem var(--ti-cuerpo); }
.ti-insignia--rebaja { background: var(--ti-oro); color: var(--ti-marino); }
.ti-insignia--agotado { background: #fff; color: var(--ti-tenue); border: 1px solid var(--ti-linea); }
.ti-favorito { position: absolute; top: .5rem; right: .5rem; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ti-marino); cursor: pointer;
  display: grid; place-items: center; font-size: 1.05rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); transition: transform .12s; }
.ti-favorito:hover { transform: scale(1.08); }
.ti-favorito.is-activo { color: #d6336c; }
.ti-favorito--suelto { position: static; width: 52px; height: 52px; border: 1px solid var(--ti-linea); box-shadow: none; flex-shrink: 0; }
.ti-precio { margin: auto 0 0; padding-top: .35rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.ti-precio b { font: 800 1.08rem var(--ti-titulos); color: var(--ti-tinta); }
.ti-precio s { color: var(--ti-tenue); font-size: .85rem; }
.ti-precio small { color: var(--ti-tenue); font-size: .78rem; }
.ti-pocas { font-size: .78rem; color: var(--ti-atencion); font-weight: 600; }
.ti-estrellas { display: inline-flex; gap: 1px; color: var(--ti-oro-hondo); font-size: .85em; }
.ti-estrellas--grandes { font-size: 1.3rem; }
.ti-migas { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: 1.1rem 0 .6rem; font-size: .84rem; color: var(--ti-tenue); }
.ti-migas a { text-decoration: none; }
.ti-migas a:hover { color: var(--ti-marino); text-decoration: underline; }
.ti-migas i { font-size: .6rem; opacity: .6; }
.ti-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ti-oro-hondo); }
.ti-chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .8rem; scrollbar-width: thin; }
.ti-chip { flex-shrink: 0; padding: .45rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--ti-linea); text-decoration: none; font-weight: 600; font-size: .88rem; }
.ti-chip:hover { border-color: var(--ti-marino); }
.ti-chip small { color: var(--ti-tenue); margin-left: .2rem; }
.ti-opcion { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; cursor: pointer; font-size: .92rem; }
.ti-opcion small { color: var(--ti-tenue); margin-left: auto; }
.ti-opcion input { accent-color: var(--ti-marino); width: 18px; height: 18px; }
.ti-opciones, .ti-muestras { display: flex; flex-wrap: wrap; gap: .45rem; }
.ti-pastilla { position: relative; cursor: pointer; }
.ti-pastilla input { position: absolute; opacity: 0; inset: 0; }
.ti-pastilla span { display: inline-flex; align-items: center; min-height: 38px; min-width: 44px; justify-content: center; padding: .35rem .8rem; border: 1px solid #d9d5cc; border-radius: var(--ti-radio-s); background: #fff; font-weight: 600; font-size: .9rem; transition: .12s; }
.ti-pastilla input:checked + span { border-color: var(--ti-marino); background: var(--ti-marino); color: #fff; }
.ti-pastilla input:focus-visible + span { outline: 3px solid var(--ti-oro); outline-offset: 2px; }
.ti-pastilla.is-imposible span { color: #a9a49a; background: repeating-linear-gradient(135deg, #fff, #fff 6px, #f4f2ed 6px, #f4f2ed 12px); text-decoration: line-through; }
.ti-muestra { position: relative; cursor: pointer; }
.ti-muestra input { position: absolute; opacity: 0; inset: 0; }
.ti-muestra > span:not(.ti-oculto) { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--muestra); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .12s; }
.ti-muestras--grandes .ti-muestra > span:not(.ti-oculto) { width: 40px; height: 40px; }
.ti-muestra input:checked + span { outline-color: var(--ti-marino); }
.ti-muestra input:focus-visible + span { outline-color: var(--ti-oro); }
.ti-muestra.is-imposible > span:not(.ti-oculto) { opacity: .35; }
.ti-rango { display: flex; align-items: center; gap: .5rem; }
.ti-rango input { min-width: 0; }
.ti-interruptor { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 600; font-size: .92rem; }
.ti-interruptor input { position: absolute; opacity: 0; }
.ti-interruptor span { position: relative; width: 40px; height: 23px; border-radius: 999px; background: #d4d0c7; transition: background .15s; flex-shrink: 0; }
.ti-interruptor span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ti-interruptor input:checked + span { background: var(--ti-marino); }
.ti-interruptor input:checked + span::after { transform: translateX(17px); }
.ti-interruptor input:focus-visible + span { outline: 3px solid var(--ti-oro); outline-offset: 2px; }
.ti-paginas { display: flex; justify-content: center; gap: .35rem; margin: 2rem 0 .5rem; flex-wrap: wrap; }
.ti-paginas a, .ti-paginas span { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; text-decoration: none; font-weight: 700; }
.ti-paginas a { background: #fff; border: 1px solid var(--ti-linea); }
.ti-paginas a:hover { border-color: var(--ti-marino); }
.ti-paginas a.is-actual { background: var(--ti-marino); color: #fff; border-color: var(--ti-marino); }
.ti-vacio { text-align: center; padding: 3rem 1rem; background: #fff; border: 1px dashed #d6d1c6; border-radius: var(--ti-radio); }
.ti-vacio > i { font-size: 2.4rem; color: #cdc6b8; margin-bottom: .8rem; }
.ti-vacio p { color: var(--ti-tenue); max-width: 45ch; margin-left: auto; margin-right: auto; }
.ti-vacio--mini { padding: 2rem 1rem; }
.ti-vacio__botones { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.ti-aviso { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--ti-radio-s); background: #eef1f6; color: var(--ti-marino-2); margin: 0 0 1rem; font-size: .92rem; }
.ti-aviso i { margin-top: .2rem; }
.ti-aviso a { font-weight: 700; margin-left: auto; white-space: nowrap; }
.ti-aviso--error { background: var(--ti-error-suave); color: var(--ti-error); }
.ti-aviso--bien { background: var(--ti-bien-suave); color: var(--ti-bien); }
.ti-aviso--atencion { background: var(--ti-atencion-suave); color: var(--ti-atencion); }
.ti-caja { background: #fff; border: 1px solid var(--ti-linea); border-radius: var(--ti-radio); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.ti-caja h2 { display: flex; gap: .55rem; align-items: center; }
.ti-caja--oro { background: var(--ti-oro-suave); border-color: #f6dc8f; }
.ti-caja--oro h2 i { color: var(--ti-oro-hondo); }
.ti-caja--error { background: var(--ti-error-suave); border-color: #f4c7c3; }
.ti-caja--error h2 { color: var(--ti-error); }
.ti-error { text-align: center; padding: 4rem 16px; }
.ti-error > i { font-size: 3rem; color: var(--ti-oro-hondo); margin-bottom: 1rem; }
.ti-selector { border: 0; padding: 0; margin: 0; }
.ti-selector legend { font-weight: 600; margin-bottom: .55rem; padding: 0; }
.ti-existencia { margin: 0; font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.ti-existencia.is-bien { color: var(--ti-bien); }
.ti-existencia.is-pocas { color: var(--ti-atencion); }
.ti-existencia.is-agotado { color: var(--ti-error); }
.ti-cantidad { display: inline-flex; align-items: center; border: 1px solid #d9d5cc; border-radius: 999px; background: #fff; overflow: hidden; height: 52px; }
.ti-cantidad button { width: 42px; height: 100%; border: 0; background: transparent; cursor: pointer; color: var(--ti-marino); }
.ti-cantidad button:hover { background: var(--ti-linea-suave); }
.ti-cantidad input { width: 46px !important; min-height: 0 !important; height: 100%; border: 0 !important; text-align: center; padding: 0 !important; -moz-appearance: textfield; box-shadow: none !important; font-weight: 700; }
.ti-cantidad input::-webkit-inner-spin-button, .ti-cantidad input::-webkit-outer-spin-button { -webkit-appearance: none; }
.ti-cantidad--mini { height: 38px; }
.ti-cantidad--mini button { width: 34px; }
.ti-cantidad--mini input { width: 36px !important; }
.ti-bloque { padding-top: 2.4rem; }
.ti-bloque--caja { background: #fff; border: 1px solid var(--ti-linea); border-radius: var(--ti-radio); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.ti-texto { max-width: 75ch; font-size: 1rem; }
.ti-opiniones__fila { display: grid; gap: 1.8rem; }
@media (min-width: 900px) {
.ti-opiniones__fila { grid-template-columns: 280px minmax(0, 1fr); }
}
.ti-opiniones__resumen { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.ti-opiniones__media { margin: 0; display: flex; align-items: baseline; gap: .3rem; }
.ti-opiniones__media b { font: 800 2.8rem var(--ti-titulos); color: var(--ti-tinta); }
.ti-barras { list-style: none; margin: .4rem 0; padding: 0; width: 100%; display: grid; gap: .3rem; font-size: .84rem; }
.ti-barras li { display: grid; grid-template-columns: 36px 1fr 24px; gap: .5rem; align-items: center; }
.ti-barras i { color: var(--ti-oro-hondo); font-size: .7rem; }
.ti-barra { height: 8px; border-radius: 99px; background: var(--ti-linea-suave); overflow: hidden; }
.ti-barra span { display: block; height: 100%; background: var(--ti-oro); border-radius: 99px; }
.ti-opiniones__orden { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.ti-opiniones__orden select { width: auto; }
.ti-resena { padding: 1.1rem 0; border-bottom: 1px solid var(--ti-linea); }
.ti-resena:first-child { padding-top: 0; }
.ti-resena__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin-bottom: .4rem; }
.ti-resena__cabeza b { font-family: var(--ti-titulos); }
.ti-resena__verificada { color: var(--ti-bien); font-size: .78rem; font-weight: 600; }
.ti-resena h3 { margin: .2rem 0 .3rem; }
.ti-resena__respuesta { margin-top: .7rem; padding: .7rem .9rem; border-left: 3px solid var(--ti-oro); background: var(--ti-oro-suave); border-radius: 0 var(--ti-radio-s) var(--ti-radio-s) 0; font-size: .92rem; }
.ti-resena__respuesta b { display: block; font-size: .8rem; color: var(--ti-oro-hondo); }
.ti-resena__acciones { display: flex; gap: 1rem; margin-top: .55rem; font-size: .84rem; }
.ti-resena__acciones button { background: none; border: 0; padding: 0; color: var(--ti-tenue); cursor: pointer; font-weight: 600; }
.ti-resena__acciones button:hover { color: var(--ti-marino); }
.ti-resena__acciones button.is-hecho { color: var(--ti-bien); }
.ti-puntuar { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .2rem; }
.ti-puntuar legend { width: 100%; margin-bottom: .4rem; font-weight: 600; float: left; }
.ti-puntuar input { position: absolute; opacity: 0; }
.ti-puntuar label { font-size: 1.9rem; color: #d9d4c8; cursor: pointer; transition: color .1s; }
.ti-puntuar input:checked ~ label, .ti-puntuar label:hover, .ti-puntuar label:hover ~ label { color: var(--ti-oro-hondo); }
.ti-puntuar input:focus-visible + label { outline: 3px solid var(--ti-oro); border-radius: 4px; }
.ti-form { display: grid; gap: 1rem; }
.ti-form label { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; }
.ti-form small { font-weight: 400; }
.ti-form--doble { grid-template-columns: 1fr; }
@media (min-width: 640px) {
.ti-form--doble { grid-template-columns: 1fr 1fr; }
.ti-form__ancho { grid-column: 1 / -1; }
}
.ti-form--linea { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ti-form--linea input { flex: 1; min-width: 140px; width: auto; }
.ti-form__pie { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
.ti-form__grupo { border: 1px solid var(--ti-linea); border-radius: var(--ti-radio-s); padding: 1rem; margin: 0; display: grid; gap: 1rem; grid-template-columns: inherit; }
.ti-form__grupo legend { font: 800 .9rem var(--ti-titulos); padding: 0 .3rem; }
@media (min-width: 640px) {
.ti-form__grupo { grid-template-columns: 1fr 1fr; }
}
.ti-form .is-mal { border-color: var(--ti-error) !important; background: var(--ti-error-suave); }
.ti-form__error { color: var(--ti-error); font-size: .82rem; font-weight: 600; }
.ti-casilla { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: .6rem !important; font-weight: 500 !important; cursor: pointer; }
.ti-casilla input { width: 19px; height: 19px; accent-color: var(--ti-marino); margin-top: .1rem; flex-shrink: 0; }
.ti-clave { position: relative; display: block; }
.ti-clave input { padding-right: 3rem; }
.ti-clave .ti-icono-boton { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 1rem; }
.ti-codigo-grande { font: 700 1.5rem var(--ti-titulos) !important; letter-spacing: .4em; text-align: center; }
.ti-campo { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; margin-top: 1rem; }
.ti-ventana { border: 0; border-radius: 18px; padding: 1.4rem; width: min(560px, calc(100vw - 32px)); box-shadow: var(--ti-sombra-alta); color: var(--ti-texto); }
.ti-ventana::backdrop { background: rgba(13, 23, 39, .5); backdrop-filter: blur(2px); }
.ti-ventana h2 { margin-bottom: .2rem; }
.ti-elegir { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
.ti-elegir__opcion { position: relative; cursor: pointer; }
.ti-elegir__opcion input { position: absolute; opacity: 0; }
.ti-elegir__opcion > span { display: flex; flex-direction: column; gap: .15rem; padding: 1rem; height: 100%; border: 1.5px solid #ddd8ce; border-radius: var(--ti-radio); background: #fff; transition: border-color .12s, box-shadow .12s; }
.ti-elegir__opcion i { font-size: 1.3rem; color: var(--ti-oro-hondo); margin-bottom: .3rem; }
.ti-elegir__opcion b { font-family: var(--ti-titulos); color: var(--ti-tinta); }
.ti-elegir__opcion small { color: var(--ti-tenue); font-weight: 500; }
.ti-elegir__opcion input:checked + span { border-color: var(--ti-marino); box-shadow: 0 0 0 3px rgba(13, 23, 39, .08); }
.ti-elegir__opcion input:focus-visible + span { outline: 3px solid var(--ti-oro); outline-offset: 2px; }
.ti-carrito { padding-top: 1.5rem; padding-bottom: 2rem; }
.ti-carrito__fila, .ti-pago__fila, .ti-pedido__fila { display: grid; gap: 1.5rem; }
@media (min-width: 960px) {
.ti-carrito__fila, .ti-pago__fila { grid-template-columns: minmax(0, 1fr) 370px; align-items: start; }
.ti-pedido__fila { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}
.ti-lineas { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--ti-linea); border-radius: var(--ti-radio); }
.ti-linea { display: grid; grid-template-columns: 76px 1fr auto; grid-template-areas: "foto datos importe" "foto cantidad cantidad"; gap: .4rem .9rem; padding: 1rem; border-bottom: 1px solid var(--ti-linea); }
.ti-linea:last-child { border-bottom: 0; }
.ti-linea.is-no-comprable { background: #fbfaf7; }
.ti-linea__foto { grid-area: foto; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: var(--ti-linea-suave); }
.ti-linea__foto img { width: 100%; height: 100%; object-fit: cover; }
.ti-linea__datos { grid-area: datos; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ti-linea__nombre { font-weight: 700; text-decoration: none; }
.ti-linea__nombre:hover { text-decoration: underline; }
.ti-linea__cantidad { grid-area: cantidad; display: flex; align-items: center; gap: 1rem; }
.ti-linea__importe { grid-area: importe; font-family: var(--ti-titulos); white-space: nowrap; }
@media (min-width: 700px) {
.ti-linea { grid-template-columns: 76px 1fr auto auto; grid-template-areas: "foto datos cantidad importe"; align-items: center; }
.ti-linea__importe { min-width: 100px; text-align: right; }
}
.ti-resumen { background: #fff; border: 1px solid var(--ti-linea); border-radius: var(--ti-radio); padding: 1.2rem; display: grid; gap: .8rem; }
.ti-resumen h2 { margin: 0; }
.ti-resumen dl, .ti-totales { margin: 0; display: grid; gap: .45rem; }
.ti-resumen dl div, .ti-totales div { display: flex; justify-content: space-between; gap: 1rem; }
.ti-resumen dt, .ti-totales dt { color: var(--ti-tenue); }
.ti-resumen dd, .ti-totales dd { margin: 0; font-weight: 600; text-align: right; }
.ti-resumen dt small, .ti-totales dt small { display: block; font-size: .78rem; }
.ti-totales__total { border-top: 1px solid var(--ti-linea); padding-top: .7rem; margin-top: .3rem; }
.ti-totales__total dt, .ti-totales__total dd { color: var(--ti-tinta); font: 800 1.2rem var(--ti-titulos); }
.ti-resumen--pegado { position: sticky; top: 140px; }
.ti-resumen__lineas { list-style: none; margin: 0; padding: 0 0 .8rem; display: grid; gap: .7rem; border-bottom: 1px solid var(--ti-linea); max-height: 320px; overflow-y: auto; }
.ti-resumen__lineas li { display: grid; grid-template-columns: 52px 1fr auto; gap: .7rem; align-items: center; font-size: .9rem; }
.ti-resumen__lineas small { display: block; color: var(--ti-tenue); font-size: .8rem; }
.ti-resumen__foto { position: relative; width: 52px; height: 52px; border-radius: 9px; background: var(--ti-linea-suave); display: grid; place-items: center; color: #c4c0b6; }
.ti-resumen__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.ti-resumen__foto b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 99px; background: var(--ti-marino); color: #fff; font-size: .7rem; display: grid; place-items: center; padding: 0 5px; }
.ti-pago { padding-top: 1.5rem; padding-bottom: 2rem; }
.ti-pasos-pago { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1.4rem; font-size: .88rem; font-weight: 600; color: var(--ti-tenue); flex-wrap: wrap; }
.ti-pasos-pago li { display: flex; align-items: center; gap: .4rem; }
.ti-pasos-pago li + li::before { content: ''; width: 24px; height: 1px; background: #cfc9bd; margin-right: .3rem; }
.ti-pasos-pago span, .ti-pasos-pago i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ti-linea); color: var(--ti-tenue); font-size: .75rem; }
.ti-pasos-pago .is-hecho i { background: var(--ti-bien); color: #fff; }
.ti-pasos-pago .is-actual { color: var(--ti-tinta); }
.ti-pasos-pago .is-actual span { background: var(--ti-marino); color: #fff; }
.ti-pago__pasos { display: grid; gap: 1rem; }
.ti-paso { background: #fff; border: 1px solid var(--ti-linea); border-radius: var(--ti-radio); padding: 1.2rem 1.3rem; }
.ti-paso h2 { display: flex; align-items: center; gap: .6rem; }
.ti-paso__n { width: 30px; height: 30px; border-radius: 50%; background: var(--ti-marino); color: #fff; display: grid; place-items: center; font-size: .85rem; flex-shrink: 0; }
.ti-paso--aviso { border-color: #f6dc8f; background: var(--ti-oro-suave); }
.ti-paso--aviso .ti-paso__n { background: var(--ti-oro); color: var(--ti-marino); }
.ti-paso [data-entrega] { margin-top: 1rem; }
.ti-direcciones { display: grid; gap: .5rem; margin-bottom: .8rem; }
.ti-direccion { position: relative; cursor: pointer; }
.ti-direccion input { position: absolute; opacity: 0; }
.ti-direccion > span { display: flex; flex-direction: column; padding: .85rem 1rem .85rem 2.6rem; border: 1.5px solid #ddd8ce; border-radius: var(--ti-radio-s); background: #fff; font-size: .92rem; }
.ti-direccion > span::before { content: ''; position: absolute; left: 1rem; top: 1.05rem; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #bfb8aa; }
.ti-direccion input:checked + span { border-color: var(--ti-marino); }
.ti-direccion input:checked + span::before { border: 5px solid var(--ti-marino); }
.ti-direccion input:focus-visible + span { outline: 3px solid var(--ti-oro); }
.ti-direccion small { color: var(--ti-tenue); }
.ti-direccion.is-incompleta { opacity: .6; cursor: not-allowed; }
[data-form-direccion]:not(dialog [data-form-direccion]) { margin-top: 1rem; padding: 1rem; background: var(--ti-lienzo); border-radius: var(--ti-radio-s); }
.ti-metodos { display: grid; gap: .5rem; }
.ti-metodo { position: relative; cursor: pointer; }
.ti-metodo input { position: absolute; opacity: 0; }
.ti-metodo > span { display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem; padding: .9rem 1rem; border: 1.5px solid #ddd8ce; border-radius: var(--ti-radio-s); background: #fff; }
.ti-metodo i { grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--ti-oro-suave); color: var(--ti-oro-hondo); }
.ti-metodo b { font-family: var(--ti-titulos); }
.ti-metodo small { color: var(--ti-tenue); }
.ti-metodo input:checked + span { border-color: var(--ti-marino); box-shadow: 0 0 0 3px rgba(13, 23, 39, .08); }
.ti-metodo input:focus-visible + span { outline: 3px solid var(--ti-oro); }
.ti-pedido { padding-bottom: 2rem; }
.ti-gracias { display: flex; gap: 1rem; align-items: flex-start; background: var(--ti-bien-suave); border: 1px solid #c3e6d1; color: #0d5730; padding: 1.2rem 1.3rem; border-radius: var(--ti-radio); margin-bottom: 1.4rem; }
.ti-gracias > i { font-size: 2rem; color: var(--ti-bien); }
.ti-gracias h1 { font-size: 1.35rem; margin-bottom: .2rem; color: #0d5730; }
.ti-gracias p { margin: 0; }
.ti-pedido__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
.ti-pedido__numero { font-family: ui-monospace, Menlo, monospace; letter-spacing: .03em; margin-bottom: .2rem; }
.ti-estado { display: inline-flex; align-items: center; padding: .3rem .8rem; border-radius: 999px; font-weight: 700; font-size: .82rem; background: #eef1f6; color: var(--ti-marino-2); white-space: nowrap; }
.ti-estado--pendiente_pago { background: var(--ti-atencion-suave); color: var(--ti-atencion); }
.ti-estado--pagado, .ti-estado--en_preparacion { background: #e8f0fd; color: #1b4fa8; }
.ti-estado--enviado { background: #efe9fd; color: #5b30b6; }
.ti-estado--entregado { background: var(--ti-bien-suave); color: var(--ti-bien); }
.ti-estado--cancelado { background: var(--ti-error-suave); color: var(--ti-error); }
.ti-progreso { list-style: none; margin: 0 0 1.4rem; padding: 1.2rem 1rem; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #fff; border: 1px solid var(--ti-linea); border-radius: var(--ti-radio); counter-reset: paso; }
.ti-progreso li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; font-size: .8rem; color: var(--ti-tenue); }
.ti-progreso li::before { content: ''; position: absolute; top: 18px; right: 50%; width: 100%; height: 3px; background: var(--ti-linea); z-index: 0; }
.ti-progreso li:first-child::before { display: none; }
.ti-progreso li.is-hecho::before { background: var(--ti-bien); }
.ti-progreso span { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; background: var(--ti-linea); display: grid; place-items: center; color: #8b8577; }
.ti-progreso li.is-hecho span { background: var(--ti-bien); color: #fff; }
.ti-progreso li.is-actual span { box-shadow: 0 0 0 5px rgba(21, 122, 69, .18); }
.ti-progreso b { color: var(--ti-texto); font-size: .82rem; }
.ti-progreso small { min-height: 1em; font-size: .72rem; }
@media (max-width: 560px) {
.ti-progreso b { font-size: .7rem; }
.ti-progreso small { display: none; }
}
.ti-pedido__lado { display: grid; gap: 0; align-content: start; }
.ti-acceso { padding-top: 2.4rem; padding-bottom: 3rem; display: grid; place-items: center; }
.ti-acceso__caja { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--ti-linea); border-radius: 18px; padding: 1.8rem 1.4rem; box-shadow: var(--ti-sombra); }
.ti-acceso__caja--ancha { max-width: 720px; }
.ti-acceso__icono { width: 56px; height: 56px; border-radius: 16px; background: var(--ti-oro-suave); color: var(--ti-oro-hondo); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 1rem; }
.ti-acceso__otro { text-align: center; margin: 1.2rem 0 0; color: var(--ti-tenue); }
.ti-acceso__otro a, .ti-acceso__otro .ti-enlace { font-weight: 700; color: var(--ti-marino); }
@media (min-width: 640px) {
.ti-acceso__caja { padding: 2.2rem 2.2rem; }
}
.ti-cuenta { display: grid; gap: 1.5rem; padding-top: 1.6rem; padding-bottom: 2.4rem; }
@media (min-width: 900px) {
.ti-cuenta { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
.ti-cuenta__lado { position: sticky; top: 140px; }
}
.ti-cuenta__lado { background: #fff; border: 1px solid var(--ti-linea); border-radius: var(--ti-radio); padding: 1rem; }
.ti-cuenta__yo { display: flex; gap: .7rem; align-items: center; padding-bottom: .9rem; margin-bottom: .5rem; border-bottom: 1px solid var(--ti-linea); min-width: 0; }
.ti-cuenta__yo div { min-width: 0; }
.ti-cuenta__yo b { display: block; font-family: var(--ti-titulos); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-cuenta__yo small { color: var(--ti-tenue); font-size: .8rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-avatar { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--ti-marino); color: var(--ti-oro); display: grid; place-items: center; font: 800 .95rem var(--ti-titulos); }
.ti-cuenta__menu { display: flex; gap: .2rem; overflow-x: auto; }
.ti-cuenta__menu a, .ti-cuenta__salir { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 9px; text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.ti-cuenta__menu a i, .ti-cuenta__salir i { width: 18px; text-align: center; color: var(--ti-tenue); }
.ti-cuenta__menu a:hover { background: var(--ti-linea-suave); }
.ti-cuenta__menu a.is-activa { background: var(--ti-marino); color: #fff; }
.ti-cuenta__menu a.is-activa i { color: var(--ti-oro); }
.ti-cuenta__salir { width: 100%; border: 0; background: none; cursor: pointer; color: var(--ti-error); }
.ti-cuenta__salir i { color: var(--ti-error) !important; }
@media (min-width: 900px) {
.ti-cuenta__menu { flex-direction: column; }
}
.ti-cuenta__cuerpo > h2 { margin-top: 1.6rem; }
.ti-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1rem; }
.ti-cifras a { background: #fff; border: 1px solid var(--ti-linea); border-radius: var(--ti-radio); padding: 1rem; text-decoration: none; display: flex; flex-direction: column; }
.ti-cifras a:hover { border-color: var(--ti-oro); }
.ti-cifras b { font: 800 1.7rem var(--ti-titulos); color: var(--ti-tinta); }
.ti-cifras span { color: var(--ti-tenue); font-size: .85rem; }
.ti-pedidos { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--ti-linea); border-radius: var(--ti-radio); }
.ti-pedidos li + li { border-top: 1px solid var(--ti-linea); }
.ti-pedidos a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "num estado" "num total"; gap: .2rem 1rem; align-items: center; padding: .9rem 1rem; text-decoration: none; }
.ti-pedidos a:hover { background: #fbfaf7; }
.ti-pedidos a > span:first-child { grid-area: num; display: flex; flex-direction: column; }
.ti-pedidos a > .ti-estado { grid-area: estado; justify-self: end; }
.ti-pedidos a > b { grid-area: total; text-align: right; font-family: var(--ti-titulos); }
.ti-pedidos a > i { display: none; }
@media (min-width: 700px) {
.ti-pedidos a { grid-template-columns: 1fr auto 110px 16px; grid-template-areas: "num estado total flecha"; }
.ti-pedidos a > i { display: block; color: var(--ti-tenue); }
}
.ti-libreta { display: grid; gap: .7rem; margin-bottom: 1rem; }
@media (min-width: 700px) {
.ti-libreta { grid-template-columns: 1fr 1fr; }
}
.ti-fiscal { background: var(--ti-lienzo); border-radius: var(--ti-radio-s); padding: 1rem; }
.ti-fiscal h2 { font-size: 1rem; }
.ti-fiscal dl { margin: 0 0 .5rem; display: grid; gap: .4rem; }
.ti-fiscal dt { font-size: .78rem; color: var(--ti-tenue); }
.ti-fiscal dd { margin: 0; font-weight: 600; }
.ti-sesiones { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ti-sesiones li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .2rem; border-bottom: 1px solid var(--ti-linea-suave); }
.ti-sesiones small { display: block; color: var(--ti-tenue); }
.ti-peligro { border-color: #f4c7c3; }
.ti-peligro h2 { color: var(--ti-error); }
.ti-por-opinar { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.ti-por-opinar li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--ti-linea); border-radius: var(--ti-radio-s); padding: .8rem 1rem; }
.ti-por-opinar a:first-child { font-weight: 700; text-decoration: none; }
.ti-ventajas { margin-top: 3rem; background: #fff; border-top: 1px solid var(--ti-linea); border-bottom: 1px solid var(--ti-linea); }
.ti-ventajas__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
@media (min-width: 900px) {
.ti-ventajas__fila { grid-template-columns: repeat(4, 1fr); }
}
.ti-ventajas__fila div { display: flex; gap: .8rem; align-items: flex-start; }
.ti-ventajas__fila i { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ti-marino); color: var(--ti-oro); font-size: 1.05rem; }
.ti-ventajas__fila p { margin: 0; font-size: .86rem; color: var(--ti-tenue); }
.ti-ventajas__fila b { display: block; color: var(--ti-tinta); font-family: var(--ti-titulos); font-size: .95rem; }
@keyframes ti-entra { from { opacity: 0; transform: translateY(8px); } }