@font-face{
  font-family:"EPM Rounded";
  src:url("https://michatoya.devbluedevs.com/wp-content/uploads/2025/09/EPM-Rounded-BT-SemiBold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
.pdf-epm-wrap,
.pdf-epm-tab,
.pdf-epm-title,
.pdf-epm-empresa,
.pdf-epm-download,
.pdf-epm-year-pill,
.pdf-epm-search-input {
  font-family: "EPM Rounded", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Título blanco */
.pdf-epm-title{ color:#fefffe !important; }

/* (opcional) mejora legibilidad del card */
.pdf-epm-card{ color:#fefffe; }

/* Contenedor */
.pdf-epm-wrap { max-width: 1100px; margin: 0 auto; }

/* Tabs de categorías padre */
.pdf-epm-tabs{
  display:flex;
  gap:28px;
  justify-content:center;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.pdf-epm-tab{
  -webkit-appearance:none !important;
  appearance:none !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;

  color:#0b4950 !important;                 /* base */
  font-weight:800;
  padding:8px 2px !important;
  border-bottom:3px solid transparent !important;
  cursor:pointer;
  position:relative;
}
.pdf-epm-tab:hover,
.pdf-epm-tab:focus,
.pdf-epm-tab:active{
  background:transparent !important;
  color:#24923f !important;                 /* hover */
  box-shadow:none !important;
}
/* Activo: texto verde y subrayado #a9d261 */
.pdf-epm-tab.is-active{
  color:#24923f !important;
  border-bottom-color:#a9d261 !important;
}
/* Separador vertical verde entre tabs */
.pdf-epm-tab:not(:first-child)::before{
  content:"";
  position:absolute;
  left:-14px;                                /* acorde al gap */
  top:50%;
  transform:translateY(-50%);
  width:2px;
  height:18px;
  background:#24923f;
  border-radius:1px;
}

/* ====== BUSCADOR (versión pill compacta, centrado) ====== */
.pdf-epm-wrap .pdf-epm-search{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:8px 0 22px !important;
  pointer-events:auto;
}
.pdf-epm-wrap .pdf-epm-search-icon{ display:none !important; }

.pdf-epm-wrap .pdf-epm-search-input{
  width:230px !important;
  height:42px !important;
  line-height:42px !important;
  padding:0 18px 0 52px !important;
  border:3px solid #a6d31c !important;
  border-radius:9999px !important;
  background:#fff !important;
  color:#0f4044 !important;
  font-weight:800 !important;
  font-size:18px !important;
  box-shadow:none !important;
  outline:none !important;
  -webkit-appearance:none;
  appearance:none;
}
.pdf-epm-wrap .pdf-epm-search-input::placeholder{
  color:#a6d31c !important;
  font-weight:800 !important;
  opacity:1 !important;
}

/* Ícono de lupa con SVG (evita emoji) */
.pdf-epm-wrap .pdf-epm-search::before{
  content:"";
  position:absolute;
  width:22px; height:22px;
  left:calc(50% - 115px + 18px);
  top:50%; transform:translateY(-50%);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23a6d31c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
}

/* Responsivo buscador */
@media (max-width:480px){
  .pdf-epm-wrap .pdf-epm-search-input{ width:260px !important; }
  .pdf-epm-wrap .pdf-epm-search::before{ left:calc(50% - 130px + 18px); }
}

/* Panel activo */
.pdf-epm-panel{ display:none; }
.pdf-epm-panel.is-active{ display:block; }

/* Años (details) */
.pdf-epm-years{ display:grid; gap:18px; }
.pdf-epm-year-summary{ list-style:none; }
.pdf-epm-year summary::-webkit-details-marker{ display:none; }

.pdf-epm-year-pill{
  display:inline-block;
  color:#fff;
  font-weight:800;
  padding:10px 18px;
  border-radius:999px;
  font-size:26px;
  letter-spacing:1px;
  box-shadow:0 4px 0 rgba(0,0,0,.15);
}

/* Grid de tarjetas */
.pdf-epm-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:18px;
  margin:12px 0 8px;
}

/* Tarjeta */
.pdf-epm-card{
  background:var(--card-color, #0f4044);
  border-radius:22px;
  padding:14px 14px 16px;
  box-shadow:0 10px 18px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Portada: llena el alto y se alinea arriba */
.pdf-epm-cover{
  width:100%;
  aspect-ratio:3/4;
  border-radius:14px;
  overflow:hidden;
  background:#082528;
  display:flex;
  align-items:stretch !important;            /* clave para llenar alto */
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.pdf-epm-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;      /* “para arriba” */
  display:block;
}

/* Empresa y botón */
.pdf-epm-empresa{
  color:#f4f000;
  font-weight:800;
  margin-bottom:10px;
}
.pdf-epm-download{
  background:#f4f000;
  color:#22584f;
  font-weight:800;
  text-decoration:none;
  padding:9px 16px;
  border-radius:999px;
  display:inline-block;
}

/* Responsive */
@media (max-width:640px){
  .pdf-epm-year-pill{ font-size:22px; }
  .pdf-epm-cards{ grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ====== Desktop: año a la izquierda y cards a la derecha ====== */
@media (min-width: 1024px){
  .pdf-epm-year{
    position: relative;
    padding-left: 120px;               /* espacio para la pill del año */
  }
  .pdf-epm-year-summary{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;                      /* ancho de la columna del año */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: auto;
  }
  .pdf-epm-year-pill{
    display: inline-block;
  }

  /* Botón fuera de la tarjeta (debajo, centrado) */
  .pdf-epm-card{
    position: relative;
    padding-bottom: 48px;              /* espacio para el botón */
    margin-bottom: 28px;               /* deja lugar al botón externo */
  }
  .pdf-epm-download{
    position: absolute;
    left: 50%;
    bottom: -22px;                     /* lo saca fuera de la tarjeta */
    transform: translateX(-50%);
  }

  /* Aumenta el gap vertical para no chocar fila siguiente */
  .pdf-epm-cards{
    gap: 28px 18px;                    /* row-gap 28px, col-gap 18px */
  }
}

/* Portada llena alto y "arriba" (ya aplicado, lo reforzamos) */
.pdf-epm-cover{
  align-items: stretch !important;
}
.pdf-epm-cover img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* Año centrado en móvil */
@media (max-width: 1023px){
  .pdf-epm-year-summary{
    display:flex;
    justify-content:center;
  }
  .pdf-epm-year-pill{
    margin: 0 auto;
  }
}

/* Mensaje bajo tabs */
.pdf-epm-intro{
  color:#124f56;
  text-align:center;
  font-size:18px;
  font-weight:700;
  margin: 4px 0 14px;
}
/*Mensaje de que no se encontro informes*/
.pdf-epm-noresults{
  color:#124f56;
  font-weight:700;
}

/* Separación entre años cuando están colapsados (desktop) */
@media (min-width: 1024px){
  /* asegura que cada <details> tenga alto aun cuando esté cerrado */
  .pdf-epm-year{
    min-height: 72px;                 /* altura del pill + respiro */
  }
  .pdf-epm-year:not([open]){
    min-height: 72px;                 /* mantiene espacio al cerrar */
    margin-bottom: 14px;              /* separación adicional */
  }
  /* opcional: un colchón invisible para evitar que las sombras se monten */
  .pdf-epm-year:not([open])::after{
    content:"";
    display:block;
    height: 6px;                      /* micro separador extra */
  }
}

/* ===== Fuerza 2 líneas en MÓVIL ===== */
@media (max-width: 640px){
  /* Tabs: dos columnas y permitir salto */
  .pdf-epm-tabs{
    flex-wrap: wrap !important;            /* NO nowrap */
    gap: 14px !important;
    justify-content: center;
  }
  .pdf-epm-tab{
    flex: 0 0 calc(50% - 14px) !important; /* 2 por fila */
    max-width: calc(46% - 14px) !important;
    white-space: normal !important;        /* permite salto */
    word-break: break-word !important;
    text-wrap: balance;                    /* reparte mejor */
    text-align: center !important;
    line-height: 1.15 !important;
  }

  /* Títulos de tarjetas: límite de ancho para obligar salto */
  .pdf-epm-title{
    white-space: normal !important;
    word-break: break-word !important;
    text-wrap: balance;
    max-width: 215px !important;           /* fuerza 2 líneas */
    margin: 10px auto 0 !important;
    line-height: 1.2 !important;

    /* Si quieres truncar a exactamente 2 líneas, descomenta: */
    /* display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden; */
  }
}