:root {
    --green: #2e7d32;
    --green-light: #43a047;
    --red: #c62828;
    --yellow: #f9a825;
    --yellow-light: #fabd5c;
    --blue: #1565c0;
    --header-bg: #1b5e20;
    --bg: #f4f6f4;
    --border: #e0e0e0;
    --info: #17a2b8;
}

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

body {
    background: var(--bg);
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
}

/* ── Navbar placeholder ── */
.top-bar {
    background: var(--header-bg);
    color: #fff;
    padding: .45rem 1rem;
    font-size: .82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
}

/* ── Breadcrumb ── */
.breadcrumb-wrapper {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: .4rem 0;
}

.breadcrumb-item a {
    color: var(--green);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: #555;
}

/* ── Page title ── */
.page-title {
    text-align: center;
    color: var(--green);
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 700;
    padding: 1.5rem 0 1rem;
    margin: 0;
}

/* ══════════════════════════════════════
           TABLE HEADER ROW
        ══════════════════════════════════════ */
.conv-table-header {
    display: grid;
    grid-template-columns: 2.5fr 2fr 2fr 2fr 1.5fr;
    gap: 0;
    background: #fff;
    border-bottom: 2px solid #e0e0e0;
    padding: 0.6rem 0;
}

.conv-table-header .col-head {
    color: var(--ugel-green);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 0 1rem;
}

/* ══════════════════════════════════════
           PROCESS ROW CARD
        ══════════════════════════════════════ */
.conv-row {
    display: grid;
    grid-template-columns: 2.5fr 2fr 2fr 2fr 1.5fr;
    gap: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: .8rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
    transition: box-shadow .2s;
}

.conv-row:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

/* Left name cell — coloured */
.conv-name-cell {
    padding: 1.2rem 1rem;
    color: #fff !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.conv-name-cell.finalizado  { background: var(--green-light); }
.conv-name-cell.progreso    { background: var(--info); }
.conv-name-cell.pendiente { background: var(--yellow-light); }
.conv-name-cell.evaluacion   { background: var(--blue); }

.conv-name-cell h6 {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.35;
    margin: 0;
}
.conv-name-cell .date { font-size: .72rem; opacity: .9; }

.bg-green {
    background-color: var(--ugel-green-light);
    color: #fff;
}

.bg-blue {
    background-color: var(--ugel-primary);
    color: #fff;
}

.bg-cyan {
    background-color: var(--ugel-info);
    color: #fff;
}

.bg-yellow {
    background-color: var(--ugel-yellow-light);
    color: #555;
}

.conv-name-cell.red {
    background-color: var(--ugel-red);
}

.conv-name-cell h6 {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: .5rem;
    line-height: 1.35;
}

.conv-name-cell .date {
    font-size: .75rem;
    opacity: .9;
}

.conv-name-cell .date i {
    margin-right: 4px;
}

/* Other cells */
.conv-cell {
    padding: 1rem .85rem;
    border-left: 1px solid #f0f0f0;
    font-size: .8rem;
}

/* ── Status badges ── */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .25rem .65rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 600;
    margin-bottom: .5rem;
    white-space: nowrap;
}

.badge-pendiente {
    background: var(--yellow-light);
    color: #fff;
}

.badge-finalizado {
    background: var(--green-light);
    color: #fff;
}

.badge-evaluacion {
    background: var(--blue);
    color: #fff;
}

.badge-progreso {
    background: var(--info);
    color: #fff;
}

/* ── Document links ── */
.doc-link {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #333;
    text-decoration: none;
    font-size: .80rem;
    padding: .18rem 0;
    line-height: 1.35;
    transition: color .15s;
}

.doc-link:hover {
    color: var(--green);
}

.doc-link .fa-file-pdf {
    color: #e53935;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Name-cell status badge ── */
.name-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.name-badge.pendiente {
    background: rgba(255, 255, 255, .25);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .5);
}

.name-badge.finalizado {
    background: rgba(255, 255, 255, .25);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .5);
}

/* ── Empty state ── */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
}

/* ════════════════════════════════════════
           DESKTOP (≥ 992px): TABLA GRID
        ════════════════════════════════════════ */
