/* ===== Tokens globales y sombras ===== */ :root {
      --shadow-sm: 0 .5rem 1rem rgba(16, 24, 40, .06);
      --shadow-md: 0 .75rem 2rem rgba(16, 24, 40, .08);
      --shadow-lg: 0 1rem 2.5rem rgba(16, 24, 40, .10);
      --radius-md: 18px;
      /* Hero */
      --hero-radius: 26px;
      --hero-shadow: 0 22px 48px rgba(16, 24, 40, .12); /* sutil */
      --hero-border: 1px solid rgba(16, 24, 40, .06);
      --hero-bg: #fff;
      /* Tabs sutiles */
      --tab-height: 40px;
      --tab-radius: 10px;
      --tab-border: 1px;
      --tab-border-color: #dfe6f0;
      --tab-bg: #ffffff;
      --tab-fg: #3b4856;
      --tab-active-bg: #f6faff;
      --tab-active-border: #bcd4ff;
      --panel-border: #e7ecf3;
    }
    /* ===== HERO con un solo shadow (hero-shell) ===== */
    .hero {
      padding: 2rem 0 1.5rem;
      background: linear-gradient(180deg, #f6f9ff 0, #fbfcff 100%);
    }
    @media (min-width:992px) {
      .hero {
        padding: 2.5rem 0 2rem;
      }
    }
    .hero-shell {
      background: var(--hero-bg);
      border: var(--hero-border);
      border-radius: var(--hero-radius);
      box-shadow: var(--hero-shadow);
      padding: 2rem;
    }
    @media (min-width:992px) {
      .hero-shell {
        padding: 2rem 2.25rem;
      }
    }
    .hero-title {
      font-weight: 800;
      letter-spacing: -.02em;
      margin-bottom: .25rem;
    }
    .hero-sub {
      color: #4b5563;
      margin-bottom: 1rem;
    }
    /* ===== Tabs tipo carpeta (sutiles) ===== */
    .folder-block {
      position: relative;
    }
    .folder-tabs {
      display: flex;
      /*gap: .4rem;*/
      margin-bottom: 0;
      position: relative;
      z-index: 2;
    }
    .folder-tab {
      height: var(--tab-height);
      line-height: calc(var(--tab-height) - 2px);
      padding: 0 .9rem;
      border: var(--tab-border) solid var(--tab-border-color);
      border-bottom: 0;
      border-top-left-radius: var(--tab-radius);
      border-top-right-radius: var(--tab-radius);
      background: var(--tab-bg);
      color: var(--tab-fg);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      cursor: pointer;
      user-select: none;
      transition: border-color .18s ease, background .18s ease, color .18s ease;
    }
    .folder-tab i {
      font-size: .95rem;
      color: #6b7a8c;
    }
    .folder-tab:hover {
      border-color: #d2dbe7;
    }
    .folder-tab.active {
      background: var(--tab-active-bg);
      border-color: var(--tab-active-border);
      color: #0d6efd;
    }
    .folder-tab.active i {
      color: #0d6efd;
    }
    .folder-tab:focus-visible {
      outline: 2px solid rgba(13, 110, 253, .25);
      outline-offset: 2px;
      border-color: var(--tab-active-border);
    }
    .folder-panel {
      border: 1px solid var(--panel-border);
      border-radius: 0 0 12px 12px;
      background: #fff;
      position: relative;
      z-index: 1;
      padding: 1rem;
      margin-top: -1px;
    }
    .folder-panel::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 1px;
      background: var(--panel-border);
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }
    /* Input grande integrado (sin sombra interna para respetar el “un shadow”) */
    .search-lg.input-group {
      border: 1px solid #e6e9f0;
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
    }
    .search-lg .input-group-text, .search-lg .form-control, .search-lg .btn {
      border: 0;
    }
    .search-lg .btn {
      border-left: 1px solid #e9edf3;
    }
    /* ===== Cards / superficies ===== */
    .surface {
      background: #fff;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
      position: relative;
    }
    .surface::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .06);
      pointer-events: none;
    }
    .card {
      border: 0;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      background: #fff
    }
    .card.shadow-md {
      box-shadow: var(--shadow-md)
    }
    .card.shadow-lg {
      box-shadow: var(--shadow-lg)
    }
    .elevate-hover {
      transition: transform .2s ease, box-shadow .2s ease
    }
    .elevate-hover:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg)
    }
    .stat-card .icon-wrap {
      width: 3rem;
      height: 3rem;
      border-radius: .75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eef2ff;
    }
    /* Listas limpias */
    .list-group-flush .list-group-item {
      border: 0;
      padding: .6rem .8rem
    }
    .list-compact .list-group-item {
      padding: .55rem .75rem
    }
    .text-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }
    .home-hr {
      border: 0;
      height: 1px;
      background: linear-gradient(90deg, #0000, #e9ecef, #0000);
      opacity: .8
    }
    /* ===== Feed / Listado pro ===== */
    .feed-card .card-header {
      background: transparent;
      border: 0;
      padding: 1rem 1.25rem 0 1.25rem;
    }
    .feed-card .card-body {
      padding: 1rem 1.25rem 1.25rem 1.25rem
    }
    .feed-item {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .7rem .75rem;
      border-radius: 12px;
      text-decoration: none;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .feed-item:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
      background: #fff
    }
    .feed-rank {
      width: 2rem;
      height: 2rem;
      border-radius: 10px;
      background: #eef2ff;
      color: #546184;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: .9rem;
      flex: 0 0 2rem;
    }
    .feed-title {
      font-weight: 600;
     /* line-height: 1.25;*/
		
		/* Permite truncado multilínea en el título */
 white-space: normal;                /* ya no en una sola línea */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;              /* 2 líneas en desktop */
  -webkit-box-orient: vertical;
  line-height: 1.15;
		
    }
    .feed-meta {
      font-size: .8rem;
      color: #6c757d;
    }
    .feed-right {
      margin-left: auto;
      color: #94a3b8;
    }
    .card-cta {
      display: flex;
      justify-content: center;
      padding: .25rem 0 0 0;
    }


@media (max-width: 576px){
  .feed-title{-webkit-line-clamp: 3;} /* 3 líneas en móviles */
}

/* Asegura que el bloque central pueda encogerse sin empujar el chevron */
.feed-item .min-w-0{min-width:0; flex:1 1 auto;}
.feed-right{flex-shrink:0; margin-left:.5rem;}  /* evita que el ícono se monte sobre el texto */

/*Leyendas listado*/
.legend-box{ padding:.5rem .75rem; }
    .legend-chip{
      display:inline-flex; align-items:center; gap:.35rem;
      margin:.15rem .5rem .15rem 0; color:#475569;
    }
    .legend-key{
      display:inline-block; padding:.12rem .5rem; line-height:1;
      border-radius:999px; border:1px solid #e2e8f0; background:#f8fafc;
      font-weight:700; font-size:.8rem; color:#334155;
    }