:root{
  --tr-green:#00776d;
  --tr-green-dark:#005e56;
  --tr-gray:#e6e6e6;
  --tr-bg:#f5f5f5;
  --tr-text:#1a1a1a;
  --tr-card-radius:16px;
  --tr-shell-radius:14px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--tr-bg);
  color:var(--tr-text);
}

/*Evitar Colision - Evitar <p> inyectado por el editor alrededor de elementos */
.transparencia__accordion-item > p,
.transparencia__clasificacion-wrapper > p,
.transparencia__search-container > p,
.transparencia__filters-controls > p{
  display: contents;
}

.transparencia__accordion-item p,
.transparencia__clasificacion-wrapper p,
.transparencia__search-container p, 
.transparencia__filters-controls p{
  margin: 0;
  padding: 0;
}

/* ==============================================================
    CARD DE INTRODUCCION
    (Usar para aquellas que tiene UNA sola linea de descripcion)
   ============================================================== */
/* .crt-transparencia__card {
  width: 100%;
  max-width: 1164px;
  min-height: 92px;
  margin: 30px auto 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center; 
  padding: 35px 25px;
  gap: 10px;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px 0px #00000040;
  border: 1px solid #017977; 
} */

.crt-transparencia__texto {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  color: #1B3F42;
  margin: 30px;
  text-align: center;
}

/* ====== Transparencia ====== */
.transparencia{
  max-width:1200px;
  margin:0 auto;
  padding:24px 20px 36px;
}

.transparencia__titulo{
  text-align:center;
  font-size:72px;
  line-height:1.05;
  font-weight:900;
  margin:18px 0 22px;
  letter-spacing:-0.6px;
  color:#000;
  font-family:"Noto Sans" !important;
}

.transparencia__contenedor{
  background:#fff;
  border-radius:var(--tr-shell-radius);
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  padding:18px;
}

/* Tabs */
.transparencia__tabs{
  display:flex;
  border-radius:12px;
  overflow:hidden;
  background:var(--tr-gray);
}

.transparencia__tab{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  flex:1 1 50%;
  padding:18px 14px;
  font-size:22px;
  font-weight:800;
  color:#4a4a4a;

  /* Para <a> */
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.transparencia__tab[aria-selected="true"]{
  background:var(--tr-green);
  color:#fff;
}

/* Panels */
.transparencia__panel{
  padding:22px 6px 6px;
}
.transparencia__panel[hidden]{ display:none; }

/* Grid de tarjetas */
.transparencia__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.transparencia__grid--2col{
  grid-template-columns:repeat(2, 1fr);
}

.transparencia__card{
  background:#fff;
  border-radius:var(--tr-card-radius);
  box-shadow:0 2px 14px rgba(0,0,0,.08);
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  min-height:190px;
}

.transparencia__card-title{
  margin:0 0 12px;
  font-size:26px;
  line-height:1.15;
  font-weight:900;
  color:#1a1a1a;
}

.transparencia__card-text{
  margin:0 0 18px;
  font-size:18px;
  line-height:1.45;
  color:#3a3a3a;
}

.transparencia__card-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--tr-green);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

.transparencia__card-link:hover{ color:var(--tr-green-dark); }

.transparencia__arrow{
  font-size:22px;
  line-height:1;
}

/* ====== Detalle ====== */
.transparencia__top-actions{
  margin:18px 0 10px;
}

.transparencia__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:10px;
  border:none;
  background:#fff;
  color:var(--tr-green);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
}

