/* ============================================================
   cli-ui.css · Portal del cliente (tienda mayorista)
   Rediseño Stitch 29/09 — "CDPG · Tienda B2B & Portal de Pedidos"
   Lo usan: tienda_cliente.html  (clases propias con prefijo cl-)
   Redefine también las clases que ya usaba el JS de la página
   (.card .chip .tab .grid .drawer .citem .pedcard .est .qbtn ...)
   para no tocar el HTML que se arma por innerHTML.
   ------------------------------------------------------------
   OJO: va DESPUÉS de cdpg-ui.css en el <head> (le tiene que ganar).
   ============================================================ */

/*  LOS TOKENS APUNTAN A MONEED  (05/11/2026)
    Cada uno lleva su color original de respaldo, por si la hoja de
    Moneed no llega. Las dos pantallas que cargan esta hoja se
    convirtieron juntas, asi que ninguna la usa sin Moneed.

    LA ESCALA DE PIEDRA ESTABA ESCRITA A MANO en las 332 reglas (202
    colores). Se agrego como tokens, cada uno al de Moneed que cumple
    ESE papel --no al que tenga un color parecido--, porque un gris de
    texto mandado a un token de fondo deja, en oscuro, texto gris
    oscuro sobre fondo oscuro.

    `--line` Y `--muted` SE PUEDEN USAR ACA. En produccion no se podia,
    porque `cdpg-ui.css` tambien los declara y el KDS la sigue cargando;
    estas dos pantallas dejan de cargarla.                          */
