:root {
  --fondo: #f3f7fa;
  --superficie: #ffffff;
  --texto: #1b2b34;
  --suave: #5d717d;
  --borde: #d5e0e7;
  --marca: #0277bd;
  --marca-oscuro: #01579b;
  --acento: #00acc1;
  --error: #c62828;
  --ok: #2e7d32;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0f1a20;
    --superficie: #182831;
    --texto: #e6eef2;
    --suave: #9fb3bf;
    --borde: #2a3f4b;
    --marca: #4fc3f7;
    --marca-oscuro: #81d4fa;
    --acento: #4dd0e1;
    --error: #ef9a9a;
    --ok: #81c784;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
}

.barra {
  background: var(--marca);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.barra .logo { display: flex; }
.barra img { height: 34px; width: auto; background: #fff; border-radius: 8px; padding: 3px 6px; }
.barra .lema { font-size: 0.8rem; opacity: 0.9; }

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

h1 { font-size: 1.35rem; margin: 0 0 6px; }
h2 { font-size: 1.05rem; margin: 22px 0 8px; }
p.ayuda { color: var(--suave); margin: 0 0 16px; font-size: 0.92rem; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.opciones { display: grid; gap: 10px; }
.opcion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.opcion:hover, .opcion:focus-visible { border-color: var(--marca); }
.opcion img { width: 52px; height: 52px; object-fit: contain; }
.opcion strong { display: block; }
.opcion span { color: var(--suave); font-size: 0.88rem; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista a {
  display: block;
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.lista small { display: block; color: var(--suave); }
.lista a:hover, .lista a:focus-visible { border-color: var(--marca); color: var(--marca-oscuro); }

label { display: block; font-weight: 600; font-size: 0.9rem; margin: 14px 0 4px; }
label small { font-weight: 400; color: var(--suave); }
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"],
input[type="url"], input[type="number"], input[type="search"], textarea, select {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
textarea { min-height: 80px; resize: vertical; }

.telefono { display: flex; align-items: stretch; }
.telefono .prefijo {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  color: var(--suave);
  font-weight: 600;
}
.telefono input { border-radius: 8px; }

.recordar { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-weight: 400; }
.recordar input { width: 18px; height: 18px; }

.boton {
  display: block;
  width: 100%;
  padding: 13px 16px;
  margin-top: 18px;
  font: inherit;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: var(--marca);
  border: 0;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover, .boton:focus-visible { background: var(--marca-oscuro); }
.boton.secundario { background: transparent; color: var(--marca); border: 1px solid var(--marca); }
.boton.discreto { background: transparent; color: var(--suave); border: 0; font-weight: 400; margin-top: 8px; }

.error { color: var(--error); font-size: 0.85rem; margin: 4px 0 0; }
.aviso { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 0.92rem; }
.aviso.error { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }
.aviso.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }

.resumen { color: var(--suave); font-size: 0.9rem; margin: 0 0 12px; }
.resumen strong { color: var(--texto); }

.perfil { display: flex; align-items: center; gap: 12px; }
.perfil img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.perfil small { color: var(--suave); display: block; }

.pie { text-align: center; margin-top: 22px; font-size: 0.92rem; color: var(--suave); }
.pie a { color: var(--marca); }
.invita { text-align: center; margin: 14px 0 0; font-size: 0.85rem; }
.invita button { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); background: none; border: 0; font: inherit; cursor: pointer; padding: 6px 10px; border-radius: 999px; }
.invita button:hover { color: var(--marca); text-decoration: underline; }
.invita svg { width: 16px; height: 16px; flex: none; }

/* ---- Pedidos y catalogo ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip {
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: inherit;
  text-decoration: none;
  font-size: 0.88rem;
}
.chip.activo { background: var(--marca); border-color: var(--marca); color: #fff; }

.fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fila .principal { min-width: 0; }
.fila .principal strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila small { color: var(--suave); display: block; }
.fila .monto { font-weight: 700; white-space: nowrap; }

.estado {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--marca) 16%, transparent);
  color: var(--marca-oscuro);
}
.estado.e8 { background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error); }
.estado.e7, .estado.e6 { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }

.producto { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.producto:last-of-type { border-bottom: 0; }
.producto img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--fondo); }
.producto .datos { flex: 1; min-width: 0; }
.producto .datos strong { display: block; }
.producto input.cantidad { width: 76px; text-align: center; }

.lineas { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.lineas th, .lineas td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.lineas td.num, .lineas th.num { text-align: right; white-space: nowrap; }
.lineas .no-disponible { color: var(--suave); text-decoration: line-through; }
.lineas tfoot td { font-weight: 700; border-bottom: 0; }

.cotizar-linea { padding: 10px 0; border-bottom: 1px solid var(--borde); }
.cotizar-linea .cabecera { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cotizar-linea .cabecera input { width: 18px; height: 18px; }
.cotizar-linea .campos { display: grid; grid-template-columns: 90px 1fr; gap: 8px; margin-top: 6px; }
.cotizar-linea label { margin: 0 0 2px; font-size: 0.8rem; font-weight: 400; color: var(--suave); }

.contacto { display: inline-block; margin-top: 6px; color: var(--marca); font-weight: 600; }
details.cancelar { margin-top: 16px; }
details.cancelar summary { cursor: pointer; color: var(--error); font-size: 0.92rem; }
.boton.peligro { background: var(--error); }
.acciones .boton { margin-top: 10px; }

/* ---- Campanita de avisos ---- */
.barra .lema { flex: 1; }
.campana { position: relative; color: #fff; text-decoration: none; font-size: 1.35rem; line-height: 1; padding: 4px; }
.insignia {
  position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #d32f2f; color: #fff; font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.insignia[hidden] { display: none; }
.aviso-item { display: block; color: inherit; text-decoration: none; }
.aviso-item.nuevo { border-left: 4px solid var(--marca); }
.aviso-item small { color: var(--suave); display: block; }
.tabla-admin { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabla-admin td, .tabla-admin th { padding: 6px 4px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }

/* ---- Iconos de tipo de comercio ---- */
.icono-tipo { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; vertical-align: middle; font-size: 1.1em; }
.icono-tipo img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.lista a .icono-tipo { width: 1.8em; height: 1.8em; font-size: 1.25em; margin-right: 6px; }
.lista a .icono-tipo { width: 2.4em; height: 2.4em; }
.chip .icono-tipo { width: 1.7em; height: 1.7em; margin-right: 2px; }

/* Mercadito: cuadricula de 2 por fila, parecida al marketplace de Facebook. */
.mercadito-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.m-card { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.m-foto { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--fondo); }
.m-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
img.vacia { object-fit: contain; padding: 22%; opacity: 0.5; }
.m-cuenta { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; font-size: 0.75rem; color: #fff; background: rgba(0, 0, 0, 0.6); border-radius: 999px; }
.m-cuerpo { flex: 1; padding: 10px 10px 6px; min-width: 0; }
.m-precio { font-size: 1.15rem; font-weight: 800; }
.m-nombre { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; height: 2.6em; margin: 2px 0 6px; font-size: 0.92rem; }
.m-vendedor { display: flex; gap: 8px; align-items: baseline; font-size: 0.82rem; }
.m-vendedor a { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); font-weight: 600; text-decoration: none; }
.m-nota { flex: none; color: var(--suave); white-space: nowrap; }
.m-lugar { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--suave); }
.m-acciones { padding: 4px 10px 10px; display: grid; gap: 6px; }
.m-acciones { min-height: 92px; align-content: start; }
.m-acciones .boton { margin-top: 0; padding: 8px; font-size: 0.82rem; }
.m-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.m-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.m-galeria a:first-child { grid-column: 1 / -1; }
.m-galeria a, .m-galeria > img { display: block; }
.m-galeria img { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; object-fit: cover; display: block; background: var(--fondo); }
.m-galeria > img { grid-column: 1 / -1; }
.vista-foto { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; margin: 6px 0; }

/* Visor de fotos tipo riel (js/visor.js) */
.visor { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.88); cursor: zoom-out; }
.visor[hidden] { display: none; }
.visor-riel { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.visor-riel::-webkit-scrollbar { display: none; }
.visor-celda { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; padding: 56px 16px; }
.visor-celda img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; cursor: default; }
.visor button { position: absolute; z-index: 1; width: 44px; height: 44px; font-size: 1.8rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.18); border: 0; border-radius: 50%; cursor: pointer; }
.visor button:hover, .visor button:focus-visible { background: rgba(255, 255, 255, 0.32); }
.visor button[hidden] { display: none; }
.visor-cerrar { top: 14px; right: 14px; }
.visor-ant { left: 10px; top: 50%; transform: translateY(-50%); }
.visor-sig { right: 10px; top: 50%; transform: translateY(-50%); }
.visor-cuenta { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.85rem; }

/* Buscador del mercadito y de los comercios */
.buscar { display: flex; gap: 8px; margin: 0 0 12px; }
.buscar input { flex: 1; min-width: 0; }
.buscar .boton { width: auto; margin: 0; padding: 0 18px; }

/* Lista de comercios: una tarjeta por fila, foto cuadrada a la izquierda */
.c-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.c-card { display: flex; gap: 12px; align-items: stretch; padding: 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; }
.c-card:hover, .c-card:focus-within { border-color: var(--marca); }
.c-foto { position: relative; flex: none; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; background: var(--fondo); display: block; }
.c-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.c-foto img.vacia { object-fit: contain; padding: 22%; opacity: 0.5; }
a.c-foto { cursor: zoom-in; }
.c-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; color: inherit; text-decoration: none; }
.c-nombre { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-nota { color: var(--suave); font-size: 0.85rem; white-space: nowrap; }
.c-lugar, .c-horario { display: block; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ficha del comercio: una sola tarjeta */
.c-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.c-acciones .boton { width: auto; margin: 0; padding: 9px 16px; font-size: 0.9rem; }
.c-info { margin: 0; display: grid; gap: 10px; }
.c-info dt { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--suave); }
.c-info dd { margin: 0; }

/* Ficha del comercio: texto chico a la izquierda; foto y botones a la derecha */
.c-ficha { display: flex; gap: 14px; align-items: flex-start; padding: 16px; margin-bottom: 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; }
.c-ficha-datos { flex: 1; min-width: 0; font-size: 0.82rem; }
.c-ficha-datos h1 { margin: 0 0 2px; font-size: 1.2rem; line-height: 1.2; }
.c-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; margin-bottom: 8px; color: var(--suave); }
.c-desc { margin: 0 0 10px; color: var(--texto); }
.c-info.chico { gap: 8px; }
.c-info.chico dt { font-size: 0.68rem; }
.c-info.chico dd { font-size: 0.82rem; }
.c-ficha-lado { flex: none; width: 132px; display: grid; gap: 8px; }
.c-foto.grande { width: 132px; height: 132px; border-radius: 14px; }
.c-ficha-lado .boton { margin-top: 0; padding: 9px 6px; font-size: 0.82rem; width: 100%; }
.boton.chico { width: auto; margin: 0; padding: 7px 14px; font-size: 0.85rem; }
.boton.carrito { background: var(--ok); }
.boton.carrito { display: flex; align-items: center; justify-content: center; gap: 6px; }
.icono-carrito { flex: none; }
.car-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.car-txt small { font-size: 0.74rem; font-weight: 600; opacity: 0.92; white-space: nowrap; }
.boton.carrito:hover, .boton.carrito:focus-visible { filter: brightness(0.92); background: var(--ok); }

/* Productos: buscador y lista deslizable con alto para unos 10 productos */
.p-buscar { margin-bottom: 8px; }
.p-lista { --fila: 65px; max-height: calc(var(--fila) * 10); overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.p-fila { display: flex; align-items: center; gap: 12px; height: var(--fila); padding: 8px 0; border-bottom: 1px solid var(--borde); }
.p-fila:last-of-type { border-bottom: 0; }
.p-fila img { width: 48px; height: 48px; flex: none; border-radius: 8px; object-fit: cover; background: var(--fondo); }
.p-fila .datos { flex: 1; min-width: 0; }
.p-fila .datos strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-fila .datos small { color: var(--suave); }

/* Contador de enteros: menos, numero y mas */
.paso { display: inline-flex; align-items: stretch; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.paso button { width: 40px; font: inherit; font-size: 1.2rem; font-weight: 700; color: var(--marca); background: var(--superficie); border: 0; cursor: pointer; }
.paso button:hover, .paso button:focus-visible { background: var(--fondo); }
.paso input { width: 52px; padding: 8px 4px; text-align: center; font: inherit; color: var(--texto); background: var(--superficie); border: 0; border-left: 1px solid var(--borde); border-right: 1px solid var(--borde); border-radius: 0; }
.paso.grande button { width: 54px; font-size: 1.5rem; }
.paso.grande input { width: 76px; font-size: 1.3rem; }

/* Modales (agregar producto y carrito) */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.55); }
.modal-caja { position: relative; width: 100%; max-width: 360px; max-height: 92vh; overflow-y: auto; padding: 22px 18px 18px; text-align: center; background: var(--superficie); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
.modal-caja.ancha { max-width: 520px; text-align: left; }
.modal-caja h2 { margin: 0 24px 4px 0; }
.modal-caja:not(.ancha) h2 { margin: 0 24px 4px; }
.modal-cerrar { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; font-size: 1.6rem; line-height: 1; color: var(--suave); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.modal-cerrar:hover, .modal-cerrar:focus-visible { background: var(--fondo); }
.total-linea { margin: 14px 0 0; font-size: 1.05rem; }
.total-linea strong { font-size: 1.25rem; }
.car-lineas { display: grid; gap: 0; margin-top: 10px; }
.car-linea { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.car-datos { min-width: 0; }
.car-datos strong { display: block; overflow-wrap: anywhere; }
.car-datos small { color: var(--suave); }
.car-linea .quitar { grid-column: 1 / -1; justify-self: start; padding: 0; font: inherit; font-size: 0.8rem; color: var(--error); background: transparent; border: 0; cursor: pointer; }
.car-linea .paso button { width: 34px; }
.car-linea .paso input { width: 44px; }

[hidden] { display: none !important; }

/* Boton de WhatsApp: icono y luego el numero */
.boton.wa { display: inline-flex; align-items: center; gap: 8px; width: auto; margin-top: 12px; padding: 9px 16px; font-size: 0.85rem; }
.icono-wa { flex: none; }
.contacto .icono-wa { vertical-align: -3px; }

/* Numero de telefono mostrado: icono de WhatsApp y luego el numero (sin +502) */
.tel-wa { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
a.tel-wa:hover, a.tel-wa:focus-visible { text-decoration: underline; }
.tel-wa .icono-wa { width: 16px; height: 16px; color: #1da851; }
.boton .icono-wa { vertical-align: -3px; margin-right: 4px; }

/* Campo de imagen (js/fotos.js): "Desde archivo" y "Cámara" */
.foto-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 8px; }
.foto-vista { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--borde); }
.foto-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.foto-nombre { flex-basis: 100%; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foto-error { flex-basis: 100%; }
.boton.chico { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.boton.chico svg { flex: none; }

/* Camara (webcam o camara del dispositivo) */
.camara { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.85); }
.camara[hidden] { display: none; }
.camara-caja { width: 100%; max-width: 520px; display: grid; gap: 10px; }
.camara video { width: 100%; max-height: 68vh; border-radius: 12px; background: #000; object-fit: contain; }
.camara-botones { display: grid; gap: 8px; }
.camara .boton { margin-top: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.camara .boton.discreto { color: #fff; margin-top: 0; }

/* Administracion de productos: tarjeta con foto grande y precio destacado */
.pr-card { display: grid; grid-template-columns: 112px 1fr; gap: 6px 14px; align-items: start; }
.pr-foto { position: relative; display: block; width: 112px; height: 112px; border-radius: 14px; overflow: hidden; background: var(--fondo); }
.pr-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-foto img.vacia { object-fit: contain; padding: 22%; opacity: 0.5; }
a.pr-foto { cursor: zoom-in; }
.pr-datos { min-width: 0; }
.pr-nombre { display: block; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.pr-precio { font-size: 1.45rem; font-weight: 800; margin: 2px 0 6px; }
.pr-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-etiqueta { padding: 2px 9px; font-size: 0.72rem; font-weight: 700; color: var(--ok); background: rgba(46, 125, 50, 0.14); border-radius: 999px; }
.pr-etiqueta.apagada { color: var(--error); background: rgba(198, 40, 40, 0.12); }
.pr-etiqueta.mercadito { color: var(--marca); background: rgba(2, 119, 189, 0.12); }
.pr-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.pr-acciones form { margin: 0; }
.pr-acciones .boton.chico { padding: 6px 12px; font-size: 0.8rem; }
.pr-editar { grid-column: 1 / -1; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--borde); }

/* Foto de un producto en la lista de compra: se amplia con el visor */
.p-foto { flex: none; display: block; width: 48px; height: 48px; cursor: zoom-in; }
.p-fila .p-foto img { width: 100%; height: 100%; }

/* Enlace de navegacion arriba de la pantalla (el de abajo se mantiene) */
.volver { margin: 0 0 12px; font-size: 0.92rem; }
.volver a { color: var(--marca); font-weight: 600; text-decoration: none; }
.volver a:hover, .volver a:focus-visible { text-decoration: underline; }

/* ---- Menu principal: secciones por rol y baldosas con icono ---- */
.menu .saludo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.saludo img { width: 58px; height: 58px; flex: none; object-fit: cover; border-radius: 50%; background: var(--superficie); border: 2px solid var(--borde); }
.saludo h1 { margin: 0 0 2px; }

.rol { --rol: #0277bd; margin-bottom: 18px; padding: 14px; background: var(--superficie); border: 1px solid var(--borde); border-top: 5px solid var(--rol); border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.rol-cliente { --rol: #0277bd; }
.rol-negocio { --rol: #2e7d32; }
.rol-reparto { --rol: #d96a00; }
.rol-agregar { --rol: #546e7a; }
.rol-vende { --rol: #8e24aa; }
.rol-admin { --rol: #5e35b1; }
.rol-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.rol-icono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: var(--rol); border-radius: 12px; }
.rol-titulo { flex: 1; min-width: 0; }
.rol-titulo h2 { margin: 0; font-size: 1.12rem; }
.rol-titulo small { color: var(--suave); }
.rol-editar { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.8rem; font-weight: 600; color: var(--rol); text-decoration: none; border: 1px solid var(--borde); border-radius: 999px; }
.rol-editar:hover, .rol-editar:focus-visible { border-color: var(--rol); }
.rol-editar .ico { width: 14px; height: 14px; }

.baldosas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.baldosa { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 108px; padding: 14px 8px; text-align: center; font-size: 0.95rem; font-weight: 700; line-height: 1.2; color: var(--texto); background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px; text-decoration: none; transition: transform 0.12s, box-shadow 0.12s; }
.baldosa small { font-size: 0.75rem; font-weight: 400; opacity: 0.85; }
.baldosa-icono { display: grid; place-items: center; width: 46px; height: 46px; color: #fff; background: var(--rol); border-radius: 50%; }
.baldosa:hover, .baldosa:focus-visible { border-color: var(--rol); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14); transform: translateY(-1px); }
.baldosa.principal { color: #fff; background: var(--rol); border-color: transparent; }
.baldosa.principal .baldosa-icono { background: rgba(255, 255, 255, 0.22); }
.baldosa.ancha { grid-column: 1 / -1; flex-direction: row; gap: 12px; min-height: 0; padding: 12px 16px; }
.baldosa.ancha .baldosa-icono { width: 38px; height: 38px; }
.insignia-nueva { position: absolute; top: 8px; right: 10px; min-width: 22px; padding: 1px 7px; font-size: 0.75rem; color: #fff; background: #c62828; border-radius: 999px; }
.rol > a.baldosa.ancha { margin-top: 0; }

.negocio { margin-bottom: 12px; padding: 12px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px; }
.negocio .baldosa { background: var(--superficie); }
.negocio-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.negocio-cab img { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 10px; background: var(--superficie); }
.negocio-cab strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado-pill { flex: none; padding: 2px 10px; font-size: 0.72rem; font-weight: 700; color: #2e7d32; background: rgba(46, 125, 50, 0.14); border-radius: 999px; }
.estado-pill.apagado { color: #c62828; background: rgba(198, 40, 40, 0.12); }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde); }
.interruptor small { color: var(--suave); }
.interruptor .boton { margin: 0; }
.boton.con-icono { display: flex; align-items: center; justify-content: center; gap: 8px; }
.boton .ico { width: 18px; height: 18px; flex: none; }
.rol > .boton.con-icono { margin-top: 4px; }
.rol .boton.secundario { color: var(--rol); border-color: var(--rol); }
.rol .boton.secundario:hover, .rol .boton.secundario:focus-visible { color: #fff; background: var(--rol); }
.baldosas > .baldosa:only-child { grid-column: 1 / -1; }

/* Términos y condiciones: casilla del registro y texto legal (página y modal) */
.acepto { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 4px; }
.acepto input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--marca); }
.acepto label { flex: 1 1 160px; margin: 0; }
.acepto .boton { width: auto; margin: 0; padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px; }
/* Ayuda de ubicación (registro): botón "?" y modal explicativo */
.gps-fila { display: flex; align-items: center; gap: 10px; }
.gps-fila .boton { flex: 1; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ayuda-btn { flex: none; width: 44px; height: 44px; font: inherit; font-size: 1.2rem; font-weight: 700; color: var(--marca); background: var(--superficie); border: 2px solid var(--marca); border-radius: 50%; cursor: pointer; }
.ayuda-btn:hover, .ayuda-btn:focus-visible { color: #fff; background: var(--marca); }
.ayuda-intro { margin: 6px 0 14px; color: var(--suave); line-height: 1.5; }
.ayuda-pasos { counter-reset: paso; margin: 0 0 16px; padding: 0; list-style: none; }
.ayuda-pasos li { counter-increment: paso; position: relative; margin-bottom: 10px; padding-left: 40px; line-height: 1.45; }
.ayuda-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--marca); border-radius: 50%; }
.ayuda-tarjetas { display: grid; gap: 10px; margin-bottom: 16px; }
.ayuda-tarjeta { padding: 12px 14px; background: var(--fondo); border: 1px solid var(--borde); border-left: 5px solid var(--acento); border-radius: 12px; }
.ayuda-tarjeta.actual { border-color: var(--marca); border-left-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.ayuda-tarjeta h3 { margin: 0 0 4px; font-size: 1rem; }
.ayuda-tarjeta p { margin: 0; font-size: 0.93rem; line-height: 1.45; color: var(--suave); }
.legal { font-size: 0.92rem; line-height: 1.5; text-align: left; }
.legal h2 { font-size: 1.05rem; margin: 22px 0 6px; }
.legal h3 { font-size: 0.96rem; margin: 14px 0 4px; }
.legal p, .legal ul { margin: 0 0 10px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal-fecha { color: var(--suave); }
.legal-resumen { padding: 10px 14px; margin: 10px 0 0; border-left: 4px solid var(--marca); border-radius: 8px; background: var(--fondo); }
.legal-resumen p, .legal-resumen ul { margin-bottom: 6px; }
.modal-caja.ancha .legal { margin: 8px 0 14px; }

/* Botón de instalar la aplicación */
.instalar { margin: 16px 0; }
.instalar .resumen { margin: 8px 0 0; text-align: center; }
/* Versión pequeña a la derecha del saludo: el botón se pega al borde y la ayuda ocupa su propia fila */
.instalar.compacto:not([hidden]) { display: contents; }
.instalar.compacto .boton { width: auto; margin: 0 0 0 auto; padding: 8px 12px; font-size: 0.88rem; }
.instalar.compacto .resumen { flex-basis: 100%; margin: 0; text-align: left; }

/* Envio por currier: datos y foto de la guia */
.dato-pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
.guia-foto { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; }
.guia-foto > span { font-size: 0.8rem; font-weight: 700; color: var(--suave); text-transform: uppercase; }
.guia-foto img { max-width: 160px; max-height: 160px; object-fit: cover; border: 1px solid var(--borde); border-radius: 10px; display: block; cursor: zoom-in; }
.currier-actual { padding: 10px 12px; margin-bottom: 10px; background: var(--fondo); border-radius: 10px; }

/* Envio en el pedido del cliente: repartidor o currier */
.envio-card { margin-bottom: 12px; padding: 14px; background: var(--superficie); border: 1px solid var(--borde); border-left: 5px solid #d96a00; border-radius: 14px; }
.envio-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.envio-cab h2 { flex: 1; margin: 0; font-size: 1.05rem; }
.envio-icono { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; background: #d96a00; border-radius: 10px; }
.envio-tipo { padding: 2px 10px; font-size: 0.72rem; font-weight: 700; color: #d96a00; background: rgba(217, 106, 0, 0.12); border-radius: 999px; }
.envio-persona { margin-bottom: 8px; }
.envio-persona strong { display: block; font-size: 1.05rem; }
.envio-persona small { color: var(--suave); }
.envio-wa { margin-top: 4px; }
.envio-ayuda { display: block; margin-top: 6px; color: var(--suave); font-size: 0.78rem; }
.envio-fila { display: inline-flex; align-items: center; gap: 5px; color: #d96a00; font-weight: 600; }
.envio-fila .ico { width: 14px; height: 14px; }

/* Etiqueta de envio arriba del total del pedido */
.envio-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; font-size: 0.8rem; font-weight: 700; color: #d96a00; background: rgba(217, 106, 0, 0.12); border-radius: 999px; }
.envio-pill .ico { width: 15px; height: 15px; flex: none; }
.lineas tfoot tr.fila-etiqueta td { padding-top: 12px; text-align: right; border-top: 0; }

/* Cotizar: total grande y siempre a la vista, arriba a la derecha */
.cot-cab { position: sticky; top: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: -16px -16px 12px; padding: 14px 16px; background: var(--superficie); border-bottom: 1px solid var(--borde); border-radius: 12px 12px 0 0; }
.cot-cab h2 { margin: 0; flex: 1; }
.cot-total { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.cot-total > small { color: var(--suave); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cot-total strong { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--marca-oscuro); }
.cot-total .cot-desglose { text-transform: none; letter-spacing: 0; font-size: 0.74rem; }
.cot-total .cot-aviso { color: var(--error); text-transform: none; letter-spacing: 0; font-size: 0.74rem; font-weight: 700; }
.no-disponible-cot .campos { opacity: 0.45; }
.cotizar-linea input.revisar { border-color: #d96a00; background: rgba(217, 106, 0, 0.1); }
.cot-revisar { display: block; margin-top: 4px; color: #d96a00; font-weight: 700; font-size: 0.78rem; }

/* Compartir el negocio */
.compartir-opciones { display: grid; gap: 8px; margin-top: 12px; }
.compartir-opciones .boton { margin-top: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
.compartir-boton { display: flex; align-items: center; justify-content: center; gap: 6px; }
.contador { display: block; text-align: right; font-size: 0.75rem; color: var(--suave); }
button.baldosa { font-family: inherit; cursor: pointer; width: 100%; }
.favorito-boton { width: 100%; }
.favorito-boton.activo { color: #fff; background: #c62828; border-color: #c62828; }
.c-ficha-lado form { margin: 0; display: contents; }

/* Busqueda inteligente (modal de filtros), etiqueta de lugar y paginacion de /comprar */
.boton-inteligente { margin: 0 0 12px; }
.filtros-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; font-size: 0.9rem; color: var(--suave); }
.filtros-activos strong { color: inherit; }
.lugar-etiqueta { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--suave); }
.busqueda-form { text-align: left; }
.busqueda-form label { display: block; margin: 12px 0 4px; font-weight: 600; }
.busqueda-form .opciones { display: flex; gap: 8px; }
.busqueda-form .opciones label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 10px; font-weight: 500; background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; }
.busqueda-form .opciones input { width: auto; margin: 0; }
.busqueda-form .acciones { display: grid; gap: 8px; margin-top: 16px; }
.paginas { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 14px; }
.paginas .boton { width: auto; margin: 0; padding: 0 16px; }
.paginas span { color: var(--suave); font-size: 0.9rem; }

/* Portada anonima: botones Ingresar / Registrarse en la barra superior */
.barra-acceso { margin-left: auto; display: flex; gap: 8px; }
.barra-acceso .boton { width: auto; margin: 0; padding: 6px 12px; font-size: 0.85rem; }
.barra-acceso .boton { background: #fff; color: var(--marca); border: 1px solid #fff; }
.barra-acceso .boton.secundario { background: transparent; color: #fff; }

/* Logo MercaditoGuate (mas ancho): en pantallas angostas se achica para que quepan Ingresar / Registrarse. */
@media (max-width: 480px) {
  .barra { gap: 8px; }
  .barra img { height: 27px; padding: 3px 5px; }
  .barra-acceso { gap: 6px; }
  .barra-acceso .boton { padding: 6px 9px; font-size: 0.8rem; }
}