.transparencia__back:hover{
  background:color-mix(in srgb, var(--tr-green) 8%, #fff);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}

.transparencia__back:active{
  transform:scale(0.97);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

.transparencia__back:focus-visible{
  outline:2px solid var(--tr-green);
  outline-offset:2px;
}

.transparencia__back-icon{
  font-size:20px;
  line-height:1;
  margin-top:-5px;
  transition:transform .2s ease;
}

.transparencia__back:hover .transparencia__back-icon{
  transform:translateX(-3px);
}

.transparencia__detail-header{
  padding:8px 10px 6px;
  text-align:center;
}

.transparencia__detail-title{
  margin:10px 0 6px;
  font-size:44px;
  line-height:1.1;
  font-weight:900;
  color:#1a1a1a;
}

.transparencia__detail-subtitle{
  margin:0 auto 10px;
  max-width:900px;
  font-size:20px;
  line-height:1.45;
  color:#3a3a3a;
  text-align:center;
}

.transparencia__divider{
  border:0;
  border-top:1px solid #d9d9d9;
  margin:16px 0 18px;
}

.transparencia__info-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 14px rgba(0,0,0,.08);
  padding:18px 18px 10px;
}

.transparencia__info-title{
  margin:4px 0 12px;
  font-size:20px;
  font-weight:900;
  color:#1a1a1a;
}

.transparencia__info-block{
  margin:0 0 12px;
}

.transparencia__info-label{
  margin:0 0 4px;
  font-weight:900;
  color:#1a1a1a;
}

.transparencia__info-text{
  margin:0;
  color:#2f2f2f;
  line-height:1.5;
}

.transparencia__info-link{
  color:var(--tr-green);
  text-decoration:underline;
  text-underline-offset:3px;
}

.transparencia__info-link:hover{
  color:var(--tr-green-dark);
}

/* ====== Accordeon de Avisos (7 cards desplegables) ====== */
.transparencia__accordion{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}

.transparencia__accordion-item{
  width: 100%;
  max-width: 1320px;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  overflow:hidden;
  background: #FFFFFF;
  opacity: 1;
  margin: 0 auto;
  transition: box-shadow 0.3s ease;
}

.transparencia__accordion-trigger{
  width:100%;
  height: 75px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 18px 30px 18px 23px;
  border:none;
  background: #FFFFFF;
  color:var(--tr-text);
  font-size:16px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:background .2s ease;
}

.transparencia__accordion-trigger:hover{
  background:color-mix(in srgb, var(--tr-green) 6%, #fff);
}

.transparencia__accordion-trigger:focus-visible{
  outline:2px solid var(--tr-green);
  outline-offset:-2px;
}

.transparencia__accordion-item:hover{
  box-shadow: 0px 4px 4px 0px #00000040;
}

.transparencia__accordion-trigger[aria-expanded="true"]{
  background: #0D4D4D;
  color: #FFFFFF;
  border-bottom: 1px solid #D9D9D9;
}

.transparencia__accordion-icon{
  flex-shrink:0;
  transition:transform .25s ease;
}

.transparencia__accordion-icon path{
  transition:stroke .2s ease;
}

.transparencia__accordion-trigger[aria-expanded="true"] .transparencia__accordion-icon{
  transform:rotate(180deg);
}

.transparencia__accordion-trigger[aria-expanded="true"] .transparencia__accordion-icon path{
  stroke: #FFFFFF;
}

.transparencia__accordion-panel{
  padding:16px 20px 20px;
  font-size:15px;
  line-height:1.55;
  color:#3a3a3a;
  border-top:1px solid #D9D9D9;
}

.transparencia__accordion-links{
  list-style:none;
  margin:0;
  padding:0;
  display: grid; 
  grid-auto-rows: 1fr; 
  gap:10px;
}

.transparencia__accordion-links li{
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 70px;
  padding: 15px 20px;
  border: 1px solid #E4E4E4;
  border-radius: 8px;
  background: #FFFFFF;
}

.transparencia__accordion-links a{
  display: flex;
  align-items: center; 
  gap: 8px;
  color: var(--tr-green);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex: 1;
  line-height: 1.4;
}

.transparencia__accordion-links svg {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  padding: 9px 9px;
  background: #E6F0F0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transparencia__accordion-links a:hover{
  color:var(--tr-green-dark);
}

.transparencia__accordion-links a:focus-visible{
  outline:2px solid var(--tr-green);
  outline-offset:2px;
  border-radius:2px;
}

/*Lista de documentos con encabezado*/
.transparencia__accordion-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items: start;
}

.transparencia__accordion-column{
  display:flex;
  flex-direction:column;
}

.transparencia__column-title{
  margin:0 0 12px;
  font-size:16px;
  font-weight:900;
  color:#1A4043;
}

.transparencia__accordion-column .transparencia__accordion-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/*Buscador*/
.transparencia__filters-search-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 1.5rem;
  width: 100%;
}

.transparencia__search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.transparencia__search-box {
  display: flex;
  align-items: center;
  flex: 1;
  height: 40px;
  padding: 16px 22px 15px 22px;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 28px;
}

.transparencia__search-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.transparencia__search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1a1a1a;
}

.transparencia__search-input::placeholder {
  color: #999999;
}

