/* Paginas de sistema (carrito, checkout, cuenta, gracias) + islas.
   ---------------------------------------------------------------------------
   2026-09-08: esta hoja se genero de los tokens del TEMA DE WORDPRESS
   (Josefin Sans / Lato / #153a67) y se quedo asi cuando el resto del sitio paso
   al sistema propio. Resultado: el checkout tenia la estructura nueva —pasos
   numerados y panel de pedido— pero los campos por dentro seguian en Lato, con
   esquinas rectas y grises que no son de la paleta. Y como las dos fuentes del
   tema ya no se cargan, los botones acababan renderizando en Arial.
   Ahora todo tira de las variables de ofitodo.css. Ni un campo, ni un nombre de
   campo, ni un importe cambian: es solo presentacion.
   ------------------------------------------------------------------------- */
.of-sis {
  max-width: var(--ancho); margin: 0 auto var(--seccion);
  padding: 0 var(--gutter);
  color: var(--texto);
}
.of-sis h3 { font-size: 1.35rem; color: var(--tinta); margin: 0 0 1.1rem; }
.of-sis h4 { font-size: 1.05rem; color: var(--tinta); margin: 0 0 .6rem; }

/* Mismo boton que el resto del sitio (.btn--primario). */
.of-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--azul); color: var(--blanco) !important; border: 0;
  padding: .8rem 1.5rem; border-radius: var(--r-full);
  font: inherit; font-size: var(--t-sm); font-weight: 700; line-height: 1.2;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 16px rgb(22 50 92 / .26);
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.of-btn:hover { background: var(--azul-900); transform: translateY(-2px); box-shadow: 0 12px 26px rgb(22 50 92 / .32); }
.of-vacio { font-size: var(--t-base); color: var(--texto); }
.of-error { color: #b91c1c; }
.of-nota { color: var(--suave); font-size: var(--t-sm); }

/* tabla carrito (queda para mi cuenta y pedido recibido) */
.of-tabla { width: 100%; border-collapse: collapse; margin-bottom: 1.75rem; }
.of-tabla th { text-align: left; color: var(--tinta); font-size: var(--t-sm); border-bottom: 1px solid var(--borde); padding: .7rem .5rem; }
.of-tabla td { border-bottom: 1px solid var(--linea); padding: .8rem .5rem; vertical-align: middle; }
.of-tabla a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.of-tabla a:hover { color: var(--acento); }
.of-td-img img { display: block; border-radius: var(--r-sm); }
.of-qty { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--borde); border-radius: var(--r-full); padding: .2rem .6rem; background: var(--blanco); }
.of-qty button { border: 0; background: none; font-size: 1.05rem; line-height: 1; cursor: pointer; color: var(--azul); padding: .2rem .25rem; border-radius: 50%; }
.of-qty button:hover { background: var(--fondo-2); }
.of-x { border: 0; background: none; font-size: 1.2rem; color: var(--tenue); cursor: pointer; line-height: 1; }
.of-x:hover { color: #b91c1c; }
.of-totales { max-width: 380px; margin-left: auto; border: 1px solid var(--linea); border-radius: var(--r); background: var(--fondo); padding: 1.35rem; }
.of-totales p { display: flex; justify-content: space-between; border-bottom: 1px solid var(--linea); padding: .5rem 0; margin: 0; }
.of-totales p:last-of-type { border-bottom: 0; }
.of-totales .of-btn { width: 100%; text-align: center; margin-top: .75rem; box-sizing: border-box; }

/* checkout */
.of-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); }
@media (max-width: 900px) { .of-cols { grid-template-columns: 1fr; } }
.of-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 520px) { .of-fila2 { grid-template-columns: 1fr; } }
.of-checkout label { display: block; font-weight: 600; font-size: var(--t-sm); color: var(--tinta); margin-bottom: .25rem; }
.of-checkout input, .of-checkout select, .of-checkout textarea,
.of-nf input, .of-nf textarea {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--linea); border-radius: var(--r-sm);
  background: var(--fondo); color: var(--tinta);
  padding: .7rem .9rem; margin: .25rem 0 1rem;
  font: inherit; font-size: var(--t-sm);
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.of-checkout textarea, .of-nf textarea { min-height: 6.5rem; resize: vertical; }
/* Mismo anillo de foco que el buscador de la cabecera. */
.of-checkout input:focus, .of-checkout select:focus, .of-checkout textarea:focus,
.of-nf input:focus, .of-nf textarea:focus {
  outline: 0; background: var(--blanco);
  border-color: var(--acento); box-shadow: 0 0 0 4px rgb(30 115 190 / .12);
}
.of-checkout input::placeholder, .of-checkout textarea::placeholder { color: var(--tenue); }
.of-checkout .required { color: #b91c1c; text-decoration: none; }
/* Aviso de pago: caja suave, sin la barra lateral de color. */
.of-pago { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--r); padding: 1rem 1.15rem; margin: 1.1rem 0; }
.of-mini td:last-child, .of-mini .of-total td { text-align: right; }
.of-mini .of-total td { font-weight: 700; color: var(--tinta); border-top: 1px solid var(--borde); }
.of-visualmente-oculto { position: absolute; clip: rect(0 0 0 0); }

