/* ================= LICITACIONES ================= */
.detalle-licitacion h2{
    margin-bottom: 30px;
    margin-top: 60px;
}

.conv-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; }
.conv-head h2 { margin-top: 10px}
.see-all { color: var(--azul); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.see-all:hover { color: var(--verde); }
.conv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.conv-card {
  background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: .25s;
}
.conv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.conv-thumb { position: relative; height: 180px; }
.conv-thumb img { width: 100%; height: 100%; object-fit: cover; }

/*################### SECCION BADGE ESTADOS ################## */
.badge {
  position: absolute; top: 14px; left: 14px; color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-title);
  padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}

.badge-detalle{
    position: static;display: inline-block;
}
.badge.abierta {
  background: var(--azul);
}
.badge.activa {
  background: var(--verde);
}
.badge.en_estudio {
  background: var(--gris-500);
}
.badge.adjudicada {
  background: var(--morado);
}
.badge.cerrada {
  background: var(--rojo);
}
.conv-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.tag { align-self: flex-start; background: var(--gris-100); color: var(--gris); font-size: var(--fs-body); font-weight: var(--fw-semibold); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.conv-id { font-size: var(--fs-xs); color: var(--gris-500); font-weight: var(--fw-semibold); letter-spacing: .04em; }
.conv-body h4 { margin: 6px 0 10px; }
.conv-loc { font-size: var(--fs-sm); color: var(--gris-500); margin-bottom: 10px; margin-bottom: 10px; }
.conv-body .desc { font-size: var(--fs-card); color: var(--gris-500); margin-bottom: 18px; flex: 1; }
.conv-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.conv-price { color: var(--azul); font-weight: var(--fw-title); font-size: var(--fs-h4); }
.conv-date { font-size: var(--fs-sm); color: var(--gris-500); }
.btn-block { display: block; text-align: center; background: var(--azul); color: #fff; font-weight: var(--fw-semibold); padding: 12px; border-radius: 10px; transition: .2s; }
.btn-block:hover { background: var(--verde); }


/* ================= WHATSAPP ================= */
.whatsapp-widget {
  position: fixed; right: 26px; bottom: 26px; width: 56px; height: 56px; border-radius: 999px;
  background: var(--verde); color: #fff; display: grid; place-items: center; z-index: 60;
  box-shadow: 0 8px 24px rgba(42, 140, 85, .45); transition: .2s;
}
.whatsapp-widget:hover { transform: scale(1.06); }
.whatsapp-widget svg { width: 30px; height: 30px; }
.whatsapp-tip {
  position: fixed; right: 92px; bottom: 40px; background: var(--azul); color: #fff;
  font-size: var(--fs-sm); padding: 8px 14px; border-radius: 8px; z-index: 60; opacity: 0;
  pointer-events: none; transition: .2s; white-space: nowrap;
}
.whatsapp-widget:hover + .whatsapp-tip { opacity: 1; }

.licitaciones-page {
  background: var(--gris-100);
  min-height: 100vh;
}

.licitaciones-top {
  text-align: center;
  margin-bottom: 40px;
}

.licitaciones-top h1 {
  margin-bottom: 12px;
}

.licitaciones-top p {
  max-width: 700px;
  margin: auto;
  color: var(--gris-500);
}

/* --- FILTROS DE LICITACIONES (Diseño de Referencia) --- */
.licitaciones-filtros {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Fila Superior: Search Bar, Selects y Botón */
.licitaciones-search-bar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.input-with-icon {
  position: relative;
  flex: 2;
  min-width: 260px;
}

.input-with-icon .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gris-500);
  pointer-events: none;
}

.input-with-icon input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border: 1px solid var(--gris-200);
  border-radius: 8px;
  background-color: var(--gris-100);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--azul-900);
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.input-with-icon input:focus {
  background-color: var(--blanco);
  border-color: var(--azul);
}

.select-wrapper {
  position: relative;
  flex: 1;
  min-width: 150px;
}

.select-wrapper select {
  width: 100%;
  padding: 11px 36px 11px 14px;
  border: 1px solid var(--gris-200);
  border-radius: 8px;
  background-color: var(--gris-100);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--azul-900);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%22%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7378%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px top 50%;
  background-size: 10px auto;
  transition: border-color 0.2s, background-color 0.2s;
}

.select-wrapper select:focus {
  border-color: var(--azul);
  background-color: var(--blanco);
}

.btn-buscar {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--azul);
  color: var(--blanco);
  border: none;
  padding: 11px 24px;
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-buscar:hover {
  background-color: var(--verde);
}

/* Fila Inferior: Tabs de Navegación y Conmutador de Vista */
.licitaciones-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--gris-200);
  padding-top: 4px;
}

.tabs-container {
  display: flex;
  gap: 24px;
}

.tab-item {
  background: none;
  border: none;
  padding: 12px 0;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--gris-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.tab-item.active {
  color: var(--azul);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--azul);
}

.tab-item:hover:not(.active) {
  color: var(--azul-900);
}


/*############# BADGE ESTADO EN TARJETA ############ */

.tab-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 2px 8px;
  border-radius: 12px;
}

.badge-abierta {
  background-color: var(--azul);
  color: var(--blanco);
}

.badge-activa {
  background-color: var(--verde);
  color: var(--blanco);
}

