.contenedor { width: min(100% - 28px, 760px); margin-inline: auto; }
.barra { position: sticky; top: 0; z-index: 50; background: rgba(11, 11, 12, .92); backdrop-filter: blur(10px); border-bottom: 2px solid var(--rojo); padding: 10px 0; }
main { padding: 18px 0 70px; display: grid; gap: 14px; }
.tarjeta { padding: 18px; }
.acceso { max-width: 440px; margin: 4vh auto 0; width: 100%; }
.acceso h1 { font-size: 1.5em; }
.acceso .enlaces { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .92em; }
.acceso button.enlace { background: none; border: 0; color: var(--dorado2); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.ver-clave { position: relative; }
.ver-clave button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--gris); cursor: pointer; font-size: .85em; padding: 6px; }
.codigo { font-size: 2em; letter-spacing: .45em; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }

.hola { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6em; font-weight: 900; background: linear-gradient(135deg, var(--rojo2), var(--rojo-osc)); border: 2px solid var(--dorado); }
.hola h1 { margin: 0; font-size: 1.4em; }
.secciones { display: flex; gap: 6px; overflow-x: auto; }
.secciones button { flex: none; border-radius: 999px; border: 1px solid var(--linea); background: var(--panel); padding: .45em 1em; font-weight: 700; cursor: pointer; }
.secciones button.on { background: var(--rojo); border-color: var(--rojo2); }

.direcciones { display: grid; gap: 12px; }
.direccion { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 12px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--linea); }
.direccion .mapa { height: 110px; border-radius: 10px; cursor: default; }
.direccion .sin-mapa { height: 110px; border-radius: 10px; display: grid; place-items: center; text-align: center; font-size: .8em; color: var(--gris); background: #121012; border: 1px dashed var(--linea); padding: 8px; }
.direccion.principal { border-color: #6b5410; }
@media (max-width: 520px) { .direccion { grid-template-columns: 1fr; } .direccion .mapa, .direccion .sin-mapa { height: 140px; } }
.etiquetas { display: flex; gap: 8px; flex-wrap: wrap; }
.etiquetas label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: .4em .9em; border-radius: 999px; border: 1px solid var(--linea); background: var(--panel2); color: var(--blanco); cursor: pointer; }
.etiquetas input { width: auto; min-height: 0; accent-color: var(--rojo2); }
.etiquetas label:has(input:checked) { border-color: var(--rojo2); background: rgba(179, 18, 31, .25); }
.pedido-item { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--linea); text-decoration: none; color: inherit; }
.pedido-item:hover { border-color: #4a4347; }
.peligro-zona { border-color: #5a1a22; }