/* busqueda */
.of-busqueda-res { position: absolute; top: 100%; left: 0; right: 0; z-index: 9999; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--s-2); max-height: 420px; overflow: auto; }
.of-busqueda-res a { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--linea); font-size: var(--t-sm); }
.of-busqueda-res a:last-child { border-bottom: 0; }
.of-busqueda-res a:hover { background: var(--fondo); color: var(--acento); }
.of-busqueda-res img { object-fit: cover; border-radius: var(--r-sm); flex: none; }
.of-busqueda-res .of-sinres { padding: .75rem .9rem; margin: 0; color: var(--suave); font-size: var(--t-sm); }

/* listados: cargar mas */
.of-cargar-mas-holder { text-align: center; margin: 1.5rem 0 .5rem; }
ul.products > li[hidden] { display: none !important; }

/* formularios NF re-renderizados */
.of-nf label { display: block; font-weight: 600; font-size: var(--t-sm); color: var(--tinta); }
.of-nf .of-nf-msj { background: #ecf7ef; border: 1px solid #c9e4d2; border-radius: var(--r); padding: .8rem 1rem; color: #1f5c33; }

/* ===================== CARRITO Y CHECKOUT (2026-09-07) =====================
   Presentación nueva sobre las referencias del cliente: el carrito pasa de
   tabla a lista de líneas con panel de totales al lado, y el checkout se ordena
   en tres pasos numerados. Los importes y el flujo NO cambian: sigue siendo
   pago contra entrega y el servidor sigue calculando los precios. */
.of-carro { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); align-items: start; }
.of-carro__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.of-carro__cab h3 { margin: 0; }
.of-carro__cab span { color: var(--suave); font-size: .875rem; }
.of-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.of-linea {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto auto auto;
  gap: .9rem; align-items: center;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: .7rem .9rem;
}
.of-linea__img { display: block; width: 5.5rem; height: 5.5rem; border-radius: 10px; overflow: hidden; background: var(--fondo); }
.of-linea__img img { width: 100%; height: 100%; object-fit: contain; }
.of-linea__txt { display: grid; gap: .2rem; min-width: 0; }
.of-linea__nombre { color: var(--tinta); font-weight: 600; font-size: .9375rem; line-height: 1.35; text-decoration: none; }
.of-linea__nombre:hover { color: var(--acento); }
.of-linea__sku, .of-linea__uni { font-size: .8125rem; color: var(--tenue); }
.of-linea__total { font-variant-numeric: tabular-nums; font-size: 1.0625rem; color: var(--tinta); min-width: 6rem; text-align: right; }
.of-carro__seguir { margin: 1.1rem 0 0; }
.of-carro__seguir a { color: var(--suave); font-size: .9rem; text-decoration: none; }
.of-carro__seguir a:hover { color: var(--acento); }

.of-carro__panel, .of-col--panel {
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 16px;
  padding: 1.15rem 1.25rem 1.35rem; position: sticky; top: 1.25rem;
}
.of-carro__panel h4, .of-col--panel h4 { margin: 0 0 .9rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.of-panel__fila { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; font-size: .9rem; color: var(--texto); }
.of-panel__fila strong { font-variant-numeric: tabular-nums; color: var(--tinta); }
.of-panel__fila--suave span:last-child { color: var(--tenue); font-size: .8125rem; }
.of-panel__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: .9rem 0 1.1rem; padding-top: .9rem; border-top: 1px solid var(--borde); font-size: 1rem; color: var(--tinta); }
.of-panel__total strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.of-btn--grande { display: block; width: 100%; text-align: center; padding: .9rem 1.2rem; font-size: .95rem; }
.of-carro__panel .of-nota, .of-col--panel .of-nota { margin: .9rem 0 0; font-size: .78rem; line-height: 1.55; color: var(--suave); }

/* Pasos numerados del checkout */
.of-paso { display: flex; align-items: center; gap: .7rem; margin: 1.9rem 0 1rem; }
.of-paso:first-child { margin-top: 0; }
.of-paso__n { font-size: .8125rem; font-weight: 700; color: var(--tenue); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.of-paso h3 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.of-confirma { font-size: .875rem; color: var(--suave); margin: 0 0 .9rem; }

/* Resumen del checkout */
.of-resumen__lista { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.of-resumen__lista li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.of-resumen__lista img { width: 3.5rem; height: 3.5rem; object-fit: contain; background: var(--blanco); border-radius: 8px; }
.of-resumen__txt { display: grid; gap: .1rem; min-width: 0; }
.of-resumen__txt strong { font-size: .8125rem; font-weight: 600; color: var(--tinta); line-height: 1.3; }
.of-resumen__txt small { font-size: .75rem; color: var(--tenue); }
.of-resumen__imp { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--tinta); }

@media (max-width: 860px) {
  .of-carro { grid-template-columns: 1fr; }
  .of-carro__panel, .of-col--panel { position: static; }
  .of-linea { grid-template-columns: 4.5rem minmax(0, 1fr) auto; row-gap: .6rem; }
  .of-linea__img { width: 4.5rem; height: 4.5rem; }
  .of-linea .of-qty { grid-column: 2; }
  .of-linea__total { grid-column: 3; min-width: 0; }
  .of-linea .of-x { grid-row: 1; grid-column: 3; align-self: start; }
}

/* El resumen es un panel lateral, no media pantalla: el formulario es lo que
   se rellena y necesita el ancho. */
.of-checkout .of-cols { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
@media (max-width: 860px) { .of-checkout .of-cols { grid-template-columns: 1fr; } }