/* App de clientes (/restaurantes): restaurantes Pro por ciudad.
   Un solo estilo (colores del ícono B): blanco, amarillo y negro, con la línea amarilla de carretera. */
.capp{
  --cbg:#fff; --ccard:#fff; --cfg:#16130f; --cmuted:#6b675f; --cline:#ebe8e1; --cchip:#fff; --cshadow:0 6px 22px rgba(22,19,15,.09);
  --cbar:#fff; --cbar-ink:#16130f; --cbar-sub:#6b675f; --cbar-line:#e2ded5; --csearch:#f4f2ed; --cload:#fff; --cload-ink:#16130f;
  background:var(--cbg); color:var(--cfg); min-height:100vh; min-height:100dvh}
:root{color-scheme:light} html:has(.capp){background:#fff}

/* barra de arriba */
.cbar{background:var(--cbar);color:var(--cbar-ink);padding-top:env(safe-area-inset-top)}
.cbar-in,.chero,.cmain{max-width:640px;margin:0 auto;padding-inline:16px}
.cbar-in{display:flex;align-items:center;gap:10px;padding-block:14px 6px}
.cbar .blogo{font-size:26px}
.ccity{margin-left:auto;display:inline-flex;align-items:center;gap:6px;max-width:58%;padding:8px 12px;border-radius:999px;border:1px solid var(--cbar-line);background:transparent;font-weight:700;font-size:14px}
.ccity span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccity svg,.csearch svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ccity svg{stroke:currentColor} .ccity i{font-style:normal;opacity:.7;font-size:11px}
.chero{padding-block:12px 22px}
.chero h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,11vw,56px);line-height:.98;text-transform:uppercase;margin:6px 0 8px;letter-spacing:.005em}
.chero h1 span{display:inline-block;margin-top:.08em;color:#16130f;background:var(--brand);padding:.02em .14em 0;border-radius:4px}
.chero p{margin:0 0 16px;color:var(--cbar-sub);font-size:14.5px;max-width:36ch}
.csearch{display:flex;align-items:center;gap:10px;background:var(--csearch);color:#17150f;border-radius:14px;padding:0 14px;box-shadow:0 0 0 3px rgba(255,194,26,.0);transition:box-shadow .2s}
.csearch:focus-within{box-shadow:0 0 0 3px var(--brand)}
.csearch svg{color:#8a8274}
.csearch input{flex:1;border:0;background:transparent;padding:14px 0;font-size:16px;outline:none;color:#17150f}

/* filtros */
.cmain{padding-block:18px 40px}
.cchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px}
.cchips::-webkit-scrollbar{display:none}
.cchip{flex:none;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;border:1px solid var(--cline);background:var(--cchip);font-weight:700;font-size:14px;transition:background .15s,color .15s,border-color .15s}
.cchip.on{background:var(--asphalt);color:var(--brand);border-color:var(--asphalt)}
.cchip .dot{width:8px;height:8px;border-radius:50%;background:#2fbf63;box-shadow:0 0 0 3px rgba(47,191,99,.2)}
.ctitle{font-size:15px;font-weight:800;margin:20px 0 12px;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.ctitle #ccount{font-family:var(--display);font-weight:400;font-size:24px;line-height:1;padding-bottom:2px;border-bottom:3px solid var(--brand)}
.ctitle small{color:var(--cmuted);font-weight:600}

/* tarjetas */
.clist{display:grid;gap:16px}
@media (min-width:600px){.clist{grid-template-columns:1fr 1fr}}
.ccard{display:block;text-decoration:none;background:var(--ccard);border-radius:18px;overflow:hidden;box-shadow:var(--cshadow);border:1px solid var(--cline);
  opacity:0;transform:translateY(14px);animation:cin .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0ms);transition:transform .18s}
.ccard:active{transform:scale(.98)}
@keyframes cin{to{opacity:1;transform:none}}
.ccover{position:relative;aspect-ratio:16/8.5;background:var(--asphalt);overflow:hidden}
.ccover::after{content:"";position:absolute;inset:auto 0 0;height:5px;background:repeating-linear-gradient(90deg,var(--brand) 0 26px,transparent 26px 44px)}
.ccover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.ccard:hover .ccover img{transform:scale(1.04)}
.ccover-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:30px;text-transform:uppercase;color:var(--brand);padding:16px;text-align:center}
.cbadge,.cdeliv{position:absolute;top:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;backdrop-filter:blur(6px)}
.cbadge{left:10px;background:rgba(18,17,14,.72);color:#fff}
.cbadge i{width:7px;height:7px;border-radius:50%;background:#2fbf63}
.cbadge.off i{background:#ff6a52}
.cdeliv{right:10px;background:var(--brand);color:var(--asphalt)}
.cbody{display:flex;align-items:center;gap:12px;padding:12px 14px 14px;position:relative}
.clogo{width:58px;height:58px;border-radius:16px;object-fit:cover;flex:none;margin-top:-34px;border:3px solid var(--ccard);background:var(--ccard);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.clogo.alpha{object-fit:contain;padding:4px}
.clogo.ph{display:grid;place-items:center;background:var(--brand);color:var(--asphalt);font-family:var(--display);font-size:28px}
.ctext{display:flex;flex-direction:column;min-width:0;flex:1}
.ctext b{font-size:17px;line-height:1.2;font-weight:800}
.ctext small{color:var(--cmuted);font-weight:600;font-size:13px}
.cmeta{color:var(--cmuted);font-size:12.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgo{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--asphalt);font-weight:800;transition:transform .2s}
.ccard:hover .cgo{transform:translateX(3px)}

/* sin restaurantes */
.cempty{text-align:center;background:var(--ccard);border:1px dashed var(--cline);border-radius:18px;padding:30px 20px}
.cempty-ic{font-size:40px} .cempty h3{margin:8px 0 6px;font-size:19px} .cempty p{color:var(--cmuted);margin:0 0 16px}

/* para dueños */
.cown{display:flex;flex-direction:column;gap:3px;margin-top:28px;padding:16px 18px;border-radius:16px;background:var(--asphalt);color:var(--asphalt-ink);text-decoration:none;border-left:6px solid var(--brand)}
.cown b{color:var(--brand);font-size:16px} .cown span{font-size:13.5px;opacity:.85}

/* hoja de ciudades */
.csheet{position:fixed;inset:0;z-index:50}
.csheet-bg{position:absolute;inset:0;background:rgba(10,9,7,.55);opacity:0;transition:opacity .25s}
.csheet-in{position:absolute;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;max-height:80vh;overflow:auto;background:var(--ccard);color:var(--cfg);border-radius:22px 22px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);border-top:5px solid var(--brand)}
.csheet.on .csheet-bg{opacity:1} .csheet.on .csheet-in{transform:none}
.csheet-grip{display:block;width:44px;height:5px;border-radius:9px;background:var(--cline);margin:2px auto 12px}
.csheet h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:28px;margin:0}
.ccities{display:grid;gap:8px;margin-top:14px}
.ccities button{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;text-align:left;padding:13px 16px;border-radius:14px;border:1px solid var(--cline);background:var(--cbg)}
.ccities b{font-size:16px} .ccities small{color:var(--cmuted);grid-row:2}
.ccities em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-weight:800;background:var(--brand);color:var(--asphalt);border-radius:999px;min-width:30px;padding:3px 9px;text-align:center}

/* pantalla al abrir un restaurante */
.cload{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--cload);color:var(--cload-ink);opacity:0;transition:opacity .25s}
.cload.on{opacity:1}
.cload-ring{position:relative;width:132px;height:132px;display:grid;place-items:center;transform:scale(.6);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.cload.on .cload-ring{transform:none}
.cload-ring::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:4px solid rgba(255,194,26,.18);border-top-color:var(--brand);animation:cspin .8s linear infinite}
.cload-ring img,.cload-ring span{width:132px;height:132px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 10px 30px rgba(22,19,15,.18)}
.cload-ring span{display:grid;place-items:center;background:var(--brand);color:var(--asphalt);font-family:var(--display);font-size:64px}
.cload b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:30px;margin-top:14px;text-align:center;padding-inline:20px}
.cload small{opacity:.7}
@keyframes cspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.ccard{animation:none;opacity:1;transform:none}.cload-ring::before{animation-duration:2s}}