.transparencia__search-button {
  width: 100px !important;
  height: 40px !important;
  padding: 0 10px;
  background: #3B8082;
  border: none;
  border-radius: 80px;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transparencia__search-button:hover {
  background: #2d5f61;
}

.transparencia__search-button:active {
  background: #1f4244;
}

.transparencia__accordion-links li.search-highlight a {
  font-weight: 600;
  border-left: 3px solid #00776d;
  padding-left: 8px;
}

/* ===== Select de Clasificacion ===== */
.transparencia__clasificacion-wrapper {
  display: flex;
  align-items: center;
  height: 40px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 28px;
  padding: 0 22px;
  width: fit-content;
  transition: border-color 0.2s ease;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.transparencia__clasificacion-wrapper:hover {
  border-color: #999999;
}

.transparencia__clasificacion-select {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1a1a1a;
  cursor: pointer;
  padding: 0 0 0 8px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  width: fit-content;
  height: 100%;
  line-height: 40px;
  text-align: left;
}

.transparencia__clasificacion-select::-ms-expand {
  display: none;
}

.transparencia__clasificacion-select:focus {
  outline: none;
}

.transparencia__clasificacion-select option {
  color: #1a1a1a;
  background: #FFFFFF;
  padding: 10px;
  text-align-last: left; /* text-align-last: center; */
}

.transparencia__clasificacion-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 12px;
  height: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: none;
  margin-left: 0;
}

.transparencia__clasificacion-icon svg {
  width: 12px;
  height: 7px;
}

.transparencia__filters-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.transparencia__filters-controls .transparencia__clasificacion-wrapper {
  width: fit-content; 
  flex-shrink: 0;
}

.transparencia__filters-controls .transparencia__search-button {
  flex-shrink: 0;
  width: 80px;
  height: 40px;
}

/* ===== Responsive (grid principal) ===== */
@media (max-width: 900px){
  .transparencia__grid{ grid-template-columns:repeat(2,1fr); }
  .transparencia__grid--2col{ grid-template-columns:repeat(2, 1fr); }
  .transparencia__titulo{ font-size:48px; }
  .transparencia__tab{ font-size:18px; padding:14px 12px; }
  .transparencia__detail-title{ font-size:36px; }
  .transparencia__detail-subtitle{ font-size:18px; }
}

@media (max-width: 768px){
  .transparencia{ padding:16px 12px 26px; }
  .transparencia__contenedor{ padding:14px; }
  .transparencia__titulo{ font-size:38px; margin:12px 0 16px; }
  .transparencia__tab{ font-size:16px; padding:12px 10px; }
  .transparencia__panel{ padding:16px 2px 2px; }
  .transparencia__grid{ grid-template-columns:1fr; gap:16px; }
  .transparencia__grid--2col{ grid-template-columns:1fr; }
  .transparencia__card{ padding:22px 18px; min-height:auto; }
  .transparencia__card-title{ font-size:22px; }
  .transparencia__card-text{ font-size:16px; }
  .transparencia__search-input { width: 100%; }
  .transparencia__search-button { width: 100%;}
  .transparencia__search-box { width: 100%; }
  .transparencia__detail-title { font-size:30px; }
  .transparencia__detail-subtitle { font-size:16px; }
  .transparencia__info-card{ padding:16px 14px 8px; }
  .transparencia__accordion-trigger{ font-size:15px; padding:14px 16px; }
  .transparencia__accordion-panel{ font-size:14px; padding:14px 16px 18px; }
  .transparencia__accordion-columns{ grid-template-columns:1fr; gap:16px; }
  .transparencia__search-container { flex-direction: column; gap: 12px;}
  .transparencia__clasificacion-wrapper{ width: 100%; min-width: 0; overflow: hidden; }
  /* .crt-transparencia__card { padding: 20px 20px; min-height: auto; } */
  .crt-transparencia__texto { font-size: 16px; line-height: 1.4; }
  .transparencia__accordion-trigger{ height:auto; min-height:64px; align-items:flex-start; padding:14px 16px; }
  .transparencia__accordion-trigger > span{ padding-top:2px; }
  .transparencia__accordion-icon{ margin-top:4px; }
  .transparencia__accordion-links li{ align-items:flex-start; min-height:auto; padding:12px 14px; }
  .transparencia__accordion-links svg{ margin-top:2px; }
  .transparencia__clasificacion-select{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .transparencia__search-button{ width: 150px !important; height: 30px !important; font-size: 14px !important; padding: 6px 12px;}  
  .transparencia__filters-controls { flex-direction: column; gap: 12px; }
  .transparencia__filters-controls .transparencia__search-button { width: 100%; margin-left: 0; }
  .transparencia__filters-controls .transparencia__clasificacion-wrapper { width: 100%; }
}

@media (max-width: 480px){
  .transparencia{ padding:12px 8px 20px; }
  .transparencia__contenedor{ padding:10px; }
  .transparencia__titulo{ font-size:28px; margin:10px 0 12px; }
  .transparencia__detail-title{ font-size:24px; }
  .transparencia__detail-subtitle{ font-size:15px; }
  .transparencia__tab{ font-size:14px; padding:10px 8px; }
  /* .crt-transparencia__card{ padding:16px; min-height:auto; } */
  .crt-transparencia__texto{ font-size:14px; }
  .transparencia__search-box{ padding:10px 16px; }
  .transparencia__search-input{ font-size:14px; }
  .transparencia__clasificacion-wrapper{ padding:0 16px; }
  .transparencia__accordion-trigger{ font-size:14px; line-height:1.35; padding:12px 14px; }
  .transparencia__accordion-links li{ font-size:13px; padding:10px 12px; gap:8px; }
  .transparencia__accordion-links svg{ width:28px; height:28px; padding:6px; }
  .transparencia__column-title{ font-size:14px; }
  .transparencia__back{ padding:8px 14px; font-size:14px; }
  .transparencia__search-button{ width: 110px; height: 44px; font-size: 14px; }
}

@media (max-width: 1200px) {
  .transparencia__search-box { width: 100%; max-width: 935px; }
}