/* =====================================================
   MOCKUP CONCURSO – CSS CONSOLIDADO FINAL (LIMPIO)
   ===================================================== */

/* =========================
   GLOBAL
   ========================= */

html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: Arial, 'Open Sans', sans-serif;
}

/* =========================
   Layout
   ========================= */

.layout-limitado {
    margin: 0 auto;
    padding: 0 16px;
    max-width: 100%;
}

@media (min-width: 992px) {
    .layout-limitado {
        max-width: 1280px;
        padding: 0 24px;
    }
}

/* =========================
   Section title
   ========================= */

.section-title {
    background: #337ab7;
    padding: 26px 0;
    color: #fff;
}

    .section-title h1 {
        margin: 0;
        font-size: 26px;
        font-weight: 600;
    }

    .section-title span {
        display: block;
        font-size: 14px;
        color: #e6eef7;
        margin-top: 4px;
    }

/* =========================
   Textos
   ========================= */

.descripcion-concursos {
    max-width: 900px;
    margin: 20px auto;
    font-size: 15px;
    line-height: 1.6;
    color: #464545;
    text-align: center;
}

/* =========================
   Botón consulta
   ========================= */

.btn-consulta {
    display: block;
    margin: 20px auto 30px;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
}

/* =====================================================
   GRIDVIEW – DESKTOP
   ===================================================== */

.concursos-grid table {
    width: 100%;
    border-collapse: collapse;
    margin-top:80px;
}

.concursos-grid th,
.concursos-grid td {
    padding: 14px 16px;
    vertical-align: middle;
}

.concursos-grid th {
    white-space: nowrap;
    font-weight: 600;
}

/* Fechas en una sola línea */
.concursos-grid td[data-label="Inicio"],
.concursos-grid td[data-label="Cierre"] {
    white-space: nowrap;
}

/* Texto largo solo en Cargo */
.concursos-grid td[data-label="Cargo"] {
    word-break: break-word;
}

/* =========================
   BOTONES
   ========================= */

.btn-postular {
    background-color: #2f6fae;
    color: #fff;
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 4px;
}

    .btn-postular:hover {
        background-color: #0b5ed7;
    }

.btn-detalle {
    background-color: #6c757d;
    color: #fff;
    border: none;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
}

    .btn-detalle:hover {
        background-color: #565e64;
    }

/* =====================================================
   GRIDVIEW – MOBILE (CARDS)
   ===================================================== */

@media (max-width: 768px) {

    /* Ocultar header real del GridView */
    .concursos-grid table > tbody > tr:first-child {
        display: none !important;
    }

    .concursos-grid table,
    .concursos-grid tbody {
        display: block;
        width: 100%;
    }

        .concursos-grid tbody tr {
            display: block;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 16px;
            box-shadow: 0 2px 6px rgba(0,0,0,.06);
        }

    .concursos-grid td {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 0;
        border: none;
        font-size: 14px;
    }

        .concursos-grid td::before {
            content: attr(data-label);
            font-weight: 600;
            color: #495057;
            white-space: nowrap;
        }

    .concursos-grid .btn {
        width: 100%;
        margin-top: 6px;
    }
}

/* =====================================================
   HEADER
   ===================================================== */

