:root{
  --ce-verde: #6ab023;
  --ce-verde-oscuro: #4d8a17;
  --ce-navy: #1b3a5c;
  --ce-navy-suave: #24476b;
  --ce-gris-fondo: #f2f4f7;
  --ce-borde: #e1e5ee;
  --ce-texto: #1c2430;
  --ce-texto-suave: #6b7280;
}

body{ background: var(--ce-gris-fondo); color: var(--ce-texto); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; overflow-x: hidden; }

/* ---------- Estructura general ---------- */
.ce-shell{ display:flex; min-height:100vh; }
.ce-sidebar{
  width:260px; flex-shrink:0;
  background: linear-gradient(180deg, var(--ce-navy), #0f2438);
  color:#fff; min-height:100vh; position:sticky; top:0; align-self:flex-start;
  z-index: 1045;
}
.ce-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.ce-brand{ padding:18px 18px 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.12); }
.ce-brand-icono{ font-size:1.9rem; color: var(--ce-verde); flex-shrink:0; }
.ce-brand-nombre{ font-weight:800; font-size:1.05rem; color:#fff; line-height:1.15; }
.ce-brand-ecf{ color: var(--ce-verde); }
.ce-brand-sub{ font-size:.68rem; color:#c9c9c9; }

.ce-nav{ padding:12px 10px; }
.ce-nav .nav-link{ color:#dfe6ee; padding:12px 14px; border-radius:8px; margin-bottom:2px; display:flex; align-items:center; gap:10px; font-size:.92rem; }
.ce-nav .nav-link:hover{ background: rgba(255,255,255,.08); color:#fff; }
.ce-nav .nav-link.active{ background: var(--ce-verde); color:#fff; font-weight:600; }

.ce-topbar{ background:#fff; border-bottom:1px solid var(--ce-borde); padding:12px 24px; display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:0; z-index:1030; }
.ce-topbar-titulo{ font-weight:700; color: var(--ce-navy); font-size:1.1rem; }
.ce-content{ padding:22px 24px 40px; min-width:0; }
.ce-btn-menu{ padding:.375rem .6rem; }
.min-width-0{ min-width:0; }

/* ---------- Menu lateral colapsable (celular y tablet: pantallas < 992px) ---------- */
.ce-sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(10,20,30,.5); z-index:1040;
}
@media (max-width: 991.98px){
  .ce-sidebar{
    position: fixed; top:0; left:0; height:100vh; min-height:100vh;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .ce-sidebar.ce-sidebar-abierta{ transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.25); }
  .ce-sidebar-overlay.ce-sidebar-overlay-visible{ display:block; }
  .ce-topbar{ padding:10px 14px; }
  .ce-content{ padding:16px 14px 32px; }
}
@media (min-width: 992px){
  .ce-btn-menu, #ceCerrarMenu{ display:none !important; }
}

/* En celulares chicos, un poco menos de padding y textos ligeramente mas compactos */
@media (max-width: 575.98px){
  .ce-topbar-titulo{ font-size:1rem; }
  .card-body, .card .table-responsive + .ce-paginacion{ padding-left:12px; padding-right:12px; }
  .kpi-card h2{ font-size:1.6rem; }
  .btn{ touch-action: manipulation; }
}

/* ---------- Componentes ---------- */
.card{ border:1px solid var(--ce-borde); border-radius:12px; }
.btn-ce-primary{ background: var(--ce-verde); border-color: var(--ce-verde); color:#fff; }
.btn-ce-primary:hover{ background: var(--ce-verde-oscuro); border-color: var(--ce-verde-oscuro); color:#fff; }

.kpi-card{ border-radius:14px; padding:18px 20px; color:#fff; }
.kpi-navy{ background: linear-gradient(135deg, var(--ce-navy-suave), var(--ce-navy)); }
.kpi-verde{ background: linear-gradient(135deg, var(--ce-verde), var(--ce-verde-oscuro)); }
.kpi-gris{ background: linear-gradient(135deg, #7c8797, #56606e); }
.kpi-rojo{ background: linear-gradient(135deg, #e2645a, #b7362c); }

/* ---------- Rastreador de pasos (Postulacion / Details) ---------- */
.ce-paso{
  display:flex; gap:14px; padding:14px 6px; border-left:3px solid var(--ce-borde); padding-left:18px; position:relative;
  flex-wrap:wrap;
}
.ce-paso > div:last-child{ min-width:0; flex:1 1 220px; }
.ce-paso::before{
  content:""; position:absolute; left:-8px; top:20px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--ce-borde);
}
.ce-paso-completado{ border-left-color: var(--ce-verde); }
.ce-paso-completado::before{ border-color: var(--ce-verde); background: var(--ce-verde); }
.ce-paso-en-proceso{ border-left-color: var(--ce-navy); }
.ce-paso-en-proceso::before{ border-color: var(--ce-navy); background:#fff; }
.ce-paso-rechazado{ border-left-color:#d9534f; }
.ce-paso-rechazado::before{ border-color:#d9534f; background:#d9534f; }
.ce-paso-pendiente{ opacity:.55; }

.ce-paso-numero{ font-weight:800; color: var(--ce-texto-suave); min-width:28px; }
.ce-paso-nombre{ font-weight:700; color: var(--ce-navy); }
.ce-paso-desc{ font-size:.85rem; color: var(--ce-texto-suave); margin-top:2px; }
.ce-paso-badge{ font-size:.7rem; padding:3px 10px; border-radius:20px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.ce-badge-pendiente{ background:#eceff3; color:#6b7280; }
.ce-badge-en_proceso{ background:#e7edf6; color: var(--ce-navy); }
.ce-badge-completado{ background:#e6f4d9; color: var(--ce-verde-oscuro); }
.ce-badge-rechazado{ background:#fbe4e2; color:#b7362c; }
.ce-badge-aceptado{ background:#e6f4d9; color: var(--ce-verde-oscuro); }
.ce-badge-aceptado_condicional{ background:#fdf1d9; color:#96690e; }

/* ---------- Buscador rapido + paginacion + exportar (mismo patron reutilizable) ---------- */
.ce-paginacion{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 16px; border-top:1px solid var(--ce-borde); }

/* Etiqueta de las barras de progreso (Panel Principal / Reportes por Paso): se achica en
   vez de forzar un ancho fijo, para no desbordar la pantalla en un celular. */
.ce-etiqueta-progreso{ flex: 0 1 220px; min-width:90px; }
@media (max-width: 575.98px){
  .ce-etiqueta-progreso{ flex-basis: 120px; font-size:.78rem; }
}

@media print{
  .ce-sidebar, .ce-topbar, .no-print{ display:none !important; }
  .ce-main{ margin-left:0 !important; }
}