/* ============================================================
   lpe.css — Laboratorios de Prueba de Tercera Parte Extranjeros / CRT
   ------------------------------------------------------------
   Un solo archivo: contenedor, buscador y tabla.
   Todas las clases empiezan con .lpe-
   ============================================================ */

/* Las variables van en el wrapper, no en :root, para que no se
   pisen con las de otro módulo si conviven en la misma página */
.lpe-wrapper {
  --lpe-primary:       #0d4d4d;
  --lpe-primary-hover: #01635f;
  --lpe-primary-light: #e6f3f3;
  --lpe-ift-bg:        #e6f3f3;
  --lpe-ift-text:      #014e4d;
  --lpe-nom-bg:        #fef3e6;
  --lpe-nom-text:      #7a4500;

  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  font-family: 'Noto Sans', sans-serif;
}

.lpe-wrapper,
.lpe-wrapper *,
.lpe-wrapper *::before,
.lpe-wrapper *::after {
  box-sizing: border-box;
}

/* ============================================================
   FIXES DEL CMS
   El editor mete <p> entre los elementos y <figure> alrededor
   de la tabla. display:contents los hace transparentes para
   el layout sin tener que pelearse con el editor.
   ============================================================ */
.lpe-search p,
.lpe-table-wrap figure {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   BUSCADOR
   ============================================================ */
.lpe-search {
  display: flex;
  justify-content: center;
  margin: 0 0 12px;
}

.lpe-search__pill {
  max-width: 860px;
  width: 100%;
  display: flex;
  align-items: stretch;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
}

.lpe-search__pill:focus-within {
  box-shadow: 0 0 0 4px rgba(13, 77, 77, .20), 0 2px 12px rgba(0, 0, 0, .10);
}

.lpe-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  padding: 18px 22px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #1a1a1a;
  background: transparent;
}

.lpe-search__input::placeholder {
  color: rgba(26, 26, 26, .50);
  font-weight: 400;
}

.lpe-search__clear {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: rgba(26, 26, 26, .4);
  font-size: 20px;
  cursor: pointer;
  transition: color .2s;
}

.lpe-search__clear.is-visible { display: flex; }
.lpe-search__clear:hover      { color: rgba(26, 26, 26, .75); }

.lpe-search__btn {
  flex: 0 0 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--lpe-primary);
  cursor: pointer;
  transition: background .2s;
}

.lpe-search__btn:hover { background: var(--lpe-primary-hover); }

.lpe-search__btn i,
.lpe-search__btn svg {
  font-size: 22px;
  color: #fff !important;
  fill: #fff !important;
}

/* ============================================================
   HINT DE RESULTADOS
   ============================================================ */
.lpe-hint {
  text-align: center;
  font-size: 15px;
  color: rgba(0, 0, 0, .55);
  margin: 0 0 14px;
  min-height: 22px;
}

/* ============================================================
   TABLA
   ============================================================ */
.lpe-table-wrap {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sin min-width: la tabla mide exactamente lo que mide el contenedor
   del portal, así que nunca hay scroll horizontal. table-layout: fixed
   reparte las columnas por porcentaje y el contenido se acomoda dentro. */
.lpe-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Anchos de columna en escritorio.
   El reparto lo manda la palabra más larga de cada encabezado a 15px:
   IDENTIFICADOR y RECONOCIMIENTO son las que exigen más espacio. */
.lpe-table thead th:nth-child(1) { width: 14%; }  /* Identificador */
.lpe-table thead th:nth-child(2) { width: 23%; }  /* Laboratorio */
.lpe-table thead th:nth-child(3) { width: 11%; }  /* País */
.lpe-table thead th:nth-child(4) { width: 20%; }  /* Normas */
.lpe-table thead th:nth-child(5) { width: 16%; }  /* Vigencia */
.lpe-table thead th:nth-child(6) { width: 16%; }  /* Contacto */

/* El letter-spacing va bajo a propósito: en mayúsculas, con 1.8px
   los encabezados largos no caben en su columna y se desbordan. */
.lpe-table thead th {
  background: var(--lpe-primary);
  color: rgba(255, 255, 255, .9);
  font-family: 'Noto Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 13px 10px;
  text-align: center;
  white-space: normal;
}

.lpe-table tbody tr {
  border-bottom: 1px solid rgba(13, 77, 77, .07);
  transition: background .15s;
}

.lpe-table tbody tr:last-child { border-bottom: none; }
.lpe-table tbody tr:hover      { background: var(--lpe-primary-light); }

.lpe-table tbody td {
  padding: 13px 10px;
  font-size: 15px;
  color: #393939;
  text-align: center;
  vertical-align: middle;
}

/* ── Columna 1: identificador ── */
.lpe-col-id {
  font-weight: 700;
  font-size: 15px;
  color: var(--lpe-primary);
  white-space: nowrap;
  text-align: center;
  letter-spacing: .2px;
}

/* ── Columna 2: laboratorio ── */
.lpe-col-laboratorio {
  font-weight: 600;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Columna 3: país ── */
.lpe-col-pais {
  text-align: center;
  font-size: 14px;
  white-space: normal;
}

/* ── Columna 4: normas ──
   El flex va en el div de adentro, no en el <td>: display:flex sobre
   una celda rompe el table-layout: fixed y se van los anchos.
   column es lo que las pone una debajo de otra, como en el Excel. */
.lpe-normas-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* ── Columna 5: vigencia ── */
.lpe-col-vigencia {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #6b6b6b;
  white-space: normal;
  line-height: 1.35;
}

/* ── Columna 6: contacto ── */
.lpe-col-contacto {
  font-size: 14px;
  /* anywhere evita que una URL larga ensanche la columna */
  word-break: break-word;
  overflow-wrap: anywhere;
}

.lpe-enlace {
  color: var(--lpe-primary);
  /* El portal le mete text-decoration: underline a los enlaces en
     hover. Se apaga aquí y el subrayado lo da el border-bottom,
     que se puede animar y separar del texto. */
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, color .15s;
}

.lpe-enlace:hover,
.lpe-enlace:focus {
  color: var(--lpe-primary-hover);
  text-decoration: none !important;
  border-bottom-color: currentColor;
}

/* ============================================================
   BADGES DE NORMA
   ============================================================ */
.lpe-norma {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--lpe-ift-bg);
  color: var(--lpe-ift-text);
}

.lpe-norma--nom {
  background: var(--lpe-nom-bg);
  color: var(--lpe-nom-text);
}

/* ============================================================
   ESTADOS: cargando, sin resultados, error
   ============================================================ */
.lpe-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 20px;
  text-align: center;
  font-family: 'Noto Sans', sans-serif;
  font-size: 16px;
  color: rgba(0, 0, 0, .45);
}

