/* ===== Paleta y base ===== */
:root {
    --bg: #0b1020; /* fondo oscuro azulado */
    --card: #121935; /* tarjetas */
    --muted: #94a3b8; /* gris azulado */
    --line: #1e2a52; /* líneas/bordes */
    --text: #e6e8ef; /* texto principal */
    --primary: #6c8cff; /* indigo-azul */
    --accent: #22d3ee; /* cian */
    --success: #22c55e; /* verde */
    --danger: #ef4444; /* rojo */
    --warning: #f59e0b; /* ámbar */
}

html, body {
    background: radial-gradient(1200px 800px at 10% -10%, rgba(34,211,238,0.07), transparent 60%), radial-gradient(1000px 700px at 110% 10%, rgba(108,140,255,0.08), transparent 60%), var(--bg);
    color: var(--text);
}

/* ===== Contenedor “card” ===== */
.convenios-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015)), var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
}

/* ===== Header / Toolbar ===== */
.convenios-header {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(108,140,255,.18), rgba(108,140,255,.05)), linear-gradient(90deg, rgba(34,211,238,.15), transparent 50%);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(6px);
}

.convenios-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-weight: 800;
    letter-spacing: .2px;
}

    .convenios-title .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 12px var(--accent);
    }

/* Search */
.convenios-search {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #0d1430;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    min-width: 260px;
}

    .convenios-search input {
        background: transparent;
        border: 0;
        outline: 0;
        color: var(--text);
        width: 100%;
    }

    .convenios-search .hint {
        color: var(--muted);
        font-size: .85rem;
    }

/* ===== Tabla ===== */
.table-wrap {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden; /* quitamos scroll horizontal */
}

.convenios-table {
    width: 100%;
    table-layout: auto; /* ancho dinámico */
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92rem;
}

    .convenios-table thead th {
        position: sticky;
        top: 0;
        z-index: 4;
        background: linear-gradient(180deg, #0f1840, #0b1230);
        color: #cbd5e1;
        text-transform: uppercase;
        font-size: .75rem;
        letter-spacing: .08em;
        border-bottom: 1px solid var(--line);
        padding: 10px 12px;
        text-align: left;
    }

    .convenios-table tbody td {
        border-bottom: 1px dashed rgba(148,163,184,.18);
        padding: 10px 12px;
        color: #e8eaf3;
        vertical-align: middle;
        white-space: normal; /* permite saltos de línea */
        word-break: break-word; /* rompe texto largo */
        overflow: hidden;
    }

    .convenios-table tbody tr {
        transition: transform .08s ease, background .12s ease, box-shadow .12s ease;
    }

        .convenios-table tbody tr:nth-child(even) {
            background: rgba(255,255,255,0.02);
        }

        .convenios-table tbody tr:hover {
            background: rgba(108,140,255,0.08);
            box-shadow: inset 0 1px 0 rgba(108,140,255,.15), inset 0 -1px 0 rgba(108,140,255,.15);
        }

/* Código “destacado” */
.cell-code {
    font-weight: 800;
    color: var(--primary);
    text-shadow: 0 0 8px rgba(108,140,255,.35);
}

/* Link compacto */
.link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #0d1430;
    color: #bcd3ff;
    transition: all .12s ease;
}

    .link-btn:hover {
        border-color: var(--primary);
        color: white;
        transform: translateY(-1px);
    }

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
}

    .badge .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.badge-success {
    background: rgba(34,197,94,.15);
    color: var(--success);
    border: 1px solid rgba(34,197,94,.35);
}

.badge-danger {
    background: rgba(239,68,68,.15);
    color: var(--danger);
    border: 1px solid rgba(239,68,68,.35);
}

.badge-warn {
    background: rgba(245,158,11,.15);
    color: var(--warning);
    border: 1px solid rgba(245,158,11,.35);
}

.badge-neutral {
    background: rgba(148,163,184,.14);
    color: #cbd5e1;
    border: 1px solid rgba(148,163,184,.28);
}

/* Footer reducido */
.convenios-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: .85rem;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

/* Responsive tweaks */
@media (max-width: 992px) {
    .convenios-search {
        min-width: 180px;
    }

    .convenios-table {
        font-size: .88rem;
    }
}

