/* Vista del carrito (carrito.html). Se carga después de base.css e inicio.css. */

.c-pagina { padding-bottom: 0; }
.c-pagina.c-con-barra { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

.c-cabecera {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* Las áreas de rejilla de la cabecera del home no existen aquí. */
.c-cabecera .t3-logo { grid-area: auto; justify-self: center; }
.c-cabecera .t3-carrito { grid-area: auto; justify-self: end; }

.c-volver {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-height: 44px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
}

.c-titulo {
  margin: 22px 0 16px;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.035em;
}

.c-titulo span {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tinta-suave);
}

.c-h2 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ---------- Vacío ---------- */

.c-vacio {
  padding: 48px 16px 64px;
  text-align: center;
  color: var(--tinta-suave);
}

.c-vacio svg { color: var(--rosa-medio, var(--acento)); }

.c-vacio-titulo {
  margin: 12px 0 4px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--tinta);
}

.c-vacio .t3-boton { margin-top: 12px; }

/* ---------- Entrega gratis ---------- */

.c-envio {
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 14px;
}

.c-envio p { margin: 0 0 8px; font-size: .9rem; }

.c-envio-barra {
  height: 8px;
  overflow: hidden;
  background: var(--rosa-suave, #eee);
  border-radius: 999px;
}

.c-envio-barra i {
  display: block;
  height: 100%;
  background: var(--acento);
  border-radius: 999px;
  transition: width .3s ease;
}

.c-envio-listo { border-color: var(--acento); }

/* ---------- Líneas del carrito ---------- */

.c-lineas {
  padding: 0;
  margin: 0;
  list-style: none;
  background: var(--superficie);
  border-radius: 18px;
}

.c-linea {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 14px;
}

.c-linea + .c-linea { border-top: 1px solid var(--linea); }

.c-foto {
  display: block;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 14px;
}

.c-foto img { width: 100%; height: 100%; object-fit: cover; }

.c-datos { min-width: 0; }

.c-nombre {
  display: block;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tinta);
  text-decoration: none;
}

.c-opcion,
.c-unitario {
  margin: 2px 0 0;
  font-size: .82rem;
  color: var(--tinta-suave);
}

.c-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-top: 10px;
}

.c-acciones .cantidad button { height: 40px; }

.c-quitar {
  min-height: 40px;
  padding: 0 4px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tinta-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
}

.c-quitar:hover { color: var(--acento-oscuro); }

/* En celular el subtotal de la línea va debajo, alineado con los datos. */
.c-subtotal-linea {
  grid-column: 2;
  margin: 0;
  font-weight: 800;
}

/* ---------- Bloques ---------- */

.c-bloque {
  padding: 16px;
  margin-top: 16px;
  background: var(--superficie);
  border-radius: 18px;
}

.c-campos {
  display: grid;
  gap: 12px;
}

.c-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  font-size: .85rem;
  font-weight: 700;
}

.c-campos .c-campo { margin-top: 0; }
.c-campo small { font-weight: 400; color: var(--tinta-suave); }

.c-campo select,
.c-campo input,
.c-cupon input {
  height: 46px;
  padding: 0 14px;
  font-size: 16px;
  color: var(--tinta);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 12px;
}

.c-extra { display: grid; gap: 8px; }
.c-extra .t3-fila { background: var(--fondo); }

/* ---------- Resumen ---------- */

.c-resumen {
  padding: 18px;
  margin-top: 16px;
  background: var(--superficie);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgb(28 20 24 / 6%), 0 8px 24px rgb(28 20 24 / 6%);
}

.c-cupon { display: flex; gap: 8px; }
.c-cupon input { flex: 1; min-width: 0; text-transform: uppercase; }
.c-cupon input::placeholder { text-transform: none; }

.c-cupon button {
  padding: 0 16px;
  font-weight: 700;
  color: #fff;
  background: var(--tinta);
  border: 0;
  border-radius: 12px;
}

.c-cupon-estado {
  min-height: 1.2em;
  margin: 6px 2px 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--acento-oscuro);
}

.c-cupon-error { color: #b42318; }

.c-totales { margin: 12px 0 0; }

.c-totales div {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
}

.c-totales dt { font-weight: 400; color: var(--tinta-suave); }
.c-totales dd { margin: 0; font-weight: 700; }

.c-total {
  padding-top: 12px !important;
  margin-top: 6px;
  border-top: 1px solid var(--linea);
}

.c-total dt,
.c-total dd { font-size: 1.2rem; font-weight: 800; color: var(--tinta); }

.c-iva { margin: 2px 0 14px; font-size: .78rem; color: var(--tinta-suave); }

.c-pagar {
  width: 100%;
  height: 52px;
  font-weight: 800;
  color: #fff;
  background: var(--acento);
  border: 0;
  border-radius: 999px;
}

.c-pagar:hover { background: var(--acento-oscuro); }

.c-pagar-nota { margin: 10px 0 0; font-size: .85rem; color: var(--tinta-suave); }
.c-pagar-nota:empty { margin: 0; }

.c-confianza {
  padding: 14px 0 0;
  margin: 14px 0 0;
  font-size: .82rem;
  color: var(--tinta-suave);
  list-style: none;
  border-top: 1px solid var(--linea);
}

.c-confianza li { padding: 3px 0 3px 22px; position: relative; }

.c-confianza li::before {
  position: absolute;
  left: 0;
  font-weight: 800;
  color: var(--acento);
  content: '✓';
}

/* ---------- Barra fija (celular) ---------- */

.c-barra {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 35;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-top: 1px solid var(--linea);
}

.c-barra[hidden] { display: none; }
.c-barra > div { display: flex; flex-direction: column; line-height: 1.15; }
.c-barra-etiqueta { font-size: .75rem; color: var(--tinta-suave); }
.c-barra strong { font-size: 1.2rem; }
.c-barra .c-pagar { flex: 1; }

/* ---------- Deshacer ---------- */

.c-deshacer {
  position: fixed;
  bottom: calc(100px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 40;
  display: flex;
  gap: 14px;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 8px 8px 8px 16px;
  font-size: .9rem;
  color: #fff;
  background: var(--tinta);
  border-radius: 999px;
  transform: translateX(-50%);
}

.c-deshacer[hidden] { display: none; }

.c-deshacer button {
  height: 36px;
  padding: 0 14px;
  font-weight: 800;
  color: var(--tinta);
  background: var(--lima);
  border: 0;
  border-radius: 999px;
}

.c-pagina .aviso { bottom: calc(100px + env(safe-area-inset-bottom)); }

/* ---------- Tablet y escritorio ---------- */

@media (min-width: 700px) {
  .c-linea {
    grid-template-columns: 96px 1fr auto;
    align-items: start;
  }

  .c-foto { width: 96px; height: 96px; }
  .c-subtotal-linea { grid-column: 3; font-size: 1.05rem; }
  .c-campos { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  .c-pagina.c-con-barra { padding-bottom: 48px; }
  .c-barra { display: none !important; }
  .c-deshacer, .c-pagina .aviso { bottom: 24px; }

  .c-contenido {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
  }

  .c-resumen {
    position: sticky;
    top: 90px;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-envio-barra i { transition: none; }
}

/* En celular solo la flecha; el texto sigue disponible para lectores de pantalla. */
@media (max-width: 559px) {
  .c-volver { min-width: 44px; }

  .c-volver-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}