.badge-en_estudio {
  background-color: var(--gris-500);
  color: var(--blanco);
}

.badge-adjudicada {
  background-color: var(--morado);
  color: var(--blanco);
}

.badge-cerrada {
  background-color: var(--rojo);
  color: var(--blanco);
}
.btn-filtros-extra {
  color: var(--azul-900);
  margin-left: 8px;
}
/* ####  */
.view-toggle {
  display: flex;
  gap: 4px;
  padding-bottom: 8px;
}

.view-btn {
  background: none;
  border: none;
  padding: 6px;
  border-radius: 6px;
  color: var(--gris-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}

.view-btn.active {
  background-color: rgba(42, 140, 85, 0.15);
  color: var(--verde);
}

.view-btn:hover:not(.active) {
  background-color: var(--gris-100);
  color: var(--azul-900);
}

/* --- LISTADO Y PAGINACIÓN --- */
.licitacion-counter {
  margin-bottom: 25px;
  color: var(--gris-500);
  font-size: var(--fs-sm);
}

.conv-grid-listado {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}

.pagination a,
.pagination span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
}

.pagination a {
  background: #fff;
  border: 1px solid var(--gris-200);
  color: var(--azul);
}

.pagination a:hover {
  background: var(--azul);
  color: #fff;
}

.active-page {
  background: var(--verde);
  color: #fff;
  font-weight: 700;
}


/* ============ VISTA DETALLE =================== */

.detalle-grid{
    display:grid;
    grid-template-columns: 8fr 2fr;
    gap:30px;
}

.detalle-hero{
    display:flex;
    gap:30px;
    margin-bottom:30px;
}

.detalle-imagen{
    width:100%;
}

.detalle-imagen img{
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:16px;
    display:block;
}

.detalle-card{
    background:#fff;
    border:1px solid var(--gris-200);
    border-radius:16px;
    padding:24px;
    margin-top:24px;
    box-shadow:var(--shadow);
}

.detalle-info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:24px;
}

.detalle-info-grid label{
    display:block;
    font-size:.75rem;
    color:var(--gris-500);
}

.detalle-info-grid span{
    font-weight:600;
}

.descripcion{
  margin-top: 20px;
}

.btn-descargar{
    background:var(--azul);
    color:white;
    padding:8px 16px;
    border-radius:8px;
    font-size:.85rem;
}

.btn-descargar:hover{
    background:var(--verde);
}





/* ============ DOCUMENTOS =================== */

.documentos-card{
    background:#fff;
    border:1px solid var(--gris-200);
    border-radius:18px;
    padding:22px;
    box-shadow:var(--shadow);
}

.documentos-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.documentos-header h3{
    margin:0;
    font-size:1.2rem;
}

.documentos-count{
    font-size:.85rem;
    color:#a6a6c3;
}

.documentos-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.documento-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border:1px solid #eef1f4;
    border-radius:12px;
    background:#fff;
}

.documento-info{
    display:flex;
    align-items:center;
    gap:14px;
    flex:1;
    min-width:0;
    overflow:hidden;
}

.documento-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    background:#e7f3f1;
    color:var(--azul);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    flex-shrink:0;
}

.documento-content{
    flex:1;
    min-width:0;
    width:0;
    max-width:100%;
    overflow:hidden;
}

.documento-content h5{
    margin:0;
    font-size:.92rem;
    font-weight:600;
    color:#1f2937;

    display:block;
    width:100%;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.documento-content span{
    display:block;
    margin-top:2px;
    font-size:.78rem;
    color:#94a3b8;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.btn-download{
    border:1px solid var(--azul);
    color:var(--azul);
    padding:8px 18px;
    border-radius:10px;
    font-size:.82rem;
    font-weight:600;
    text-decoration:none;
    transition:.2s;
    flex-shrink:0;
}

.btn-download:hover{
    background:var(--azul);
    color:#fff;
}



/* ================= RESPONSIVE GENERAL ================= */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 60px 24px; }
  .hero-media { min-height: 340px; }
  .about-grid, .mv-grid, .valores-grid, .porque-grid { grid-template-columns: 1fr; gap: 34px; }
  .pilares-grid, .conv-grid, .proyecto-grid, .equipo-grid { grid-template-columns: 1fr; }
  .equipo-especialidades { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  nav { display: none; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .about-features, .equipo-especialidades { grid-template-columns: 1fr; }
  .conv-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ================= RESPONSIVE FILTROS LICITACIONES ================= */
@media (max-width: 768px) {
  .licitaciones-search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .input-with-icon,
  .select-wrapper {
    width: 100%;
    min-width: 100%;
  }

  .licitaciones-nav-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .tabs-container {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 6px;
  }
}


/* ================= RESPONSIVE DETALLE ================= */
@media(max-width:960px){

    .detalle-grid{
        grid-template-columns:1fr;
    }

    .detalle-info-grid{
        grid-template-columns:1fr 1fr;
    }
}

/* =============== RESPONSIVE - DOCUMENTOS ================== */

@media (max-width:768px){

    .documentos-header{
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
    }

    .documento-item{
        padding:12px;
    }

    .documento-info{
        flex:1;
        min-width:0;
        width:0;
    }

    .documento-content{
        flex:1;
        min-width:0;
        width:0;
    }

    .documento-content h5{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .btn-download{
        width:42px;
        height:42px;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
    }
}