/* ========================= 
   Tema oscuro base
   ========================= */
:root{
  --bg-1:#000000;
  --bg-2:#11161f;
  --border:#000000;
  --text:#e6eefc;
  --muted:#9fb0ca;
  --accent:#39ff14;

  --sidebar-w:240px;   /* ancho sidebar desktop (ajusta aquí si quieres 260px) */
  --header-h:64px;     /* altura header desktop */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg-1);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  line-height:1.4;
}
html, body{ overflow-x:hidden; } /* evita barra horizontal global */

/* =========================
   HEADER (full-width siempre)
   ========================= */
.app-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--header-h);
  display:grid;
  grid-template-columns:auto 1fr auto; /* btn/brand | spacer | saldo+avatar */
  align-items:center; gap:12px;
  padding:0 16px;
  background:#0f1116;
  border-bottom:1px solid var(--border);
  z-index:100;
}
.btn-menu{
  display:none;
  border:none; background:transparent; color:#cfd9e6;
  font-size:22px; line-height:1; cursor:pointer;
}
.brand img{ height:36px; width:auto; display:block; object-fit:contain; }
.header-right{ display:flex; align-items:center; gap:12px; }

/* Saldo verde neón */
.saldo-badge{
  display:flex; align-items:center; gap:8px;
  color:#39ff14; background:rgba(57,255,20,.08);
  border:1px solid rgba(57,255,20,.35);
  border-radius:10px; padding:6px 10px; font-weight:700;
}
.saldo-badge span{ opacity:.85; font-weight:600 }
.saldo-badge strong{ color:#39ff14 }

/* Avatar */
.avatar-btn{
  border:none; background:transparent; padding:0; cursor:pointer;
  width:36px; height:36px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 2px var(--border) inset;
}
.avatar-btn img{ width:100%; height:100%; object-fit:cover; display:block }

/* =========================
   SIDEBAR
   ========================= */
.sidebar{
  left:0;
  width:var(--sidebar-w);
  background:#0f1116;
  z-index:60;
  display:flex;                 /* columna */
  flex-direction:column;
}

/* Menú */
.menu{ flex:1; overflow-y:auto; padding:6px 0 }
.menu ul{ list-style:none; margin:0; padding:0 }
.menu li{ margin:4px 6px }
.menu-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; text-decoration:none;
  color:#cfd9e6; font-weight:500;
  border-left:4px solid transparent;
  transition:background .2s,color .2s,border-color .2s;
}
.menu-link .icon{
  width:22px; height:22px; display:inline-flex;
  align-items:center; justify-content:center; flex:0 0 22px;
}
.menu-link .icon svg{
  width:18px; height:18px; display:block;
  fill: var(--item-color, var(--accent));
}
.menu-link:hover{
  background:rgba(255,255,255,.06);
  color:var(--item-color, var(--accent));
}
.menu-link.is-active{
  background:rgba(255,255,255,.09);
  color:var(--item-color, var(--accent));
  border-left-color:var(--item-color, var(--accent));
}

/* Scrollbar del menú */
.menu::-webkit-scrollbar{ width:6px }
.menu::-webkit-scrollbar-thumb{ background:#2a3242; border-radius:3px }
.menu::-webkit-scrollbar-thumb:hover{ background:#3a4356 }

/* =========================
   CONTENIDO
   ========================= */
.main-content, main#contenido{
  padding:20px;
  border-left:none !important; box-shadow:none !important; outline:none !important;
  min-width:0; /* clave para evitar overflow horizontal con grids/tablas */
}

/* Tarjetas/KPIs/paneles (dashboard) */
.dash-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:10px 0 22px }
.kpi-card, .panel{
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:12px; padding:14px;
}
.kpi-label{ opacity:.75; font-size:.9rem }
.kpi-value{ font-size:1.6rem; font-weight:700; margin-top:4px }

/* =========================
   DRAWER móvil + backdrop
   ========================= */
#drawer-backdrop{
  position:fixed; inset:56px 0 0 0; /* debajo del header móvil */
  background:rgba(0,0,0,.45);
  display:none; z-index:55;
}
body.mobile-menu-open #drawer-backdrop{ display:block }

/* =========================
   DESKTOP (≥992px)
   ========================= */
