/* Black Tap · riel vertical de familias a la izquierda de los platos (igual que Don Gato) */
/* Pedido: encabezado en una línea y buscador flexible */
main .titulo.text-4xl.leading-none{white-space:nowrap}
main label.w-52{width:auto;flex:0 1 13rem;min-width:8.5rem}
@media (min-width:1024px) and (max-width:1279px){
  [class*="lg:grid-cols-[minmax(0,1fr)_25rem]"]{grid-template-columns:minmax(0,1fr) 21rem!important}
}
html,body{overflow-x:hidden}
/* Platos más grandes dentro del riel (fotos se ven mejor) */
@media (min-width:900px){
div:has(> div.flex.flex-wrap.gap-2.px-4.pb-3 > button > span.whitespace-nowrap) > div.flex-1.overflow-y-auto > div.grid.bt-platos > button{aspect-ratio:4/3.2}
}
/* Pedido · Opción A: riel vertical de familias a la izquierda de los platos (tablet y computadora) */
@media (min-width:900px){
div:has(> div.flex.flex-wrap.gap-2.px-4.pb-3 > button > span.whitespace-nowrap){display:grid!important;grid-template-columns:188px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);align-items:start}
div:has(> div.flex.flex-wrap.gap-2.px-4.pb-3 > button > span.whitespace-nowrap) > *{grid-column:1/-1}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap){grid-column:1;grid-row:3;align-self:stretch;flex-direction:column;flex-wrap:nowrap!important;overflow-x:hidden!important;overflow-y:auto!important;gap:6px;padding:0 0 16px 24px!important;min-height:0}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap) > button{width:100%;min-height:52px;padding:0 12px!important;border-radius:14px!important;font-size:15px!important;justify-content:flex-start;gap:10px}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap) > button span.whitespace-nowrap{white-space:normal;text-align:left;line-height:1.15}
div:has(> div.flex.flex-wrap.gap-2.px-4.pb-3 > button > span.whitespace-nowrap) > div.flex-1.overflow-y-auto{grid-column:2;grid-row:3;align-self:stretch;min-height:0;height:100%;padding-left:16px!important}
}
@media (min-width:900px) and (max-width:1199px){
div:has(> div.flex.flex-wrap.gap-2.px-4.pb-3 > button > span.whitespace-nowrap){grid-template-columns:164px minmax(0,1fr)}
div:has(> div.flex.flex-wrap.gap-2.px-4.pb-3 > button > span.whitespace-nowrap) > div.flex-1.overflow-y-auto > div.grid.bt-platos{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (min-width:1200px) and (max-width:1535px){
div:has(> div.flex.flex-wrap.gap-2.px-4.pb-3 > button > span.whitespace-nowrap) > div.flex-1.overflow-y-auto > div.grid.bt-platos{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* Un color por familia en su ícono (se repite cada 7 familias) */
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap) > button:nth-child(7n+2) svg{color:#C9961A}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap) > button:nth-child(7n+3) svg{color:#D0642A}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap) > button:nth-child(7n+4) svg{color:#3E9B6A}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap) > button:nth-child(7n+5) svg{color:#3F74B5}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap) > button:nth-child(7n+6) svg{color:#C2410C}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap) > button:nth-child(7n+7) svg{color:#7C5CC4}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap) > button:nth-child(7n+8) svg{color:#1F8A99}
/* Botones de familia más compactos (pedido de Dani) */
@media (min-width:900px){
div:has(> div.flex.flex-wrap.gap-2.px-4.pb-3 > button > span.whitespace-nowrap){grid-template-columns:150px minmax(0,1fr)!important}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap){gap:4px!important;padding:0 0 12px 16px!important}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap) > button{min-height:40px!important;padding:4px 10px!important;border-radius:10px!important;font-size:13px!important;gap:8px}
main div.flex.flex-wrap.gap-2.px-4.pb-3:has(> button > span.whitespace-nowrap) > button svg{width:15px;height:15px;flex:none}
div:has(> div.flex.flex-wrap.gap-2.px-4.pb-3 > button > span.whitespace-nowrap) > div.flex-1.overflow-y-auto{padding-left:12px!important}
}
/* Platos más chicos: más por fila (antes 2-3 por fila en tablet) */
@media (min-width:900px){
div:has(> div.flex.flex-wrap.gap-2.px-4.pb-3 > button > span.whitespace-nowrap) > div.flex-1.overflow-y-auto > div.grid.bt-platos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:8px!important}
div:has(> div.flex.flex-wrap.gap-2.px-4.pb-3 > button > span.whitespace-nowrap) > div.flex-1.overflow-y-auto > div.grid.bt-platos > button{aspect-ratio:4/3.3}
}