/* ====== Modo claro ====== */
body.light {
    --bg: #f7f9fc;
    --card: #ffffff;
    --muted: #475569;
    --line: #d6d8de;
    --text: #1e293b;
    --primary: #2563eb;
    --accent: #0891b2;
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;
}

    body.light .convenios-card {
        box-shadow: 0 4px 16px rgba(0,0,0,.1);
    }

    body.light .convenios-header {
        background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(8,145,178,.05));
        border-bottom: 1px solid var(--line);
    }

    body.light .convenios-table thead th {
        background: #f1f5f9;
        color: #334155;
    }

    body.light .convenios-table tbody td {
        color: var(--text);
    }

    body.light .convenios-table tbody tr:nth-child(even) {
        background: rgba(0,0,0,0.02);
    }

    body.light .convenios-table tbody tr:hover {
        background: rgba(37,99,235,0.08);
    }

    /* Light mode: search box clara */
    body.light .convenios-search {
        background: #ffffff;
        border-color: var(--line);
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
    }

        body.light .convenios-search input {
            color: var(--text);
        }

            body.light .convenios-search input::placeholder {
                color: #64748b;
            }


/* ===== Grid de tarjetas ===== */
.cards-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg,rgba(255,255,255,.02),transparent);
}

.kpi {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
}

    .kpi .sub {
        font-size: .8rem;
        color: var(--muted);
        font-weight: 600;
    }

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 360px));
    gap: 14px;
    padding: 16px;
    justify-content: center;
    align-items: stretch;
}


.convenio-card {
    max-width: 360px;
    width: 100%;
}

@media (max-width: 420px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}

.convenio-card .bar {
    height: 6px;
    background: var(--primary);
}

.convenio-card .body {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.convenio-card .title {
    font-weight: 800;
    font-size: 1rem;
    color: var(--primary);
}

.convenio-card .meta {
    display: grid;
    grid-template-columns: .9fr .1fr;
    align-items: center;
}

    .convenio-card .meta small {
        color: var(--muted);
    }

.convenio-card .row {
    display: flex;
    gap: 8px;
    font-size: .9rem;
}

.convenio-card .label {
    width: 105px;
    color: var(--muted);
}

.convenio-card .value {
    flex: 1;
    color: var(--text);
    word-break: break-word;
}

.convenio-card .actions {
    padding: 10px 14px;
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--line);
    justify-content: space-between;
    align-items: center;
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .76rem;
    border: 1px solid transparent;
}

    .badge-pill.success {
        background: rgba(34,197,94,.15);
        color: #22c55e;
        border-color: rgba(34,197,94,.35);
    }

    .badge-pill.warn {
        background: rgba(245,158,11,.18);
        color: #d97706;
        border-color: rgba(245,158,11,.35);
    }

    .badge-pill.danger {
        background: rgba(239,68,68,.18);
        color: #dc2626;
        border-color: rgba(239,68,68,.35);
    }

    .badge-pill.neutral {
        background: rgba(148,163,184,.14);
        color: #cbd5e1;
        border-color: rgba(148,163,184,.28);
    }

body.light .kpi {
    background: #fff;
}

body.light .convenio-card {
    background: #fff;
}

/* ===== Selector de orden ===== */
.order-select {
    background: #0d1430;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 28px 6px 10px;
    font-size: 0.9rem;
    font-weight: 600;
    appearance: none; /* ocultar flecha nativa */
    background-image: url("data:image/svg+xml,%3Csvg fill='%23bcd3ff' height='16' width='16' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .order-select:hover {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(108,140,255,0.25);
    }

    .order-select:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(34,211,238,0.3);
    }

body.light .order-select {
    background: #ffffff;
    color: #1e293b;
    border: 1px solid var(--line);
    background-image: url("data:image/svg+xml,%3Csvg fill='%23222' height='16' width='16' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

    body.light .order-select:hover {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37,99,235,0.25);
    }




/* ====== Formulario (Edit/Create) ====== */
.form-wrap {
    padding: 16px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 12px 16px;
}

@media (min-width: 992px) {
    .form-grid {
        grid-template-columns: repeat(4, minmax(220px,1fr));
    }
}

.form-label {
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 6px;
}

.form-control, .form-select {
    background: #0d1430;
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 10px;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(34,211,238,.25);
    }

body.light .form-control,
body.light .form-select {
    background: #ffffff;
    color: #1e293b;
    border-color: var(--line);
}

.form-actions {
    grid-column: 1 / -1; /* fila completa */
    display: flex;
    gap: .5rem;
    margin-top: 6px;
}

/* Combina mejor con el card */
body.light .convenios-card {
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ==== Botón Retirar mejorado ==== */
.btn-retirar {
    background: var(--danger);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: all .2s ease;
}

    .btn-retirar:hover {
        background: #b91c1c;
        transform: translateY(-1px);
        box-shadow: 0 0 10px rgba(239,68,68,0.4);
    }