@media (min-width: 992px){
  :root{ --header-h:64px; }

  .sidebar{
    position: fixed !important;
    top: var(--header-h) !important;
    left: 0 !important;
    width: var(--sidebar-w) !important;
    height: calc(100vh - var(--header-h)) !important;
    overflow: hidden !important;     /* el scroll lo maneja .menu */
    transform: none !important;
    box-shadow: none !important;
    padding-top: 8px;
    background:#0f1116;
    z-index:60;
  }

  .main-content, main#contenido{
    margin-left: var(--sidebar-w) !important;
    padding-top: calc(var(--header-h) + 12px) !important;
    max-width: calc(100vw - var(--sidebar-w)) !important;
    overflow: visible !important;
  }

  .main-content > :first-child,
  main#contenido > :first-child{ margin-top:0 !important; }
}

/* =========================
   MÓVIL (<992px): drawer lateral
   ========================= */
@media (max-width: 991px){
  :root{ --header-h:56px } /* header más bajo en móvil */

  .btn-menu{ display:inline-block }
  .brand img{ height:28px }
  .saldo-badge{ padding:5px 8px; font-size:.95rem }
  .avatar-btn{ width:32px; height:32px }

  .app-header{ height: var(--header-h); padding: 0 12px; }

  .sidebar{
    position: fixed !important;
    top: var(--header-h) !important;
    left: 0 !important;
    width:260px; height:calc(100vh - var(--header-h));
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:6px 0 18px rgba(0,0,0,.45);
    z-index:200;
  }
  body.mobile-menu-open .sidebar{ transform:translateX(0) }

  .main-content, main#contenido{
    margin-left:0;
    padding-top:calc(var(--header-h) + 8px);
  }

  body.mobile-menu-open{ overflow:hidden } /* evita doble scroll con drawer abierto */

  .main-content > :first-child,
  main#contenido > :first-child{ margin-top:0 !important; }
}

/* =========================
   Accesibilidad
   ========================= */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px; border-radius:8px;
}

/* =========================
   FORCE-MOBILE
   ========================= */
html.force-mobile { --header-h:56px; }

html.force-mobile .app-header{
  height: var(--header-h);
  padding: 0 12px;
}
html.force-mobile .brand img{ height: 28px; }

html.force-mobile .sidebar{
  position: fixed !important;
  top: var(--header-h) !important;
  left: 0; width: 260px;
  height: calc(100vh - var(--header-h)) !important;
  transform: translateX(-100%);
  transition: transform .25s ease;
  box-shadow: 6px 0 18px rgba(0,0,0,.45);
  z-index: 200;
}
html.force-mobile body.mobile-menu-open .sidebar{ transform: translateX(0); }

html.force-mobile #drawer-backdrop{
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(0,0,0,.45);
  display: none;
  z-index: 150;
}
html.force-mobile body.mobile-menu-open #drawer-backdrop{ display: block; }

html.force-mobile .main-content,
html.force-mobile main#contenido{
  margin-left: 0 !important;
  padding-top: calc(var(--header-h) + 8px) !important;
  overflow: visible !important;
}

html.force-mobile .main-content > :first-child,
html.force-mobile main#contenido > :first-child{
  margin-top: 0 !important;
}

