/* ==========================================================================
   Documentos – portal público de despacho de gas natural
   Valores tomados de la maqueta Documentos-diarios.html (basada en
   style.min.css y menu.min.css). Todo va bajo .tgp-despacho para no afectar
   al resto del tema. La fuente Corbel ya la declara style.min.css.
   ========================================================================== */
.tgp-despacho {
  --despacho-bg: #f6f6f6;
  --despacho-card: #fff;
  --despacho-tx: #000;
  --despacho-mu: #5b585b;
  --despacho-bd: #dedede;
  --despacho-pr: #0081af;
  --despacho-on: #fff;
  --despacho-or: #fa582e;
  --despacho-or2: #ec6331;
  --despacho-tag: #e5f2f7;
  --despacho-g1: #0baebd;
  --despacho-g2: #2c5381;

  background: var(--despacho-bg);
  color: var(--despacho-mu);
  font-size: 16px;
  line-height: 1.5;
}
.tgp-despacho *,
.tgp-despacho *::before,
.tgp-despacho *::after { box-sizing: border-box; }
.tgp-despacho a { color: var(--despacho-pr); text-decoration: none; }

/* Banner
   -------------------------------------------------------------------------- */
.tgp-despacho__banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 320px;
  padding: 0 25px;
  background: linear-gradient(90deg, var(--despacho-g1), var(--despacho-g2));
  background-size: cover;
  background-position: center;
}
.tgp-despacho__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #00000000 0, #000000B3 100%);
}
.tgp-despacho__wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 80px;
}
.tgp-despacho__migas { margin-bottom: 8px; color: #fff; font-size: 15px; }
.tgp-despacho__migas a { color: #fff; }
.tgp-despacho__migas a:hover { text-decoration: underline; }
.tgp-despacho__migas span[aria-hidden] { margin: 0 4px; }
.tgp-despacho__banner h1 { margin: 0; color: #fff; font-size: 40px; font-weight: 700; line-height: 1.2; }
.tgp-despacho__intro { max-width: 720px; margin: 12px 0 0; color: #fff; font-size: 18px; line-height: 1.5; }
@media (max-width: 480px) {
  .tgp-despacho__banner h1 { font-size: 30px; }
  .tgp-despacho__intro { font-size: 16px; }
}

/* Botones
   -------------------------------------------------------------------------- */
.tgp-despacho .tgp-despacho__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border: 2px solid var(--despacho-pr);
  border-radius: 0;
  background: var(--despacho-card);
  color: var(--despacho-pr);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: all .3s;
}
.tgp-despacho .tgp-despacho__btn:hover { background: var(--despacho-pr); color: var(--despacho-on); }
.tgp-despacho .tgp-despacho__btn--primario { background: var(--despacho-pr); color: var(--despacho-on); }
.tgp-despacho .tgp-despacho__btn--primario:hover { background: var(--despacho-card); color: var(--despacho-pr); }
.tgp-despacho .tgp-despacho__btn--naranja { background: var(--despacho-or); border-color: var(--despacho-or); color: #fff; }
.tgp-despacho .tgp-despacho__btn--naranja:hover { background: var(--despacho-card); color: var(--despacho-or); }
.tgp-despacho .tgp-despacho__btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.tgp-despacho .tgp-despacho__btn[aria-current="page"] { cursor: default; }
.tgp-despacho .tgp-despacho__btn:focus-visible,
.tgp-despacho .tgp-despacho__input:focus-visible,
.tgp-despacho__lateral a:focus-visible,
.tgp-despacho__tabla th a:focus-visible {
  outline: 3px solid var(--despacho-or2);
  outline-offset: 2px;
}

/* Filtros
   -------------------------------------------------------------------------- */
.tgp-despacho__filtros {
  position: relative;
  z-index: 5;
  max-width: 1200px;
  margin: -80px auto 0;
  padding: 32px 24px;
  border: 1px solid var(--despacho-bd);
  background: var(--despacho-card);
}
.tgp-despacho__filtros h2 { margin: 0 0 18px; color: var(--despacho-tx); font-size: 16px; font-weight: 700; }
.tgp-despacho__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin: 0; }
/* Los campos se reparten todo el ancho; "Ordenar por" es algo más ancho por sus textos. */
.tgp-despacho__label {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--despacho-tx);
  font-size: 16px;
  font-weight: 700;
}
.tgp-despacho__label--orden { flex-grow: 1.5; }
.tgp-despacho .tgp-despacho__label .tgp-despacho__input { width: 100%; }
.tgp-despacho .tgp-despacho__label--fecha .tgp-despacho__input { min-width: 110px; padding-right: 16px; }
.tgp-despacho .tgp-despacho__input:disabled { opacity: .5; cursor: not-allowed; }
.tgp-despacho .tgp-despacho__input {
  height: 54px;
  padding: 14px 24px;
  border: 1px solid var(--despacho-bg);
  border-radius: 0;
  background: var(--despacho-bg);
  color: var(--despacho-mu);
  font: inherit;
  font-weight: 400;
  transition: all .5s;
}
.tgp-despacho .tgp-despacho__input:focus { border-color: #f2916e; }
.tgp-despacho .tgp-despacho__btn--form { flex: 0 0 167px; width: 167px; height: 54px; }
/* Tablet: año, mes y día en una fila; "Ordenar por" y "Limpiar" en la siguiente. */
@media (min-width: 821px) and (max-width: 1024px) {
  .tgp-despacho__label.tgp-despacho__label--fecha { flex: 1 1 calc(33.33% - 14px); }
  .tgp-despacho__label--orden { flex: 1 1 0; }
}

/* Layout
   -------------------------------------------------------------------------- */
.tgp-despacho__layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 0 60px;
}
.tgp-despacho__layout--sin-lateral { grid-template-columns: minmax(0, 1fr); }
.tgp-despacho__principal { min-width: 0; }
@media (max-width: 1230px) {
  .tgp-despacho__layout,
  .tgp-despacho__filtros { margin-left: 15px; margin-right: 15px; }
}
@media (max-width: 820px) {
  .tgp-despacho__layout { grid-template-columns: minmax(0, 1fr); }
  .tgp-despacho__filtros { padding: 24px 16px; }
  .tgp-despacho__label { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .tgp-despacho .tgp-despacho__input { width: 100%; min-width: 0; padding: 14px 16px; }
  .tgp-despacho .tgp-despacho__btn--form { flex: 1 1 calc(50% - 10px); width: auto; }
}
@media (max-width: 480px) {
  .tgp-despacho__banner { padding: 0 15px; }
  .tgp-despacho__label,
  .tgp-despacho .tgp-despacho__btn--form { flex-basis: 100%; }
}
@media (max-width: 820px) {
  .tgp-despacho__form { column-gap: 12px; }
  .tgp-despacho__label.tgp-despacho__label--fecha { flex: 1 1 calc(33.33% - 8px); }
  .tgp-despacho .tgp-despacho__label--fecha .tgp-despacho__input { min-width: 0; padding: 14px 10px; }
}

/* Menú lateral
   -------------------------------------------------------------------------- */
.tgp-despacho__lateral { align-self: start; border: 1px solid var(--despacho-bd); background: var(--despacho-card); }
.tgp-despacho__lateral h3 {
  margin: 0;
  padding: 18px 20px 11px;
  color: var(--despacho-pr);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
.tgp-despacho .tgp-despacho__lateral a { display: block; padding: 12px 20px; border-left: 3px solid transparent; color: var(--despacho-mu); }
.tgp-despacho .tgp-despacho__lateral a:hover { color: var(--despacho-pr); }
.tgp-despacho .tgp-despacho__lateral a[aria-current] { border-left-color: var(--despacho-pr); color: var(--despacho-pr); font-weight: 700; }

/* Tabla de resultados
   -------------------------------------------------------------------------- */
.tgp-despacho__card { border: 1px solid var(--despacho-bd); background: var(--despacho-card); transition: opacity .2s; }
.tgp-despacho__card[aria-busy="true"] { opacity: .5; }
.tgp-despacho__contador { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 16px 20px; color: var(--despacho-mu); font-size: 19px; }
.tgp-despacho__contador-fecha { text-align: right; }
.tgp-despacho__tabla-scroll { overflow-x: auto; }
.tgp-despacho__tabla { width: 100%; min-width: 620px; margin: 0; border-collapse: collapse; }
.tgp-despacho__tabla th,
.tgp-despacho__tabla td { padding: 14px 20px; border-top: 1px solid var(--despacho-bd); text-align: left; vertical-align: middle; }
.tgp-despacho__tabla th { color: var(--despacho-tx); font-size: 15px; font-weight: 700; white-space: nowrap; }
.tgp-despacho .tgp-despacho__tabla th a { color: var(--despacho-tx); font-weight: 700; }
.tgp-despacho .tgp-despacho__tabla th a:hover { color: var(--despacho-pr); }
.tgp-despacho__nombre { color: var(--despacho-tx); font-weight: 700; word-break: break-all; }
.tgp-despacho__tag {
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--despacho-tag);
  color: var(--despacho-pr);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.tgp-despacho__vacio { padding: 40px 18px !important; text-align: center !important; }

/* Paginación
   -------------------------------------------------------------------------- */
.tgp-despacho__paginacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border-top: 1px solid var(--despacho-bd);
}
.tgp-despacho__paginacion .tgp-despacho__btn { min-width: 44px; }

/* Vista previa (modal)
   -------------------------------------------------------------------------- */
.tgp-despacho__dialogo {
  width: min(900px, 92vw);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--despacho-bd);
  background: var(--despacho-card);
  color: var(--despacho-mu);
}
.tgp-despacho__dialogo::backdrop { background: rgba(0, 0, 0, .5); }
.tgp-despacho__dialogo-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--despacho-bd);
  color: var(--despacho-tx);
  font-weight: 700;
  word-break: break-all;
}
.tgp-despacho__vista {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  margin: 18px;
  text-align: center;
}
.tgp-despacho__vista--vacia { padding: 20px; border: 2px dashed var(--despacho-bd); }
.tgp-despacho__vista iframe { width: 100%; height: 65vh; border: 0; }
.tgp-despacho__vista img { max-width: 100%; max-height: 65vh; }
.tgp-despacho__dialogo-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 0 18px 18px; }