/**
 * assets/css/tienda.css
 *
 * Estilos de las páginas públicas de compra: registro, carrito, checkout, pedido y mis pedidos
 * (usan includes/publico_layout.php). Reutiliza las variables de marca de landing.css.
 * Incluye: estructura de página, avisos, formularios, líneas del carrito, resumen, opciones de
 * envío, mapa de ubicación, estados de pedido y tablas.
 */

/* ---------- Estructura de página ---------- */
/* Espaciado de la página y altura mínima para que el pie no suba en páginas cortas */
.pagina{padding-block:28px 64px;min-height:60vh}
/* Títulos de las páginas de compra */
.pagina h1{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:800;margin-bottom:20px}
.pagina h2{font-size:1.2rem;margin:0 0 12px}
/* Botones de la cabecera un poco más compactos en estas páginas */
.cabecera .boton{min-height:40px;padding:6px 16px;font-size:.9rem}
/* Insignia amarilla con el número de artículos del carrito */
.insignia{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--amarillo);color:var(--grafito);font-size:.8rem;font-weight:800;padding:0 6px;margin-left:6px}
/* "Caja": tarjeta blanca con borde suave, base de casi todas las secciones */
.caja{background:#fff;border:1px solid #e3e0da;border-radius:var(--radio);padding:20px;margin-bottom:20px}
/* Dos columnas (contenido principal y resumen) desde 900 px */
.dos{display:grid;gap:24px}
@media (min-width:900px){.dos{grid-template-columns:1.5fr 1fr;align-items:start}}

/* ---------- Avisos ---------- */
.aviso{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:.95rem}
/* Tipos de aviso: error (rojo), ok (verde) e info (azul) */
.aviso--error{background:#fde8e6;color:#8c1d18}
.aviso--ok{background:#e3f4e6;color:#14612a}
.aviso--info{background:#e8f0fe;color:#1a3d8f}
/* Un aviso vacío no ocupa espacio */
.aviso:empty{display:none}

/* ---------- Formularios ---------- */
/* Campo = etiqueta + control apilados */
.campo{display:grid;gap:6px;margin-bottom:14px}
.campo label{font-weight:600;font-size:.9rem}
/* Controles de 46 px de alto mínimo (cómodos al tacto) con borde y esquinas redondeadas */
.campo input,.campo select,.campo textarea{font:inherit;padding:12px 14px;border:1.5px solid #cfcac1;border-radius:12px;min-height:46px;width:100%;background:#fff;color:var(--grafito)}
/* Foco visible: anillo amarillo y borde naranja */
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:3px solid var(--amarillo);border-color:var(--naranja)}
.campo small{color:var(--acero)}
/* Dos campos por fila desde 600 px */
.fila2{display:grid;gap:14px}
@media (min-width:600px){.fila2{grid-template-columns:1fr 1fr}}
/* Variantes de botón: a todo el ancho, claro (secundario) y deshabilitado */
.boton--bloque{width:100%}
.boton--claro{background:#fff;color:var(--grafito);border-color:#cfcac1}
.boton--claro:hover{background:var(--hueso);border-color:var(--grafito)}
.boton[disabled]{opacity:.55;cursor:not-allowed}
/* Tarjeta centrada para registro/login */
.autenticacion{max-width:460px;margin:20px auto}

/* ---------- Carrito ---------- */
/* Línea del carrito: foto de 72 px y datos al lado */
.linea{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid #eee}
.linea:last-child{border-bottom:0}
.linea__foto{width:72px;height:72px;border-radius:12px;background:var(--hueso);overflow:hidden;display:grid;place-items:center;color:var(--naranja)}
.linea__foto img{width:100%;height:100%;object-fit:cover}
.linea__info a{font-weight:600;text-decoration:none}
.linea__info small{display:block;color:var(--acero)}
/* Pie de la línea: cantidad, precio y "Quitar" */
.linea__pie{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:8px}
/* Control de cantidad: botones − y + con el número en medio, dentro de una píldora */
.cantidad{display:inline-flex;border:1.5px solid #cfcac1;border-radius:999px;overflow:hidden}
.cantidad button{width:40px;height:40px;border:0;background:#fff;font-size:1.2rem;cursor:pointer}
.cantidad button:hover{background:var(--hueso)}
.cantidad span{display:grid;place-items:center;min-width:36px;font-weight:600}
/* Botón con aspecto de enlace rojo ("Quitar") */
.enlace{background:none;border:0;color:#b3261e;cursor:pointer;font:inherit;text-decoration:underline;padding:8px}
/* Precio en naranja con la tipografía de marca */
.precio{font-family:var(--f-titulo);font-weight:800;color:var(--naranja)}
/* Resumen: lista de definición (etiqueta a la izquierda, valor a la derecha) */
.resumen dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 12px}
.resumen dt{color:var(--acero)}
.resumen dd{margin:0;text-align:right;font-weight:600}
/* Fila del total: más grande, naranja y separada por una línea */
.resumen .total{font-family:var(--f-titulo);font-size:1.3rem;color:var(--naranja);border-top:1px solid #e3e0da;padding-top:10px;margin-top:4px}
/* Estado vacío (carrito sin productos, sin pedidos...) */
.vacio{text-align:center;padding:60px 0;color:var(--acero)}

/* ---------- Opciones de envío (checkout) ---------- */
/* Cada opción es una tarjeta con un botón de radio; la elegida se resalta (selector :has) */
.opcion{display:flex;gap:12px;align-items:flex-start;border:2px solid #e3e0da;border-radius:14px;padding:14px;margin-bottom:10px;cursor:pointer}
.opcion:has(input:checked){border-color:var(--naranja);background:#fff7f0}
.opcion input{margin-top:5px;accent-color:var(--naranja);width:18px;height:18px}
.opcion strong{display:block}
.opcion small{color:var(--acero)}
/* Contenido adicional de la opción elegida (ubicación, dirección...) con barra naranja a la izquierda */
.sub-opcion{margin:0 0 16px 4px;padding-left:16px;border-left:4px solid var(--naranja)}

/* ---------- Pedidos ---------- */
/* Etiqueta de estado: base gris y color según el estado del pedido o del pago */
.estado{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.8rem;font-weight:700;background:#e8e6e0}
.estado--pendiente_pago{background:#fff1cc;color:#7a5a00}
.estado--pago_en_revision{background:#e8f0fe;color:#1a3d8f}
/* Estados positivos en verde */
.estado--pagado,.estado--preparando,.estado--enviado,.estado--entregado,.estado--conciliado{background:#e3f4e6;color:#14612a}
/* Estados negativos en rojo */
.estado--cancelado,.estado--rechazado{background:#fde8e6;color:#8c1d18}
/* Tablas de detalle y de pagos */
table.tabla{width:100%;border-collapse:collapse}
table.tabla th,table.tabla td{text-align:left;padding:10px 8px;border-bottom:1px solid #eee;vertical-align:top}
table.tabla th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--acero)}
/* Contenedor con scroll horizontal para tablas anchas en celular */
.scroll-x{overflow-x:auto}
/* Datos de una cuenta de pago (pago móvil / transferencia) */
.cuenta{background:var(--hueso);border-radius:12px;padding:12px 14px;margin-bottom:10px;font-size:.95rem}
.cuenta strong{font-family:var(--f-titulo)}
/* Dato que se copia al tocarlo: subrayado punteado */
.copiable{cursor:pointer;border-bottom:1px dashed var(--acero)}

/* ---------- Mapa de ubicación (checkout y configuración) ---------- */
/* Marco del mapa de Leaflet: necesita una altura fija para dibujarse; esquinas redondeadas y borde suave */
.mapa-ubicacion{height:300px;border-radius:14px;border:1px solid #cfcac1;margin:10px 0;overflow:hidden;z-index:0}
/* Fila con los botones de acción debajo del mapa */
.mapa-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
/* En pantallas grandes el mapa es un poco más alto */
@media (min-width:900px){.mapa-ubicacion{height:340px}}

/* ---------- Campo de contraseña con botón "Mostrar/Ocultar" (registro) ---------- */
/* Contenedor relativo: permite colocar el botón encima, al borde derecho del campo */
.clave-wrap{position:relative}
/* El campo deja espacio a la derecha para que el texto no quede debajo del botón */
.clave-wrap input{padding-right:92px}
/* Botón pequeño con aspecto de enlace, alineado verticalmente al centro del campo */
.clave-ver{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:34px;padding:0 12px;border:0;border-radius:8px;background:var(--hueso);color:var(--grafito);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.clave-ver:hover{background:#e8e6e0}