/* ===== Submenús en sidebar ===== */
.menu-item.has-children > .menu-link{ position:relative; padding-right:28px; }
.menu-item .caret{ margin-left:auto; display:inline-flex; align-items:center; transition:transform .2s ease; color:#8aa1c4; }
.menu-item.open > .menu-link .caret{ transform:rotate(90deg); color:var(--item-color,#39ff14); }
.submenu{ margin:4px 0 8px 38px; padding:4px 0; list-style:none; border-left:2px solid rgba(255,255,255,.06); }
.submenu li{ margin:2px 0; }
.submenu-link{ display:block; padding:6px 8px; border-radius:8px; color:#cfd9e6; text-decoration:none; transition:background .2s,color .2s; }
.submenu-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.submenu-link.is-active{ background:rgba(255,255,255,.10); color:var(--item-color,#39ff14); font-weight:600; }

/* ====== Cards (shim compatibles con Bootstrap) ====== */
.card{ --bs-card-bg:var(--bg-2); background:var(--bs-card-bg); border:1px solid var(--border); border-radius:12px; color:var(--text); display:flex; flex-direction:column; }
.card .card-body{ padding:1.25rem; }

/* ====== Grid simple tipo Bootstrap ====== */
.row{ display:flex; flex-wrap:wrap; margin-left:-8px; margin-right:-8px; margin-top:-8px; }
.row > [class^="col-"], .row > .col{ padding:8px; flex:1 0 0%; min-width:0; }
.col-12{ flex:0 0 100%; max-width:100%; }
.col-6{ flex:0 0 50%; max-width:50%; }
.col-4{ flex:0 0 33.3333%; max-width:33.3333%; }
.col-3{ flex:0 0 25%; max-width:25%; }
@media (max-width:768px){ .col-6,.col-4,.col-3{ flex:0 0 100%; max-width:100%; } }

/* ====== Formularios oscuros ====== */
.form-group{ margin-bottom:12px; }
.form-group label{ display:block; margin-bottom:6px; color:#cfe2ff; font-weight:600; }
.form-control, .form-select, textarea.form-control{
  width:100%; padding:12px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-1); color:var(--text); outline:none;
}
.form-control:focus, .form-select:focus, textarea.form-control:focus{
  border-color:rgba(57,255,20,.45); box-shadow:0 0 0 3px rgba(57,255,20,.15);
}

/* ====== Botones ====== */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px; cursor:pointer; border:none; font-weight:800; text-decoration:none; }
.btn-primary{ background:linear-gradient(90deg,#2adf62,var(--accent)); color:#0b0d12; }
.btn-outline{ background:transparent; color:#cfd9e6; border:1px solid var(--border); }

/* ====== Títulos/espaciados dentro de panel ====== */
.panel-title{ font-size:1.05rem; margin:0 0 10px; color:var(--text); }

/* ======= Tira de categorías en tienda ======= */
.cat-strip{ display:flex; align-items:center; gap:10px; overflow-x:auto; padding:10px 6px 6px; margin:4px 0 6px; scrollbar-width:thin; }
.cat-strip::-webkit-scrollbar{ height:8px }
.cat-strip::-webkit-scrollbar-thumb{ background:#2a3242; border-radius:6px }

/* Chips */
.cat-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px; text-decoration:none; background:rgba(255,255,255,.05); border:1px solid #2a3242; color:#cfd9e6; transition:background .2s,border-color .2s,color .2s,transform .15s; }
.cat-chip:hover{ transform:translateY(-1px); border-color:#3a4a62; }
.cat-chip.active{ background:rgba(57,255,20,.10); border-color:rgba(57,255,20,.45); color:#39ff14; box-shadow:0 0 0 2px rgba(57,255,20,.12) inset; }
.cat-chip .chip-icon{ width:28px; height:28px; display:grid; place-items:center; background:#0f141c; border:1px solid #273143; border-radius:10px; overflow:hidden; font-size:14px; }
.cat-chip .chip-icon img{ width:100%; height:100%; object-fit:cover; display:block }
.cat-chip .chip-text{ font-weight:700; white-space:nowrap; text-transform:lowercase; }
.cat-sep{ height:8px; margin:0 0 8px; border-bottom:1px solid #2a3242; opacity:.6; }

/* ======= Grilla de productos ======= */
.productos-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px; }
.producto-card{ background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.p-thumb{ width:100%; aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:#0f141c; border:1px solid #273143 }
.p-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.p-title{ font-size:.98rem; margin:0; color:#e6eefc; min-height:2.2em }
.p-meta{ display:flex; align-items:center; justify-content:space-between }
.p-price{ font-weight:800; color:#39ff14 }
.p-actions .btn-buy{ border:none; cursor:pointer; font-weight:800; border-radius:10px; padding:8px 10px; color:#0b0d12; background:linear-gradient(90deg,#2adf62,#39ff14); }
.empty-hint{ grid-column:1 / -1; opacity:.8; padding:14px; text-align:center; background:rgba(255,255,255,.03); border:1px dashed #2a3242; border-radius:10px; }

@media (max-width:600px){
  .cat-chip{ padding:7px 10px }
  .cat-chip .chip-icon{ width:26px; height:26px }
  .productos-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
}

/* Carrusel horizontal de categorías */
.cat-strip{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; margin-bottom:16px; margin-top:4px; }
.cat-scroller{ display:flex; gap:12px; overflow-x:auto; scroll-behavior:smooth; padding:8px 6px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--border); }
.cat-scroller::-webkit-scrollbar{ height:8px }
.cat-scroller::-webkit-scrollbar-thumb{ background:#2a3242; border-radius:6px }
.cat-card{ min-width:96px; max-width:120px; background:transparent; border:1px solid transparent; color:#cfd9e6; padding:10px 8px; border-radius:12px; display:grid; grid-template-rows:auto auto; justify-items:center; gap:8px; cursor:pointer; transition:background .2s, border-color .2s, transform .1s; }
.cat-card:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); transform:translateY(-1px); }
.cat-card.active{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(57,255,20,.15) inset; color:#39ff14; font-weight:700; }
.cat-card .cat-thumb{ width:56px; height:56px; border-radius:12px; background:#0f141c; border:1px solid #273143; overflow:hidden; }
.cat-card .cat-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.cat-card span{ font-size:.82rem; white-space:nowrap }

/* =========================
   OVERRIDES PERSONALIZADOS
   ========================= */

/* 1) Logo a la altura completa del header */
.app-header .brand img{
  height: var(--header-h) !important;
  max-height: var(--header-h) !important;
  width: auto !important;
  object-fit: contain !important;
}
@media (max-width: 991px){
  .app-header .brand img{
    height: var(--header-h) !important;
    max-height: var(--header-h) !important;
  }
}

/* 2) Header en móvil: logo izq – centro saldo/acciones – derecha botón menú */
@media (max-width: 991px){
  .app-header{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .app-header .brand{ order:1; justify-self:start; }
  .app-header .header-right{ order:2; justify-self:center; display:flex; align-items:center; gap:10px; }
  .app-header .btn-menu{ order:3; justify-self:end; }
}

/* 3) Sidebar móvil: scroll interno y que siempre se vea el último ítem */
@media (max-width: 991px){
  .sidebar{
    height: calc(100vh - var(--header-h)) !important;
    height: calc(100dvh - var(--header-h)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .sidebar .menu{
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 32px !important; /* 👈 aire extra abajo */
    scroll-padding-bottom: 32px !important;
  }
}
/* ===== Ajustes header móviles (sin romper lo demás) ===== */
@media (max-width: 991px){
  /* 1) Header con menos padding a la izquierda para “pegar” el logo */
  .app-header{
    grid-template-columns: auto 1fr auto !important; /* logo | centro | menú */
    padding-left: 8px !important;
    padding-right: 10px !important;
  }

  /* 2) Logo bien a la izquierda (sin márgenes extra) */
  .app-header .brand{
    order: 1; 
    justify-self: start; 
    margin-left: 0 !important;
  }
  .app-header .brand img{
    height: var(--header-h) !important;
    max-height: var(--header-h) !important;
    object-fit: contain !important;
  }

  /* 3) Centro (saldo + avatar, etc.) */
  .app-header .header-right{
    order: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* 4) Botón menú hamburguesa a la derecha */
  .app-header .btn-menu{
    order: 3;
    justify-self: end;
    display: inline-block !important; /* por si algún estilo lo ocultó */
  }
}

/* ===== Mostrar SOLO el monto en la píldora de saldo =====
   Si tu HTML es <div class="saldo-badge"><span>Saldo</span><strong>$99.50</strong></div> */
.saldo-badge span{ display: none !important; }
/* Por si existiera .saldo-badge .label en alguna versión */
.saldo-badge .label{ display: none !important; }
/* Aseguramos que el monto quede centrado bonito */
.saldo-badge{ gap: 0 !important; padding-left: 10px !important; padding-right: 10px !important; }
/* ==== FIX Header móvil (logo a la izquierda, saldo+avatar y hamburguesa a la derecha) ==== */
@media (max-width: 991px){
  .app-header{ position:fixed; left:0; right:0; }
  /* Ponemos el botón de menú al extremo derecho sin tocar el HTML */
  .btn-menu{
    order: 3;                /* por si el header cae en flex en algún tema */
    position: absolute;
    right: 12px;
    top: calc(var(--header-h)/2 - 18px);
    z-index: 201;
  }
  /* Deja espacio para que no se superponga con la hamburguesa */
  .header-right{ padding-right: 44px; }
  /* Logo bien pegado a la izquierda */
  .brand{ margin-left: 0; }
  .brand img.header-logo{ height: calc(var(--header-h) - 18px); }
}

/* ==== Menú lateral: asegura que se vea el último item (Auto gestión) ==== */
.menu{ padding-bottom: 72px; }            /* colchón inferior para el scroll */
.sidebar{ overflow: hidden; }             /* el scroll lo hace .menu */
.menu{ overflow-y: auto; }

/* ==== Tienda: vuelve a las dimensiones originales de tarjetas ==== */
.tienda-wrapper .productos-grid{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.tienda-wrapper .producto-card{
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.tienda-wrapper .p-thumb{ aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; }
.tienda-wrapper .producto-card img{ object-fit: cover; }

/* ==== Precios: restaura tachado y precio final en verde ==== */
.tienda-wrapper .precios{
  display:flex; gap:8px; align-items:center; justify-content:center; margin:6px 0;
}
.tienda-wrapper .precio-original{
  color:#9bb0c7; text-decoration: line-through; font-weight:600; font-size:.95rem;
}
.tienda-wrapper .precio-final{
  color:#39ff14; font-weight:800; font-size:1.05rem;
}

/* Submenús: mantener el estilo original oscuro y compacto */
.menu-item.has-children > .menu-link{ position:relative; padding-right:28px; }
.menu-item .caret{ margin-left:auto; display:inline-flex; align-items:center; transition:transform .2s ease; color:#8aa1c4; }
.menu-item.open > .menu-link .caret{ transform:rotate(90deg); color:var(--item-color,#39ff14); }
.submenu{ margin:4px 0 8px 38px; padding:4px 0; list-style:none; border-left:2px solid rgba(255,255,255,.06); }
.submenu li{ margin:2px 0; }
.submenu-link{ display:block; padding:6px 8px; border-radius:8px; color:#cfd9e6; text-decoration:none; transition:background .2s,color .2s; }
.submenu-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.submenu-link.is-active{ background:rgba(255,255,255,.10); color:var(--item-color,#39ff14); font-weight:600; }

/* ====== Header móvil: hamburguesa centrada y a la derecha ====== */
@media (max-width: 991px){
  .app-header{ position: relative; }        /* ancla para posicionar el botón */

  .btn-menu{
    order: 4;                                /* por si el header usa flex/grid */
    position: absolute;
    right: 12px;                             /* pegado al borde derecho */
    top: 50%;                                /* centrado vertical */
    transform: translateY(-50%);
    width: 40px; height: 40px;               /* hit-area cómoda */
    display: grid; place-items: center;      /* centra el ícono dentro del btn */
    margin: 0;
    z-index: 201;
  }

  /* deja un pequeño colchón para que saldo/avatares no choquen con la hamburguesa */
  .header-right{ padding-right: 48px; }
}

/* ====== Sidebar: que el último ítem (Auto gestión) no quede oculto ====== */
.sidebar{ overflow: hidden; }                /* el scroll lo hace .menu */
.menu{
  overflow-y: auto;
  padding-bottom: 120px;                     /* espacio extra al final para hacer scroll */
}
.menu::after{                                /* separador “invisible” al fondo */
  content: ""; display: block; height: 40px;
}

/* (opcional) si usas iPhone con notch, aprovecha el área segura al fondo */
@supports(padding: max(0px)){
  .menu{ padding-bottom: max(120px, env(safe-area-inset-bottom)); }
}
/* ===== Fix móvil: header fijo y sin desbordes ===== */
@media (max-width: 991.98px){
  /* el header siempre visible */
  .app-header{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9999;
  }

  /* espacio bajo el header para que no tape el contenido */
  .main-content, main#contenido{
    padding-top: calc(var(--header-h) + 8px) !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* evita barras horizontales en wrappers “viejos” */
  .content-wrapper, .page-body-wrapper, .main-panel, .wrapper,
  .container, .container-fluid{
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* defensivo para tablas muy anchas */
  .table-responsive, .tabla-scroll, .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* si tus tablas no tienen wrapper, este fallback ayuda */
  table{ max-width: 100%; }
}

/* No más desbordes globales */
html, body{ overflow-x: hidden; }
/* Scrollbars oscuros como el fondo */
::-webkit-scrollbar {
  width: 8px;      /* grosor vertical */
  height: 8px;     /* grosor horizontal */
}

::-webkit-scrollbar-track {
  background: #0b1118;  /* mismo color que el fondo */
}

::-webkit-scrollbar-thumb {
  background: #0f141c;  /* un tono apenas más claro */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1a2028;  /* al pasar el mouse, un gris oscuro */
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #0f141c #0b1118;
}
/* Ajuste: tarjetas de categorías más pequeñas */
.cat-card{
  min-width:70px;   /* antes 96px */
  max-width:90px;   /* antes 120px */
  padding:8px 6px;
  gap:6px;
}
.cat-card .cat-thumb{
  width:44px;       /* antes 56px */
  height:44px;
  border-radius:10px;
}
.cat-card span{
  font-size:.75rem;        /* más pequeño */
  white-space:nowrap;      /* no se parte en varias líneas */
  overflow:hidden;         /* oculta lo que sobra */
  text-overflow:ellipsis;  /* muestra “…” */
  display:block;           /* asegura que funcione ellipsis */
  max-width:100%;          /* respeta ancho tarjeta */
}