/* ============================================================
   GDS Courier - panel interno
   Capa de diseño sobre Bootstrap 5: densidad compacta tipo
   consola de administración, bordes finos, sombras sutiles.
   (Versión anterior en private/docs/design_backup_2026-07-10/)
   ============================================================ */

:root {
    --gds-primary: #C8102E;
    --gds-secondary: #212529;
    --gds-sidebar-width: 232px;

    /* Tokens de diseño */
    --gds-bg: #eef0f4;
    --gds-surface: #ffffff;
    --gds-border: #e4e7ec;
    --gds-text: #1f2328;
    --gds-text-soft: #344054;
    --gds-text-muted: #667085;
    --gds-radius: 0.5rem;
    --gds-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --gds-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.07);
}

/* ------------------------------------------------ Base */
.gds-body {
    background-color: var(--gds-bg);
    color: var(--gds-text);
    font-size: 0.875rem;               /* 14px: densidad de panel de administración */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.gds-auth-body {
    background-color: var(--gds-bg);
    padding: 1rem;
}

/* Jerarquía tipográfica más contenida */
.gds-body main h1,
.gds-body main .h4 {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gds-text);
}

/* Cabeceras de sección del dashboard (h2.h6 uppercase) */
.gds-body main h2.h6.text-uppercase {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    color: var(--gds-text-muted) !important;
    margin-bottom: 0.6rem;
}

/* ------------------------------------------------ Sidebar */
.gds-sidebar {
    width: var(--gds-sidebar-width);
    min-height: 100vh;
    background-color: var(--gds-secondary);
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
    font-size: 0.84rem;
}

.gds-brand {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gds-brand .fs-5 {
    font-size: 1rem !important;
    letter-spacing: -0.01em;
}

.gds-brand .fs-4 {
    font-size: 1.15rem !important;
}

/* Etiquetas de grupo del menú */
.gds-nav-label {
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.38);
    padding: 0.9rem 0.9rem 0.3rem;
    list-style: none;
}

.gds-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.72);
    border-radius: 0.4rem;
    margin-bottom: 1px;
    padding: 0.42rem 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.gds-sidebar .nav-link i {
    width: 1.25rem;
    display: inline-block;
    text-align: center;
    opacity: 0.85;
}

.gds-sidebar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.07);
}

.gds-sidebar .nav-link.active {
    color: #fff;
    background-color: var(--gds-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 991.98px) {
    .gds-sidebar {
        position: fixed;
        z-index: 1045;
        left: calc(-1 * var(--gds-sidebar-width));
        transition: left 0.2s ease;
        box-shadow: var(--gds-shadow-md);
    }
    .gds-sidebar.show {
        left: 0;
    }
}

/* ------------------------------------------------ Topbar */
.gds-topbar {
    min-height: 52px;
    border-bottom: 1px solid var(--gds-border) !important;
}

.gds-topbar .btn-light {
    background: transparent;
    border-color: transparent;
    color: var(--gds-text-muted);
}

.gds-topbar .btn-light:hover {
    background: var(--gds-bg);
    color: var(--gds-text);
}

.gds-page-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gds-text-muted);
}

/* ------------------------------------------------ Cards */
.card {
    border: 1px solid var(--gds-border);
    border-radius: var(--gds-radius);
    box-shadow: var(--gds-shadow-sm);
    background-color: var(--gds-surface);
}

.card-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gds-text-soft);
    background-color: var(--gds-surface);
    border-bottom: 1px solid var(--gds-border);
    padding: 0.6rem 1rem;
}

.card-body {
    padding: 1rem;
}

/* ------------------------------------------------ Tablas */
.table {
    font-size: 0.84rem;
    color: var(--gds-text);
}

.table > :not(caption) > * > * {
    vertical-align: middle;
    padding: 0.5rem 0.75rem;
}