.lpe-state[hidden] { display: none; }

.lpe-state i {
  font-size: 38px;
  color: #ccc;
}

.lpe-state .fa-spinner { color: var(--lpe-primary); }

.lpe-retry {
  padding: 9px 22px;
  border: 2px solid var(--lpe-primary);
  border-radius: 999px;
  background: #fff;
  color: var(--lpe-primary);
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.lpe-retry:hover {
  background: var(--lpe-primary);
  color: #fff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .lpe-wrapper { padding: 10px 10px 24px; }

  .lpe-search__input { font-size: 16px; padding: 14px 16px; }
  .lpe-search__btn   { flex: 0 0 54px; }

  /* En móvil el wrapper es transparente: cada fila trae su sombra */
  .lpe-table-wrap {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 4px 0;
    overflow-x: hidden;
  }

  /* Los labels de cada dato los pone el JS con data-label */
  .lpe-table thead { display: none; }

  .lpe-table,
  .lpe-table tbody,
  .lpe-table td {
    display: block;
    width: 100%;
    table-layout: auto;
  }

  .lpe-table { min-width: 0; }

  /* Cada fila es una tarjeta. Es flex-column para poder reordenar:
     el laboratorio va primero aunque en la tabla sea la segunda columna. */
  .lpe-table tbody tr {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px;
    margin-bottom: 10px;
    border-bottom: none;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
    overflow: hidden;
  }

  .lpe-table tbody tr:hover {
    background: var(--lpe-primary-light);
    box-shadow: 0 4px 12px rgba(13, 77, 77, .12);
  }

  /* Orden dentro de la tarjeta */
  .lpe-col-laboratorio { order: 1; }
  .lpe-col-id          { order: 2; }
  .lpe-col-pais        { order: 3; }
  .lpe-col-normas      { order: 4; }
  .lpe-col-vigencia    { order: 5; }
  .lpe-col-contacto    { order: 6; }

  .lpe-table tbody td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 5px 0;
    font-size: 14px;
    text-align: left;
  }

  .lpe-table tbody td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(0, 0, 0, .4);
    line-height: 1.4;
  }

  /* El nombre del laboratorio lleva label fijo y separador debajo */
  .lpe-col-laboratorio {
    font-size: 15px;
    font-weight: 700;
    padding: 0 0 8px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(13, 77, 77, .08);
  }

  .lpe-col-laboratorio::before { content: "Laboratorio"; }

  .lpe-normas-chips { margin-top: 3px; }

  /* En la tarjeta el identificador y el país van alineados a la
     izquierda como el resto, no centrados */
  .lpe-col-id {
    font-size: 14px;
    text-align: left;
    white-space: normal;
  }

  .lpe-col-pais     { font-size: 13px; text-align: left; }
  .lpe-col-vigencia { font-size: 13px; text-align: left; }
  .lpe-col-contacto { font-size: 13px; }
}

@media (max-width: 768px) {
    .titulo-portal {
        font-size: xxx-large !important;
        margin-bottom: 30px !important;
    }
}