:root{
  --cl-orange:var(--blue,#E65100);   --cl-orange-d:#BF4300;
  --cl-orange-l:var(--soft,#FFF3E0); --cl-orange-s:#FFF8F0;
  --cl-bone:var(--frame,#FBF9F5);    --cl-surface:var(--card,#fff);
  --cl-brd:var(--line,#E8E3D9);
  --cl-dark:var(--text,#1F2421);     --cl-muted:var(--muted,#667085);
  /*  `--muted-2` NO sirve para texto: es el gris de lo deshabilitado
      (#bdbdc2) y deja un dato a contraste 1,9. Se queda el propio.  */
  --cl-faint:#94A3B8;
  --cl-ok:#2E7D32;      --cl-cold:#1E3A8A;      --cl-warn:#B45309;
  --cl-sh:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.05));
  --cl-sh-card:var(--shadow-sm, 0 4px 12px -2px rgba(28,25,23,.06));
  --cl-sh-drawer:var(--shadow-pop, -8px 0 24px rgba(0,0,0,.08));
  --cl-r:16px;

  /*  LA ESCALA DE PIEDRA, que antes estaba escrita a mano. Los nombres
      dicen el PAPEL, no el tono: `ink` es texto, `tile` es fondo,
      `brd` es linea.                                               */
  --cl-ink2:var(--text-2,#44403C);        /* texto secundario        */
  --cl-ink3:#57534E;                      /* texto terciario         */
  --cl-tile:var(--tile,#FAFAF9);          /* fondo de descanso       */
  --cl-tile2:var(--tile-2,#F5F5F4);       /* fondo un escalon mas    */
  --cl-brd2:var(--line-2,#E7E5E4);        /* linea mas firme         */
  --cl-inverso:#1C1917;                   /* superficie oscura       */
  --cl-sobre-inverso:#fff;                /* y lo que va encima      */
  --cl-ok-l:var(--green-soft,#DCFCE7);    /* verde palido            */
  --cl-ok-ink:#166534;                    /* y su tinta              */
  --cl-warn-l:#FEF3C7;                    /* ambar palido            */
  --cl-warn-ink:#78350F;
  --cl-rojo:#E11D48;
}

/*  EN OSCURO SE ACLARAN LAS TINTAS Y SE VUELVEN TRANSLUCIDOS LOS
    FONDOS PALIDOS. Moneed no tiene un ambar, asi que ese va a mano.
    El bloque solo existe donde Moneed esta: con `[data-theme='dark']`,
    que lo pone su propio arranque.                                 */
[data-theme='dark']{
  /*  un escalon mas claro, para que el chip elegido se distinga del
      fondo oscuro; sigue leyendose con texto blanco.             */
  --cl-inverso:#3A3A40;
  --cl-faint:#9A9AA3;
  --cl-ink3:#C9C9CF;
  --cl-ok:#86D96F;        --cl-ok-ink:#86D96F;
  --cl-cold:#8FB0FF;      --cl-warn:#F0B860;   --cl-warn-ink:#F0B860;
  --cl-rojo:#FF9D8C;
  --cl-warn-l:rgba(245,165,36,.16);
  --cl-orange-s:rgba(230,81,0,.10);
  --cl-orange-d:#FF8A3D;
}

/*  LA LETRA BASE SE REPONE. Moneed pone `body{font-size:13px}` y estas
    pantallas venian con los 16 del navegador: sin esto encogen 57
    elementos, y esta es la pantalla que ve el cliente.             */
body{ font-size:16px; }

/* ---------- Íconos (SVG de línea; reemplazan a los emojis) ---------- */
.cl-i{ width:18px; height:18px; flex:none; display:inline-block; vertical-align:-3px; }
.cl-i16{ width:16px; height:16px; vertical-align:-2px; }
.cl-i20{ width:20px; height:20px; vertical-align:-4px; }
.cl-i24{ width:24px; height:24px; vertical-align:-5px; }
.cl-i-suave{ opacity:.7; }
/* los contenedores que antes tenían un emoji ahora centran el ícono */
.cl-mark, .cl-av-ico, .cl-mh-ico, .cl-sug-ico, .cl-bolita, .cl-fav, .cl-quitar, .cl-vaciar,
.cl-tag, .cl-mnota, .cl-chip-ico{ display:inline-flex; align-items:center; justify-content:center; }
.cl-tag{ gap:5px; }
.cl-mnota{ justify-content:flex-start; gap:9px; }
.cl-mnota .cl-i{ flex:none; color:var(--cl-orange); }
.cl-sug .cl-sug-ico .cl-i{ color:var(--cl-orange-d); }
.chip .cl-i, .tab .cl-i, .btn .cl-i, .cl-panel-h h3 .cl-i, .cl-mcampo > label .cl-i{ flex:none; }
.cl-panel-h h3 .cl-i, .cl-mtit .cl-i{ color:var(--cl-orange); }
.cl-mcampo > label .cl-i{ color:var(--cl-orange); }
.chip.on .cl-i{ color:#ffffff; }
.cl-fav .cl-i{ color:var(--cl-ink3); }
.card .cl-fav svg[fill="currentColor"]{ color:var(--cl-rojo); }   /* favorito marcado */
.cl-lupa{ display:flex; align-items:center; color:var(--cl-faint); }
.cl-bolita .cl-i{ color:inherit; }
/* en los botones el ícono y el texto van alineados */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.btn, a.btn{ min-height:40px; }

/* ---------- Base ---------- */
/* el ancho incluye borde y relleno (si no, los campos se pasan de su caja) */
*, *::before, *::after{ box-sizing:border-box; }
body{
  background:var(--cl-bone) !important;
  color:var(--cl-dark);
  font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  letter-spacing:-.005em;
  margin:0;
}
body::before{ content:none !important; }   /* saca los degradados del diseño viejo */
.cl-wrap{ max-width:1720px; margin:0 auto; padding:0 16px; }

/* ---------- Barra de beneficios (arriba de todo) ---------- */
.cl-top{
  background:var(--cl-tile); border-bottom:1px solid var(--cl-brd);
  font-size:12px; font-weight:500; color:var(--cl-muted);
}
.cl-top .cl-top-in{
  max-width:1720px; margin:0 auto; padding:6px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.cl-top .cl-benes{ display:flex; align-items:center; gap:14px; overflow-x:auto; white-space:nowrap;
  -ms-overflow-style:none; scrollbar-width:none; }
.cl-top .cl-benes::-webkit-scrollbar{ display:none; }
.cl-top .cl-benes span{ display:inline-flex; align-items:center; gap:6px; color:var(--cl-ink2); }
.cl-top .cl-sep{ color:var(--cl-faint); }
.cl-top .cl-planta{ display:none; align-items:center; gap:7px; font-size:11px; font-weight:700;
  letter-spacing:.04em; color:var(--cl-muted); text-transform:uppercase; }
.cl-top .cl-dot-live{ width:8px; height:8px; border-radius:50%; background:#10B981; }
@media(min-width:860px){ .cl-top .cl-planta{ display:flex; } }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:40;
  margin:0; width:auto; max-width:none; border-radius:0;
  background:var(--cl-surface); border-bottom:1px solid var(--cl-brd);
  box-shadow:var(--cl-sh);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  display:block; padding:0;
}
header .cl-head-in{
  max-width:1720px; margin:0 auto; padding:11px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.logo{ display:flex; align-items:center; gap:12px; font-weight:800; color:var(--cl-dark); font-size:15px; letter-spacing:-.01em; }
.logo .cl-mark{
  width:40px; height:40px; border-radius:12px; flex:none;
  background:var(--cl-orange); color:#ffffff; font-size:19px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(230,81,0,.3);
}
.logo .cl-sub{ display:block; font-size:11.5px; font-weight:500; color:var(--cl-muted); letter-spacing:0; margin-top:2px; }
.cl-pill-b2b{ background:var(--cl-orange-l); color:var(--cl-orange); font-size:10px; font-weight:800;
  padding:2px 8px; border-radius:99px; text-transform:uppercase; letter-spacing:.06em; }

header .cl-head-in{ flex-wrap:nowrap; }
.cl-head-acc{ display:flex; gap:8px; align-items:center; flex:none; }

/* Pestañas dentro del encabezado (como el diseño) */
.cl-nav{
  display:none; align-items:center; gap:4px; background:var(--cl-tile); border:1px solid var(--cl-brd);
  padding:4px; border-radius:14px; flex:none;
}
@media(min-width:1180px){ .cl-nav{ display:flex; } }
.cl-nav .tab{ font-size:12px; padding:8px 14px; }
.cl-cont{ font-size:10.5px; font-weight:800; background:var(--cl-brd2); color:var(--cl-ink2); padding:1px 7px; border-radius:99px; }
.tab.on .cl-cont{ background:rgba(255,255,255,.25); color:#ffffff; }
.cl-cont.cl-saldo{ background:transparent; color:var(--cl-ok-ink); padding:0; }
.tab.on .cl-cont.cl-saldo{ color:#ffffff; }

/* Ficha del cliente en el header */
.cl-quien{
  display:none; align-items:center; gap:9px; background:var(--cl-tile); border:1px solid var(--cl-brd);
  padding:5px 10px; border-radius:12px; text-align:left; cursor:pointer; transition:.15s;
}
.cl-quien:hover{ background:var(--cl-surface); border-color:var(--cl-brd2); }
@media(min-width:900px){ .cl-quien{ display:flex; } }
.cl-quien .cl-ini{
  width:30px; height:30px; border-radius:10px; flex:none;
  background:var(--cl-orange-l); color:var(--cl-orange-d); border:1px solid var(--cl-orange-l);
  font-size:12px; font-weight:800; letter-spacing:.03em; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.cl-quien .cl-quien-txt{ min-width:0; }
.cl-quien b{ display:block; font-size:12px; color:var(--cl-dark); line-height:1.2; white-space:nowrap;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.cl-quien small{ display:block; font-size:10.5px; color:var(--cl-muted); line-height:1.2; white-space:nowrap;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.cl-quien .cl-chev{ color:var(--cl-faint); font-size:13px; line-height:1; margin-left:2px; }

/* ---------- Botones ---------- */
.btn{ border:none; border-radius:12px; font-weight:700; cursor:pointer; padding:9px 14px; font-size:13px;
      transition:.15s; font-family:inherit; }
.btn-p{ background:var(--cl-orange); color:#ffffff; box-shadow:0 2px 6px rgba(230,81,0,.25); }
.btn-p:hover{ background:var(--cl-orange-d); }
.btn-o{ background:var(--cl-surface); color:var(--cl-dark); border:1px solid var(--cl-brd); }
.btn-o:hover{ border-color:rgba(230,81,0,.45); color:var(--cl-orange-d); }
.btn-ghost{ background:var(--cl-tile); color:var(--cl-ink2); border:1px solid var(--cl-brd); }
.btn-ghost:hover{ background:var(--cl-surface); border-color:rgba(230,81,0,.4); color:var(--cl-orange-d); }
.cl-btn-amb{ background:var(--cl-orange-s); color:var(--cl-warn-ink); border:1px solid #FDE68A; }
.cl-btn-amb:hover{ background:var(--cl-warn-l); }

/* Carrito del header */
#cartBtn{ display:flex; align-items:center; gap:9px; background:var(--cl-orange); color:#ffffff; border:none;
  box-shadow:0 2px 6px rgba(230,81,0,.25); padding:9px 13px; }
#cartBtn:hover{ background:var(--cl-orange-d); color:#ffffff; }
/* el ícono necesita lugar propio: si no, la burbuja del contador le queda encima */
.cl-cart-ico{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; font-size:15px; line-height:1; flex:none; }
/* contador: blanco sobre el botón naranja (antes era negro y quedaba como un manchón) */
.badge{ position:absolute; top:-8px; right:-9px; background:var(--cl-surface); color:var(--cl-orange-d); border:1.5px solid var(--cl-orange);
  border-radius:99px; min-width:17px; height:17px; padding:0 4px; font-size:9.5px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  box-shadow:0 1px 3px rgba(28,25,23,.18); }
.cl-cart-tot{ background:rgba(255,255,255,.22); padding:3px 8px; border-radius:7px; font-size:11.5px; font-weight:700; }
.cl-ico{ display:inline-flex; align-items:center; gap:6px; }

/* ============================================================
   Blindaje del encabezado.
   cdpg-ui.css pinta con !important TODO lo que cuelga de <header>
   (`header span, header div, header button … color/background !important`).
   Por eso las iniciales salían negras sobre fondo negro y el botón del
   carrito perdía su color. Acá se reponen los colores propios.
   ============================================================ */
header .cl-mark{ background:var(--cl-orange) !important; color:#ffffff !important; }
header .cl-pill-b2b{ background:var(--cl-orange-l) !important; color:var(--cl-orange) !important; }
header .cl-sub{ color:var(--cl-muted) !important; }
header .cl-quien .cl-ini{ background:var(--cl-orange-l) !important; color:var(--cl-orange-d) !important;
  border:1px solid var(--cl-orange-l) !important; }
header .cl-quien b{ color:var(--cl-dark) !important; }
header .cl-quien small, header .cl-quien .cl-chev{ color:var(--cl-muted) !important; }
header .cl-nav .tab{ background:transparent !important; color:var(--cl-ink2) !important; border:none !important; }
header .cl-nav .tab.on{ background:var(--cl-orange) !important; color:#ffffff !important; }
header .cl-nav .tab .cl-cont{ background:var(--cl-brd2) !important; color:var(--cl-ink2) !important; }
header .cl-nav .tab.on .cl-cont{ background:rgba(255,255,255,.25) !important; color:#ffffff !important; }
header .cl-nav .tab .cl-cont.cl-saldo{ background:transparent !important; }
header #cartBtn{ background:var(--cl-orange) !important; color:#ffffff !important; border:none !important;
  border-radius:12px !important; }
header #cartBtn:hover{ background:var(--cl-orange-d) !important; }
header #cartBtn span{ color:#ffffff !important; }
header #cartBtn .cl-cart-tot{ background:rgba(255,255,255,.22) !important; }
header #cartBtn .badge{ background:var(--cl-surface) !important; color:var(--cl-orange-d) !important;
  border:1.5px solid var(--cl-orange) !important; }

/* ---------- Pestañas del portal ---------- */
.tabbar{
  display:flex; gap:4px; background:var(--cl-tile); border:1px solid var(--cl-brd);
  padding:4px; border-radius:14px; margin:0 0 18px; overflow-x:auto;
  -ms-overflow-style:none; scrollbar-width:none;
}
.tabbar::-webkit-scrollbar{ display:none; }
.tab{
  white-space:nowrap; padding:8px 15px; border-radius:10px; font-size:12.5px; font-weight:700;
  color:var(--cl-ink2); cursor:pointer; background:transparent; border:none; transition:.15s;
  display:flex; align-items:center; gap:7px; min-height:0;
}
.tab:hover{ color:var(--cl-dark); background:var(--cl-tile); }
.tab.on{ background:var(--cl-orange); color:#ffffff; box-shadow:var(--cl-sh); }

/* ---------- Avisos (corte de pedidos / entrega) ---------- */
.cl-aviso{
  border-radius:var(--cl-r); padding:14px 16px; margin-bottom:16px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--cl-warn-l); border:1px solid #FDE68A; color:var(--cl-warn-ink); box-shadow:var(--cl-sh);
}
.cl-aviso.cl-ok{ background:var(--cl-ok-l); border-color:#BBF7D0; color:var(--cl-ok-ink); }
.cl-aviso .cl-av-ico{
  width:40px; height:40px; border-radius:12px; flex:none; font-size:19px;
  display:flex; align-items:center; justify-content:center;
  background:var(--cl-warn-l); border:1px solid #FCD34D;
}
.cl-aviso.cl-ok .cl-av-ico{ background:var(--cl-ok-l); border-color:#86EFAC; }
.cl-aviso .cl-av-t{ font-size:13.5px; font-weight:800; color:var(--cl-dark); }
.cl-aviso .cl-av-p{ font-size:12px; color:var(--cl-ink3); margin-top:2px; line-height:1.45; }
.cl-aviso .cl-av-chip{ background:rgba(252,211,77,.45); color:var(--cl-warn-ink); font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:7px; white-space:nowrap; }
.cl-aviso.cl-ok .cl-av-chip{ background:var(--cl-ok-l); color:var(--cl-ok-ink); }

/* ---------- Bloque de reposición sugerida ---------- */
.cl-panel{
  background:var(--cl-surface); border:1px solid var(--cl-brd); border-radius:var(--cl-r);
  padding:16px; box-shadow:var(--cl-sh); margin-bottom:16px;
}
.cl-panel-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.cl-panel-h h3{ margin:0; font-size:13.5px; font-weight:800; color:var(--cl-dark); display:flex; align-items:center; gap:8px; }
.cl-panel-h .cl-h-hint{ font-size:11px; color:var(--cl-faint); font-weight:500; }
.cl-sug-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:760px){ .cl-sug-grid{ grid-template-columns:1fr 1fr; } }
.cl-sug{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 12px; border:1px solid var(--cl-brd); border-radius:12px; background:var(--cl-tile); transition:.15s;
}
.cl-sug:hover{ border-color:#FDBA74; }
.cl-sug .cl-sug-ico{ width:44px; height:44px; border-radius:11px; flex:none; background:var(--cl-orange-l);
  display:flex; align-items:center; justify-content:center; font-size:17px; }
/* miniatura del artículo (sale del catálogo) */
.cl-sug .cl-sug-ico.cl-sug-foto{ background-size:cover; background-position:center; background-color:var(--cl-tile2);
  border:1px solid var(--cl-brd); }
.cl-sug b{ display:block; font-size:12.5px; font-weight:700; color:var(--cl-dark); line-height:1.25; }
.cl-sug small{ display:block; font-size:11px; color:var(--cl-muted); margin-top:2px; }
.cl-sug button{
  flex:none; background:var(--cl-surface); color:var(--cl-orange); border:1px solid var(--cl-orange);
  font-weight:800; font-size:12px; padding:7px 11px; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; gap:5px; font-family:inherit;
}
.cl-sug button:hover{ background:var(--cl-orange-s); }

/* ---------- Destacados ---------- */
.carousel{ position:relative; border-radius:var(--cl-r); overflow:hidden; height:230px;
  background:var(--cl-inverso); box-shadow:var(--cl-sh-card); margin-bottom:16px; }
.slide{ position:absolute; inset:0; background-size:cover; background-position:center;
  display:flex; align-items:flex-end; opacity:0; transition:opacity .6s; }
.slide.on{ opacity:1; }
.slide .cap{ background:linear-gradient(transparent,rgba(0,0,0,.78)); color:#ffffff; width:100%; padding:18px 22px; }
.dots{ position:absolute; bottom:12px; right:16px; display:flex; gap:6px; }
.dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; }
.dot.on{ background:var(--cl-surface); width:20px; border-radius:99px; }

/* ---------- Buscador + chips ---------- */
.toolbar{ display:flex; gap:10px; align-items:center; margin:0 0 12px; }
.toolbar > .btn{ flex:none; white-space:nowrap; }
.cl-buscar{ position:relative; flex:1; min-width:0; }
.cl-buscar .cl-lupa{ position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--cl-faint); font-size:14px; pointer-events:none; }
.toolbar input#buscar,
.cl-buscar input#buscar{
  width:100% !important; padding:11px 14px 11px 36px !important; margin:0 !important;
  border:1px solid var(--cl-brd) !important; border-radius:12px !important; background:var(--cl-surface);
  font-size:13px !important; font-weight:500; color:var(--cl-dark); font-family:inherit;
  box-shadow:var(--cl-sh); min-height:44px !important;
}
.toolbar input#buscar:focus{ outline:none; border-color:var(--cl-orange) !important;
  box-shadow:0 0 0 3px rgba(230,81,0,.16); }
.chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:6px;
  -ms-overflow-style:none; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  white-space:nowrap; padding:7px 14px; border-radius:99px; font-size:12px; font-weight:600;
  background:var(--cl-surface); color:var(--cl-ink2); border:1px solid var(--cl-brd); cursor:pointer; box-shadow:none;
  transition:.15s; min-height:0; -webkit-backdrop-filter:none; backdrop-filter:none;
  display:inline-flex; align-items:center; gap:6px;
}
.chip:hover{ background:var(--cl-tile2); color:var(--cl-dark); border-color:var(--cl-brd2); }
.chip.on{ background:var(--cl-inverso); color:#ffffff; border-color:var(--cl-inverso); font-weight:800; box-shadow:var(--cl-sh); }

/* ---------- Grilla de productos ----------
   Va con clase propia .cl-grid: cdpg-ui.css fuerza `.grid` a 1 columna en celular
   (regla pensada para el dashboard) y acá son mosaicos de artículos. */
.cl-grid{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important; gap:16px !important; }
.cl-grid-kpi{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important; gap:14px !important; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.card{
  background:var(--cl-surface); border:1px solid var(--cl-brd); border-radius:var(--cl-r); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--cl-sh);
  -webkit-backdrop-filter:none; backdrop-filter:none; transition:box-shadow .2s, border-color .2s, transform .2s;
}
.card:hover{ box-shadow:var(--cl-sh-card); border-color:var(--cl-brd2); transform:none; }
.card.cl-en-carro{ border:2px solid #FB923C; }
.card .ph{ height:176px; background-size:cover; background-position:center; background-color:var(--cl-tile2); position:relative; }
.card .bd{ padding:14px; display:flex; flex-direction:column; gap:7px; flex:1; }
.card .nm{ font-size:13.5px; font-weight:800; color:var(--cl-dark); line-height:1.3; }
.card .meta{ font-size:11px; color:var(--cl-muted); font-weight:500; }
.card .cl-desc{ font-size:12px; color:var(--cl-ink3); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .cl-precio-row{
  margin-top:auto; padding-top:11px; border-top:1px solid var(--cl-brd);
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
}
.card .cl-pr-lbl{ font-size:10px; color:var(--cl-faint); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; display:block; }
.card .pr{ font-size:18px; font-weight:800; color:var(--cl-dark); letter-spacing:-.02em; }
.card .pr small{ font-size:11px; color:var(--cl-faint); font-weight:600; }
.cl-fav{
  position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
  background:var(--cl-surface); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; box-shadow:var(--cl-sh); border:none;
}
.cl-fav:hover{ background:var(--cl-surface); }
.cl-tag{
  position:absolute; top:10px; left:10px; background:rgba(28,25,23,.8); color:#ffffff;
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:7px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.cl-tag.cl-frio{ background:rgba(30,58,138,.82); }
.cl-tag.cl-tag-paq{ top:auto; bottom:10px; left:10px; background:var(--cl-surface); color:var(--cl-ink2); }
.card.cl-en-carro .cl-tag-paq{ bottom:auto; top:40px; }
.cl-chip-n{ font-size:10.5px; font-weight:800; color:var(--cl-faint); }
.chip.on .cl-chip-n{ color:rgba(255,255,255,.75); }
.cl-en-carro-tag{
  position:absolute; bottom:8px; left:8px; background:var(--cl-orange); color:#ffffff;
  font-size:10px; font-weight:800; padding:3px 8px; border-radius:6px; box-shadow:var(--cl-sh);
}

/* ---------- Stepper de cantidad ---------- */
.qtyrow{ display:flex; align-items:center; gap:2px; border:1px solid var(--cl-brd); background:var(--cl-tile);
  border-radius:12px; padding:2px; flex:none; }
.qtyrow.cl-activo{ border-color:var(--cl-orange); background:rgba(255,237,213,.5); }
.qbtn{
  width:32px; height:32px; flex:none; border:none; border-radius:9px; cursor:pointer;
  background:var(--cl-surface); color:var(--cl-ink2); font-size:16px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(0,0,0,.05);
  min-height:0 !important; font-family:inherit;
}
.qbtn:hover{ background:var(--cl-tile2); }
.qtyrow.cl-activo .qbtn.cl-mas{ background:var(--cl-orange); color:#ffffff; }
.qtyrow.cl-activo .qbtn.cl-mas:hover{ background:var(--cl-orange-d); }
.qinput{
  width:46px !important; min-width:0 !important; height:32px; flex:none;
  text-align:center; border:none !important; background:transparent; padding:0 !important;
  font-size:13px !important; font-weight:800; color:var(--cl-dark); font-family:inherit;
  min-height:0 !important; -moz-appearance:textfield;
}
.qinput:focus{ outline:none; }
.qinput::-webkit-outer-spin-button,.qinput::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- Catálogo + carrito al costado ----------
   En pantalla grande el carrito deja de ser un cajón y queda fijo a la derecha
   (como el diseño); en pantalla chica vuelve a ser el cajón que se desliza. */
.cl-layout{ display:block; }
.cl-main{ min-width:0; }
@media(min-width:1180px){
  .cl-layout{ display:flex; align-items:flex-start; gap:18px; }
  .cl-main{ flex:1; min-width:0; }
  body.cl-cat .drawer{
    position:sticky !important; top:92px; transform:none !important; flex:none;
    width:360px; height:calc(100vh - 118px); border:1px solid var(--cl-brd); border-radius:var(--cl-r);
    box-shadow:var(--cl-sh-card); overflow:hidden; z-index:1;
  }
  body.cl-cat .drawer .cl-cerrar{ display:none; }   /* fijo: no hace falta la ✕ */
  body:not(.cl-cat) .drawer{ /* en Mis pedidos / Mi cuenta sigue siendo cajón */ }
  body.cl-cat .overlay{ display:none !important; }
}

/* ---------- Carrito (drawer) ---------- */
.drawer{
  position:fixed; top:0; right:0; height:100%; width:400px; max-width:94vw; background:var(--cl-surface);
  box-shadow:var(--cl-sh-drawer); transform:translateX(100%); transition:transform .3s;
  z-index:60; display:flex; flex-direction:column; border-left:1px solid var(--cl-brd);
}
.drawer.on{ transform:translateX(0); }
.drawer h3{ margin:0; padding:15px 18px; border-bottom:1px solid var(--cl-brd); background:var(--cl-tile);
  font-size:14px; font-weight:800; color:var(--cl-dark); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.drawer h3 small{ display:block; font-size:11px; font-weight:500; color:var(--cl-muted); margin-top:2px; }
.drawer .cl-vaciar{ background:none; border:none; color:var(--cl-faint); font-size:11.5px; font-weight:700;
  cursor:pointer; font-family:inherit; padding:4px; }
.drawer .cl-vaciar:hover{ color:var(--cl-rojo); }
.drawer .body{ flex:1; overflow-y:auto; padding:14px 16px; }
.drawer .foot{ border-top:1px solid var(--cl-brd); padding:16px; background:var(--cl-tile); }
.cl-envio-box{ padding:13px 16px; background:var(--cl-orange-s); border-bottom:1px solid var(--cl-orange-l); }
.cl-envio-barra{ width:100%; height:6px; border-radius:99px; background:var(--cl-brd2); overflow:hidden; }
.cl-envio-barra i{ display:block; height:6px; border-radius:99px; background:var(--cl-orange); transition:width .3s; }
.citem{ display:flex; gap:11px; padding:11px; border:1px solid var(--cl-brd); border-radius:12px; background:var(--cl-surface);
  margin-bottom:10px; transition:.15s; }
.citem:hover{ border-color:#FDBA74; }
.citem .cph{ width:54px; height:54px; border-radius:10px; background-size:cover; background-position:center;
  background-color:var(--cl-tile2); flex:none; border:1px solid var(--cl-brd); }
.citem .cl-quitar{ background:none; border:none; color:var(--cl-faint); cursor:pointer; font-size:13px;
  padding:0 2px; font-family:inherit; }
.citem .cl-quitar:hover{ color:var(--cl-dark); }
.cl-sug-carro{ padding:12px; border:1px dashed var(--cl-brd2); border-radius:12px; background:var(--cl-tile); text-align:center; }
.cl-sug-carro p{ margin:0; font-size:11.5px; color:var(--cl-muted); line-height:1.4; }
.cl-sug-carro button{ margin-top:5px; background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:800; color:var(--cl-orange); }
.cl-sug-carro button:hover{ text-decoration:underline; }
.overlay{ position:fixed; inset:0; background:rgba(28,25,23,.42); z-index:50; display:none; }
.overlay.on{ display:block; }

/* ---------- Tarjetas de pedidos / cuenta ---------- */
.pedcard{
  background:var(--cl-surface); border:1px solid var(--cl-brd); border-radius:var(--cl-r); box-shadow:var(--cl-sh);
  padding:15px 16px; margin-bottom:12px;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.est{ padding:3px 10px; border-radius:99px; font-size:11px; font-weight:800; white-space:nowrap; }
.cl-kpi{ background:var(--cl-surface); border:1px solid var(--cl-brd); border-radius:var(--cl-r); box-shadow:var(--cl-sh); padding:15px 16px; }
.cl-kpi .cl-kpi-l{ font-size:10.5px; font-weight:700; color:var(--cl-faint); text-transform:uppercase; letter-spacing:.06em; }
.cl-kpi .cl-kpi-v{ font-size:22px; font-weight:800; color:var(--cl-dark); letter-spacing:-.02em; margin-top:4px; }
.cl-kpi .cl-kpi-h{ font-size:11.5px; color:var(--cl-muted); margin-top:3px; }
.cl-tabla{ width:100%; border-collapse:collapse; font-size:12.5px; }
.cl-tabla th{ text-align:left; font-size:10.5px; font-weight:700; color:var(--cl-faint);
  text-transform:uppercase; letter-spacing:.05em; padding:8px 6px; border-bottom:1px solid var(--cl-brd); }
.cl-tabla td{ padding:9px 6px; border-top:1px solid var(--cl-brd); color:var(--cl-dark); }
.cl-tabla tbody tr:hover{ background:var(--cl-tile); }
.cl-rank{ width:26px; height:26px; border-radius:8px; background:var(--cl-orange-l); color:var(--cl-orange);
  font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.cl-vacio{ text-align:center; color:var(--cl-faint); padding:34px 20px; font-size:13px; }

/* ============================================================
   Modales del portal (SweetAlert con html propio)
   .cl-modal  = confirmar pedido · .cl-modal-ped = seguimiento
   ============================================================ */
.swal2-popup.cl-modal, .swal2-popup.cl-modal-ped{
  border-radius:18px; padding:0; overflow:hidden; font-family:'Sora',system-ui,sans-serif;
  background:var(--cl-surface); border:1px solid var(--cl-brd);
}
.cl-modal .swal2-html-container, .cl-modal-ped .swal2-html-container{ margin:0; padding:0; font-size:13px; text-align:left; overflow:visible; }
.cl-modal .swal2-actions, .cl-modal-ped .swal2-actions{ margin:0; padding:14px 18px; background:var(--cl-tile);
  border-top:1px solid var(--cl-brd); width:100%; gap:9px;
  flex-flow:row-reverse wrap-reverse; }   /* el botón principal queda a la derecha */
.cl-modal .swal2-styled, .cl-modal-ped .swal2-styled{ border-radius:12px; font-weight:700; font-size:12.5px;
  padding:11px 18px; margin:0; box-shadow:none; font-family:inherit; }
.cl-modal .swal2-confirm{ flex:1 1 58%; }
.cl-modal .swal2-cancel{ flex:1 1 34%; background:var(--cl-tile) !important; color:var(--cl-ink3) !important; }
.cl-modal .swal2-close, .cl-modal-ped .swal2-close{ color:var(--cl-faint); font-size:26px; margin:6px 8px 0 0; }
.cl-modal .swal2-close:focus, .cl-modal-ped .swal2-close:focus{ box-shadow:none; outline:none; }

.cl-mh{ display:flex; align-items:center; gap:11px; padding:16px 18px 13px; background:var(--cl-tile); border-bottom:1px solid var(--cl-brd); }
.cl-mh .cl-mh-ico{ width:38px; height:38px; border-radius:12px; flex:none; background:var(--cl-orange-l);
  color:var(--cl-orange); font-size:19px; display:flex; align-items:center; justify-content:center; }
.cl-mh h2{ margin:0; font-size:17px; font-weight:800; color:var(--cl-dark); letter-spacing:-.02em; line-height:1.15; }
.cl-mh small{ display:block; font-size:10.5px; font-weight:700; color:var(--cl-muted); text-transform:uppercase;
  letter-spacing:.06em; margin-top:3px; }
.cl-mbody{ padding:16px 18px; max-height:min(64vh,620px); overflow-y:auto; }
.cl-mtit{ font-size:10.5px; font-weight:800; color:var(--cl-muted); text-transform:uppercase; letter-spacing:.07em;
  margin:0 0 9px; display:block; }
.cl-mtit + .cl-mtit{ margin-top:18px; }
.cl-mcampo{ margin-bottom:12px; }
.cl-mcampo > label{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12px; font-weight:700; color:var(--cl-dark); margin-bottom:5px; }
.cl-mcampo > label .cl-opc{ font-size:10.5px; font-weight:500; color:var(--cl-faint); text-transform:none; letter-spacing:0; }
.cl-modal select.cl-inp, .cl-modal input.cl-inp, .cl-modal textarea.cl-inp{
  width:100% !important; box-sizing:border-box; background:var(--cl-tile); border:1px solid var(--cl-brd) !important;
  border-radius:12px !important; padding:11px 12px !important; margin:0 !important;
  font-size:12.5px !important; font-weight:600; color:var(--cl-dark); font-family:inherit; box-shadow:none !important;
  min-height:0 !important; height:auto !important;
}
.cl-modal textarea.cl-inp{ font-weight:500; resize:none; }
.cl-modal .cl-inp:focus{ outline:none; border-color:var(--cl-orange) !important; background:var(--cl-surface);
  box-shadow:0 0 0 3px rgba(230,81,0,.14) !important; }
/* Cómo lo recibís: botones segmentados */
.cl-seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:var(--cl-tile); padding:4px; border-radius:13px; }
.cl-seg button{ border:none; background:transparent; border-radius:10px; cursor:pointer; font-family:inherit;
  font-size:11.5px; font-weight:700; color:var(--cl-ink3); padding:9px 6px; line-height:1.25; min-height:0; transition:.15s; }
.cl-seg button:hover{ color:var(--cl-dark); }
.cl-seg button.on{ background:var(--cl-surface); color:var(--cl-orange); box-shadow:var(--cl-sh); }
.cl-seg button b{ display:block; font-size:11.5px; }
.cl-seg button small{ display:block; font-size:10px; font-weight:500; color:var(--cl-faint); margin-top:1px; }
.cl-seg button.on small{ color:var(--cl-warn-ink); }
/* Resumen de artículos del modal */
.cl-mitem{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px;
  background:var(--cl-tile); border:1px solid var(--cl-brd); border-radius:12px; margin-bottom:6px; }
.cl-mitem .cl-mx{ width:36px; height:28px; flex:none; border-radius:9px; background:var(--cl-surface); border:1px solid var(--cl-brd);
  color:var(--cl-orange); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.cl-mitem b{ font-size:12px; font-weight:700; color:var(--cl-dark); display:block; line-height:1.25; }
.cl-mitem small{ font-size:10.5px; color:var(--cl-muted); }
.cl-mtot{ background:var(--cl-tile); border:1px solid var(--cl-brd); border-radius:14px; padding:13px; margin-top:10px; }
.cl-mtot .cl-fila{ display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--cl-ink3); margin-bottom:6px; }
.cl-mtot .cl-fila b{ color:var(--cl-dark); font-weight:700; }
.cl-mtot .cl-gauge{ background:var(--cl-surface); border:1px solid var(--cl-brd); border-radius:10px; padding:9px 10px; margin:9px 0; }
.cl-mtot .cl-total{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
  border-top:1px solid var(--cl-brd); padding-top:10px; margin-top:4px; }
.cl-mtot .cl-total b{ font-size:13.5px; font-weight:800; color:var(--cl-dark); display:block; }
.cl-mtot .cl-total small{ font-size:10.5px; color:var(--cl-faint); }
.cl-mtot .cl-total span{ font-size:21px; font-weight:800; color:var(--cl-orange); letter-spacing:-.02em; }
.cl-mnota{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--cl-tile2); border-radius:12px;
  font-size:11.5px; color:var(--cl-ink3); margin-top:10px; }
.cl-mpie{ text-align:center; font-size:10.5px; color:var(--cl-faint); padding:0 18px 12px; }

/* Línea de tiempo del pedido */
.cl-tl{ display:flex; align-items:flex-start; margin:4px 0 16px; }
.cl-tl .cl-paso{ flex:1; text-align:center; }
.cl-tl .cl-bolita{ width:38px; height:38px; margin:0 auto; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:17px; background:var(--cl-tile); color:var(--cl-faint); border:2px solid transparent; }
.cl-tl .cl-paso.on .cl-bolita{ background:var(--cl-orange); color:#ffffff; }
.cl-tl .cl-paso.ahora .cl-bolita{ border-color:#FDBA74; box-shadow:0 0 0 4px rgba(230,81,0,.12); }
.cl-tl .cl-paso b{ display:block; font-size:10.5px; font-weight:700; color:var(--cl-faint); margin-top:5px; }
.cl-tl .cl-paso.on b{ color:var(--cl-dark); }
.cl-tl .cl-paso small{ display:block; font-size:9.5px; color:var(--cl-faint); }
.cl-tl .cl-linea{ flex:0 0 16px; height:3px; border-radius:99px; background:var(--cl-tile); margin-top:18px; }
.cl-tl .cl-linea.on{ background:var(--cl-orange); }

/* ---------- Login ---------- */
#login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(160deg,var(--cl-orange-s),var(--cl-tile) 60%,var(--cl-tile)); }
.login-card{ background:var(--cl-surface); border:1px solid var(--cl-brd); border-radius:20px; box-shadow:var(--cl-sh-card);
  padding:32px 28px; width:380px; max-width:100%; text-align:center; }
.input{ width:100%; padding:12px 14px; border:1px solid var(--cl-brd); border-radius:12px; font-size:14px;
  margin-top:10px; font-family:inherit; background:var(--cl-surface); }
.input:focus{ outline:none; border-color:var(--cl-orange); box-shadow:0 0 0 3px rgba(230,81,0,.14); }

/* ---------- Visor de imagen ---------- */
.lbox{ position:fixed; inset:0; z-index:9999; background:rgba(28,25,23,.86); display:none;
  align-items:center; justify-content:center; padding:22px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.lbox.on{ display:flex; }
.lbox img{ max-width:min(92vw,860px); max-height:80vh; border-radius:16px; background:var(--cl-surface);
  box-shadow:0 24px 60px rgba(0,0,0,.55); }
.lbox .cap{ position:absolute; bottom:24px; left:0; right:0; text-align:center; color:#ffffff;
  font-weight:700; font-size:15px; text-shadow:0 2px 8px rgba(0,0,0,.6); padding:0 20px; }
.lbox .cls{ position:absolute; top:16px; right:18px; width:44px; height:44px; border-radius:50%; border:0;
  cursor:pointer; background:var(--cl-surface); color:var(--cl-dark); font-size:24px; font-weight:800; line-height:1; }

/* Pestañas de abajo: solo cuando no entran en el encabezado */
@media(min-width:1180px){ .cl-solo-cel{ display:none !important; } }

/* Texto que solo se ve en pantalla grande (los botones quedan en ícono en el celular) */
@media(max-width:760px){ .cl-solo-pc{ display:none; } }
@media(max-width:520px){
  .cl-solo-pc{ display:none; }
  .cl-cart-tot{ display:none; }          /* en el celular el carrito queda solo con el ícono y el contador */
  .cl-aviso{ font-size:12.5px; }
  .cl-aviso .cl-av-t{ font-size:13px; }
  .cl-aviso .cl-av-p{ font-size:11.5px; }
  .cl-aviso .cl-av-ico{ width:34px; height:34px; font-size:16px; border-radius:10px; }
  .cl-panel{ padding:14px; }
  .cl-panel-h h3{ font-size:13px; }
  .cl-sug{ flex-wrap:wrap; }
  .cl-sug button{ width:100%; justify-content:center; }
}
/* El contador del carrito se esconde cuando no hay nada cargado */
.badge.cl-cero{ display:none; }

/* ---------- Celular ---------- */
@media(max-width:760px){
  .drawer{ width:100%; }
  .cl-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; gap:12px !important; }
  .cl-grid-kpi{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  .card .ph{ height:140px; }
  .card .bd{ padding:12px; gap:6px; }
  .card .cl-precio-row{ flex-direction:column; align-items:stretch; gap:9px; }
  .card .qtyrow{ align-self:stretch; justify-content:space-between; }
  .qinput{ width:100% !important; flex:1; }
  .carousel{ height:170px; }
  .cl-top .cl-top-in{ padding:5px 12px; }
  header .cl-head-in{ padding:10px 12px; gap:10px; }
  .logo{ font-size:14px; }
  .logo .cl-mark{ width:34px; height:34px; font-size:16px; border-radius:10px; }
  .cl-wrap{ padding:0 12px; }
  .btn{ padding:8px 12px; font-size:12.5px; }
  .cl-aviso{ padding:12px 13px; }
  /* cdpg-ui.css agranda y estira estos controles en celular: acá son de catálogo */
  .cl-tabla{ display:table !important; width:100% !important; }
  .cl-tabla tr{ display:table-row !important; }
  .cl-tabla th,.cl-tabla td{ display:table-cell !important; }
}

/* ============================================================
   EL TABLERO DE CATEGORIAS  (05/11/2026)
   La tienda abre mostrando las categorias como tarjetas grandes;
   recien al tocar una se ven sus articulos.
   La FOTO de cada tarjeta es la del primer articulo de esa categoria
   que tenga una: no hay foto de categoria en ningun lado y inventar
   un dibujo seria mostrar algo que no es de ese rubro. Sin ninguna
   foto queda el fondo naranja claro con el icono, que se lee igual.
   ============================================================ */
.cl-tablero{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(236px,1fr)) !important;
             gap:16px !important; margin-top:4px; }
/*  ESCONDER CON CLASE Y NO CON style.display: `.cl-tablero` y `.cl-grid`
    son `display:grid !important` --`.cl-grid` lo necesita porque
    cdpg-ui.css fuerza `.grid` a una columna en celular-- y un
    `style.display='none'` pierde contra `!important`. Sin esta clase se
    entraba a una categoria y el tablero seguia abajo.  */
.cl-oculto{ display:none !important; }
.cl-catc{ display:block; width:100%; padding:0; text-align:left; font-family:inherit; cursor:pointer;
  background:var(--cl-surface); border:1px solid var(--cl-brd); border-radius:var(--cl-r);
  overflow:hidden; box-shadow:var(--cl-sh-card);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cl-catc:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -6px rgba(28,25,23,.16);
  border-color:rgba(230,81,0,.45); }
.cl-catc:focus-visible{ outline:2px solid var(--cl-orange); outline-offset:2px; }
.cl-catf{ height:148px; background-size:cover; background-position:center;
  background-color:var(--cl-orange-s); position:relative;
  display:flex; align-items:center; justify-content:center; }
.cl-catf.cl-con-foto::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,25,23,.45), rgba(28,25,23,0) 60%); }
.cl-catf .cl-i{ width:40px; height:40px; color:var(--cl-orange); opacity:.45; }
.cl-catb{ padding:13px 15px 15px; }
.cl-catn{ font-size:16px; font-weight:800; color:var(--cl-dark); letter-spacing:-.01em; line-height:1.25; }
.cl-catq{ font-size:12px; font-weight:600; color:var(--cl-muted); margin-top:3px; }

/* La barra de volver, cuando ya se entro a una categoria */
.cl-volver{ display:flex; align-items:center; gap:12px; margin:2px 0 14px; flex-wrap:wrap; }
.cl-volver .cl-vtit{ font-size:19px; font-weight:800; color:var(--cl-dark); letter-spacing:-.02em; }
.cl-volver .cl-vq{ font-size:12.5px; font-weight:600; color:var(--cl-muted); }

@media(max-width:760px){
  .cl-tablero{ grid-template-columns:1fr 1fr !important; gap:12px !important; }
  .cl-catf{ height:104px; }
  .cl-catf .cl-i{ width:30px; height:30px; }
  .cl-catb{ padding:10px 12px 12px; }
  .cl-catn{ font-size:14px; }
  .cl-volver .cl-vtit{ font-size:17px; }
}