.table thead th {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gds-text-muted);
    background-color: #f9fafb;
    border-bottom: 1px solid var(--gds-border);
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
    background-color: #f9fafb;
    --bs-table-bg-state: #f9fafb;
}

/* ------------------------------------------------ Botones */
.btn {
    font-size: 0.84rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 0.45rem;
}

.btn-sm {
    font-size: 0.78rem;
    padding: 0.28rem 0.6rem;
    border-radius: 0.4rem;
}

.btn-gds {
    background-color: var(--gds-primary);
    border-color: var(--gds-primary);
    color: #fff;
}

.btn-gds:hover, .btn-gds:focus {
    background-color: color-mix(in srgb, var(--gds-primary) 85%, black);
    border-color: color-mix(in srgb, var(--gds-primary) 85%, black);
    color: #fff;
}

.text-gds {
    color: var(--gds-primary);
}

/* ------------------------------------------------ Formularios */
.form-control, .form-select {
    font-size: 0.855rem;
    padding: 0.42rem 0.7rem;
    border-radius: 0.45rem;
    border-color: #d0d5dd;
}

.form-control:focus, .form-select:focus {
    border-color: color-mix(in srgb, var(--gds-primary) 45%, #d0d5dd);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gds-primary) 12%, transparent);
}

.form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gds-text-soft);
    margin-bottom: 0.3rem;
}

.form-text {
    font-size: 0.73rem;
    color: var(--gds-text-muted);
}

/* ------------------------------------------------ Badges, alertas, paginación */
.badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.32em 0.55em;
    border-radius: 0.35rem;
    letter-spacing: 0.01em;
}

.alert {
    font-size: 0.85rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--gds-radius);
}

.pagination {
    font-size: 0.82rem;
}

.dropdown-menu {
    font-size: 0.84rem;
    border-color: var(--gds-border);
    box-shadow: var(--gds-shadow-md);
    border-radius: var(--gds-radius);
}

/* ------------------------------------------------ Bloques de KPIs del dashboard */
/* Cada bloque (Servicios, Documentación...) es una caja cerrada: borde completo,
   fondo interior tintado, cabecera marcada con icono en chip sólido y sombra.
   Marco sobrio en un único gris pizarra para todos: el color queda reservado
   a los datos (los valores de los KPIs), no al cromo. */
.gds-kpi-section {
    --gds-section-accent: #475569;  /* gris pizarra, uniforme en todos los bloques */
    border: 1px solid color-mix(in srgb, var(--gds-section-accent) 35%, #fff);
    border-top: 4px solid var(--gds-section-accent);
    border-radius: 0.65rem;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--gds-section-accent) 4%, #fff);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--gds-section-accent) 12%, transparent);
}

.gds-kpi-section > .card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.65rem 1rem;
    background-color: color-mix(in srgb, var(--gds-section-accent) 12%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--gds-section-accent) 25%, #fff);
    color: color-mix(in srgb, var(--gds-section-accent) 75%, #000);
}

/* Icono del bloque en chip sólido de su color */
.gds-kpi-section > .card-header > i {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 0.45rem;
    background-color: var(--gds-section-accent);
    color: #fff;
    font-size: 0.85rem;
}

.gds-kpi-section > .card-body {
    padding: 0.8rem;
}

.gds-section-link {
    margin-left: auto;
    font-size: 0.74rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--gds-section-accent) 70%, #000);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.gds-section-link:hover {
    color: var(--gds-section-accent);
    text-decoration: underline;
}

.gds-section-link i {
    font-size: 0.7rem;
}