@media (min-width: 992px) {

    .view-mobile {
        display: none !important;
    }

    /* Header */
    .conv-table-header {
        display: grid;
        background: #fff;
        border-bottom: 2px solid var(--border);
        padding: .6rem 0;
        border-radius: 6px 6px 0 0;
        margin-bottom: 0;
    }

    .col-head {
        color: var(--green);
        font-weight: 700;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .5px;
        padding: 0 .9rem;
    }

    /* Fila */
    .conv-row-desktop {
        display: grid;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 6px;
        margin-bottom: .7rem;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
        transition: box-shadow .2s;
    }

    .conv-row-desktop:hover {
        box-shadow: 0 4px 14px rgba(0, 0, 0, .11);
    }

    /* Celda nombre (izquierda coloreada) */
    .conv-name-cell {
        padding: 1.1rem .9rem;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: .5rem;
    }

    .conv-name-cell.green {
        background: var(--green-light);
    }

    .conv-name-cell.red {
        background: var(--red);
    }

    .conv-name-cell.yellow {
        background: var(--yellow);
    }

    .conv-name-cell.blue {
        background: var(--blue);
    }

    .conv-name-cell h6 {
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1.35;
        margin: 0;
    }

    .conv-name-cell .date {
        font-size: .72rem;
        opacity: .9;
    }

    /* Celdas de fase */
    .conv-cell {
        padding: .9rem .85rem;
        border-left: 1px solid #f0f0f0;
        font-size: .76rem;
    }
}

/* ════════════════════════════════════════
           TABLET (576px – 991px): SCROLL HORIZONTAL
        ════════════════════════════════════════ */
@media (min-width: 576px) and (max-width: 991px) {

    .view-mobile {
        display: none !important;
    }

    /* Envoltorio con scroll */
    .table-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 6px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
    }

    /* Ancho mínimo para que el contenido no se aplaste */
    .table-scroll-inner {
        min-width: 700px;
    }

    .conv-table-header {
        display: grid;
        background: #fff;
        border-bottom: 2px solid var(--border);
        padding: .55rem 0;
    }

    .col-head {
        color: var(--green);
        font-weight: 700;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .4px;
        padding: 0 .8rem;
    }

    .conv-row-desktop {
        display: grid;
        background: #fff;
        border-bottom: 1px solid var(--border);
        margin-bottom: 0;
    }

    .conv-row-desktop:last-child {
        border-bottom: none;
    }

    .conv-name-cell {
        padding: 1rem .8rem;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: .4rem;
    }

    .conv-name-cell.green {
        background: var(--green-light);
    }

    .conv-name-cell.red {
        background: var(--red);
    }

    .conv-name-cell.yellow {
        background: var(--yellow);
    }

    .conv-name-cell.blue {
        background: var(--blue);
    }

    .conv-name-cell h6 {
        font-size: .74rem;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1.3;
        margin: 0;
    }

    .conv-name-cell .date {
        font-size: .68rem;
        opacity: .9;
    }

    .conv-cell {
        padding: .8rem .75rem;
        border-left: 1px solid #f0f0f0;
        font-size: .73rem;
    }

    /* Indicador de scroll */
    .scroll-hint {
        text-align: center;
        font-size: .72rem;
        color: #888;
        padding: .3rem 0 .1rem;
    }
}

/* ════════════════════════════════════════
           MÓVIL (< 576px): TARJETAS + ACORDEÓN
        ════════════════════════════════════════ */
@media (max-width: 575px) {

    .view-desktop {
        display: none !important;
    }

    .scroll-hint {
        display: none !important;
    }

    /* Tarjeta de convocatoria */
    .conv-card {
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
        margin-bottom: 1rem;
    }

    /* Cabecera coloreada */
    .conv-card-header {
        padding: 1rem;
        color: #fff;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .5rem;
    }

    .conv-card-header.finalizado {
        background: var(--green-light);
    }

    .conv-card-header.progreso {
        background: var(--info);
    }

    .conv-card-header.pendiente {
        background: var(--yellow-light);
    }

    .conv-card-header.evaluacion {
        background: var(--blue);
    }

    .conv-card-header h6 {
        font-size: .82rem;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1.4;
        margin: 0 0 .35rem;
    }

    .conv-card-header .date {
        font-size: .73rem;
        opacity: .88;
    }

    /* Acordeón de fases */
    .fase-accordion .accordion-button {
        font-size: .78rem;
        font-weight: 600;
        color: var(--green);
        background: #f9faf9;
        padding: .65rem 1rem;
        box-shadow: none;
    }

    .fase-accordion .accordion-button:not(.collapsed) {
        color: #264728;
        background:#e0e0e0;
    }

    .fase-accordion .accordion-button::after {
        filter: none;
    }

    .fase-accordion .accordion-button:not(.collapsed)::after {
        filter: brightness(0) invert(1);
    }

    .fase-accordion .accordion-body {
        padding: .8rem 1rem;
        font-size: .78rem;
    }

    .fase-accordion .accordion-item {
        border: none;
        border-top: 1px solid var(--border);
    }

    .page-title {
        font-size: 1.5rem;
    }
}