/* Lo Recibimos — estilos. Colores: petróleo (confianza) y ámbar (paquete). */
:root {
  --fondo: #F4F6F7; --tarjeta: #fff; --texto: #1B2A30; --suave: #5E6E74; --linea: #DDE3E6;
  --prim: #0F4C5C; --prim-2: #146577; --ambar: #E8A33D; --verde: #2E8B57; --rojo: #C0392B; --azul: #2D6CDF; --gris: #7A868B;
  --radio: 14px; --sombra: 0 1px 3px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); font-size: 16px; line-height: 1.4; }
h1, h2, h3 { margin: .2em 0 .6em; line-height: 1.2; }
h2 { font-size: 1.35rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
h3 { font-size: 1.05rem; }
a { color: var(--prim-2); }
small { color: var(--suave); }
.cargando { padding: 3rem 1rem; text-align: center; color: var(--suave); }

/* Barra y menú */
.barra { background: var(--prim); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; position: sticky; top: 0; z-index: 500; }
.marca-mini { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.marca-mini img { width: 30px; height: 30px; }
.quien { text-align: right; font-size: .9rem; display: flex; flex-direction: column; }
.quien small { color: #CFE3E8; }
.menu { display: flex; gap: .2rem; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--linea); padding: .3rem .5rem; position: sticky; top: 50px; z-index: 499; }
.menu a { flex: 1 0 auto; min-width: 58px; display: flex; flex-direction: column; align-items: center; padding: .35rem .35rem; border-radius: 10px; text-decoration: none; color: var(--suave); font-size: .78rem; }
.menu a span { font-size: 1.2rem; }
@media (max-width: 400px) { .menu a { font-size: .72rem; padding: .3rem .2rem; } }
.menu a.activo { background: #E6F0F2; color: var(--prim); font-weight: 700; }
main { max-width: 760px; margin: 0 auto; padding: 1rem 16px 4rem; }

/* Tarjetas y formularios */
.tarjeta { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1rem; margin-bottom: 1rem; }
label { display: block; font-weight: 600; font-size: .92rem; margin: .7rem 0 .25rem; }
input, select, textarea { width: 100%; font: inherit; padding: .7rem .8rem; border: 1px solid var(--linea); border-radius: 10px; background: #fff; margin-top: .25rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--prim-2); border-color: transparent; }
fieldset { border: 0; padding: 0; margin: .8rem 0; }
legend { font-weight: 600; font-size: .92rem; margin-bottom: .4rem; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.dos label { margin-top: .7rem; }
.ayuda { color: var(--suave); font-size: .85rem; margin: .3rem 0; }
.con-boton { display: flex; gap: .5rem; align-items: center; }
.con-boton input { margin-top: 0; }
.con-boton .btn { width: auto; flex: 0 0 auto; margin: 0; }
label .con-boton { margin-top: .25rem; }
.busca { margin: .6rem 0 1rem; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: .4rem; width: 100%; padding: .75rem 1rem; margin-top: .9rem; border: 0; border-radius: 12px; background: var(--prim); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.sec { background: #E6F0F2; color: var(--prim); }
.btn.rojo { background: var(--rojo); }
.btn.grande { padding: 1rem; font-size: 1.08rem; }
.btn.link { background: none; color: var(--prim-2); width: auto; padding: .3rem .4rem; margin: 0; font-weight: 600; }
.btn.google { background: #fff; color: var(--texto); border: 1px solid var(--linea); }
.btn.google span { font-weight: 800; color: #4285F4; }
.rojo-txt { color: var(--rojo) !important; }
.fila-btn { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.fila-btn .btn:not(.link) { flex: 1 1 140px; }
.acciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.acciones .btn { margin: 0; }

/* Estados */
.chip { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 99px; white-space: nowrap; }
.chip.verde { background: #E3F4EA; color: var(--verde); }
.chip.rojo { background: #FBE7E5; color: var(--rojo); }
.chip.ambar { background: #FCF0DC; color: #A86C0F; }
.chip.azul { background: #E5EDFC; color: var(--azul); }
.chip.gris { background: #ECEFF0; color: var(--gris); }
.alerta { background: #FCEDEB; color: #8E2A20; border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1rem; }
.nota { background: #FFF7E8; border-radius: 10px; padding: .6rem .8rem; }

/* Resumen */
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.dato { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: .9rem; text-decoration: none; color: var(--texto); border-left: 5px solid var(--prim-2); }
.dato b { display: block; font-size: 1.8rem; }
.dato span { font-size: .85rem; color: var(--suave); }
.dato.ambar { border-color: var(--ambar); }
.dato.rojo { border-color: var(--rojo); }

/* Listas */
.pestanas { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; }
.pestanas a { flex: 0 0 auto; padding: .45rem .8rem; border-radius: 99px; background: #fff; border: 1px solid var(--linea); text-decoration: none; color: var(--suave); font-size: .88rem; }
.pestanas a.activo { background: var(--prim); color: #fff; border-color: var(--prim); }
.lista { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.paq { display: block; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: .8rem 1rem; text-decoration: none; color: var(--texto); }
.paq.nuevo { border-left: 5px solid var(--ambar); }
.paq.apagado { opacity: .55; }
.paq-1 { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.paq-2 { color: var(--suave); font-size: .9rem; margin-top: .2rem; }
.paq-3 { color: var(--suave); font-size: .82rem; margin-top: .2rem; }
.vacio-txt { color: var(--suave); text-align: center; padding: 1.5rem 0; }
.vacio { text-align: center; padding: 2rem 1rem; }
.grande { font-size: 3rem; }
.volver { display: inline-block; margin-bottom: .5rem; text-decoration: none; }
details summary { cursor: pointer; color: var(--suave); margin: .5rem 0; }

/* Detalle */
.ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-bottom: .6rem; }
.ficha small { display: block; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .5rem; margin: .5rem 0; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; background: #eee; }
.historial { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--linea); }
.historial li { padding: 0 0 .9rem 1rem; position: relative; }
.historial li::before { content: ''; position: absolute; left: -7px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--prim-2); }
.historial p { margin: .2rem 0; color: var(--suave); font-size: .9rem; }

/* Recepción */
.opciones-condicion { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .4rem; }
.opcion { margin: 0; position: relative; }
.opcion input { position: absolute; opacity: 0; }
.opcion span { display: block; text-align: center; padding: .65rem .4rem; border: 2px solid var(--linea); border-radius: 10px; font-weight: 600; cursor: pointer; }
.opcion.ok input:checked + span { border-color: var(--verde); background: #E3F4EA; color: var(--verde); }
.opcion.mal input:checked + span { border-color: var(--rojo); background: #FBE7E5; color: var(--rojo); }
.opcion-linea { display: flex; gap: .6rem; align-items: center; font-weight: 500; }
.opcion-linea input { width: auto; margin: 0; }
.resultados { display: flex; flex-direction: column; gap: .3rem; }
.resultados button { text-align: left; padding: .6rem .8rem; border: 1px solid var(--linea); background: #fff; border-radius: 10px; font: inherit; cursor: pointer; }
.fotos-lista { display: flex; gap: .5rem; flex-wrap: wrap; }
.mini { position: relative; width: 84px; height: 84px; }
.mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.mini button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--rojo); color: #fff; font-weight: 800; cursor: pointer; }
.foto-btn { margin-top: .5rem; }

/* Cliente */
.casillero { text-align: center; border-top: 6px solid var(--ambar); }
.casillero .cod { font-size: 2rem; font-weight: 800; letter-spacing: 2px; color: var(--prim); }
.dir { background: var(--fondo); border-radius: 10px; padding: .8rem; text-align: left; white-space: pre-wrap; font-family: inherit; font-weight: 600; }
.pin { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--linea); }
.pin b, .pin-txt { font-size: 1.2rem; letter-spacing: 3px; color: var(--prim); }
.pin-grande { font-size: 3rem; font-weight: 800; letter-spacing: 10px; color: var(--prim); background: #FFF7E8; border-radius: 14px; padding: .5rem; margin: .8rem 0; }
.pin-grande.chico { font-size: 1.6rem; letter-spacing: 3px; }
.pin-input { font-size: 2rem; text-align: center; letter-spacing: 12px; }
.mapa { height: 300px; border-radius: 12px; margin: .6rem 0; z-index: 1; }

/* Entrada */
.entrada { max-width: 420px; margin: 0 auto; padding: 2rem 16px; }
.entrada .marca { text-align: center; margin-bottom: 1rem; }
.entrada .marca img { width: 84px; height: 84px; }
.entrada .marca h1 { color: var(--prim); font-size: 2rem; }
.entrada .marca p { color: var(--suave); }
.separador { text-align: center; color: var(--suave); font-size: .85rem; margin: 1rem 0 .2rem; }

/* Ventanas */
.modal-fondo { position: fixed; inset: 0; background: rgba(10,25,30,.5); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.modal { background: #fff; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 1.2rem 16px 1.5rem; position: relative; }
.modal.ancho { max-width: 640px; }
.modal .cerrar { position: absolute; top: .4rem; right: .6rem; border: 0; background: none; font-size: 1.8rem; cursor: pointer; color: var(--suave); }
@media (min-width: 640px) { .modal-fondo { align-items: center; } .modal { border-radius: 18px; } }
.exito { text-align: center; }
.confirmar-txt { font-size: 1.05rem; margin-top: 1.2rem; }
.escaner { width: 100%; border-radius: 12px; background: #000; }
.fila-hub { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); }

#toast { visibility: hidden; opacity: 0; position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(150%); background: var(--texto); color: #fff; padding: .75rem 1.1rem; border-radius: 12px; z-index: 2000; transition: transform .25s; max-width: calc(100% - 32px); }
#toast.on { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { background: var(--rojo); }
.google-caja { display: flex; justify-content: center; min-height: 44px; }