.kpi-card {
    border-radius: var(--gds-radius);
    background-color: #fff;
    border: 1px solid color-mix(in srgb, var(--gds-section-accent, var(--gds-primary)) 22%, var(--gds-border));
    box-shadow: var(--gds-shadow-sm);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.kpi-card:hover {
    border-color: color-mix(in srgb, var(--gds-section-accent, var(--gds-primary)) 60%, #fff);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--gds-section-accent, var(--gds-primary)) 18%, transparent);
    transform: translateY(-1px);
}

.kpi-card .card-body {
    padding: 0.75rem 0.9rem;
}

.kpi-value {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.kpi-label {
    font-size: 0.67rem;
    color: var(--gds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

/* ------------------------------------------------ Ayuda: guía y flujos */
.help-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--gds-primary) 8%, #fff), #fff);
    border: 1px solid var(--gds-border); border-radius: var(--gds-radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.help-card { height: 100%; }
.help-card .card-body { padding: 0.9rem 1rem; }
.help-ico { width: 38px; height: 38px; border-radius: 0.5rem; display: grid; place-items: center;
    background: color-mix(in srgb, var(--gds-primary) 12%, #fff); color: var(--gds-primary); font-size: 1.1rem; flex-shrink: 0; }
.help-card h3 { font-size: 0.95rem; font-weight: 600; margin: 0; color: var(--gds-text); }
.help-card .who { font-size: 0.7rem; color: var(--gds-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.help-card ul { margin: 0.5rem 0 0; padding-left: 1.05rem; font-size: 0.82rem; color: var(--gds-text-soft); }
.help-card ul li { margin-bottom: 0.15rem; }

/* Flujos: cajas y flechas */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0.4rem 0 0.2rem; }
.flow-step { flex: 1 1 0; min-width: 120px; background: #fff; border: 1px solid var(--gds-border);
    border-top: 3px solid var(--gds-primary); border-radius: 0.5rem; padding: 0.6rem 0.7rem; }
.flow-step .n { font-size: 0.65rem; font-weight: 700; color: var(--gds-primary); text-transform: uppercase; letter-spacing: 0.05em; }
.flow-step .t { font-size: 0.86rem; font-weight: 600; color: var(--gds-text); line-height: 1.2; margin-top: 0.1rem; }
.flow-step .d { font-size: 0.74rem; color: var(--gds-text-muted); margin-top: 0.15rem; line-height: 1.25; }
.flow-step.is-green { border-top-color: #12805c; }
.flow-step.is-amber { border-top-color: #d9891f; }
.flow-step.is-grey { border-top-color: #98a2b3; }
.flow-arrow { display: flex; align-items: center; color: var(--gds-primary); font-size: 1.1rem; padding: 0 0.35rem; }
@media (max-width: 575.98px) { .flow-arrow { transform: rotate(90deg); padding: 0.2rem 0; width: 100%; justify-content: center; } .flow-step { flex-basis: 100%; } }

.wf-block { border: 1px solid var(--gds-border); border-radius: var(--gds-radius); background: #fff; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.wf-block > h2 { font-size: 1rem; font-weight: 600; color: var(--gds-text); margin: 0 0 0.15rem; display: flex; align-items: center; gap: 0.5rem; }
.wf-block > .lead { font-size: 0.85rem; color: var(--gds-text-muted); margin-bottom: 0.7rem; }
.wf-block .val { font-size: 0.8rem; color: var(--gds-text-soft); background: #f9fafb; border: 1px solid var(--gds-border);
    border-radius: 0.5rem; padding: 0.55rem 0.75rem; margin-top: 0.7rem; }
.wf-block .val b { color: var(--gds-primary); }

/* ------------------------------------------------ Ayuda: FAQs / cómo se hace */
.faq-search { max-width: 460px; }
.faq-cat { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--gds-text-muted); margin: 1.1rem 0 0.5rem; }
.faq-item { border: 1px solid var(--gds-border); border-radius: var(--gds-radius); background: #fff;
    margin-bottom: 0.5rem; overflow: hidden; }
.faq-item > summary { cursor: pointer; list-style: none; padding: 0.7rem 0.9rem; font-weight: 600;
    font-size: 0.9rem; color: var(--gds-text); display: flex; align-items: center; gap: 0.6rem; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary .chev { margin-left: auto; color: var(--gds-text-muted); transition: transform 0.15s ease; }
.faq-item[open] > summary { color: var(--gds-primary); border-bottom: 1px solid var(--gds-border); }
.faq-item[open] > summary .chev { transform: rotate(180deg); }
.faq-item .faq-body { padding: 0.6rem 0.95rem 0.85rem; }
.faq-item .faq-body ol { margin: 0; padding-left: 1.15rem; font-size: 0.85rem; color: var(--gds-text-soft); }
.faq-item .faq-body ol li { margin-bottom: 0.28rem; }
.faq-item .faq-body ol li b { color: var(--gds-text); }
.faq-item .faq-tip { font-size: 0.78rem; color: var(--gds-text-muted); background: #f9fafb;
    border-left: 3px solid var(--gds-primary); border-radius: 0.25rem; padding: 0.45rem 0.6rem; margin-top: 0.55rem; }
.faq-empty { display: none; color: var(--gds-text-muted); padding: 1.5rem; text-align: center; }

/* ------------------------------------------------ Menú lateral por grupos plegables */
.gds-nav { display: flex; flex-direction: column; }
.gds-nav-group { margin: 0; }
.gds-nav-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.42); padding: 0.7rem 0.9rem 0.35rem; user-select: none; }
.gds-nav-group > summary::-webkit-details-marker { display: none; }
.gds-nav-group > summary .gg-ico { font-size: 0.82rem; opacity: 0.75; width: auto; }
.gds-nav-group > summary .gg-chev { margin-left: auto; font-size: 0.68rem; transition: transform 0.15s ease; opacity: 0.6; }
.gds-nav-group[open] > summary { color: rgba(255, 255, 255, 0.62); }
.gds-nav-group[open] > summary .gg-chev { transform: rotate(180deg); }
.gds-nav-group > summary:hover { color: #fff; }
.gds-nav-group > ul { list-style: none; padding: 0; margin: 0 0 0.25rem; }
.gds-nav-group.has-active > summary { color: #fff; }

/* Control operativo móvil */
.op-control{max-width:920px;margin:0 auto}.op-control-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}.op-control-head h1{font-size:1.35rem;margin:0}.op-control-head p{font-size:.8rem;color:#667085;margin:0}.op-control-kicker{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:#667085}.op-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin-bottom:.65rem}.op-summary a{display:flex;flex-direction:column;align-items:center;padding:.55rem .25rem;border:1px solid #e1e5eb;border-radius:11px;background:#fff;color:#344054;text-decoration:none}.op-summary strong{font-size:1.25rem;line-height:1}.op-summary span{font-size:.65rem;margin-top:.2rem}.op-tabs{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.55rem;scrollbar-width:none}.op-tabs a{display:flex;align-items:center;gap:.3rem;white-space:nowrap;padding:.42rem .65rem;border-radius:20px;background:#e9edf2;color:#475467;font-size:.72rem;font-weight:700;text-decoration:none}.op-tabs a.active{background:var(--gds-primary);color:#fff}.op-list{display:grid;gap:.65rem}.op-card{overflow:hidden;border:1px solid #dde2e9;border-left:4px solid #98a2b3;border-radius:13px;background:#fff;box-shadow:0 2px 6px rgba(16,24,40,.05)}.op-card.op-priority-3{border-left-color:#d92d20}.op-card.op-priority-2{border-left-color:#e8a317}.op-card.is-acknowledged{opacity:.72}.op-card-main{display:block;padding:.72rem;color:inherit;text-decoration:none}.op-card-top{display:flex;justify-content:space-between;gap:.6rem}.op-card-top h2{font-size:.95rem;margin:.08rem 0}.op-card-top p{font-size:.7rem;color:#667085;margin:0}.op-route{font-size:.62rem;font-weight:800;text-transform:uppercase;color:var(--gds-primary)}.op-driver{display:flex;align-items:center;gap:.35rem;margin-top:.5rem;font-size:.75rem}.op-driver .op-phone{margin-left:auto;color:#1769aa}.op-next{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.55rem;padding:.5rem .55rem;border-radius:9px;background:#f5f7fa}.op-next span{display:flex;flex-direction:column;min-width:0}.op-next small{font-size:.6rem;color:#667085}.op-next strong{font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.op-next time{font-size:.75rem;font-weight:800;white-space:nowrap}.op-progress{height:5px;margin-top:.55rem;border-radius:5px;background:#e4e7ec;overflow:hidden}.op-progress span{display:block;height:100%;background:#12b76a}.op-meta{display:flex;justify-content:space-between;margin-top:.25rem;font-size:.62rem;color:#667085}.op-alerts{display:grid;gap:.3rem;margin-top:.55rem}.op-alert{display:flex;align-items:center;gap:.35rem;padding:.38rem .45rem;border-radius:8px;font-size:.7rem;font-weight:700}.op-alert-danger{background:#fff0ef;color:#b42318}.op-alert-warning{background:#fff8e8;color:#8a6100}.op-alert-success{background:#ecfdf3;color:#067647}.op-ack{margin-top:.45rem;font-size:.65rem;color:#067647}.op-actions{display:flex;justify-content:flex-end;gap:.4rem;padding:.5rem .65rem;border-top:1px solid #edf0f3;background:#fafbfc}.op-actions form{margin:0}.op-actions .btn{display:inline-flex;align-items:center;gap:.3rem;min-height:38px;font-size:.7rem;font-weight:700}.op-empty{display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;border:1px dashed #cfd5dd;border-radius:13px;color:#667085;text-align:center}.op-empty i{font-size:2rem;color:#12b76a}.op-empty strong{margin-top:.4rem;color:#344054}.op-empty span{font-size:.75rem}
@media(max-width:767.98px){.op-control{margin:-.25rem}.op-summary{position:sticky;top:0;z-index:5;padding:.35rem 0;background:#f5f6f8}.op-summary a{padding:.45rem .15rem}.op-actions .btn{padding:.4rem .55rem}.op-card-main{padding:.65rem}.op-control-head h1{font-size:1.2rem}}
@media(max-width:380px){.op-summary span{font-size:.58rem}.op-actions{justify-content:stretch}.op-actions .btn{flex:1;justify-content:center}.op-actions form{display:flex;flex:1}.op-actions form .btn{width:100%}}

/* ============================================================
   UX de listados de gran volumen (2026-08)
   ============================================================ */
.gds-filter-card { border-color: #d8dde6; box-shadow: 0 2px 7px rgba(16,24,40,.045); }
.gds-filter-card .input-group-text { background: #f8fafc; border-color: #d0d5dd; color: #667085; }
.gds-filter-card .btn { min-height: 38px; }
.gds-advanced-filters { border-top: 1px solid var(--gds-border); margin-top: .25rem; padding-top: .55rem; }
.gds-advanced-filters > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; color: #475467; font-size: .78rem; font-weight: 700; }
.gds-advanced-filters > summary::-webkit-details-marker { display: none; }
.gds-advanced-filters > summary::after { content: '\F282'; font-family: bootstrap-icons; margin-left: .35rem; transition: transform .15s ease; }
.gds-advanced-filters[open] > summary::after { transform: rotate(180deg); }
.gds-list-card { overflow: hidden; }
.gds-list-head { min-height: 42px; padding: .6rem .8rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: #fff; border-bottom: 1px solid var(--gds-border); color: #475467; font-size: .77rem; }
.gds-list-head strong { color: #101828; }
.gds-list-card .table-responsive { max-height: calc(100vh - 265px); min-height: 120px; }
.gds-list-card .table thead { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--gds-border); }
.gds-list-card .table tbody tr { transition: background-color .1s ease; }
.gds-list-card .table tbody td:first-child { padding-left: .9rem; }
.gds-list-card .table thead th:first-child { padding-left: .9rem; }
.gds-list-card .btn-sm { min-width: 32px; min-height: 30px; display: inline-grid; place-items: center; }
.gds-list-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem .15rem 0; color: #667085; font-size: .76rem; }
.gds-per-page { display: flex; align-items: center; gap: .4rem; }
.gds-per-page label { white-space: nowrap; }
.gds-per-page .form-select { width: 70px; }
.pagination .page-link { color: #475467; border-color: #d8dde6; min-width: 31px; text-align: center; }
.pagination .active > .page-link { background: var(--gds-primary); border-color: var(--gds-primary); color: #fff; }

@media (max-width: 767.98px) {
    .gds-body { font-size: .92rem; }
    .gds-body main { padding: .75rem !important; }
    .gds-topbar { padding-left: .75rem !important; padding-right: .75rem !important; }
    .gds-body main h1, .gds-body main .h4 { font-size: 1.25rem; }
    .gds-filter-card .card-body, .gds-filter-card.card-body { padding: .75rem; }
    .gds-filter-card .form-control, .gds-filter-card .form-select { min-height: 44px; font-size: 1rem; }
    .gds-filter-card .btn { min-height: 44px; }
    .gds-list-head { align-items: flex-start; flex-direction: column; gap: .15rem; }
    .gds-list-card .table-responsive { max-height: none; }
    .gds-list-card .table { min-width: 760px; }
    .gds-list-card .table > :not(caption) > * > * { padding-top: .65rem; padding-bottom: .65rem; }
    .gds-list-card .btn-sm { min-width: 40px; min-height: 40px; }
    .gds-list-footer { align-items: flex-start; flex-direction: column; }
    .gds-list-footer > div:last-child { width: 100%; justify-content: space-between; }
    .pagination .page-link { min-width: 38px; min-height: 38px; display: grid; place-items: center; }
}

/* Configuración de implantación por fases */
.phase-config-card { border-left: 4px solid #98a2b3; transition: border-color .15s ease, box-shadow .15s ease; }
.phase-config-card.is-active { border-left-color: #12b76a; box-shadow: 0 3px 10px rgba(16,24,40,.07); }
.phase-config-card .card-header { padding: .85rem 1rem; }
.phase-number { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; background: #344054; color: #fff; font-size: 1rem; font-weight: 800; }
.phase-config-card.is-active .phase-number { background: #087a55; }
.phase-config-card .form-switch .form-check-input { width: 2.7rem; height: 1.4rem; cursor: pointer; }
.phase-role-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; }
.phase-role-option { display: flex; align-items: flex-start; gap: .55rem; min-height: 58px; padding: .65rem; border: 1px solid var(--gds-border); border-radius: .55rem; background: #fff; cursor: pointer; }
.phase-role-option:has(input:checked) { border-color: color-mix(in srgb,var(--gds-primary) 42%,#d0d5dd); background: color-mix(in srgb,var(--gds-primary) 4%,#fff); }
.phase-role-option.is-superadmin { background: #f8fafc; cursor: default; }
.phase-role-option input { margin-top: .15rem; }
.phase-role-option span { display: flex; flex-direction: column; min-width: 0; }
.phase-role-option strong { color: #344054; font-size: .79rem; }
.phase-role-option small { color: #667085; font-size: .68rem; }
.sticky-save-bar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .8rem 1rem; border: 1px solid #d0d5dd; border-radius: .65rem; background: rgba(255,255,255,.96); box-shadow: 0 -3px 15px rgba(16,24,40,.08); backdrop-filter: blur(8px); color: #475467; font-size: .76rem; }
@media(max-width:991.98px){.phase-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){.phase-role-grid{grid-template-columns:1fr}.phase-config-card .card-header{align-items:flex-start!important;flex-wrap:wrap}.phase-config-card .form-switch{margin-left:3.3rem!important}.sticky-save-bar{align-items:stretch;flex-direction:column}.sticky-save-bar .btn{min-height:44px}}