header {
    background: url(/images/bg_slider.jpg) no-repeat center;
    background-size: cover;
    min-height: 180px;
    padding: 20px 0 15px;
    position: relative;
}

    header .logo {
        background: rgba(255,255,255,0.7);
        max-width: 220px;
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

        header .logo img {
            max-height: 85px;
            display: block;
            margin: 0 auto;
        }

    header nav {
        background: #fff;
        width: 100%;
        position: absolute;
        bottom: -63px;
        max-width: 1140px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
    }

        header nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            header nav ul li {
                float: left;
            }

                header nav ul li a {
                    display: block;
                    padding: 20px 35px;
                    color: #706F6F;
                    font-size: 14px;
                    border-right: 1px solid #DBD9DA;
                    border-bottom: 3px solid #BDC9D1;
                    text-align: center;
                    transition: all 300ms;
                }

                    header nav ul li a:hover {
                        color: #F39200;
                        border-bottom-color: #F39200;
                        text-decoration: none;
                    }

                header nav ul li:last-child a {
                    border-right: 0;
                }

@media (max-width: 1200px) {
    header nav {
        max-width: 940px;
    }
}

@media (max-width: 993px) {
    header nav {
        max-width: 720px;
    }

        header nav ul li a {
            padding: 20px 10px;
        }
}

/* =====================================================
   PAGINACIÓN – GRIDVIEW (FINAL LIMPIO)
   ===================================================== */

/* Fila del pager */
tr.pagination-container {
    display: table-row;
}

    tr.pagination-container > td {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 24px 0 16px;
    }

    /* Botones */
    tr.pagination-container a,
    tr.pagination-container span {
        min-width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #dee2e6;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        background: #fff;
        color: #0d6efd;
        transition: all .2s ease;
    }
 

    tr.pagination-container span {
        background-color: #0d6efd;
        color: #fff;
        border-color: #0d6efd;
        box-shadow: 0 3px 8px rgba(13,110,253,.3);
    }

/* =====================================================
   FIX BOOTSTRAP – QUITAR LÍNEA ANTES DEL PAGER
   ===================================================== */

/* Última fila real de datos */
.concursos-grid table tbody tr:not(.pagination-container):last-of-type td {
    border-bottom: 0 !important;
}

/* Fila de paginación sin bordes */
.concursos-grid table tbody tr.pagination-container td {
    border-top: 0 !important;
    border-bottom: 0 !important;
}


/* =====================================================
   DEFAULT.ASPX – PAGINACIÓN CENTRADA (IGUAL COMUNICADOS)
   ===================================================== */

/* La fila del pager */
.concursos-grid tr.pagination-container {
    display: table-row;
}

    /* Celda del pager */
    .concursos-grid tr.pagination-container > td {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        gap: 10px;
        padding: 20px 0 12px !important;
        border: none !important;
    }

    /* Botones */
    .concursos-grid tr.pagination-container a,
    .concursos-grid tr.pagination-container span {
        min-width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #dee2e6;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        background: #fff;
        color: #0d6efd;
        transition: all .2s ease;
    }

 

    /* Página activa */
    .concursos-grid tr.pagination-container span {
        background-color: #0d6efd;
        color: #fff;
        border-color: #0d6efd;
        box-shadow: 0 3px 8px rgba(13,110,253,.3);
    }

/* Quitar líneas de tabla arriba/abajo */
.concursos-grid table tr.pagination-container td {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.concursos-grid table tbody tr:not(.pagination-container):last-of-type td {
    border-bottom: 0 !important;
}

tr.pagination-container a:hover,
.concursos-grid tr.pagination-container a:hover {
    background-color: transparent;
    border-color: #0d6efd;
}
/* Quitar fondo gris debajo de la paginación */
.concursos-grid tr.pagination-container,
.concursos-grid tr.pagination-container td {
    background: transparent !important;
}

/* =====================================================
   FILAS VENCIDAS – CONCURSOS
   ===================================================== */

/* DESKTOP – ganar a Bootstrap */
.concursos-grid table tr.fila-vencida > td {
    background-color: #f1f1f1 !important;
    color: #999 !important;
}

/* Quitar hover de bootstrap */
.concursos-grid table tr.fila-vencida:hover > td {
    background-color: #f1f1f1 !important;
}

/* MOBILE – cards */
@media (max-width: 768px) {
    .concursos-grid tbody tr.fila-vencida {
        background: #f1f1f1 !important;
        border-color: #d6d6d6;
        box-shadow: none;
    }

        .concursos-grid tbody tr.fila-vencida td {
            background: transparent !important;
            color: #999 !important;
        }
}

/* Deshabilitar interacción */
.concursos-grid tr.fila-vencida a,
.concursos-grid tr.fila-vencida button {
    pointer-events: none;
    opacity: 0.65;
}